Use custom List classes for corpora and job lists.

app/static/js/CorpusList.js

@@ -0,0 +1,79 @@
+class CorpusList extends List {
+  constructor(idOrElement, options, live=false) {
+    super(idOrElement, options);
+    this.createCorpusElements(corpora);
+    if (live) {
+      subscribers.corpora.push(this);
+    }
+  }
+
+
+  createCorpusElement(corpus) {
+    var corpusDescriptionElement, corpusElement, corpusIconElement,
+        corpusTitleElement;
+
+    corpusDescriptionElement = document.createElement("p");
+    corpusDescriptionElement.dataset.key = "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.href = `/corpora/${corpus.id}`;
+    corpusIconElement = document.createElement("i");
+    corpusIconElement.classList.add("circle", "material-icons");
+    corpusIconElement.innerText = "book";
+    corpusTitleElement = document.createElement("span");
+    corpusTitleElement.classList.add("title");
+    corpusTitleElement.dataset.key = "title";
+    corpusTitleElement.innerText = corpus.title;
+
+    corpusElement.appendChild(corpusIconElement);
+    corpusElement.appendChild(corpusTitleElement);
+    corpusElement.appendChild(corpusDescriptionElement);
+
+    return corpusElement;
+  }
+
+
+  createCorpusElements(corpora) {
+    var corpus;
+
+    for (corpus of corpora) {
+      this.list.appendChild(this.createCorpusElement(corpus));
+    }
+
+    this.reIndex();
+    this.update();
+    List.updatePagination(this);
+  }
+
+
+  corporaUpdateHandler(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]});
+        }
+      }
+    }
+  }
+}

app/static/js/JobList.js

@@ -0,0 +1,99 @@
+class JobList extends List {
+  constructor(idOrElement, options, live=false) {
+    super(idOrElement, options);
+    this.createJobElements(jobs);
+    if (live) {
+      subscribers.jobs.push(this);
+    }
+  }
+
+
+  createJobElement(job) {
+    var jobDescriptionElement, jobElement, jobServiceElement, jobStatusElement,
+        jobTitleElement;
+
+    jobDescriptionElement = document.createElement("p");
+    jobDescriptionElement.classList.add("description");
+    jobDescriptionElement.innerText = job.description;
+    jobElement = document.createElement("a");
+    jobElement.classList.add("avatar", "collection-item");
+    jobElement.dataset.id = job.id;
+    jobElement.href = `/jobs/${job.id}`;
+    jobServiceElement = document.createElement("i");
+    jobServiceElement.classList.add("circle", "material-icons", "service-icon", JobList.SERVICE_COLORS[job.service]);
+    jobServiceElement.innerText = JobList.SERVICE_ICONS[job.service];
+    jobStatusElement = document.createElement("span");
+    jobStatusElement.classList.add("badge", "new", "status", JobList.STATUS_COLORS[job.status]);
+    jobStatusElement.dataset.badgeCaption = "";
+    jobStatusElement.innerText = job.status;
+    jobTitleElement = document.createElement("span");
+    jobTitleElement.classList.add("title");
+    jobTitleElement.innerText = job.title;
+
+    jobElement.appendChild(jobServiceElement);
+    jobElement.appendChild(jobStatusElement);
+    jobElement.appendChild(jobTitleElement);
+    jobElement.appendChild(jobDescriptionElement);
+
+    return jobElement;
+  }
+
+
+  createJobElements(jobs) {
+    var job;
+
+    for (job of jobs) {
+      this.list.appendChild(this.createJobElement(job));
+    }
+
+    this.reIndex();
+    this.update();
+    List.updatePagination(this);
+  }
+
+
+  jobsUpdateHandler(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]});
+        }
+      }
+    }
+  }
+}
+
+JobList.SERVICE_COLORS = {"nlp": "blue",
+                          "ocr": "green",
+                          "default": "red"};
+JobList.SERVICE_ICONS = {"nlp": "format_textdirection_l_to_r",
+                         "ocr": "find_in_page",
+                         "default": "help"};
+JobList.STATUS_COLORS = {"pending": "amber",
+                         "running": "indigo",
+                         "complete": "teal",
+                         "default": "red"};

app/static/js/corpora.js

@@ -1,33 +0,0 @@
-function createCorpusElement(corpus) {
-  corpusElement = document.createElement("a");
-  corpusElement.classList.add("avatar", "collection-item");
-  corpusElement.dataset.key = "id";
-  corpusElement.dataset.value = corpus.id;
-  corpusElement.href = `/corpora/${corpus.id}`;
-  corpusDescriptionElement = document.createElement("p");
-  corpusDescriptionElement.dataset.key = "description";
-  corpusDescriptionElement.innerText = corpus.description;
-  corpusIconElement = document.createElement("i");
-  corpusIconElement.classList.add("circle", "material-icons");
-  corpusIconElement.innerText = "book";
-  corpusTitleElement = document.createElement("span");
-  corpusTitleElement.classList.add("title");
-  corpusTitleElement.dataset.key = "title";
-  corpusTitleElement.innerText = corpus.title;
-
-  corpusElement.appendChild(corpusIconElement);
-  corpusElement.appendChild(corpusTitleElement);
-  corpusElement.appendChild(corpusDescriptionElement);
-
-  return corpusElement;
-}
-
-
-function createCorpusElements(corpusList) {
-  for (corpus of corpora) {
-    corpusList.list.appendChild(createCorpusElement(corpus));
-  }
-  corpusList.reIndex();
-  corpusList.update();
-  updatePagination(corpusList);
-}

