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 @@ - - +