nopaque/app/static/js/JobList.js

class JobList extends List {
  constructor(idOrElement, subscriberList, options) {
    super(idOrElement, options);
    subscriberList.push(this);
  }


  _init(jobs) {
    for (let [id, job] of Object.entries(jobs)) {
      this.addJob(job);
    }

    this.update()
    List.updatePagination(this);
  }


  _update(patch) {
    var item, jobStatusElement, newStatusColor, operation, pathArray, status,
        statusColor;

    for (operation of patch) {
      /* "/jobId/valueName" -> ["jobId", "valueName"] */
      pathArray = operation.path.split("/").slice(1);
      switch(operation.op) {
        case "add":
          this.addJob(operation.value);
          this.update();
          List.updatePagination(this);
          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 "description":
              item.values({"description": operation.value});
              break;
            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.innerHTML = operation.value;
              break;
            case "title":
              item.values({"title": operation.value});
              break;
            default:
              break;
          }
        default:
          break;
      }
    }
  }


  addJob(job) {
    var jobDescriptionElement, jobElement, jobServiceElement, jobStatusElement,
        jobTitleElement, serviceColor, serviceIcon, statusColor;

    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;

    jobElement.appendChild(jobServiceElement);
    jobElement.appendChild(jobStatusElement);
    jobElement.appendChild(jobTitleElement);
    jobElement.appendChild(jobDescriptionElement);

    this.add(
      [{description: job.description, id: job.id, title: job.title}],
      function(items) {items[0].elm = jobElement;}
    );
  }
}
JobList.SERVICE_COLORS = {"nlp": "blue",
                          "ocr": "green",
                          "default": "red"};
JobList.SERVICE_ICONS = {"nlp": "format_textdirection_l_to_r",
                         "ocr": "find_in_page",
                         "default": "help"};
JobList.STATUS_COLORS = {"pending": "amber",
                         "running": "indigo",
                         "complete": "teal",
                         "default": "red"};