From 8ed7697a634ca564591192082c9b2265db318ade Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Mon, 2 Sep 2019 15:25:30 +0200
Subject: [PATCH] Add live information updates to job page.

---
 app/templates/main/jobs/job.html.j2 | 123 +++++++++++++++++++++++-----
 1 file changed, 104 insertions(+), 19 deletions(-)

diff --git a/app/templates/main/jobs/job.html.j2 b/app/templates/main/jobs/job.html.j2
index 2f97cc0f..ea3dd9a0 100644
--- a/app/templates/main/jobs/job.html.j2
+++ b/app/templates/main/jobs/job.html.j2
@@ -1,19 +1,104 @@
 {% extends "base.html.j2" %}
 
 {% block page_content %}
+<script>
+  var url = window.location.pathname;
+  var JOB_ID = url.substring(url.lastIndexOf('/') + 1);
+
+  class InformationUpdater {
+    constructor(jobId) {
+      this.jobId = jobId;
+      jobsSubscribers.push(this);
+    }
+
+    _init() {
+      var creationDateElement, descriptionElement, endDateElement,
+          memMbElement, nCoresElement, serviceElement, serviceArgsElement,
+          serviceVersionElement, statusColor, statusElement, titleElement;
+
+      this.job = jobs[this.jobId];
+      creationDateElement = document.getElementById("creation-date");
+      creationDateElement.value = this.job.creation_date;
+      descriptionElement = document.getElementById("description");
+      descriptionElement.innerHTML = this.job.description;
+      endDateElement = document.getElementById("end-date");
+      endDateElement.value = this.job.end_date;
+      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;
+
+      M.updateTextFields();
+    }
+
+    _update(patch) {
+      var newStatusColor, operation, pathArray, status, statusColor,
+          updatedElement;
+
+      for (operation of patch) {
+        /* "/jobId/valueName" -> ["jobId", "valueName"] */
+        pathArray = operation.path.split("/").slice(1);
+        if (pathArray[0] != this.jobId) {continue;}
+        switch(operation.op) {
+          case "add":
+            break;
+          case "delete":
+            location.reload();
+            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");
+                updatedElement.innerHTML = operation.value;
+                M.updateTextFields();
+                break;
+              case "status":
+                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;
+            }
+            break;
+          default:
+            break;
+        }
+      }
+    }
+  }
+  var informationUpdater = new InformationUpdater(JOB_ID);
+</script>
+
 <div class="col s12 m4">
-  <h3>{{ job.title }}</h3>
-  <p>{{ job.description }}</p>
-  {% if job.status == 'pending' %}
-    {% set status_color = 'amber' %}
-  {% elif job.status =='running' %}
-    {% set status_color = 'indigo' %}
-  {% elif job.status =='complete' %}
-    {% set status_color = 'teal' %}
-  {% else %}
-    {% set status_color = 'red' %}
-  {% endif %}
-  <p><a class="waves-effect waves-light btn {{ status_color }}">{{ job.status }}</a></p>
+  <h3 id="title"></h3>
+  <p id="description"></p>
+  <a class="waves-effect waves-light btn" id="status"></a>
 </div>
 
 <div class="col s12 m8">
@@ -23,13 +108,13 @@
       <div class="row">
         <div class="col s12 m6">
           <div class="input-field">
-            <input disabled value="{{ job.creation_date }}" id="creation-date" type="text" class="validate">
+            <input disabled value="" id="creation-date" type="text" class="validate">
             <label for="creation-date">Creation date</label>
           </div>
         </div>
         <div class="col s12 m6">
           <div class="input-field">
-            <input disabled value="{{ job.end_date }}" id="end-date" type="text" class="validate">
+            <input disabled value="" id="end-date" type="text" class="validate">
             <label for="end-date">End date</label>
           </div>
         </div>
@@ -38,13 +123,13 @@
       <div class="row">
         <div class="col s12 m6">
           <div class="input-field">
-            <input disabled value="{{ job.mem_mb }}" id="mem-mb" type="text" class="validate">
+            <input disabled value="" id="mem-mb" type="text" class="validate">
             <label for="mem-mb">Memory</label>
           </div>
         </div>
         <div class="col s12 m6">
           <div class="input-field">
-            <input disabled value="{{ job.n_cores }}" id="n-cores" type="text" class="validate">
+            <input disabled value="" id="n-cores" type="text" class="validate">
             <label for="n-cores">CPU cores</label>
           </div>
         </div>
@@ -53,19 +138,19 @@
       <div class="row">
         <div class="col s12 m4">
           <div class="input-field">
-            <input disabled value="{{ job.service }}" id="service" type="text" class="validate">
+            <input disabled value="" id="service" type="text" class="validate">
             <label for="service">Service</label>
           </div>
         </div>
         <div class="col s12 m4">
           <div class="input-field">
-            <input disabled value="{{ job.service_args|escape }}" id="service-args" type="text" class="validate">
+            <input disabled value="" id="service-args" type="text" class="validate">
             <label for="service-args">Service arguments</label>
           </div>
         </div>
         <div class="col s12 m4">
           <div class="input-field">
-            <input disabled value="{{ job.service_version }}" id="service-version" type="text" class="validate">
+            <input disabled value="" id="service-version" type="text" class="validate">
             <label for="service-version">Service version</label>
           </div>
         </div>