nopaque/app/static/js/jobs.js

// Job list code
const SERVICE_COLORS = {"nlp": "blue",
                        "ocr": "green",
                        "default": "red"};
const SERVICE_ICONS = {"nlp": "format_textdirection_l_to_r",
                       "ocr": "find_in_page",
                       "default": "help"};
const STATUS_COLORS = {"pending": "amber",
                       "running": "indigo",
                       "complete": "teal",
                       "default": "red"};


function createJobElement(job) {
  jobElement = document.createElement("a");
  jobElement.classList.add("avatar", "collection-item");
  jobElement.dataset.key = "id";
  jobElement.dataset.value = job.id;
  jobElement.href = `/jobs/${job.id}`;
  jobDescriptionElement = document.createElement("p");
  jobDescriptionElement.dataset.key = "description";
  jobDescriptionElement.innerText = job.description;
  jobServiceElement = document.createElement("i");
  jobServiceElement.classList.add("circle", "material-icons", SERVICE_COLORS[job.service]);
  jobServiceElement.dataset.key = "service";
  jobServiceElement.innerText = SERVICE_ICONS[job.service];
  jobStatusElement = document.createElement("span");
  jobStatusElement.classList.add("badge", "new", "status", STATUS_COLORS[job.status]);
  jobStatusElement.dataset.badgeCaption = "";
  jobStatusElement.dataset.key = "status";
  jobStatusElement.innerText = job.status;
  jobTitleElement = document.createElement("span");
  jobTitleElement.classList.add("title");
  jobTitleElement.dataset.key = "title";
  jobTitleElement.innerText = job.title;

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

  return jobElement;
}


function createJobElements(jobList) {
  for (job of jobs) {
    jobList.list.appendChild(createJobElement(job));
  }
  jobList.reIndex();
  jobList.update();
  updatePagination(jobList);
}