Skip to content
Snippets Groups Projects
Commit bd8d0c14 authored by Patrick Jentsch's avatar Patrick Jentsch
Browse files

Merge list classes

parent 26e76760
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/static/js/CorpusList.js deleted 100644 → 0
+ 0
− 126
View file @ 26e76760
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"};
app/static/js/JobList.js → app/static/js/nopaque.lists.js
+ 261
− 0
View file @ bd8d0c14
class JobList extends List { class CorpusList extends List {
constructor(idOrElement, subscriberList, options={}) { constructor(idOrElement, subscriberList, options={}) {
super(idOrElement, {...JobList.DEFAULT_OPTIONS, ...options}); super(idOrElement, {...CorpusList.DEFAULT_OPTIONS, ...options});
subscriberList.push(this); subscriberList.push(this);
} }
_init(jobs) { _init(corpora) {
for (let [id, job] of Object.entries(jobs)) { this.addCorpora(Object.values(corpora));
this.addJob(job); }
_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(); 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) { _update(patch) {
let item, jobStatusElement, operation, pathArray; let item, jobStatusElement, operation, pathArray;
...@@ -23,8 +149,7 @@ class JobList extends List { ...@@ -23,8 +149,7 @@ class JobList extends List {
switch(operation.op) { switch(operation.op) {
case "add": case "add":
if (pathArray.includes("results")) {break;} if (pathArray.includes("results")) {break;}
this.addJob(operation.value); this.addJobs([operation.value]);
this.update();
break; break;
case "remove": case "remove":
this.remove("id", pathArray[0]); this.remove("id", pathArray[0]);
...@@ -49,12 +174,24 @@ class JobList extends List { ...@@ -49,12 +174,24 @@ class JobList extends List {
} }
addJob(job) { addJobs(jobs) {
let rowElement, columnElement, serviceElement, serviceIconElement, titleElement, descriptionElement, statusElement, viewElement, viewIconElement; 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 // Create a row elment, where all related information get stored
rowElement = document.createElement("tr"); rowElement = document.createElement("tr");
rowElement.dataset.id = job.id; rowElement.dataset.id = values.id;
// Create a column containing a service type identifying icon // Create a column containing a service type identifying icon
columnElement = document.createElement("td"); columnElement = document.createElement("td");
...@@ -62,7 +199,7 @@ class JobList extends List { ...@@ -62,7 +199,7 @@ class JobList extends List {
serviceElement.classList.add("btn-floating", "disabled"); serviceElement.classList.add("btn-floating", "disabled");
serviceIconElement = document.createElement("i"); serviceIconElement = document.createElement("i");
serviceIconElement.classList.add("material-icons"); serviceIconElement.classList.add("material-icons");
serviceIconElement.innerText = JobList.SERVICE_ICONS[job.service] || JobList.SERVICE_ICONS['default']; serviceIconElement.innerText = JobList.SERVICE_ICONS[values.service] || JobList.SERVICE_ICONS['default'];
serviceElement.appendChild(serviceIconElement); serviceElement.appendChild(serviceIconElement);
columnElement.appendChild(serviceElement); columnElement.appendChild(serviceElement);
rowElement.appendChild(columnElement); rowElement.appendChild(columnElement);
...@@ -71,10 +208,10 @@ class JobList extends List { ...@@ -71,10 +208,10 @@ class JobList extends List {
columnElement = document.createElement("td"); columnElement = document.createElement("td");
titleElement = document.createElement("b"); titleElement = document.createElement("b");
titleElement.classList.add("title"); titleElement.classList.add("title");
titleElement.innerText = job.title; titleElement.innerText = values.title;
descriptionElement = document.createElement("i"); descriptionElement = document.createElement("i");
descriptionElement.classList.add("description"); descriptionElement.classList.add("description");
descriptionElement.innerText = job.description; descriptionElement.innerText = values.description;
columnElement.appendChild(titleElement); columnElement.appendChild(titleElement);
columnElement.appendChild(document.createElement("br")); columnElement.appendChild(document.createElement("br"));
columnElement.appendChild(descriptionElement); columnElement.appendChild(descriptionElement);
...@@ -83,9 +220,9 @@ class JobList extends List { ...@@ -83,9 +220,9 @@ class JobList extends List {
// Create a column containing the current status // Create a column containing the current status
columnElement = document.createElement("td"); columnElement = document.createElement("td");
statusElement = document.createElement("span"); statusElement = document.createElement("span");
statusElement.classList.add("badge", "new", "status", JobList.STATUS_COLORS[job.status] || JobList.STATUS_COLORS['default']); statusElement.classList.add("badge", "new", "status", JobList.STATUS_COLORS[values.status] || JobList.STATUS_COLORS['default']);
statusElement.dataset.badgeCaption = ""; statusElement.dataset.badgeCaption = "";
statusElement.innerText = job.status; statusElement.innerText = values.status;
columnElement.appendChild(statusElement); columnElement.appendChild(statusElement);
rowElement.appendChild(columnElement); rowElement.appendChild(columnElement);
...@@ -94,7 +231,7 @@ class JobList extends List { ...@@ -94,7 +231,7 @@ class JobList extends List {
columnElement.classList.add("right-align"); columnElement.classList.add("right-align");
viewElement = document.createElement("a"); viewElement = document.createElement("a");
viewElement.classList.add("waves-effect", "waves-light", "btn-small"); viewElement.classList.add("waves-effect", "waves-light", "btn-small");
viewElement.href = `/jobs/${job.id}`; viewElement.href = `/jobs/${values.id}`;
viewElement.innerText = "View "; viewElement.innerText = "View ";
viewIconElement = document.createElement("i"); viewIconElement = document.createElement("i");
viewIconElement.classList.add("material-icons", "right"); viewIconElement.classList.add("material-icons", "right");
...@@ -103,17 +240,10 @@ class JobList extends List { ...@@ -103,17 +240,10 @@ class JobList extends List {
columnElement.appendChild(viewElement); columnElement.appendChild(viewElement);
rowElement.appendChild(columnElement); rowElement.appendChild(columnElement);
/* return rowElement;
* 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: "", JobList.DEFAULT_OPTIONS = {item: "<br>",
page: 4, page: 4,
pagination: {innerWindow: 8, outerWindow: 1}, pagination: {innerWindow: 8, outerWindow: 1},
valueNames: ["description", "service", "status", "title", {data: ["id"]}]}; valueNames: ["description", "service", "status", "title", {data: ["id"]}]};
......
app/templates/base.html.j2
+ 1
− 2
View file @ bd8d0c14
...@@ -17,8 +17,7 @@ ...@@ -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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment