Add dynamic output link creation.

app/templates/main/jobs/job.html.j2

@@ -34,80 +34,87 @@
       } else {
         this.job = jobs[this.jobId];
       }
-      creationDateElement = document.getElementById("creation-date");
-      creationDateElement.value = (new Date(this.job.creation_date * 1000)).toLocaleString();
-      descriptionElement = document.getElementById("description");
-      descriptionElement.innerHTML = this.job.description;
-      endDateElement = document.getElementById("end-date");
-      endDateElement.value = this.job.end_date ? (new Date(this.job.end_date * 1000)).toLocaleString() : "Not available";
-      memMbElement = document.getElementById("mem-mb");
-      memMbElement.value = this.job.mem_mb;
-      nCoresElement = document.getElementById("n-cores");
-      nCoresElement.value = this.job.n_cores;
-      serviceElement = document.getElementById("service");
-      serviceElement.value = this.job.service;
-      serviceArgsElement = document.getElementById("service-args");
-      serviceArgsElement.value = this.job.service_args;
-      serviceVersionElement = document.getElementById("service-version");
-      serviceVersionElement.value = this.job.service_version;
-      statusColor = JobList.STATUS_COLORS[this.job.status] || JobList.STATUS_COLORS['default'];
-      statusElement = document.getElementById("status");
-      statusElement.classList.add(statusColor);
-      statusElement.innerHTML = this.job.status;
-      titleElement = document.getElementById("title");
-      titleElement.innerHTML = this.job.title;
 
-      var downloadIconElement, fileElement, filesElement, input, inputDownloadElement, inputElement, result, resultDownloadElement, resultsElement;
+      // Title
+      this.setTitle(this.job.title);
+      // Description
+      this.setDescription(this.job.description);
+      // Status
+      this.setStatus(this.job.status);
+      // Creation date
+      this.setCreationDate(this.job.creation_date);
+      // End date
+      if (this.job.end_date) {this.setEndDate(this.job.end_date);}
+      // Memory
+      this.setMemMb(this.job.mem_mb);
+      // CPU cores
+      this.setNCores(this.job.n_cores);
+      // Service
+      this.setService(this.job.service);
+      // Service arguments
+      this.setServiceArgs(this.job.service_args);
+      // Service version
+      this.setServiceVersion(this.job.service_version);
+
+      var filesElement, input, inputDownloadElement, inputElement,
+          inputFilenameElement, inputResultsElement;
 
       filesElement = document.getElementById("files");
-      downloadIconElement = document.createElement("i");
-      downloadIconElement.classList.add("material-icons", "left");
-      downloadIconElement.innerText = "file_download";
       for (input of this.job.inputs) {
-        fileElement = document.createElement("tr");
+        // Data row
-        inputDownloadElement = document.createElement("a");
+        inputElement = document.createElement("tr");
-        inputDownloadElement.classList.add("waves-effect", "waves-light", "btn-small");
+        filesElement.append(inputElement);
-        inputDownloadElement.href = `/jobs/${this.job.id}/download?file=${input.filename}`;
+        // Input filename
-        inputDownloadElement.innerText = input.filename;
+        inputFilenameElement = document.createElement("td");
-        inputDownloadElement.appendChild(downloadIconElement.cloneNode(true));
+        inputFilenameElement.id = `input-${input.id}-filename`;
-        inputElement = document.createElement("td");
+        inputElement.append(inputFilenameElement);
-        inputElement.id = `input-${input.id}`;
+        // Input download
-        inputElement.appendChild(inputDownloadElement);
+        inputDownloadElement = document.createElement("td");
-        resultsElement = document.createElement("td");
+        inputDownloadElement.id = `input-${input.id}-download`;
-        resultsElement.id = `results-${input.id}`;
+        inputElement.append(inputDownloadElement);
-        // add_results(input);
+        // Third column for input result file download buttons
-        for (result of input.results) {
+        inputResultsElement = document.createElement("td");
-          resultDownloadElement = document.createElement("a");
+        inputResultsElement.id = `input-${input.id}-results`;
-          resultDownloadElement.classList.add("waves-effect", "waves-light", "btn-small");
+        inputElement.append(inputResultsElement);
-          resultDownloadElement.href = `/jobs/${this.job.id}/download?file=output/${input.filename}/${result.filename}`;
+        this.setInputFilename(input);
-          resultDownloadElement.innerText = result.filename.split(".").slice(-1)[0];
+        this.setInputDownload(input);
-          resultDownloadElement.appendChild(downloadIconElement.cloneNode(true));
+        this.setInputResults(input);
-          resultsElement.appendChild(resultDownloadElement);
-        }
-        fileElement.appendChild(inputElement);
-        fileElement.appendChild(resultsElement);
-        filesElement.appendChild(fileElement);
       }
+    }
 
-      M.updateTextFields();
+    setInputDownload(input) {
+      var inputDownloadButtonElement, inputDownloadButtonIconElement,
+          inputDownloadElement;
+      inputDownloadElement = document.getElementById(`input-${input.id}-download`);
+      inputDownloadButtonElement = document.createElement("a");
+      inputDownloadButtonElement.classList.add("waves-effect", "waves-light", "btn-small");
+      inputDownloadButtonElement.href = `${this.jobId}/download?file=${input.filename}`;
+      inputDownloadButtonElement.setAttribute("download", "");
+      inputDownloadButtonIconElement = document.createElement("i");
+      inputDownloadButtonIconElement.classList.add("material-icons");
+      inputDownloadButtonIconElement.innerText = "file_download";
+      inputDownloadButtonElement.append(inputDownloadButtonIconElement);
+      inputDownloadElement.append(inputDownloadButtonElement);
+    }
+
+    setInputFilename(input) {
+      var inputFilenameElement;
+      inputFilenameElement = document.getElementById(`input-${input.id}-filename`);
+      inputFilenameElement.innerText = input.filename;
     }
 
     _update(patch) {
-      var newStatusColor, operation, pathArray, status, statusColor,
+      var input, operation, pathArray;
-          updatedElement;
 
       for (operation of patch) {
         /* "/jobId/valueName" -> ["jobId", "valueName"] */
         pathArray = operation.path.split("/").slice(1);
-        console.log(operation);
-        console.log(pathArray);
         if (pathArray[0] != this.jobId) {continue;}
         switch(operation.op) {
           case "add":
-            switch(pathArray[1]) {
+            if (pathArray[1] === "inputs" && pathArray[3] === "results") {
-              case "input":
+              console.log(operation.value);
-
+              this.setInputResult(operation.value);
-                break;
             }
             break;
           case "delete":
@@ -115,33 +122,11 @@
             break;
           case "replace":
             switch(pathArray[1]) {
-              case "description":
-                updatedElement = document.getElementById("description");
-                updatedElement.innerHTML = operation.value;
-                break;
               case "end_date":
-                updatedElement = document.getElementById("end-date");
+                this.setEndDate(operation.value);
-                updatedElement.value = (new Date(operation.value * 1000)).toLocaleString();
-                M.updateTextFields();
                 break;
               case "status":
-                if (operation.value == "complete") {
+                this.setStatus(operation.value);
-                  location.reload();
-                }
-                updatedElement = document.getElementById("status");
-                status = updatedElement.innerHTML;
-                statusColor = JobList.STATUS_COLORS[status]
-                            || JobList.STATUS_COLORS['default'];
-                newStatusColor = JobList.STATUS_COLORS[operation.value]
-                               || JobList.STATUS_COLORS['default'];
-                updatedElement.classList.remove(statusColor);
-                updatedElement.classList.add(newStatusColor);
-                updatedElement.innerHTML = operation.value;
-                Animations.pulse(updatedElement, 3000);
-                break;
-              case "title":
-                updatedElement = document.getElementById("title");
-                updatedElement.innerHTML = operation.value;
                 break;
               default:
                 break;
@@ -152,6 +137,103 @@
         }
       }
     }
+
+    setTitle(title) {
+      var titleElement;
+      titleElement = document.getElementById("title");
+      titleElement.innerText = title;
+    }
+
+    setDescription(description) {
+      var descriptionElement;
+      descriptionElement = document.getElementById("description");
+      descriptionElement.innerText = description;
+    }
+
+    setStatus(status) {
+      var statusColor, statusElement;
+      statusElement = document.getElementById("status");
+      for (statusColor of Object.values(JobList.STATUS_COLORS)) {
+        statusElement.classList.remove(statusColor);
+      }
+      statusElement.classList.add(JobList.STATUS_COLORS[status] || JobList.STATUS_COLORS['default']);
+      statusElement.innerText = status;
+    }
+
+    setCreationDate(timestamp) {
+      var creationDateElement;
+      creationDateElement = document.getElementById("creation-date");
+      creationDateElement.value = new Date(timestamp * 1000).toLocaleString();
+      M.updateTextFields();
+    }
+
+    setEndDate(timestamp) {
+      var endDateElement;
+      endDateElement = document.getElementById("end-date");
+      endDateElement.value = new Date(timestamp * 1000).toLocaleString();
+      M.updateTextFields();
+    }
+
+    setMemMb(memMb) {
+      var memMbElement;
+      memMbElement = document.getElementById("mem-mb");
+      memMbElement.value = memMb;
+      M.updateTextFields();
+    }
+
+    setNCores(nCores) {
+      var nCoresElement;
+      nCoresElement = document.getElementById("n-cores");
+      nCoresElement.value = nCores;
+      M.updateTextFields();
+    }
+
+    setService(service) {
+      var serviceElement;
+      serviceElement = document.getElementById("service");
+      serviceElement.value = service;
+      M.updateTextFields();
+    }
+
+    setServiceArgs(serviceArgs) {
+      var serviceArgsElement;
+      serviceArgsElement = document.getElementById("service-args");
+      serviceArgsElement.value = serviceArgs;
+      M.updateTextFields();
+    }
+
+    setServiceVersion(serviceVersion) {
+      var serviceVersionElement;
+      serviceVersionElement = document.getElementById("service-version");
+      serviceVersionElement.value = serviceVersion;
+      M.updateTextFields();
+    }
+
+    setInputResults(input) {
+      var result;
+      for (result of input.results) {
+        this.setInputResult(result);
+      }
+    }
+
+    setInputResult(result) {
+      var inputResultsElement, resultDownloadButtonElement,
+          resultDownloadButtonIconElement;
+      inputResultsElement = document.getElementById(`input-${result.job_input_id}-results`);
+      resultDownloadButtonElement = document.createElement("a");
+      resultDownloadButtonElement.classList.add("waves-effect", "waves-light", "btn-small");
+      var resultFile = `${result.dir}/${result.filename}`;
+      resultFile = resultFile.substring(resultFile.indexOf("output/"));
+      resultDownloadButtonElement.href = `${this.jobId}/download?file=${resultFile}`;
+      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);
+      inputResultsElement.append(resultDownloadButtonElement);
+      inputResultsElement.append(" ");
+    }
   }
   var informationUpdater = new InformationUpdater(JOB_ID);
 </script>
