Only handle difference of changes to the job list.

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>