Change models

app/templates/jobs/job.html.j2

@@ -76,7 +76,7 @@
   <h4>Input and result files</h4>
 </div>
 
-<div class="col s12 m8">
+<div class="col s12 m7">
   <div class="card">
     <div class="card-content">
       <span class="card-title">Filewise</span>
@@ -85,10 +85,9 @@
           <tr>
             <th>Filename</th>
             <th>Download</th>
-            <th>Result</th>
           </tr>
         </thead>
-        <tbody>
+        <tbody id="inputs">
           {% for input in job.inputs %}
           <tr>
             <td id="input-{{ input.id }}-filename">{{ input.filename }}</td>
@@ -97,7 +96,6 @@
                 <i class="material-icons">file_download</i>
               </a>
             </td>
-            <td id="input-{{ input.id }}-results"></td>
           </tr>
           {% endfor %}
         </tbody>
@@ -106,7 +104,7 @@
   </div>
 </div>
 
-<div class="col s12 m4">
+<div class="col s12 m5">
   <div class="card">
     <div class="card-content">
       <span class="card-title">Bundled</span>
@@ -117,40 +115,7 @@
             <th>Download</th>
           </tr>
         </thead>
-        <tbody>
-          <tr>
-            <td>AIO-Bundle</td>
-            <td>
-              <a class="waves-effect waves-light btn-small" download href="">
-                <i class="material-icons">file_download</i>
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td>PDF-Bundle</td>
-            <td>
-              <a class="waves-effect waves-light btn" download href="">
-                <i class="material-icons">file_download</i>
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td>TXT-Bundle</td>
-            <td>
-              <a class="waves-effect waves-light btn" download href="">
-                <i class="material-icons">file_download</i>
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td>XML-Bundle</td>
-            <td>
-              <a class="waves-effect waves-light btn" download href="">
-                <i class="material-icons">file_download</i>
-              </a>
-            </td>
-          </tr>
-        </tbody>
+        <tbody id="results"></tbody>
       </table>
     </div>
   </div>
@@ -166,7 +131,6 @@
           <tr>
             <th>Filename</th>
             <th>Download</th>
-            <th>Results</th>
           </tr>
         </thead>
         <tbody>
@@ -228,12 +192,8 @@
       this.setStatus(job.status);
       // End date
       if (job.end_date) {this.setEndDate(job.end_date);}
-      // Input results
-      for (let input of job.inputs) {
-        for (let result of input.results) {
-          this.setResult(result);
-        }
-      }
+      // Results
+      if (job.results) {this.setResults(job.results);}
     }
 
     _update(patch) {
@@ -245,7 +205,7 @@
         if (pathArray[0] != this.jobId) {continue;}
         switch(operation.op) {
           case "add":
-            if (pathArray[1] === "inputs" && pathArray[3] === "results") {
+            if (pathArray[1] === "results") {
               this.setResult(operation.value);
             }
             break;
@@ -277,22 +237,32 @@
       M.updateTextFields();
     }
 
-    setResult(result) {
-      let resultsElement, resultDownloadButtonElement,
-          resultDownloadButtonIconElement;
+    setResults(results) {
+      let resultElement, resultsElement, resultDownloadElement,
+          resultDownloadButtonElement, resultDownloadButtonIconElement,
+          resultTitleElement;
 
-      resultsElement = document.getElementById(`input-${result.job_input_id}-results`);
-      resultDownloadButtonElement = document.createElement("a");
-      resultDownloadButtonElement.classList.add("waves-effect", "waves-light", "btn-small");
-      resultDownloadButtonElement.href = `/jobs/${this.jobId}/results/${result.id}/download`;
-      resultDownloadButtonElement.innerText = result.filename.split(".").reverse()[0];
-      resultDownloadButtonElement.setAttribute("download", "");
-      resultDownloadButtonIconElement = document.createElement("i");
-      resultDownloadButtonIconElement.classList.add("material-icons", "left");
-      resultDownloadButtonIconElement.innerText = "file_download";
-      resultDownloadButtonElement.prepend(resultDownloadButtonIconElement);
-      resultsElement.append(resultDownloadButtonElement);
-      resultsElement.append(" ");
+      resultsElement = document.getElementById("results");
+
+      for (let result of results) {
+        resultElement = document.createElement("tr");
+        resultTitleElement = document.createElement("td");
+        resultTitleElement.innerText = result.filename;
+        resultElement.append(resultTitleElement);
+        resultDownloadElement = document.createElement("td");
+        resultDownloadButtonElement = document.createElement("a");
+        resultDownloadButtonElement.classList.add("waves-effect", "waves-light",
+                                                  "btn-small");
+        resultDownloadButtonElement.href = `/jobs/${result.job_id}/results/${result.id}/download`;
+        resultDownloadButtonElement.setAttribute("download", "");
+        resultDownloadButtonIconElement = document.createElement("i");
+        resultDownloadButtonIconElement.classList.add("material-icons");
+        resultDownloadButtonIconElement.innerText = "file_download";
+        resultDownloadButtonElement.append(resultDownloadButtonIconElement);
+        resultDownloadElement.append(resultDownloadButtonElement)
+        resultElement.append(resultDownloadElement);
+        resultsElement.append(resultElement);
+      }
     }
 
     setStatus(status) {