Simplify corpus and job list data structure.

app/static/css/nopaque.css

@@ -86,3 +86,61 @@ indicator will show up how the column is sorted right now.; */
   padding: 50px;
   z-index: 999; /* tmp fix */
 }
+
+.service[data-service]:before {
+  content: "help";
+}
+.service[data-service="merge_images"]:before {
+  content: "burst_mode";
+}
+.service[data-service="nlp"]:before {
+  content: "format_textdirection_l_to_r";
+}
+.service[data-service="ocr"]:before {
+  content: "find_in_page";
+}
+.status[data-status]:before {
+  content: attr(data-status);
+}
+.status[data-status] {
+  background-color: #f44336 !important; /* ~materialize "red" */
+}
+.status[data-status="analysing"] {
+  background-color: #4caf50 !important; /* ~materialize green */
+}
+.status[data-status="complete"] {
+  background-color: #4caf50 !important; /* ~materialize green */
+}
+.status[data-status="pending"] {
+  background-color: #ff9800 !important; /* ~materialize orange */
+}
+.status[data-status="preparable"] {
+  background-color: #ff9800 !important; /* ~materialize orange */
+}
+.status[data-status="prepared"] {
+  background-color: #4caf50 !important; /* ~materialize green */
+}
+.status[data-status="preparing"] {
+  background-color: #03a9f4 !important; /* ~materialize light-blue */
+}
+.status[data-status="removing"] {
+  background-color: #ff5722 !important; /* ~materialize deep-orange */
+}
+.status[data-status="running"] {
+  background-color: #ffc107 !important; /* ~materialize amber */
+}
+.status[data-status="start analysis"] {
+  background-color: #ffeb3b !important; /* ~materialize yellow */
+}
+.status[data-status="stopping"] {
+  background-color: #ff5722 !important; /* ~materialize deep-orange */
+}
+.status[data-status="stop analysis"] {
+  background-color: #ff5722 !important; /* ~materialize deep-orange */
+}
+.status[data-status="submitted"] {
+  background-color: #2196f3 !important; /* ~materialize blue */
+}
+.status[data-status="unprepared"] {
+  background-color: #9e9e9e !important; /* ~materialize grey */
+}

app/static/js/nopaque.lists.js

