From 611bb6ef6234cc023669e9d83749813d1266ee10 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Wed, 12 Feb 2020 12:19:54 +0100
Subject: [PATCH] Change RessourceList

---
 app/static/js/nopaque.lists.js                |  95 ++++++++------
 app/templates/admin/user.html.j2              |   5 +-
 app/templates/jobs/job.html.j2                | 121 +++++++-----------
 app/templates/main/dashboard.html.j2          |   5 +-
 .../services/corpus_analysis.html.j2          |   3 +-
 5 files changed, 109 insertions(+), 120 deletions(-)

diff --git a/app/static/js/nopaque.lists.js b/app/static/js/nopaque.lists.js
index ba61b8d4..683f36e1 100644
--- a/app/static/js/nopaque.lists.js
+++ b/app/static/js/nopaque.lists.js
@@ -1,7 +1,13 @@
 class RessourceList extends List {
-  constructor(idOrElement, subscriberList, dataMapper=null, options={}) {
-    super(idOrElement, {...RessourceList.options, ...options});
-    this.dataMapper = dataMapper;
+  constructor(idOrElement, subscriberList, type, options={}) {
+    if (!['corpus', 'job'].includes(type)) {
+      console.error("Unknown Type!");
+      return;
+    }
+    super(idOrElement, {...RessourceList.options['common'],
+                        ...RessourceList.options[type],
+                        ...options});
+    this.type = type;
     subscriberList.push(this);
   }
 
@@ -43,19 +49,15 @@ class RessourceList extends List {
 
 
   addRessources(ressources) {
-    if (this.dataMapper) {
-      this.add(ressources.map(x => this.dataMapper(x)));
-    } else {
-      this.add(ressources);
-    }
+    this.add(ressources.map(x => RessourceList.dataMapper[this.type](x)));
   }
 }
 RessourceList.dataMapper = {
   corpus: corpus => ({creation_date: corpus.creation_date,
                       description: corpus.description,
                       id: corpus.id,
-                      link: `/corpora/${corpus.id}`,
-                      service: "corpus",
+                      "analyse-link": `/corpora/${corpus.id}/analyse`,
+                      "edit-link": `/corpora/${corpus.id}`,
                       status: corpus.status,
                       title: corpus.title}),
   job: job => ({creation_date: job.creation_date,
@@ -67,32 +69,53 @@ RessourceList.dataMapper = {
                 title: job.title})
 };
 RessourceList.options = {
-  item: `<tr>
-           <td>
-             <a class="btn-floating disabled">
-               <i class="material-icons service"></i>
-             </a>
-           </td>
-           <td>
-             <b class="title"></b><br>
-             <i class="description"></i>
-           </td>
-           <td>
-             <span class="badge new status" data-badge-caption=""></span>
-           </td>
-           <td class="right-align">
-             <a class="btn-small link waves-effect waves-light">View<i class="material-icons right">send</i>
-           </td>
-         </tr>`,
-  page: 4,
-  pagination: {innerWindow: 8, outerWindow: 1},
-  valueNames: ["creation_date",
-               "description",
-               "title",
-               {data: ["id"]},
-               {name: "link", attr: "href"},
-               {name: "service", attr: "data-service"},
-               {name: "status", attr: "data-status"}]};
+  common: {page: 4, pagination: {innerWindow: 8, outerWindow: 1}},
+  corpus: {item: `<tr>
+                    <td>
+                      <a class="btn-floating disabled">
+                        <i class="material-icons service">book</i>
+                      </a>
+                    </td>
+                    <td>
+                      <b class="title"></b><br>
+                      <i class="description"></i>
+                    </td>
+                    <td>
+                      <span class="badge new status" data-badge-caption=""></span>
+                    </td>
+                    <td class="right-align">
+                      <a class="btn-small edit-link waves-effect waves-light"><i class="material-icons">edit</i></a>
+                      <a class="btn-small analyse-link waves-effect waves-light">Analyse<i class="material-icons right">search</i></a>
+                    </td>
+                  </tr>`,
+           valueNames: ["creation_date", "description", "title",
+                        {data: ["id"]},
+                        {name: "analyse-link", attr: "href"},
+                        {name: "edit-link", attr: "href"},
+                        {name: "status", attr: "data-status"}]},
+  job: {item: `<tr>
+                 <td>
+                   <a class="btn-floating disabled">
+                     <i class="material-icons service"></i>
+                   </a>
+                 </td>
+                 <td>
+                   <b class="title"></b><br>
+                   <i class="description"></i>
+                 </td>
+                 <td>
+                   <span class="badge new status" data-badge-caption=""></span>
+                 </td>
+                 <td class="right-align">
+                   <a class="btn-small link waves-effect waves-light">View<i class="material-icons right">send</i></a>
+                 </td>
+               </tr>`,
+        valueNames: ["creation_date", "description", "title",
+                     {data: ["id"]},
+                     {name: "link", attr: "href"},
+                     {name: "service", attr: "data-service"},
+                     {name: "status", attr: "data-status"}]}
+};
 
 
 class ResultList extends List {
diff --git a/app/templates/admin/user.html.j2 b/app/templates/admin/user.html.j2
index d50bf843..e4e24b6f 100644
--- a/app/templates/admin/user.html.j2
+++ b/app/templates/admin/user.html.j2
@@ -103,8 +103,9 @@
 
 
 <script>
-  var corpusList = new RessourceList("corpora", nopaque.foreignCorporaSubscribers, RessourceList.dataMapper.corpus);
-  var jobList = new RessourceList("jobs", nopaque.foreignJobsSubscribers, RessourceList.dataMapper.job);
+  var corpusList = new RessourceList("corpora", nopaque.foreignCorporaSubscribers, "corpus");
+  var jobList = new RessourceList("jobs", nopaque.foreignJobsSubscribers,
+                                  "job");
   nopaque.socket.emit("foreign_user_ressources_init", {{ user.id }});
 </script>
 {% endblock %}
diff --git a/app/templates/jobs/job.html.j2 b/app/templates/jobs/job.html.j2
index ed01f3eb..f4a3eb7f 100644
--- a/app/templates/jobs/job.html.j2
+++ b/app/templates/jobs/job.html.j2
@@ -73,85 +73,50 @@
       <a data-target="delete-job-modal" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete Job</a>
     </div>
   </div>
-</div>
 
-<div class="col s12">
-  <h4>Input and result files</h4>
-</div>
-
-<div class="col s12 m7">
-  <div class="card">
-    <div class="card-content">
-      <span class="card-title">Filewise</span>
-      <table class="highlight responsive-table">
-        <thead>
-          <tr>
-            <th>Filename</th>
-            <th>Download</th>
-          </tr>
-        </thead>
-        <tbody id="inputs">
-          {% for input in job.inputs %}
-          <tr>
-            <td id="input-{{ input.id }}-filename">{{ input.filename }}</td>
-            <td id="input-{{ input.id }}-download">
-              <a class="waves-effect waves-light btn-small" download href="{{ url_for('jobs.download_job_input', job_id=job.id, job_input_id=input.id) }}">
-                <i class="material-icons">file_download</i>
-              </a>
-            </td>
-          </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-
-<div class="col s12 m5">
-  <div class="card">
-    <div class="card-content">
-      <span class="card-title">Bundled</span>
-      <table class="highlight responsive-table">
-        <thead>
-          <tr>
-            <th>Bundlename</th>
-            <th>Download</th>
-          </tr>
-        </thead>
-        <tbody id="results"></tbody>
-      </table>
-    </div>
-  </div>
-</div>
-
-
-<div class="col s12 hide">
-  <div class="card">
-    <div class="card-content">
-      <span class="card-title">Files</span>
-      <table class="highlight responsive-table">
-        <thead>
-          <tr>
-            <th>Filename</th>
-            <th>Download</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for input in job.inputs %}
-          <tr>
-            <td id="input-{{ input.id }}-filename">{{ input.filename }}</td>
-            <td id="input-{{ input.id }}-download">
-              <a class="waves-effect waves-light btn-small" download href="{{ url_for('jobs.download_job_input', job_id=job.id, job_input_id=input.id) }}">
-                <i class="material-icons">file_download</i>
-              </a>
-            </td>
-            <td id="input-{{ input.id }}-results"></td>
-          </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-    </div>
-  </div>
+  <ul class="collapsible popout">
+    <li>
+      <div class="collapsible-header"><i class="material-icons">done</i>Result files</div>
+      <div class="collapsible-body">
+        <table class="highlight responsive-table">
+          <thead>
+            <tr>
+              <th>Bundlename</th>
+              <th>Download</th>
+            </tr>
+          </thead>
+          <tbody id="results"></tbody>
+        </table>
+      </div>
+    </li>
+    <li>
+      <div class="collapsible-header">
+        <i class="material-icons">input</i>Input files
+      </div>
+      <div class="collapsible-body">
+        <table class="highlight responsive-table">
+          <thead>
+            <tr>
+              <th>Filename</th>
+              <th>Download</th>
+            </tr>
+          </thead>
+          <tbody id="inputs">
+            {% for input in job.inputs %}
+            <tr>
+              <td id="input-{{ input.id }}-filename">{{ input.filename }}</td>
+              <td id="input-{{ input.id }}-download">
+                <a class="waves-effect waves-light btn-small" download href="{{ url_for('jobs.download_job_input', job_id=job.id, job_input_id=input.id) }}">
+                  <i class="material-icons">file_download</i>
+                </a>
+              </td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    </li>
+  </ul>
 </div>
 
 
diff --git a/app/templates/main/dashboard.html.j2 b/app/templates/main/dashboard.html.j2
index 08b51221..1ca22117 100644
--- a/app/templates/main/dashboard.html.j2
+++ b/app/templates/main/dashboard.html.j2
@@ -89,7 +89,8 @@
 </div>
 
 <script>
-  var corpusList = new RessourceList("corpora", nopaque.corporaSubscribers, RessourceList.dataMapper.corpus);
-  var jobList = new RessourceList("jobs", nopaque.jobsSubscribers, RessourceList.dataMapper.job);
+  var corpusList = new RessourceList("corpora", nopaque.corporaSubscribers,
+                                     "corpus");
+  var jobList = new RessourceList("jobs", nopaque.jobsSubscribers, "job");
 </script>
 {% endblock %}
diff --git a/app/templates/services/corpus_analysis.html.j2 b/app/templates/services/corpus_analysis.html.j2
index c3a6d0b3..4d9280c6 100644
--- a/app/templates/services/corpus_analysis.html.j2
+++ b/app/templates/services/corpus_analysis.html.j2
@@ -38,7 +38,6 @@
 
 <script>
   var corpusList = new RessourceList("corpora", nopaque.corporaSubscribers,
-                                     RessourceList.dataMapper.corpus,
-                                     {page: 10});
+                                     "corpus", {page: 10});
 </script>
 {% endblock %}