From 44688eff6548f377362da3fbe812fb6a1260ff81 Mon Sep 17 00:00:00 2001
From: Stephan Porada <sporada@uni-bielefeld.de>
Date: Wed, 10 Jun 2020 16:00:33 +0200
Subject: [PATCH] Add more cosmetics

---
 web/app/templates/jobs/job.html.j2 | 63 +++++++++++++++++++++---------
 1 file changed, 44 insertions(+), 19 deletions(-)

diff --git a/web/app/templates/jobs/job.html.j2 b/web/app/templates/jobs/job.html.j2
index 7373543b..e26448a0 100644
--- a/web/app/templates/jobs/job.html.j2
+++ b/web/app/templates/jobs/job.html.j2
@@ -106,12 +106,27 @@
           <p>Processed result files.</p>
         </div>
         <div class="col s12 m10">
-          <div class="results row">
-            <div class="show-if-only-child">
-              <span class="card-title"><i class="left material-icons" style="font-size: inherit;">file_download</i>Nothing here...</span>
-              <p>No results available (yet). Is the job already completed?</p>
-            </div>
-          </div>
+          <table class="highlight responsive-table">
+            <thead>
+              <tr>
+                <th>Result Type</th>
+                <th>Archive Name</th>
+                <th>Download</th>
+              </tr>
+            </thead>
+            <tbody class="results">
+              <tr class="show-if-only-child">
+                <td colspan="3">
+                  <span class="card-title">
+                    <i class="left material-icons" style="font-size: inherit;">file_download</i>Nothing here...
+                  </span>
+                  <p>
+                    No results available (yet). Is the job already completed?
+                  </p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
         </div>
       </div>
     </div>
@@ -214,27 +229,37 @@ var options = {page: 5,
         if (a.filename > b.filename) {return 1;}
         return 0;
       });
-      resultsHTML = "";
+      resultsHTML = ``;
       for (let result of resultsArray) {
         if (result.filename.endsWith(".pdf.zip")) {
-          resultType = "PDF";
+          resultType = "PDF file with text layer";
         } else if (result.filename.endsWith(".txt.zip")) {
-          resultType = "TXT";
+          resultType = "Raw text files";
         } else if (result.filename.endsWith(".vrt.zip")) {
-          resultType = "VRT";
+          resultType = "VRT(XML dialect) files holding the NLP data";
         } else if (result.filename.endsWith(".xml.zip")) {
-          resultType = "XML";
+          resultType = "XML files";
         } else if (result.filename.endsWith(".poco.zip")) {
-          resultType = "POCO";
+          resultType = "HCOR und image files needed for Post correction(PoCo)";
         } else {
-          resultType = "ALL";
+          resultType = "All result files created during this job";
         }
-        resultsHTML += `<div class="col s4 m3 l2">
-                          <a class="btn waves-effect waves-light" download href="/jobs/${result.job_id}/results/${result.id}/download">
-                            <i class="material-icons left">file_download</i>${resultType}
-                          </a>
-                        </div>`;
-      }
+        resultsHTML += `
+                        <tr>
+                          <td>${resultType}</td>
+                          <td>${result.filename}</td>
+                          <td>
+                            <a class="btn-floating waves-effect waves-light" download href="/jobs/${result.job_id}/results/${result.id}/download">
+                              <i class="material-icons left">file_download</i>
+                            </a>
+                          </td>
+                        </tr>
+                       `;
+      };
+      resultsHTML += `
+                      </tbody>
+                      </table>
+                     `;
       resultsElements = document.querySelectorAll(".results");
       for (let resultsElement of resultsElements) {
         resultsElement.innerHTML += resultsHTML;