Use JSON patch the correct way!

app/static/js/CorpusList.js

@@ -5,30 +5,59 @@ class CorpusList extends List {
   }
 
 
-  init() {
-    var corpus;
-
-    for (corpus of corpora) {
-      this.list.appendChild(this.createCorpusElement(corpus));
+  _init() {
+    for (let [id, corpus] of Object.entries(corpora)) {
+      this.addCorpus(corpus);
     }
 
-    this.reIndex();
-    this.update();
     List.updatePagination(this);
   }
 
 
-  createCorpusElement(corpus) {
+  _update(patch) {
+    var item, operation, pathArray, valueName;
+
+    for (operation of patch) {
+      pathArray = operation.path.split("/").slice(1);
+      switch(operation.op) {
+        case "add":
+          this.addCorpus(operation.value);
+          break;
+        case "remove":
+          if (pathArray.length != 1) {break;}
+          this.remove("id", pathArray[0]);
+          break;
+        case "replace":
+          if (pathArray.length != 2) {break;}
+          item = this.get("id", pathArray[0])[0];
+          valueName = pathArray[1];
+          switch(valueName) {
+            case "description":
+              item.values({"description": operation.value});
+              break;
+            case "title":
+              item.values({"title": operation.value});
+              break;
+            default:
+              break;
+          }
+        default:
+          break;
+      }
+    }
+  }
+
+
+  addCorpus(corpus) {
     var corpusDescriptionElement, corpusElement, corpusIconElement,
         corpusTitleElement;
 
     corpusDescriptionElement = document.createElement("p");
-    corpusDescriptionElement.dataset.key = "description";
+    corpusDescriptionElement.classList.add("description");
     corpusDescriptionElement.innerText = corpus.description;
     corpusElement = document.createElement("a");
     corpusElement.classList.add("avatar", "collection-item");
-    corpusElement.dataset.key = "id";
-    corpusElement.dataset.value = corpus.id;
+    corpusElement.dataset.id = corpus.id;
     corpusElement.href = `/corpora/${corpus.id}`;
     corpusIconElement = document.createElement("i");
     corpusIconElement.classList.add("circle", "material-icons");
@@ -42,35 +71,9 @@ class CorpusList extends List {
     corpusElement.appendChild(corpusTitleElement);
     corpusElement.appendChild(corpusDescriptionElement);
 
-    return corpusElement;
-  }
-
-
-  updateWithPatch(delta) {
-    var corpusElement, key, listItem;
-
-    for (key in delta) {
-      if (key === "_t") {continue;}
-      if (key.startsWith("_")) {
-        this.remove("id", delta[key][0].id);
-      } else if (Array.isArray(delta[key])) {
-        corpusElement = this.createCorpusElement(delta[key][0]);
-        listItem = this.add({"description": delta[key][0].description,
-                             "title": delta[key][0].title,
-                             "id": delta[key][0].id})[0];
-        if (listItem.elm) {
-          listItem.elm.replaceWith(corpusElement);
-        }
-        listItem.elm = corpusElement;
-      } else {
-        listItem = this.get("id", corpora[parseInt(key)].id)[0];
-        if (delta[key]["description"]) {
-          listItem.values({"description": delta[key]["description"][1]});
-        }
-        if (delta[key]["title"]) {
-          listItem.values({"title": delta[key]["title"][1]});
-        }
-      }
-    }
+    this.add(
+      [{description: corpus.description, id: corpus.id, title: corpus.title}],
+      function(items) {items[0].elm = corpusElement;}
+    );
   }
 }

app/static/js/JobList.js

@@ -5,22 +5,69 @@ class JobList extends List {
   }
 
 
-  init() {
-    var job;
-
-    for (job of jobs) {
-      this.list.appendChild(this.createJobElement(job));
+  _init() {
+    for (let [id, job] of Object.entries(jobs)) {
+      this.addJob(job);
     }
 
-    this.reIndex();
-    this.update();
     List.updatePagination(this);
   }
 
 
-  createJobElement(job) {
+  _update(patch) {
+    var item, jobStatusElement, newStatusColor, operation, pathArray, status,
+        statusColor, valueName;
+
+    for (operation of patch) {
+      pathArray = operation.path.split("/").slice(1);
+      switch(operation.op) {
+        case "add":
+          this.addJob(operation.value);
+          break;
+        case "remove":
+          if (pathArray.length != 1) {break;}
+          this.remove("id", pathArray[0]);
+          break;
+        case "replace":
+          if (pathArray.length != 2) {break;}
+          item = this.get("id", pathArray[0])[0];
+          valueName = pathArray[1];
+          switch(valueName) {
+            case "description":
+              item.values({"description": operation.value});
+              break;
+            case "status":
+              jobStatusElement = item.elm.querySelector(".status");
+              status = jobStatusElement.innerHTML;
+              if (JobList.STATUS_COLORS.hasOwnProperty(status)) {
+                statusColor = JobList.STATUS_COLORS[status];
+              } else {
+                statusColor = JobList.STATUS_COLORS['default'];
+              }
+              if (JobList.STATUS_COLORS.hasOwnProperty(operation.value)) {
+                newStatusColor = JobList.STATUS_COLORS[operation.value];
+              } else {
+                newStatusColor = JobList.STATUS_COLORS['default'];
+              }
+              jobStatusElement.classList.remove(statusColor);
+              jobStatusElement.classList.add(newStatusColor);
+              jobStatusElement.innerHTML = operation.value;
+            case "title":
+              item.values({"title": operation.value});
+              break;
+            default:
+              break;
+          }
+        default:
+          break;
+      }
+    }
+  }
+
+
+  addJob(job) {
     var jobDescriptionElement, jobElement, jobServiceElement, jobStatusElement,
-        jobTitleElement;
+        jobTitleElement, serviceColor, serviceIcon, statusColor;
 
     jobDescriptionElement = document.createElement("p");
     jobDescriptionElement.classList.add("description");
@@ -29,11 +76,26 @@ class JobList extends List {
     jobElement.classList.add("avatar", "collection-item");
     jobElement.dataset.id = job.id;
     jobElement.href = `/jobs/${job.id}`;
+    if (JobList.SERVICE_COLORS.hasOwnProperty(job.service)) {
+      serviceColor = JobList.SERVICE_COLORS[job.service];
+    } else {
+      serviceColor = JobList.SERVICE_COLORS['default'];
+    }
+    if (JobList.SERVICE_ICONS.hasOwnProperty(job.service)) {
+      serviceIcon = JobList.SERVICE_ICONS[job.service];
+    } else {
+      serviceIcon = JobList.SERVICE_ICONS['default'];
+    }
     jobServiceElement = document.createElement("i");
-    jobServiceElement.classList.add("circle", "material-icons", "service-icon", JobList.SERVICE_COLORS[job.service]);
-    jobServiceElement.innerText = JobList.SERVICE_ICONS[job.service];
+    jobServiceElement.classList.add("circle", "material-icons", "service-icon", serviceColor);
+    jobServiceElement.innerText = serviceIcon;
+    if (JobList.STATUS_COLORS.hasOwnProperty(job.status)) {
+      statusColor = JobList.STATUS_COLORS[job.status];
+    } else {
+      statusColor = JobList.STATUS_COLORS['default'];
+    }
     jobStatusElement = document.createElement("span");
-    jobStatusElement.classList.add("badge", "new", "status", JobList.STATUS_COLORS[job.status]);
+    jobStatusElement.classList.add("badge", "new", "status", statusColor);
     jobStatusElement.dataset.badgeCaption = "";
     jobStatusElement.innerText = job.status;
     jobTitleElement = document.createElement("span");
@@ -45,45 +107,12 @@ class JobList extends List {
     jobElement.appendChild(jobTitleElement);
     jobElement.appendChild(jobDescriptionElement);
 
-    return jobElement;
-  }
-
-
-  updateWithPatch(delta) {
-    var jobElement, jobStatusElement, key, listItem;
-
-    for (key in delta) {
-      if (key === "_t") {continue;}
-      if (key.startsWith("_")) {
-        this.remove("id", delta[key][0].id);
-      } else if (Array.isArray(delta[key])) {
-        jobElement = this.createJobElement(delta[key][0]);
-        listItem = this.add({"description": delta[key][0].description,
-                             "title": delta[key][0].title,
-                             "id": delta[key][0].id})[0];
-        if (listItem.elm) {
-          listItem.elm.replaceWith(jobElement);
-        }
-        listItem.elm = jobElement;
-      } else {
-        listItem = this.get("id", jobs[parseInt(key)].id)[0];
-        if (delta[key]["status"]) {
-          jobStatusElement = listItem.elm.querySelector(".status");
-          jobStatusElement.classList.remove(JobList.STATUS_COLORS[delta[key]["status"][0]]);
-          jobStatusElement.classList.add(JobList.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]});
-        }
-      }
-    }
+    this.add(
+      [{description: job.description, id: job.id, title: job.title}],
+      function(items) {items[0].elm = jobElement;}
+    );
   }
 }
-
 JobList.SERVICE_COLORS = {"nlp": "blue",
                           "ocr": "green",
                           "default": "red"};