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");
+  }
+}

app/templates/base.html.j2

@@ -11,18 +11,25 @@
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='fonts/material-icons/material-icons.css') }}">
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/materialize.min.css') }}" media="screen,projection"/>
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/opaque.css') }}" media="screen,projection"/>
-    <script src="{{ url_for('static', filename='js/list.js') }}"></script>
+    {% if current_user.is_authenticated %}
     <script>
-      // Utils
+      var corpora = [
-      var updatePagination = function(list) {
+        {% for corpus in current_user.corpora.all() %}
-        pagination = list.listContainer.querySelector(".pagination");
+        {{ corpus.to_dict()|tojson }},
-        if (pagination.childElementCount <= 1) {
+        {% endfor %}
-          pagination.classList.add("hide");
+      ];
-        } else {
+      var jobs = [
-          pagination.classList.remove("hide");
+        {% for job in current_user.jobs.all() %}
-        }
+        {{ job.to_dict()|tojson }},
-      }
+        {% endfor %}
+      ];
     </script>
+    <script src="{{ url_for('static', filename='js/polls.js') }}"></script>
+    {% 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>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   </head>
   <body>

app/templates/main/dashboard.html.j2

@@ -27,15 +27,7 @@
         </div>
       </div>
     </div>
-    <div class="collection list">
+    <div class="collection list"></div>
-      {% for corpus in current_user.corpora.all() %}
-        <a href="#!" class="collection-item avatar">
-            <i class="material-icons circle">book</i>
-            <span class="title">{{ corpus.title }}</span>
-            <p>{{ corpus.description }}</p>
-        </a>
-      {% endfor %}
-    </div>
   </div>
 </div>
 <script>
@@ -44,6 +36,10 @@
                                         pagination: true});
   corpusList.on("filterComplete", updatePagination);
   corpusList.on("searchComplete", updatePagination);
+  createCorpusElements(corpusList);
+  subscribers.corpora.push(function() {
+    console.log('[Corpora]: Something changed.');
+  });
 </script>
 
 <div class="col s12">
@@ -85,103 +81,10 @@
                                       pagination: false});
   jobList.on("filterComplete", updatePagination);
   jobList.on("searchComplete", updatePagination);
-</script>
+  createJobElements(jobList);
-
+  subscribers.jobs.push(function() {
-<script>
+    console.log('[Jobs]: Something changed.');
-  const SERVICE_COLORS = {"nlp": "blue",
-                          "ocr": "green"}
-  const SERVICE_ICONS = {"nlp": "format_textdirection_l_to_r",
-                         "ocr": "find_in_page"}
-  const STATUS_COLORS = {"pending": "amber",
-                         "running": "indigo",
-                         "complete": "teal"}
-
-  var getJobsCallbackFunctions = [];
-
-  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(jobs) {
-      for (callbackFunction of getJobsCallbackFunctions) {
-        callbackFunction(jobs);
-      }
-    })
-    .catch(function(error) {
-      console.log('Request failed', error);
   });
-  }
-
-  setInterval(getJobs, 1000);
-
-  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 updateJobElement(job, jobElement) {
-    /*
-    if (jobElement.dataset.value != job.id) {
-      jobElement.dataset.value = job.id;
-      jobElement.href = `/jobs/${job.id}`;
-    }
-    */
-
-
-  }
-
-  function processJobs(jobs) {
-    for (job of jobs) {
-      jobElement = jobList.list.querySelectorAll('[data-key="id"]')
-                               .querySelector(`[data-value="${job.id}"]`);
-      console.log(jobElement);
-      if (jobElement) {
-        statusElement = jobElement.querySelector(".status");
-        currentStatus = statusElement.text
-        continue;
-      }
-      jobList.list.appendChild(createJobElement(job));
-    }
-    jobList.reIndex();
-    jobList.update();
-  }
-
-  getJobsCallbackFunctions.push(processJobs)
 </script>
 
 <div id="new-corpus-modal" class="modal">