mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2025-06-12 09:00:40 +00:00
New corpus and job lists.
This commit is contained in:
Patrick Jentsch
@ -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: `<div>
|
||||
|
||||
@ -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: `<div>
|
||||
@ -101,10 +117,6 @@ JobList.DEFAULT_OPTIONS = {item: `<div>
|
||||
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",
|
||||
|
||||
Reference in New Issue
Block a user