diff --git a/app/static/css/nopaque.css b/app/static/css/nopaque.css index 1efba483..3cdd89ac 100644 --- a/app/static/css/nopaque.css +++ b/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 */ +} diff --git a/app/static/js/nopaque.lists.js b/app/static/js/nopaque.lists.js index b80bc380..f604b20d 100644 --- a/app/static/js/nopaque.lists.js +++ b/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"); - 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}); + item.values({status: operation.value, _status: operation.value}); break; default: break; @@ -45,87 +40,43 @@ class CorpusList extends List { 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; + let data = []; + for (let corpus of corpora) { + data.push({description: corpus.description, + id: corpus.id, + link: `/corpora/${corpus.id}`, + status: corpus.status, + title: corpus.title}); + } + this.add(data); } } -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"}; +CorpusList.DEFAULT_OPTIONS = { + item: ` + + + book + + + +
+ + + + + + + Viewsend + + `, + page: 4, + pagination: {innerWindow: 8, outerWindow: 1}, + valueNames: ["description", + "title", + {data: ["id"]}, + {name: "link", attr: "href"}, + {name: "status", attr: "data-status"}]}; + 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 => { - 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; + let data = []; + for (let job of jobs) { + data.push({description: job.description, + id: job.id, + link: `/jobs/${job.id}`, + service: job.service, + status: job.status, + title: job.title}); + } + this.add(data); } } -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"}; +JobList.DEFAULT_OPTIONS = { + item: ` + + + + + + +
+ + + + + + + Viewsend + + `, + page: 4, + pagination: {innerWindow: 8, outerWindow: 1}, + valueNames: ["description", + "title", + {data: ["id"]}, + {name: "link", attr: "href"}, + {name: "service", attr: "data-service"}, + {name: "status", attr: "data-status"}]}; class ResultList extends List { diff --git a/app/templates/corpora/corpus.html.j2 b/app/templates/corpora/corpus.html.j2 index d620439c..b091f63d 100644 --- a/app/templates/corpora/corpus.html.j2 +++ b/app/templates/corpora/corpus.html.j2 @@ -4,7 +4,7 @@

{{ corpus.title }}

{{ corpus.description }}

- +
@@ -150,9 +150,7 @@ let analyseBtn, statusElement; statusElement = document.getElementById("status"); - statusElement.classList.remove(...Object.values(CorpusList.STATUS_COLORS)); - statusElement.classList.add(CorpusList.STATUS_COLORS[status] || CorpusList.STATUS_COLORS['default']); - statusElement.innerText = status; + statusElement.dataset.status = status; analyseBtn = document.getElementById('analyse'); if (status === 'prepared' || status === 'analysing' || status === 'failed') { analyseBtn.classList.remove('hide', 'disabled'); diff --git a/app/templates/jobs/job.html.j2 b/app/templates/jobs/job.html.j2 index d6931dc4..e2aa21f6 100644 --- a/app/templates/jobs/job.html.j2 +++ b/app/templates/jobs/job.html.j2 @@ -4,7 +4,7 @@

{{ job.title }}

{{ job.description }}

- +
@@ -269,9 +269,7 @@ let statusElement; statusElement = document.getElementById("status"); - statusElement.classList.remove(...Object.values(JobList.STATUS_COLORS)); - statusElement.classList.add(JobList.STATUS_COLORS[status] || JobList.STATUS_COLORS['default']); - statusElement.innerText = status; + statusElement.dataset.status = status; } }