diff --git a/app/static/js/CorpusList.js b/app/static/js/CorpusList.js
index 5cf949ec..a0e5932a 100644
--- a/app/static/js/CorpusList.js
+++ b/app/static/js/CorpusList.js
@@ -15,24 +15,29 @@ class CorpusList extends List {
_update(patch) {
- var item, operation, pathArray;
+ let item, corpusStatusElement, operation, pathArray;
for (operation of patch) {
/* "/corpusId/valueName" -> ["corpusId", "valueName"] */
pathArray = operation.path.split("/").slice(1);
switch(operation.op) {
case "add":
+ if (pathArray.includes("results")) {break;}
this.addCorpus(operation.value);
- this.update()
- List.updatePagination(this);
+ this.update();
break;
case "remove":
this.remove("id", pathArray[0]);
- List.updatePagination(this);
break;
case "replace":
item = this.get("id", pathArray[0])[0];
switch(pathArray[1]) {
+ case "status":
+ corpusStatusElement = item.elm.querySelector(".status");
+ corpusStatusElement.classList.remove(...Object.values(CorpusList.STATUS_COLORS));
+ corpusStatusElement.classList.add(CorpusList.STATUS_COLORS[operation.value] || CorpusList.STATUS_COLORS['default']);
+ corpusStatusElement.innerHTML = operation.value;
+ break;
default:
break;
}
@@ -44,32 +49,65 @@ class CorpusList extends List {
addCorpus(corpus) {
- var corpusDescriptionElement, corpusElement, corpusIconElement,
- corpusTitleElement;
+ let rowElement, columnElement, serviceElement, serviceIconElement, titleElement, descriptionElement, statusElement, viewElement, viewIconElement;
- corpusDescriptionElement = document.createElement("p");
- corpusDescriptionElement.classList.add("description");
- corpusDescriptionElement.innerText = corpus.description;
- corpusElement = document.createElement("a");
- corpusElement.classList.add("avatar", "collection-item");
- corpusElement.dataset.id = 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;
+ // Create a row elment, where all related information get stored
+ rowElement = document.createElement("tr");
+ rowElement.dataset.id = corpus.id;
- corpusElement.appendChild(corpusIconElement);
- corpusElement.appendChild(corpusTitleElement);
- corpusElement.appendChild(corpusDescriptionElement);
+ // 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);
- this.add(
- [{description: corpus.description, id: corpus.id, title: corpus.title}],
- function(items) {items[0].elm = corpusElement;}
- );
+ // Create a column containing the title and description
+ columnElement = document.createElement("td");
+ titleElement = document.createElement("b");
+ titleElement.classList.add("title");
+ titleElement.innerText = corpus.title;
+ descriptionElement = document.createElement("i");
+ descriptionElement.classList.add("description");
+ descriptionElement.innerText = corpus.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[corpus.status] || CorpusList.STATUS_COLORS['default']);
+ statusElement.dataset.badgeCaption = "";
+ statusElement.innerText = corpus.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/${corpus.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);
+
+ /*
+ * Add an entry to the List.js datastructure and immediatly replace the
+ * generic DOM element with our own one created above.
+ */
+ this.add([{description: corpus.description, id: corpus.id, title: corpus.title}],
+ function(items) {items[0].elm = rowElement;});
}
}
CorpusList.DEFAULT_OPTIONS = {item: `
diff --git a/app/static/js/JobList.js b/app/static/js/JobList.js
index aa03f80d..7915a68c 100644
--- a/app/static/js/JobList.js
+++ b/app/static/js/JobList.js
@@ -15,8 +15,7 @@ class JobList extends List {
_update(patch) {
- var item, jobStatusElement, newStatusColor, operation, pathArray, status,
- statusColor;
+ let item, jobStatusElement, operation, pathArray;
for (operation of patch) {
/* "/jobId/valueName" -> ["jobId", "valueName"] */
@@ -35,13 +34,8 @@ class JobList extends List {
switch(pathArray[1]) {
case "status":
jobStatusElement = item.elm.querySelector(".status");
- status = jobStatusElement.innerHTML;
- statusColor = JobList.STATUS_COLORS[status]
- || JobList.STATUS_COLORS['default'];
- newStatusColor = JobList.STATUS_COLORS[operation.value]
- || JobList.STATUS_COLORS['default'];
- jobStatusElement.classList.remove(statusColor);
- jobStatusElement.classList.add(newStatusColor);
+ jobStatusElement.classList.remove(...Object.values(JobList.STATUS_COLORS));
+ jobStatusElement.classList.add(JobList.STATUS_COLORS[operation.value] || JobList.STATUS_COLORS['default']);
jobStatusElement.innerHTML = operation.value;
break;
default:
@@ -55,43 +49,65 @@ class JobList extends List {
addJob(job) {
- var jobDescriptionElement, jobElement, jobServiceElement, jobStatusElement,
- jobTitleElement, serviceColor, serviceIcon, statusColor;
+ let rowElement, columnElement, serviceElement, serviceIconElement, titleElement, descriptionElement, statusElement, viewElement, viewIconElement;
- 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}`;
- serviceColor = JobList.SERVICE_COLORS[job.service]
- || JobList.SERVICE_COLORS['default'];
- serviceIcon = JobList.SERVICE_ICONS[job.service]
- || JobList.SERVICE_ICONS['default'];
- jobServiceElement = document.createElement("i");
- jobServiceElement.classList.add("circle", "material-icons", "service-icon",
- serviceColor);
- jobServiceElement.innerText = serviceIcon;
- statusColor = JobList.STATUS_COLORS[job.status]
- || JobList.STATUS_COLORS['default'];
- jobStatusElement = document.createElement("span");
- jobStatusElement.classList.add("badge", "new", "status", statusColor);
- jobStatusElement.dataset.badgeCaption = "";
- jobStatusElement.innerText = job.status;
- jobTitleElement = document.createElement("span");
- jobTitleElement.classList.add("title");
- jobTitleElement.innerText = job.title;
+ // Create a row elment, where all related information get stored
+ rowElement = document.createElement("tr");
+ rowElement.dataset.id = job.id;
- jobElement.appendChild(jobServiceElement);
- jobElement.appendChild(jobStatusElement);
- jobElement.appendChild(jobTitleElement);
- jobElement.appendChild(jobDescriptionElement);
+ // 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[job.service] || JobList.SERVICE_ICONS['default'];
+ serviceElement.appendChild(serviceIconElement);
+ columnElement.appendChild(serviceElement);
+ rowElement.appendChild(columnElement);
- this.add(
- [{description: job.description, id: job.id, title: job.title}],
- function(items) {items[0].elm = jobElement;}
- );
+ // Create a column containing the title and description
+ columnElement = document.createElement("td");
+ titleElement = document.createElement("b");
+ titleElement.classList.add("title");
+ titleElement.innerText = job.title;
+ descriptionElement = document.createElement("i");
+ descriptionElement.classList.add("description");
+ descriptionElement.innerText = job.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[job.status] || JobList.STATUS_COLORS['default']);
+ statusElement.dataset.badgeCaption = "";
+ statusElement.innerText = job.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/${job.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);
+
+ /*
+ * Add an entry to the List.js datastructure and immediatly replace the
+ * generic DOM element with our own one created above.
+ */
+ this.add([{description: job.description, id: job.id, title: job.title}],
+ function(items) {items[0].elm = rowElement;});
}
}
JobList.DEFAULT_OPTIONS = {item: `
@@ -101,10 +117,6 @@ JobList.DEFAULT_OPTIONS = {item: `
page: 4,
pagination: {innerWindow: 8, outerWindow: 1},
valueNames: ["description", "title", {data: ["id"]}]};
-JobList.SERVICE_COLORS = {"merge_images": "amber",
- "nlp": "blue",
- "ocr": "green",
- "default": "red"};
JobList.SERVICE_ICONS = {"merge_images": "burst_mode",
"nlp": "format_textdirection_l_to_r",
"ocr": "find_in_page",
diff --git a/app/templates/main/dashboard.html.j2 b/app/templates/main/dashboard.html.j2
index 7b73b643..5640708a 100644
--- a/app/templates/main/dashboard.html.j2
+++ b/app/templates/main/dashboard.html.j2
@@ -1,84 +1,75 @@
{% extends "limited_width.html.j2" %}
{% block page_content %}
-
+
My Corpora
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-
-
-
-
-
-
-
- search
-
- Search corpus
-
-
-
-
-
-
-
+
+
+
+
+ search
+
+ Search corpus
+
+
+
+
-
-
-
My Jobs
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
-
-
-
-
-
-
-
- search
-
- Search job
-
-
-
-
-
-
-
+
+
+
+
+ search
+
+ Search job
+
+
+
+
-
-
-
+
+
+
Job types
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+
+
+
+