From 32f2d7dbf7fdd971aecf1041d4db6e1932e0c9a1 Mon Sep 17 00:00:00 2001 From: Patrick Jentsch Date: Wed, 15 Jan 2020 10:52:51 +0100 Subject: [PATCH] New corpus and job lists. --- app/static/js/CorpusList.js | 92 ++++++++++++++++------- app/static/js/JobList.js | 106 +++++++++++++++------------ app/templates/main/dashboard.html.j2 | 99 ++++++++++++------------- 3 files changed, 169 insertions(+), 128 deletions(-) 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 - - -
-
-
-

addNew corpus

-
-
-
    -
    -
    +
    +
    +
    +
    + search + +
    + + +
    +
      +
      +
      + New corpusadd
      -
      -

       

      -
      - -

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

      addNew job

      -
      -
      -
        -
        -
        +
        +
        +
        +
        + search + +
        + + +
        +
          +
          +
          +

          addNew job

          -
          - - +