Merge list classes

This commit is contained in:
Patrick Jentsch 2020-01-29 10:50:31 +01:00
parent 26e767609a
commit bd8d0c14c3
4 changed files with 262 additions and 259 deletions

View File

@ -1,126 +0,0 @@
class CorpusList extends List {
constructor(idOrElement, subscriberList, options={}) {
super(idOrElement, {...CorpusList.DEFAULT_OPTIONS, ...options});
subscriberList.push(this);
}
_init(corpora) {
for (let [id, corpus] of Object.entries(corpora)) {
this.addCorpus(corpus);
}
this.update();
}
_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.addCorpus(operation.value);
this.update();
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;
}
}
}
addCorpus(corpus) {
let rowElement, columnElement, serviceElement, serviceIconElement, titleElement, descriptionElement, statusElement, viewElement, viewIconElement;
// Create a row elment, where all related information get stored
rowElement = document.createElement("tr");
rowElement.dataset.id = corpus.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 = 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,
status: corpus.status, title: corpus.title}],
function(items) {items[0].elm = rowElement;});
}
}
CorpusList.DEFAULT_OPTIONS = {item: "",
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"};

View File

@ -1,131 +0,0 @@
class JobList extends List {
constructor(idOrElement, subscriberList, options={}) {
super(idOrElement, {...JobList.DEFAULT_OPTIONS, ...options});
subscriberList.push(this);
}
_init(jobs) {
for (let [id, job] of Object.entries(jobs)) {
this.addJob(job);
}
this.update();
}
_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.addJob(operation.value);
this.update();
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;
}
}
}
addJob(job) {
let rowElement, columnElement, serviceElement, serviceIconElement, titleElement, descriptionElement, statusElement, viewElement, viewIconElement;
// Create a row elment, where all related information get stored
rowElement = document.createElement("tr");
rowElement.dataset.id = job.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[job.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 = 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,
service: `/service=${job.service}`, status: job.status,
title: job.title}],
function(items) {items[0].elm = rowElement;});
}
}
JobList.DEFAULT_OPTIONS = {item: "",
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"};

View File

@ -0,0 +1,261 @@
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"};

View File

@ -17,8 +17,7 @@
<script src="{{ url_for('static', filename='js/List.js/list.min.js') }}"></script> <script src="{{ url_for('static', filename='js/List.js/list.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/Socket.IO/socket.io.slim.js') }}"></script> <script src="{{ url_for('static', filename='js/Socket.IO/socket.io.slim.js') }}"></script>
<script src="{{ url_for('static', filename='js/nopaque.js') }}"></script> <script src="{{ url_for('static', filename='js/nopaque.js') }}"></script>
<script src="{{ url_for('static', filename='js/CorpusList.js') }}"></script> <script src="{{ url_for('static', filename='js/nopaque.lists.js') }}"></script>
<script src="{{ url_for('static', filename='js/JobList.js') }}"></script>
</head> </head>
<body> <body>
<header> <header>