app/static/js/jobs.js

@@ -1,49 +0,0 @@
-// Job list code
-const SERVICE_COLORS = {"nlp": "blue",
-                        "ocr": "green",
-                        "default": "red"};
-const SERVICE_ICONS = {"nlp": "format_textdirection_l_to_r",
-                       "ocr": "find_in_page",
-                       "default": "help"};
-const STATUS_COLORS = {"pending": "amber",
-                       "running": "indigo",
-                       "complete": "teal",
-                       "default": "red"};
-
-
-function createJobElement(job) {
-  jobElement = document.createElement("a");
-  jobElement.classList.add("avatar", "collection-item");
-  jobElement.dataset.id = job.id;
-  jobElement.href = `/jobs/${job.id}`;
-  jobDescriptionElement = document.createElement("p");
-  jobDescriptionElement.classList.add("description");
-  jobDescriptionElement.innerText = job.description;
-  jobServiceElement = document.createElement("i");
-  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.innerText = job.status;
-  jobTitleElement = document.createElement("span");
-  jobTitleElement.classList.add("title");
-  jobTitleElement.innerText = job.title;
-
-  jobElement.appendChild(jobServiceElement);
-  jobElement.appendChild(jobStatusElement);
-  jobElement.appendChild(jobTitleElement);
-  jobElement.appendChild(jobDescriptionElement);
-
-  return jobElement;
-}
-
-
-function createJobElements(jobList) {
-  for (job of jobs) {
-    jobList.list.appendChild(createJobElement(job));
-  }
-  jobList.reIndex();
-  jobList.update();
-  updatePagination(jobList);
-}

app/static/js/polls.js

@@ -17,7 +17,7 @@ function getCorpora() {
     if (JSON.stringify(corpora) != JSON.stringify(data)) {
       corpora = data;
       for (subscriber of subscribers.corpora) {
-        subscriber();
+        subscriber.corporaUpdateHandler();
       }
     }
   })
@@ -44,7 +44,7 @@ function getJobs() {
     if (delta) {
       jobs = json;
       for (subscriber of subscribers.jobs) {
-        subscriber(delta);
+        subscriber.jobsUpdateHandler(delta);
       }
     }
   })

app/static/js/utils.js

@@ -1,5 +1,4 @@
-// List.js utils
-var updatePagination = function(list) {
+List.updatePagination = function(list) {
   pagination = list.listContainer.querySelector(".pagination");
   if (pagination.childElementCount <= 1) {
     pagination.classList.add("hide");

app/templates/base.html.j2

@@ -29,8 +29,8 @@
     {% endif %}
     <script src="{{ url_for('static', filename='js/list.js') }}"></script>
     <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/corpora.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/jobs.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/CorpusList.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/JobList.js') }}"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   </head>
   <body>

app/templates/main/dashboard.html.j2

@@ -31,15 +31,13 @@
   </div>
 </div>
 <script>
-  corpusList = new List("corpus-list", {valueNames: ["title"],
+  var corpusListOptions = {item: '<a><span class="title"></span><span class="description"></span></a>',
                            page: 4,
-                                        pagination: true});
-  corpusList.on("filterComplete", updatePagination);
-  corpusList.on("searchComplete", updatePagination);
-  createCorpusElements(corpusList);
-  subscribers.corpora.push(function() {
-    console.log('[Corpora]: Something changed.');
-  });
+                           pagination: true,
+                           valueNames: ["description", "title", {data: ["id"]}]}
+  var corpusList = new CorpusList("corpus-list", corpusListOptions, true);
+  corpusList.on("filterComplete", List.updatePagination);
+  corpusList.on("searchComplete", List.updatePagination);
 </script>
 
 <div class="col s12">
@@ -76,45 +74,13 @@
   </div>
 </div>
 <script>
-  var template = '<a><span class="title"></span></a>'
-  var jobList = new List("job-list", {item: '<a><span class="title"></span></a>',
+  jobListOptions = {item: '<a><span class="title"></span><span class="description"></span></a>',
                     page: 4,
                     pagination: true,
-                                      valueNames: ["description",
-                                                   "title",
-                                                   {data: ["id"]}]});
-  jobList.on("filterComplete", updatePagination);
-  jobList.on("searchComplete", updatePagination);
-  createJobElements(jobList);
-  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]});
-        }
-      }
-    }
-  });
+                    valueNames: ["description", "title", {data: ["id"]}]}
+  var jobList = new JobList("job-list", jobListOptions, true);
+  jobList.on("filterComplete", List.updatePagination);
+  jobList.on("searchComplete", List.updatePagination);
 </script>
 
 <div id="new-corpus-modal" class="modal">