@@ -236,74 +318,24 @@
           </div>
         </div>
       </div>
+    </div>
+  </div>
+</div>
 
+<div class="col s12">
+  <div class="card">
+    <div class="card-content">
       <span class="card-title">Files</span>
-      <div style="overflow-x:auto;">
+      <table class="highlight responsive-table">
-      <table class="highlight">
         <thead>
           <tr>
-              <th style="width: 25%;">Inputs</th>
+            <th>File</th>
-              <th style="width: 25%;"></th>
+            <th>Input</th>
-              <th style="width: 25%;">Results</th>
+            <th>Results</th>
-              <th style="width: 25%;"></th>
           </tr>
         </thead>
         <tbody id="files"></tbody>
       </table>
-
-      <span class="card-title">Files old</span>
-      <table>
-        <thead>
-          <tr>
-              <th style="width: 50%;">Inputs</th>
-              <th style="width: 50%;">Results</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for file in files %}
-          <tr>
-            <td rowspan="4">
-              {{ file }}
-            </td>
-            <td rowspan="4">
-              <a href="{{ url_for('main.job_download', job_id=job.id, file=files[file]['path']) }}" class="waves-effect waves-light btn-small"><i class="material-icons left">file_download</i>Download</a>
-            </td>
-          </tr>
-          {% if files[file]['results'] %}
-          {% for result in files[file]['results'] %}
-          <tr>
-            <td>
-              {{ result }}
-            </td>
-            <td>
-              {% if job.status == 'complete' %}
-              <a href="{{ url_for('main.job_download', job_id=job.id, file=files[file]['results'][result]['path']) }}" class="waves-effect waves-light btn-small"><i class="material-icons left">file_download</i>Download</a>
-              {% endif %}
-            </td>
-          </tr>
-          {% if result == 'vrt' %}
-          <tr>
-            <td></td>
-            <td></td>
-          </tr>
-          <tr>
-            <td></td>
-            <td></td>
-          </tr>
-          {% endif %}
-          {% endfor %}
-          {% else %}
-          {% for step in range(1, 4) %}
-          <tr>
-            <td>processing...</td>
-            <td></td>
-          </tr>
-          {% endfor %}
-          {% endif %}
-          {% endfor %}
-        </tbody>
-      </table>
-      </div>
     </div>
   </div>
 </div>