mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-11-15 01:05:42 +00:00
Simplify corpus and job list data structure.
This commit is contained in:
Patrick Jentsch
parent
6e20e00c4e
commit
20200dac30
@ -86,3 +86,61 @@ indicator will show up how the column is sorted right now.; */
|
||||
padding: 50px;
|
||||
z-index: 999; /* tmp fix */
|
||||
}
|
||||
|
||||
.service[data-service]:before {
|
||||
content: "help";
|
||||
}
|
||||
.service[data-service="merge_images"]:before {
|
||||
content: "burst_mode";
|
||||
}
|
||||
.service[data-service="nlp"]:before {
|
||||
content: "format_textdirection_l_to_r";
|
||||
}
|
||||
.service[data-service="ocr"]:before {
|
||||
content: "find_in_page";
|
||||
}
|
||||
.status[data-status]:before {
|
||||
content: attr(data-status);
|
||||
}
|
||||
.status[data-status] {
|
||||
background-color: #f44336 !important; /* ~materialize "red" */
|
||||
}
|
||||
.status[data-status="analysing"] {
|
||||
background-color: #4caf50 !important; /* ~materialize green */
|
||||
}
|
||||
.status[data-status="complete"] {
|
||||
background-color: #4caf50 !important; /* ~materialize green */
|
||||
}
|
||||
.status[data-status="pending"] {
|
||||
background-color: #ff9800 !important; /* ~materialize orange */
|
||||
}
|
||||
.status[data-status="preparable"] {
|
||||
background-color: #ff9800 !important; /* ~materialize orange */
|
||||
}
|
||||
.status[data-status="prepared"] {
|
||||
background-color: #4caf50 !important; /* ~materialize green */
|
||||
}
|
||||
.status[data-status="preparing"] {
|
||||
background-color: #03a9f4 !important; /* ~materialize light-blue */
|
||||
}
|
||||
.status[data-status="removing"] {
|
||||
background-color: #ff5722 !important; /* ~materialize deep-orange */
|
||||
}
|
||||
.status[data-status="running"] {
|
||||
background-color: #ffc107 !important; /* ~materialize amber */
|
||||
}
|
||||
.status[data-status="start analysis"] {
|
||||
background-color: #ffeb3b !important; /* ~materialize yellow */
|
||||
}
|
||||
.status[data-status="stopping"] {
|
||||
background-color: #ff5722 !important; /* ~materialize deep-orange */
|
||||
}
|
||||
.status[data-status="stop analysis"] {
|
||||
background-color: #ff5722 !important; /* ~materialize deep-orange */
|
||||
}
|
||||
.status[data-status="submitted"] {
|
||||
background-color: #2196f3 !important; /* ~materialize blue */
|
||||
}
|
||||
.status[data-status="unprepared"] {
|
||||
background-color: #9e9e9e !important; /* ~materialize grey */
|
||||
}
|
||||
|
||||
@ -18,7 +18,6 @@ class CorpusList extends List {
|
||||
pathArray = operation.path.split("/").slice(1);
|
||||
switch(operation.op) {
|
||||
case "add":
|
||||
if (pathArray.includes("results")) {break;}
|
||||
this.addCorpora([operation.value]);
|
||||
break;
|
||||
case "remove":
|
||||
@ -28,11 +27,7 @@ class CorpusList extends List {
|
||||
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});
|
||||
item.values({status: operation.value, _status: operation.value});
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
@ -45,87 +40,43 @@ class CorpusList extends List {
|
||||
|
||||
|
||||
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;
|
||||
let data = [];
|
||||
for (let corpus of corpora) {
|
||||
data.push({description: corpus.description,
|
||||
id: corpus.id,
|
||||
link: `/corpora/${corpus.id}`,
|
||||
status: corpus.status,
|
||||
title: corpus.title});
|
||||
}
|
||||
this.add(data);
|
||||
}
|
||||
}
|
||||
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"};
|
||||
CorpusList.DEFAULT_OPTIONS = {
|
||||
item: `<tr>
|
||||
<td>
|
||||
<a class="btn-floating disabled">
|
||||
<i class="material-icons">book</i>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<b class="title"></b><br>
|
||||
<i class="description"></i>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge new status" data-badge-caption=""></span>
|
||||
</td>
|
||||
<td class="right-align">
|
||||
<a class="btn-small waves-effect waves-light link">View<i class="material-icons right">send</i>
|
||||
</td>
|
||||
</tr>`,
|
||||
page: 4,
|
||||
pagination: {innerWindow: 8, outerWindow: 1},
|
||||
valueNames: ["description",
|
||||
"title",
|
||||
{data: ["id"]},
|
||||
{name: "link", attr: "href"},
|
||||
{name: "status", attr: "data-status"}]};
|
||||
|
||||
|
||||
|
||||
class JobList extends List {
|
||||
@ -158,10 +109,6 @@ class JobList extends List {
|
||||
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:
|
||||
@ -175,90 +122,44 @@ class JobList extends List {
|
||||
|
||||
|
||||
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;
|
||||
let data = [];
|
||||
for (let job of jobs) {
|
||||
data.push({description: job.description,
|
||||
id: job.id,
|
||||
link: `/jobs/${job.id}`,
|
||||
service: job.service,
|
||||
status: job.status,
|
||||
title: job.title});
|
||||
}
|
||||
this.add(data);
|
||||
}
|
||||
}
|
||||
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"};
|
||||
JobList.DEFAULT_OPTIONS = {
|
||||
item: `<tr>
|
||||
<td>
|
||||
<a class="btn-floating disabled">
|
||||
<i class="material-icons service"></i>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<b class="title"></b><br>
|
||||
<i class="description"></i>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge new status" data-badge-caption=""></span>
|
||||
</td>
|
||||
<td class="right-align">
|
||||
<a class="btn-small link waves-effect waves-light">View<i class="material-icons right">send</i>
|
||||
</td>
|
||||
</tr>`,
|
||||
page: 4,
|
||||
pagination: {innerWindow: 8, outerWindow: 1},
|
||||
valueNames: ["description",
|
||||
"title",
|
||||
{data: ["id"]},
|
||||
{name: "link", attr: "href"},
|
||||
{name: "service", attr: "data-service"},
|
||||
{name: "status", attr: "data-status"}]};
|
||||
|
||||
|
||||
class ResultList extends List {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="col s12 m4">
|
||||
<h3 id="title">{{ corpus.title }}</h3>
|
||||
<p id="description">{{ corpus.description }}</p>
|
||||
<a class="waves-effect waves-light btn" id="status"></a>
|
||||
<a class="btn status waves-effect waves-light" id="status"></a>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m8">
|
||||
@ -150,9 +150,7 @@
|
||||
let analyseBtn, statusElement;
|
||||
|
||||
statusElement = document.getElementById("status");
|
||||
statusElement.classList.remove(...Object.values(CorpusList.STATUS_COLORS));
|
||||
statusElement.classList.add(CorpusList.STATUS_COLORS[status] || CorpusList.STATUS_COLORS['default']);
|
||||
statusElement.innerText = status;
|
||||
statusElement.dataset.status = status;
|
||||
analyseBtn = document.getElementById('analyse');
|
||||
if (status === 'prepared' || status === 'analysing' || status === 'failed') {
|
||||
analyseBtn.classList.remove('hide', 'disabled');
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="col s12 m4">
|
||||
<h3 id="title">{{ job.title }}</h3>
|
||||
<p id="description">{{ job.description }}</p>
|
||||
<a class="waves-effect waves-light btn" id="status"></a>
|
||||
<a class="btn status waves-effect waves-light" id="status"></a>
|
||||
</div>
|
||||
|
||||
|
||||
@ -269,9 +269,7 @@
|
||||
let statusElement;
|
||||
|
||||
statusElement = document.getElementById("status");
|
||||
statusElement.classList.remove(...Object.values(JobList.STATUS_COLORS));
|
||||
statusElement.classList.add(JobList.STATUS_COLORS[status] || JobList.STATUS_COLORS['default']);
|
||||
statusElement.innerText = status;
|
||||
statusElement.dataset.status = status;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user