From f06508b412f90d50101862f5961375a9221d79c1 Mon Sep 17 00:00:00 2001
From: Inga Kirschnick <inga.kirschnick@uni-bielefeld.de>
Date: Thu, 9 Feb 2023 11:21:03 +0100
Subject: [PATCH] New Public Corpus Page

---
 app/corpora/routes.py                         |  3 +
 .../js/ResourceLists/PublicCorpusFileList.js  | 15 ++++
 app/templates/_scripts.html.j2                |  1 +
 app/templates/corpora/corpus.html.j2          |  3 +-
 app/templates/corpora/public_corpus.html.j2   | 77 ++++++++++++-------
 5 files changed, 69 insertions(+), 30 deletions(-)
 create mode 100644 app/static/js/ResourceLists/PublicCorpusFileList.js

diff --git a/app/corpora/routes.py b/app/corpora/routes.py
index 63af1b07..d89b7567 100644
--- a/app/corpora/routes.py
+++ b/app/corpora/routes.py
@@ -298,6 +298,7 @@ def follow_corpus(corpus_id):
     if not user.is_following_corpus(corpus):
         user.follow_corpus(corpus)
     db.session.commit()
+    # flash('Hallo Inga Kirschnick')
     return {}, 202
 
 @bp.route('/<hashid:corpus_id>/unfollow', methods=['GET', 'POST'])
@@ -336,8 +337,10 @@ def remove_permission(corpus_id, user_id, permission):
 @bp.route('/public/<hashid:corpus_id>')
 def public_corpus(corpus_id):
     corpus = Corpus.query.get_or_404(corpus_id)
+    corpus_files = [cf.to_json_serializeable() for cf in CorpusFile.query.filter_by(corpus_id = corpus_id).all()]
     return render_template(
         'corpora/public_corpus.html.j2',
         corpus=corpus,
+        corpus_files=corpus_files,
         title=corpus.title
     )
diff --git a/app/static/js/ResourceLists/PublicCorpusFileList.js b/app/static/js/ResourceLists/PublicCorpusFileList.js
new file mode 100644
index 00000000..51362138
--- /dev/null
+++ b/app/static/js/ResourceLists/PublicCorpusFileList.js
@@ -0,0 +1,15 @@
+class PublicCorpusFileList extends CorpusFileList {
+  get item() {
+    return `
+      <tr class="list-item clickable hoverable">
+        <td><span class="filename"></span></td>
+        <td><span class="author"></span></td>
+        <td><span class="title"></span></td>
+        <td><span class="publishing-year"></span></td>
+        <td class="right-align">
+          <a class="list-action-trigger btn-floating service-color darken waves-effect waves-light" data-list-action="download" data-service="corpus-analysis"><i class="material-icons">file_download</i></a>
+        </td>
+      </tr>
+    `.trim();
+  }
+}
diff --git a/app/templates/_scripts.html.j2 b/app/templates/_scripts.html.j2
index 95406079..64629b6c 100644
--- a/app/templates/_scripts.html.j2
+++ b/app/templates/_scripts.html.j2
@@ -20,6 +20,7 @@
   'js/RessourceDisplays/JobDisplay.js',
   'js/ResourceLists/ResourceList.js',
   'js/ResourceLists/CorpusFileList.js',
+  'js/ResourceLists/PublicCorpusFileList.js',
   'js/ResourceLists/CorpusList.js',
   'js/ResourceLists/JobList.js',
   'js/ResourceLists/JobInputList.js',
diff --git a/app/templates/corpora/corpus.html.j2 b/app/templates/corpora/corpus.html.j2
index c29da972..5311e92b 100644
--- a/app/templates/corpora/corpus.html.j2
+++ b/app/templates/corpora/corpus.html.j2
@@ -10,8 +10,7 @@
     <div class="col s12" data-corpus-id="{{ corpus.hashid }}" data-user-id="{{ corpus.user.hashid }}" id="corpus-display">
       <div class="row">
         <div class="col s8 m9 l10">