@@ -18,7 +18,6 @@ class CorpusList extends List {
       pathArray = operation.path.split("/").slice(1);
       switch(operation.op) {
         case "add":
-          if (pathArray.includes("results")) {break;}
           this.addCorpora([operation.value]);
           break;
         case "remove":
@@ -28,11 +27,7 @@ class CorpusList extends List {
           item = this.get("id", pathArray[0])[0];
           switch(pathArray[1]) {
             case "status":
-              corpusStatusElement = item.elm.querySelector(".status");
+              item.values({status: operation.value, _status: operation.value});
-              corpusStatusElement.classList.remove(...Object.values(CorpusList.STATUS_COLORS));
-              corpusStatusElement.classList.add(CorpusList.STATUS_COLORS[operation.value] || CorpusList.STATUS_COLORS['default']);
-              corpusStatusElement.innerHTML = operation.value;
-              item.values({status: operation.value});
               break;
             default:
               break;
@@ -45,87 +40,43 @@ class CorpusList extends List {
 
 
   addCorpora(corpora) {
-    this.add(corpora, items => {
+    let data = [];
-      for (let item of items) {item.elm = this.createElement(item);}
+    for (let corpus of corpora) {
-    });
+      data.push({description: corpus.description,
-    this.update();
+                 id: corpus.id,
+                 link: `/corpora/${corpus.id}`,
+                 status: corpus.status,
+                 title: corpus.title});
     }
-
+    this.add(data);
-
-  createElement(item) {
-    let columnElement, descriptionElement, rowElement, serviceElement,
-        serviceIconElement, titleElement, statusElement, values, viewElement,
-        viewIconElement;
-
-    // Gather values from item
-    values = item.values();
-
-    // Create a row elment, where all related information get stored
-    rowElement = document.createElement("tr");
-    rowElement.dataset.id = values.id;
-
-    // Create a column containing a service type identifying icon
-    columnElement = document.createElement("td");
-    serviceElement = document.createElement("a");
-    serviceElement.classList.add("btn-floating", "disabled");
-    serviceIconElement = document.createElement("i");
-    serviceIconElement.classList.add("material-icons");
-    serviceIconElement.innerText = "book";
-    serviceElement.appendChild(serviceIconElement);
-    columnElement.appendChild(serviceElement);
-    rowElement.appendChild(columnElement);
-
-    // Create a column containing the title and description
-    columnElement = document.createElement("td");
-    titleElement = document.createElement("b");
-    titleElement.classList.add("title");
-    titleElement.innerText = values.title;
-    descriptionElement = document.createElement("i");
-    descriptionElement.classList.add("description");
-    descriptionElement.innerText = values.description;
-    columnElement.appendChild(titleElement);
-    columnElement.appendChild(document.createElement("br"));
-    columnElement.appendChild(descriptionElement);
-    rowElement.appendChild(columnElement);
-
-    // Create a column containing the current status
-    columnElement = document.createElement("td");
-    statusElement = document.createElement("span");
-    statusElement.classList.add("badge", "new", "status", CorpusList.STATUS_COLORS[values.status] || CorpusList.STATUS_COLORS['default']);
-    statusElement.dataset.badgeCaption = "";
-    statusElement.innerText = values.status;
-    columnElement.appendChild(statusElement);
-    rowElement.appendChild(columnElement);
-
-    // Create a column containing a button leading to a details page
-    columnElement = document.createElement("td");
-    columnElement.classList.add("right-align");
-    viewElement = document.createElement("a");
-    viewElement.classList.add("waves-effect", "waves-light", "btn-small");
-    viewElement.href = `/corpora/${values.id}`;
-    viewElement.innerText = "View ";
-    viewIconElement = document.createElement("i");
-    viewIconElement.classList.add("material-icons", "right");
-    viewIconElement.innerText = "send";
-    viewElement.appendChild(viewIconElement);
-    columnElement.appendChild(viewElement);
-    rowElement.appendChild(columnElement);
-
-    return rowElement;
   }
 }
-CorpusList.DEFAULT_OPTIONS = {item: "<br>",
+CorpusList.DEFAULT_OPTIONS = {
+  item: `<tr>
+           <td>
+             <a class="btn-floating disabled">
+               <i class="material-icons">book</i>
+             </a>
+           </td>
+           <td>
+             <b class="title"></b><br>
+             <i class="description"></i>
+           </td>
+           <td>
+             <span class="badge new status" data-badge-caption=""></span>
+           </td>
+           <td class="right-align">
+             <a class="btn-small waves-effect waves-light link">View<i class="material-icons right">send</i>
+           </td>
+         </tr>`,
   page: 4,
   pagination: {innerWindow: 8, outerWindow: 1},
-                              valueNames: ["description", "title", {data: ["id"]}]};
+  valueNames: ["description",
-CorpusList.STATUS_COLORS = {"unprepared": "grey",
+               "title",
-                            "preparable": "orange",
+               {data: ["id"]},
-                            "preparing": "yellow",
+               {name: "link", attr: "href"},
-                            "prepared": "green",
+               {name: "status", attr: "data-status"}]};
-                            "start analysis": "yellow",
+
-                            "analysing": "green",
-                            "stop analysis": "red",
-                            "default": "red"};
 
 
 class JobList extends List {
@@ -158,10 +109,6 @@ class JobList extends List {
           item = this.get("id", pathArray[0])[0];
           switch(pathArray[1]) {
             case "status":
-              jobStatusElement = item.elm.querySelector(".status");
-              jobStatusElement.classList.remove(...Object.values(JobList.STATUS_COLORS));
-              jobStatusElement.classList.add(JobList.STATUS_COLORS[operation.value] || JobList.STATUS_COLORS['default']);
-              jobStatusElement.innerHTML = operation.value;
               item.values({status: operation.value});
               break;
             default:
@@ -175,90 +122,44 @@ class JobList extends List {
 
 
   addJobs(jobs) {
-    this.add(jobs, items => {
+    let data = [];
-      for (let item of items) {item.elm = this.createElement(item);}
+    for (let job of jobs) {
-    });
+      data.push({description: job.description,
-    this.update();
+                 id: job.id,
+                 link: `/jobs/${job.id}`,
+                 service: job.service,
+                 status: job.status,
+                 title: job.title});
     }
-
+    this.add(data);
-
-  createElement(item) {
-    let columnElement, descriptionElement, rowElement, serviceElement,
-        serviceIconElement, titleElement, statusElement, values, viewElement, viewIconElement;
-
-    // Gather values from item
-    values = item.values();
-
-    // Create a row elment, where all related information get stored
-    rowElement = document.createElement("tr");
-    rowElement.dataset.id = values.id;
-
-    // Create a column containing a service type identifying icon
-    columnElement = document.createElement("td");
-    serviceElement = document.createElement("a");
-    serviceElement.classList.add("btn-floating", "disabled");
-    serviceIconElement = document.createElement("i");
-    serviceIconElement.classList.add("material-icons");
-    serviceIconElement.innerText = JobList.SERVICE_ICONS[values.service] || JobList.SERVICE_ICONS['default'];
-    serviceElement.appendChild(serviceIconElement);
-    columnElement.appendChild(serviceElement);
-    rowElement.appendChild(columnElement);
-
-    // Create a column containing the title and description
-    columnElement = document.createElement("td");
-    titleElement = document.createElement("b");
-    titleElement.classList.add("title");
-    titleElement.innerText = values.title;
-    descriptionElement = document.createElement("i");
-    descriptionElement.classList.add("description");
-    descriptionElement.innerText = values.description;
-    columnElement.appendChild(titleElement);
-    columnElement.appendChild(document.createElement("br"));
-    columnElement.appendChild(descriptionElement);
-    rowElement.appendChild(columnElement);
-
-    // Create a column containing the current status
-    columnElement = document.createElement("td");
-    statusElement = document.createElement("span");
-    statusElement.classList.add("badge", "new", "status", JobList.STATUS_COLORS[values.status] || JobList.STATUS_COLORS['default']);
-    statusElement.dataset.badgeCaption = "";
-    statusElement.innerText = values.status;
-    columnElement.appendChild(statusElement);
-    rowElement.appendChild(columnElement);
-
-    // Create a column containing a button leading to a details page
-    columnElement = document.createElement("td");
-    columnElement.classList.add("right-align");
-    viewElement = document.createElement("a");
-    viewElement.classList.add("waves-effect", "waves-light", "btn-small");
-    viewElement.href = `/jobs/${values.id}`;
-    viewElement.innerText = "View ";
-    viewIconElement = document.createElement("i");
-    viewIconElement.classList.add("material-icons", "right");
-    viewIconElement.innerText = "send";
-    viewElement.appendChild(viewIconElement);
-    columnElement.appendChild(viewElement);
-    rowElement.appendChild(columnElement);
-
-    return rowElement;
   }
 }
-JobList.DEFAULT_OPTIONS = {item: "<br>",
+JobList.DEFAULT_OPTIONS = {
+  item: `<tr>
+           <td>
+             <a class="btn-floating disabled">
+               <i class="material-icons service"></i>
+             </a>
+           </td>
+           <td>
+             <b class="title"></b><br>
+             <i class="description"></i>
+           </td>
+           <td>
+             <span class="badge new status" data-badge-caption=""></span>
+           </td>
+           <td class="right-align">
+             <a class="btn-small link waves-effect waves-light">View<i class="material-icons right">send</i>
+           </td>
+         </tr>`,
   page: 4,
   pagination: {innerWindow: 8, outerWindow: 1},
-                           valueNames: ["description", "service", "status", "title", {data: ["id"]}]};
+  valueNames: ["description",
-JobList.SERVICE_ICONS = {"merge_images": "burst_mode",
+               "title",
-                         "nlp": "format_textdirection_l_to_r",
+               {data: ["id"]},
-                         "ocr": "find_in_page",
+               {name: "link", attr: "href"},
-                         "default": "help"};
+               {name: "service", attr: "data-service"},
-JobList.STATUS_COLORS = {"submitted": "blue",
+               {name: "status", attr: "data-status"}]};
-                         "preparing": "light-blue",
-                         "pending": "orange",
-                         "running": "amber",
-                         "complete": "green",
-                         "stopping": "orange",
-                         "removing": "deep-orange",
-                         "default": "red"};
 
 
 class ResultList extends List {

app/templates/corpora/corpus.html.j2

@@ -4,7 +4,7 @@
 <div class="col s12 m4">
   <h3 id="title">{{ corpus.title }}</h3>
   <p id="description">{{ corpus.description }}</p>
-  <a class="waves-effect waves-light btn" id="status"></a>
+  <a class="btn status waves-effect waves-light" id="status"></a>
 </div>
 
 <div class="col s12 m8">
@@ -150,9 +150,7 @@
       let analyseBtn, statusElement;
 
       statusElement = document.getElementById("status");
-      statusElement.classList.remove(...Object.values(CorpusList.STATUS_COLORS));
+      statusElement.dataset.status = status;
-      statusElement.classList.add(CorpusList.STATUS_COLORS[status] || CorpusList.STATUS_COLORS['default']);
-      statusElement.innerText = status;
       analyseBtn = document.getElementById('analyse');
       if (status === 'prepared' || status === 'analysing' || status === 'failed') {
         analyseBtn.classList.remove('hide', 'disabled');

app/templates/jobs/job.html.j2

@@ -4,7 +4,7 @@
 <div class="col s12 m4">
   <h3 id="title">{{ job.title }}</h3>
   <p id="description">{{ job.description }}</p>
-  <a class="waves-effect waves-light btn" id="status"></a>
+  <a class="btn status waves-effect waves-light" id="status"></a>
 </div>
 
 
@@ -269,9 +269,7 @@
       let statusElement;
 
       statusElement = document.getElementById("status");
-      statusElement.classList.remove(...Object.values(JobList.STATUS_COLORS));
+      statusElement.dataset.status = status;
-      statusElement.classList.add(JobList.STATUS_COLORS[status] || JobList.STATUS_COLORS['default']);
-      statusElement.innerText = status;
     }
   }