From bd8d0c14c35c896c9f45c73af7f536faec61bea2 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch
Date: Wed, 29 Jan 2020 10:50:31 +0100
Subject: [PATCH] Merge list classes
---
app/static/js/CorpusList.js | 126 ----------------
app/static/js/JobList.js | 131 -----------------
app/static/js/nopaque.lists.js | 261 +++++++++++++++++++++++++++++++++
app/templates/base.html.j2 | 3 +-
4 files changed, 262 insertions(+), 259 deletions(-)
delete mode 100644 app/static/js/CorpusList.js
delete mode 100644 app/static/js/JobList.js
create mode 100644 app/static/js/nopaque.lists.js
diff --git a/app/static/js/CorpusList.js b/app/static/js/CorpusList.js
deleted file mode 100644
index f76cee96..00000000
--- a/app/static/js/CorpusList.js
+++ /dev/null
@@ -1,126 +0,0 @@
-class CorpusList extends List {
- constructor(idOrElement, subscriberList, options={}) {
- super(idOrElement, {...CorpusList.DEFAULT_OPTIONS, ...options});
- subscriberList.push(this);
- }
-
-
- _init(corpora) {
- for (let [id, corpus] of Object.entries(corpora)) {
- this.addCorpus(corpus);
- }
-
- this.update();
- }
-
-
- _update(patch) {
- 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();
- break;
- case "remove":
- this.remove("id", pathArray[0]);
- 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;
- item.values({status: operation.value});
- break;
- default:
- break;
- }
- default:
- break;
- }
- }
- }
-
-
- addCorpus(corpus) {
- let rowElement, columnElement, serviceElement, serviceIconElement, titleElement, descriptionElement, statusElement, viewElement, viewIconElement;
-
- // Create a row elment, where all related information get stored
- rowElement = document.createElement("tr");
- rowElement.dataset.id = corpus.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 = 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,
- status: corpus.status, title: corpus.title}],
- function(items) {items[0].elm = rowElement;});
- }
-}
-CorpusList.DEFAULT_OPTIONS = {item: "",
- page: 4,
- pagination: {innerWindow: 8, outerWindow: 1},
- valueNames: ["description", "title", {data: ["id"]}]};
-CorpusList.STATUS_COLORS = {"unprepared": "grey",
- "preparable": "orange",
- "preparing": "yellow",
- "prepared": "green",
- "start analysis": "yellow",
- "analysing": "green",
- "stop analysis": "red",
- "default": "red"};
diff --git a/app/static/js/JobList.js b/app/static/js/JobList.js
deleted file mode 100644
index 31977308..00000000
--- a/app/static/js/JobList.js
+++ /dev/null
@@ -1,131 +0,0 @@
-class JobList extends List {
- constructor(idOrElement, subscriberList, options={}) {
- super(idOrElement, {...JobList.DEFAULT_OPTIONS, ...options});
- subscriberList.push(this);
- }
-
-
- _init(jobs) {
- for (let [id, job] of Object.entries(jobs)) {
- this.addJob(job);
- }
-
- this.update();
- }
-
-
- _update(patch) {
- let item, jobStatusElement, operation, pathArray;
-
- for (operation of patch) {
- /* "/jobId/valueName" -> ["jobId", "valueName"] */
- pathArray = operation.path.split("/").slice(1);
- switch(operation.op) {
- case "add":
- if (pathArray.includes("results")) {break;}
- this.addJob(operation.value);
- this.update();
- break;
- case "remove":
- this.remove("id", pathArray[0]);
- break;
- case "replace":
- 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:
- break;
- }
- default:
- break;
- }
- }
- }
-
-
- addJob(job) {
- let rowElement, columnElement, serviceElement, serviceIconElement, titleElement, descriptionElement, statusElement, viewElement, viewIconElement;
-
- // Create a row elment, where all related information get stored
- rowElement = document.createElement("tr");
- rowElement.dataset.id = job.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[job.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 = 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,
- service: `/service=${job.service}`, status: job.status,
- title: job.title}],
- function(items) {items[0].elm = rowElement;});
- }
-}
-JobList.DEFAULT_OPTIONS = {item: "",
- page: 4,
- pagination: {innerWindow: 8, outerWindow: 1},
- valueNames: ["description", "service", "status", "title", {data: ["id"]}]};
-JobList.SERVICE_ICONS = {"merge_images": "burst_mode",
- "nlp": "format_textdirection_l_to_r",
- "ocr": "find_in_page",
- "default": "help"};
-JobList.STATUS_COLORS = {"submitted": "blue",
- "preparing": "light-blue",
- "pending": "orange",
- "running": "amber",
- "complete": "green",
- "stopping": "orange",
- "removing": "deep-orange",
- "default": "red"};
diff --git a/app/static/js/nopaque.lists.js b/app/static/js/nopaque.lists.js
new file mode 100644
index 00000000..a7058f97
--- /dev/null
+++ b/app/static/js/nopaque.lists.js
@@ -0,0 +1,261 @@
+class CorpusList extends List {
+ constructor(idOrElement, subscriberList, options={}) {
+ super(idOrElement, {...CorpusList.DEFAULT_OPTIONS, ...options});
+ subscriberList.push(this);
+ }
+
+
+ _init(corpora) {
+ this.addCorpora(Object.values(corpora));
+ }
+
+
+ _update(patch) {
+ 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.addCorpora([operation.value]);
+ break;
+ case "remove":
+ this.remove("id", pathArray[0]);
+ 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;
+ item.values({status: operation.value});
+ break;
+ default:
+ break;
+ }
+ default:
+ break;
+ }
+ }
+ }
+
+
+ addCorpora(corpora) {
+ this.add(corpora, items => {
+ for (let item of items) {item.elm = this.createElement(item);}
+ });
+ this.update();
+ }
+
+
+ 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: "
",
+ page: 4,
+ pagination: {innerWindow: 8, outerWindow: 1},
+ valueNames: ["description", "title", {data: ["id"]}]};
+CorpusList.STATUS_COLORS = {"unprepared": "grey",
+ "preparable": "orange",
+ "preparing": "yellow",
+ "prepared": "green",
+ "start analysis": "yellow",
+ "analysing": "green",
+ "stop analysis": "red",
+ "default": "red"};
+
+
+class JobList extends List {
+ constructor(idOrElement, subscriberList, options={}) {
+ super(idOrElement, {...JobList.DEFAULT_OPTIONS, ...options});
+ subscriberList.push(this);
+ }
+
+
+ _init(jobs) {
+ this.addJobs(Object.values(jobs));
+ }
+
+
+ _update(patch) {
+ let item, jobStatusElement, operation, pathArray;
+
+ for (operation of patch) {
+ /* "/jobId/valueName" -> ["jobId", "valueName"] */
+ pathArray = operation.path.split("/").slice(1);
+ switch(operation.op) {
+ case "add":
+ if (pathArray.includes("results")) {break;}
+ this.addJobs([operation.value]);
+ break;
+ case "remove":
+ this.remove("id", pathArray[0]);
+ break;
+ case "replace":
+ 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:
+ break;
+ }
+ default:
+ break;
+ }
+ }
+ }
+
+
+ addJobs(jobs) {
+ this.add(jobs, items => {
+ for (let item of items) {item.elm = this.createElement(item);}
+ });
+ this.update();
+ }
+
+
+ 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: "
",
+ page: 4,
+ pagination: {innerWindow: 8, outerWindow: 1},
+ valueNames: ["description", "service", "status", "title", {data: ["id"]}]};
+JobList.SERVICE_ICONS = {"merge_images": "burst_mode",
+ "nlp": "format_textdirection_l_to_r",
+ "ocr": "find_in_page",
+ "default": "help"};
+JobList.STATUS_COLORS = {"submitted": "blue",
+ "preparing": "light-blue",
+ "pending": "orange",
+ "running": "amber",
+ "complete": "green",
+ "stopping": "orange",
+ "removing": "deep-orange",
+ "default": "red"};
diff --git a/app/templates/base.html.j2 b/app/templates/base.html.j2
index de24ec64..15ebb39e 100644
--- a/app/templates/base.html.j2
+++ b/app/templates/base.html.j2
@@ -17,8 +17,7 @@
-
-
+