Add javascript code for polling with update subscibers.

app/static/js/corpora.js

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,53 @@
+// 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.key = "id";
+  jobElement.dataset.value = job.id;
+  jobElement.href = `/jobs/${job.id}`;
+  jobDescriptionElement = document.createElement("p");
+  jobDescriptionElement.dataset.key = "description";
+  jobDescriptionElement.innerText = job.description;
+  jobServiceElement = document.createElement("i");
+  jobServiceElement.classList.add("circle", "material-icons", SERVICE_COLORS[job.service]);
+  jobServiceElement.dataset.key = "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);
+  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

@@ -0,0 +1,57 @@
+var subscribers = {"corpora": [], "jobs": []};
+
+
+function getCorpora() {
+  fetch("/api/v1.0/corpora")
+  .then(function(response) {
+    if (response.status >= 200 && response.status < 300) {
+      return Promise.resolve(response);
+    } else {
+      return Promise.reject(new Error(response.statusText));
+    }
+  })
+  .then(function(response) {
+      return response.json();
+  })
+  .then(function(data) {
+    if (JSON.stringify(corpora) != JSON.stringify(data)) {
+      corpora = data;
+      for (subscriber of subscribers.corpora) {
+        subscriber();
+      }
+    }
+  })
+  .catch(function(error) {
+    console.log('Request failed', error);
+  });
+}
+
+
+function getJobs() {
+  fetch("/api/v1.0/jobs")
+  .then(function(response) {
+    if (response.status >= 200 && response.status < 300) {
+      return Promise.resolve(response);
+    } else {
+      return Promise.reject(new Error(response.statusText));
+    }
+  })
+  .then(function(response) {
+      return response.json();
+  })
+  .then(function(data) {
+    if (JSON.stringify(jobs) != JSON.stringify(data)) {
+      jobs = data;
+      for (subscriber of subscribers.jobs) {
+        subscriber();
+      }
+    }
+  })
+  .catch(function(error) {
+    console.log('Request failed', error);
+  });
+}
+
+
+setInterval(getCorpora, 5000);
+setInterval(getJobs, 5000);

app/static/js/utils.js

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