sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2025-11-04 12:22:47 +00:00
Code Issues Projects Releases Wiki Activity

New corpus and job lists.

Browse Source
This commit is contained in:
Patrick Jentsch
2020-01-15 10:52:51 +01:00
parent 9862d32dbb
commit 32f2d7dbf7
3 changed files with 169 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
app/static/js/CorpusList.js
View File

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

106
app/static/js/JobList.js
View File

@@ -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",