nopaque/app/static/js/nopaque.lists.js

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: "<br>",
                              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: "<br>",
                           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"};