From 74c863e0f7e10dd8303bf8673b26b05f38b59011 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Mon, 19 Aug 2019 17:09:01 +0200
Subject: [PATCH] Only handle difference of changes to the job list.

---
 app/static/js/jobs.js                | 10 +++-----
 app/static/js/polls.js               |  9 ++++---
 app/templates/main/dashboard.html.j2 | 38 +++++++++++++++++++++++++---
 3 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/app/static/js/jobs.js b/app/static/js/jobs.js
index 97fd1afa..fbdb993e 100644
--- a/app/static/js/jobs.js
+++ b/app/static/js/jobs.js
@@ -14,24 +14,20 @@ const STATUS_COLORS = {"pending": "amber",
 function createJobElement(job) {
   jobElement = document.createElement("a");
   jobElement.classList.add("avatar", "collection-item");
-  jobElement.dataset.key = "id";
-  jobElement.dataset.value = job.id;
+  jobElement.dataset.id = job.id;
   jobElement.href = `/jobs/${job.id}`;
   jobDescriptionElement = document.createElement("p");
-  jobDescriptionElement.dataset.key = "description";
+  jobDescriptionElement.classList.add("description");
   jobDescriptionElement.innerText = job.description;
   jobServiceElement = document.createElement("i");
-  jobServiceElement.classList.add("circle", "material-icons", SERVICE_COLORS[job.service]);
-  jobServiceElement.dataset.key = "service";
+  jobServiceElement.classList.add("circle", "material-icons", "service-icon", SERVICE_COLORS[job.service]);
   jobServiceElement.innerText = SERVICE_ICONS[job.service];
   jobStatusElement = document.createElement("span");
   jobStatusElement.classList.add("badge", "new", "status", STATUS_COLORS[job.status]);
   jobStatusElement.dataset.badgeCaption = "";
-  jobStatusElement.dataset.key = "status";
   jobStatusElement.innerText = job.status;
   jobTitleElement = document.createElement("span");
   jobTitleElement.classList.add("title");
-  jobTitleElement.dataset.key = "title";
   jobTitleElement.innerText = job.title;
 
   jobElement.appendChild(jobServiceElement);
diff --git a/app/static/js/polls.js b/app/static/js/polls.js
index c8e8ce34..a4ae2c00 100644
--- a/app/static/js/polls.js
+++ b/app/static/js/polls.js
@@ -39,11 +39,12 @@ function getJobs() {
   .then(function(response) {
       return response.json();
   })
-  .then(function(data) {
-    if (JSON.stringify(jobs) != JSON.stringify(data)) {
-      jobs = data;
+  .then(function(json) {
+    var delta = jsondiffpatch.diff(jobs, json);
+    if (delta) {
+      jobs = json;
       for (subscriber of subscribers.jobs) {
-        subscriber();
+        subscriber(delta);
       }
     }
   })
diff --git a/app/templates/main/dashboard.html.j2 b/app/templates/main/dashboard.html.j2
index 94c97662..d77865ff 100644
--- a/app/templates/main/dashboard.html.j2
+++ b/app/templates/main/dashboard.html.j2
@@ -76,14 +76,44 @@
   </div>
 </div>
 <script>
-  var jobList = new List("job-list", {valueNames: ["title"],
+  var template = '<a><span class="title"></span></a>'
+  var jobList = new List("job-list", {item: '<a><span class="title"></span></a>',
                                       page: 4,
-                                      pagination: false});
+                                      pagination: true,
+                                      valueNames: ["description",
+                                                   "title",
+                                                   {data: ["id"]}]});
   jobList.on("filterComplete", updatePagination);
   jobList.on("searchComplete", updatePagination);
   createJobElements(jobList);
-  subscribers.jobs.push(function() {
-    console.log('[Jobs]: Something changed.');
+  subscribers.jobs.push(function(delta) {
+    for (key in delta) {
+      if (key === "_t") {continue;}
+      if (key.startsWith("_")) {
+        jobList.remove("id", delta[key][0].id);
+      } else if (Array.isArray(delta[key])) {
+        jobElement = createJobElement(delta[key][0]);
+        listItem = jobList.add({"description": delta[key][0].description,
+                                "title": delta[key][0].title,
+                                "id": delta[key][0].id})[0];
+        listItem.elm.replaceWith(jobElement);
+        listItem.elm = jobElement;
+      } else {
+        var listItem = jobList.get("id", jobs[parseInt(key)].id)[0];
+        if (delta[key]["status"]) {
+          var jobStatusElement = listItem.elm.querySelector(".status");
+          jobStatusElement.classList.remove(STATUS_COLORS[delta[key]["status"][0]]);
+          jobStatusElement.classList.add(STATUS_COLORS[delta[key]["status"][1]]);
+          jobStatusElement.innerHTML = delta[key]["status"][1];
+        }
+        if (delta[key]["description"]) {
+          listItem.values({"description": delta[key]["description"][1]});
+        }
+        if (delta[key]["title"]) {
+          listItem.values({"title": delta[key]["title"][1]});
+        }
+      }
+    }
   });
 </script>