-          {# <h1 id="title"><span class="corpus-title"></span></h1> #}
-          <h1 id="title">{{ corpus.title }}</h1>
+          <h1 id="title"><span class="corpus-title"></span></h1>
           {% if not corpus.user == current_user %}
           {% if current_user.is_following_corpus(corpus) %}
           <a class="btn waves-effect waves-light" id="follow-corpus-request"><i class="material-icons left">add</i>Unfollow Corpus</a>
diff --git a/app/templates/corpora/public_corpus.html.j2 b/app/templates/corpora/public_corpus.html.j2
index f9cb4bc9..90a45f62 100644
--- a/app/templates/corpora/public_corpus.html.j2
+++ b/app/templates/corpora/public_corpus.html.j2
@@ -8,9 +8,27 @@
   <div class="row">
     <div class="col s12">
       <h1>{{ title }} </h1>
+      <div class="row">
+        <div class="col s8 m9 l10">
+          {% if not corpus.user == current_user %}
+          <a class="btn waves-effect waves-light" id="follow-corpus-request">
+            {% if current_user.is_following_corpus(corpus) %}
+            <i class="material-icons left">add</i>Unfollow Corpus
+            {% else %}
+            <i class="material-icons left">add</i>Follow Corpus
+            {% endif %}
+          </a>
+          {% endif %}
+        </div>
+      </div>
       <div class="card service-color-border border-darken" data-service="corpus-analysis" style="border-top: 10px solid">
         <div class="card-content">
           <div class="row">
+            <div class="col s12">
+              <p><b>Status:</b> <span class="chip corpus-status-text corpus-status-color white-text" data-status="{{ corpus.status.name }}"></span></p>
+              <p></p>
+              <br>
+            </div>
             <div class="col s12">
               <p><b>Description:</b> {{ corpus.description }}</p>
               <br>
@@ -25,6 +43,13 @@
           </div>
         </div>
       </div>
+      <div class="card">
+        <div class="card-content">
+          <span class="card-title" id="files">Corpus files</span>
+          <div class="corpus-file-list no-autoinit" data-user-id="{{ corpus.user.hashid }}" data-corpus-id="{{ corpus.hashid }}"></div>
+        </div>
+      </div>
+    </div>
     </div>
   </div>
 </div>
@@ -33,45 +58,42 @@
 {% block scripts %}
 {{ super() }}
 <script>
+  let corpusFileList = new PublicCorpusFileList(document.querySelector('.corpus-file-list'));
+  corpusFileList.add({{ corpus_files|tojson }});
+
   let corpusFollowingRequest = document.querySelector('#follow-corpus-request');
   
   {# let followingUserList = new UserList(document.querySelector('.user-list'));
   followingUserList.add({{ following_users|tojson }}); #}
   
-  corpusFollowingRequest.addEventListener('click', function() {
-    corpusFollowingRequest.innerHTML = '<i class="material-icons left">add</i>Unfollow Corpus';
-    if ("{{ current_user.is_following_corpus(corpus) }}" === "False") {
-      corpusFollowingRequest.lastChild.textContent = 'Unfollow Corpus';
-      return new Promise((resolve, reject) => {
-        fetch(`/corpora/{{ corpus.hashid }}/follow`, {method: 'POST', headers: {Accept: 'application/json'}})
-          .then(
-            (response) => {
-              if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
-              if (response.status === 404) {app.flash('Not Found', 'error'); reject(response);}
-              if (response.status === 409) {app.flash('Conflict', 'error'); reject(response);}
-              app.flash(`You follow "{{ corpus.title }}" now`, 'corpus');
-              window.location.href = '{{ url_for("corpora.corpus", corpus_id=corpus.id) }}'
-              resolve(response);
-            },
-            (response) => {
-              app.flash('Something went wrong', 'error');
-              reject(response);
-            }
-          );
-      });
-      
-    } else {
-      corpusFollowingRequest.innerHTML = '<i class="material-icons left">add</i>Unfollow Corpus';
+  corpusFollowingRequest.addEventListener('click', () => {
+    if ({{ current_user.is_following_corpus(corpus)|tojson }}) {
       return new Promise((resolve, reject) => {
         fetch(`/corpora/{{ corpus.hashid }}/unfollow`, {method: 'POST', headers: {Accept: 'application/json'}})
           .then(
             (response) => {
               if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
               if (response.status === 404) {app.flash('Not Found', 'error'); reject(response);}
-              if (response.status === 409) {app.flash('Conflict', 'error'); reject(response);}
-              app.flash(`You are not following "{{ corpus.title }}" anymore`, 'corpus');
+              {# app.flash(`You are not following "{{ corpus.title }}" anymore`, 'corpus'); #}
+              resolve(response);
+              window.location.href = '{{ url_for("corpora.public_corpus", corpus_id=corpus.id) }}';
+            },
+            (response) => {
+              app.flash('Something went wrong', 'error');
+              reject(response);
+            }
+          );
+      });
+    } else {
+      return new Promise((resolve, reject) => {
+        fetch(`/corpora/{{ corpus.hashid }}/follow`, {method: 'POST', headers: {Accept: 'application/json'}})
+          .then(
+            (response) => {
+              if (response.status === 403) {app.flash('Forbidden', 'error'); reject(response);}
+              if (response.status === 404) {app.flash('Not Found', 'error'); reject(response);}
+              {# app.flash(`You follow "{{ corpus.title }}" now`, 'corpus'); #}
+              window.location.href = '{{ url_for("corpora.public_corpus", corpus_id=corpus.id) }}';
               resolve(response);
-              window.location.href = '{{ url_for("corpora.corpus", corpus_id=corpus.id) }}'
             },
             (response) => {
               app.flash('Something went wrong', 'error');
@@ -79,7 +101,6 @@
             }
           );
       });
-      
     }
   });
 </script>