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

Use JSON patch the correct way!

Browse Source
This commit is contained in:
Patrick Jentsch
2019-08-30 13:31:00 +02:00
parent 7702de8770
commit 8f3c53dad2
7 changed files with 158 additions and 5035 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,30 +5,59 @@ class CorpusList extends List {
}
init() {
var corpus;
for (corpus of corpora) {
this.list.appendChild(this.createCorpusElement(corpus));
_init() {
for (let [id, corpus] of Object.entries(corpora)) {
this.addCorpus(corpus);
}
this.reIndex();
this.update();
List.updatePagination(this);
}
createCorpusElement(corpus) {
_update(patch) {
var item, operation, pathArray, valueName;
for (operation of patch) {
pathArray = operation.path.split("/").slice(1);
switch(operation.op) {
case "add":
this.addCorpus(operation.value);
break;
case "remove":
if (pathArray.length != 1) {break;}
this.remove("id", pathArray[0]);
break;
case "replace":
if (pathArray.length != 2) {break;}
item = this.get("id", pathArray[0])[0];
valueName = pathArray[1];
switch(valueName) {
case "description":
item.values({"description": operation.value});
break;
case "title":
item.values({"title": operation.value});
break;
default:
break;
}
default:
break;
}
}
}
addCorpus(corpus) {
var corpusDescriptionElement, corpusElement, corpusIconElement,
corpusTitleElement;
corpusDescriptionElement = document.createElement("p");
corpusDescriptionElement.dataset.key = "description";
corpusDescriptionElement.classList.add("description");
corpusDescriptionElement.innerText = corpus.description;
corpusElement = document.createElement("a");
corpusElement.classList.add("avatar", "collection-item");
corpusElement.dataset.key = "id";
corpusElement.dataset.value = corpus.id;
corpusElement.dataset.id = corpus.id;
corpusElement.href = `/corpora/${corpus.id}`;
corpusIconElement = document.createElement("i");
corpusIconElement.classList.add("circle", "material-icons");
@ -42,35 +71,9 @@ class CorpusList extends List {
corpusElement.appendChild(corpusTitleElement);
corpusElement.appendChild(corpusDescriptionElement);
return corpusElement;
}
updateWithPatch(delta) {
var corpusElement, key, listItem;
for (key in delta) {
if (key === "_t") {continue;}
if (key.startsWith("_")) {
this.remove("id", delta[key][0].id);
} else if (Array.isArray(delta[key])) {
corpusElement = this.createCorpusElement(delta[key][0]);
listItem = this.add({"description": delta[key][0].description,
"title": delta[key][0].title,
"id": delta[key][0].id})[0];
if (listItem.elm) {
listItem.elm.replaceWith(corpusElement);
}
listItem.elm = corpusElement;
} else {
listItem = this.get("id", corpora[parseInt(key)].id)[0];
if (delta[key]["description"]) {
listItem.values({"description": delta[key]["description"][1]});
}
if (delta[key]["title"]) {
listItem.values({"title": delta[key]["title"][1]});
}
}
}
this.add(
[{description: corpus.description, id: corpus.id, title: corpus.title}],
function(items) {items[0].elm = corpusElement;}
);
}
}

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

@ -5,22 +5,69 @@ class JobList extends List {
}
init() {
var job;
for (job of jobs) {
this.list.appendChild(this.createJobElement(job));
_init() {
for (let [id, job] of Object.entries(jobs)) {
this.addJob(job);
}
this.reIndex();
this.update();
List.updatePagination(this);
}
createJobElement(job) {
_update(patch) {
var item, jobStatusElement, newStatusColor, operation, pathArray, status,
statusColor, valueName;
for (operation of patch) {
pathArray = operation.path.split("/").slice(1);
switch(operation.op) {
case "add":
this.addJob(operation.value);
break;
case "remove":
if (pathArray.length != 1) {break;}
this.remove("id", pathArray[0]);
break;
case "replace":
if (pathArray.length != 2) {break;}
item = this.get("id", pathArray[0])[0];
valueName = pathArray[1];
switch(valueName) {
case "description":
item.values({"description": operation.value});
break;
case "status":
jobStatusElement = item.elm.querySelector(".status");
status = jobStatusElement.innerHTML;
if (JobList.STATUS_COLORS.hasOwnProperty(status)) {
statusColor = JobList.STATUS_COLORS[status];
} else {
statusColor = JobList.STATUS_COLORS['default'];
}
if (JobList.STATUS_COLORS.hasOwnProperty(operation.value)) {
newStatusColor = JobList.STATUS_COLORS[operation.value];
} else {
newStatusColor = JobList.STATUS_COLORS['default'];
}
jobStatusElement.classList.remove(statusColor);
jobStatusElement.classList.add(newStatusColor);
jobStatusElement.innerHTML = operation.value;
case "title":
item.values({"title": operation.value});
break;
default:
break;
}
default:
break;
}
}
}
addJob(job) {
var jobDescriptionElement, jobElement, jobServiceElement, jobStatusElement,
jobTitleElement;
jobTitleElement, serviceColor, serviceIcon, statusColor;
jobDescriptionElement = document.createElement("p");
jobDescriptionElement.classList.add("description");
@ -29,11 +76,26 @@ class JobList extends List {
jobElement.classList.add("avatar", "collection-item");
jobElement.dataset.id = job.id;
jobElement.href = `/jobs/${job.id}`;
if (JobList.SERVICE_COLORS.hasOwnProperty(job.service)) {
serviceColor = JobList.SERVICE_COLORS[job.service];
} else {
serviceColor = JobList.SERVICE_COLORS['default'];
}
if (JobList.SERVICE_ICONS.hasOwnProperty(job.service)) {
serviceIcon = JobList.SERVICE_ICONS[job.service];
} else {
serviceIcon = JobList.SERVICE_ICONS['default'];
}
jobServiceElement = document.createElement("i");
jobServiceElement.classList.add("circle", "material-icons", "service-icon", JobList.SERVICE_COLORS[job.service]);
jobServiceElement.innerText = JobList.SERVICE_ICONS[job.service];
jobServiceElement.classList.add("circle", "material-icons", "service-icon", serviceColor);
jobServiceElement.innerText = serviceIcon;
if (JobList.STATUS_COLORS.hasOwnProperty(job.status)) {
statusColor = JobList.STATUS_COLORS[job.status];
} else {
statusColor = JobList.STATUS_COLORS['default'];
}
jobStatusElement = document.createElement("span");
jobStatusElement.classList.add("badge", "new", "status", JobList.STATUS_COLORS[job.status]);
jobStatusElement.classList.add("badge", "new", "status", statusColor);
jobStatusElement.dataset.badgeCaption = "";
jobStatusElement.innerText = job.status;
jobTitleElement = document.createElement("span");
@ -45,45 +107,12 @@ class JobList extends List {
jobElement.appendChild(jobTitleElement);
jobElement.appendChild(jobDescriptionElement);
return jobElement;
}
updateWithPatch(delta) {
var jobElement, jobStatusElement, key, listItem;
for (key in delta) {
if (key === "_t") {continue;}
if (key.startsWith("_")) {
this.remove("id", delta[key][0].id);
} else if (Array.isArray(delta[key])) {
jobElement = this.createJobElement(delta[key][0]);
listItem = this.add({"description": delta[key][0].description,
"title": delta[key][0].title,
"id": delta[key][0].id})[0];
if (listItem.elm) {
listItem.elm.replaceWith(jobElement);
}
listItem.elm = jobElement;
} else {
listItem = this.get("id", jobs[parseInt(key)].id)[0];
if (delta[key]["status"]) {
jobStatusElement = listItem.elm.querySelector(".status");
jobStatusElement.classList.remove(JobList.STATUS_COLORS[delta[key]["status"][0]]);
jobStatusElement.classList.add(JobList.STATUS_COLORS[delta[key]["status"][1]]);
jobStatusElement.innerHTML = delta[key]["status"][1];
}
if (delta[key]["description"]) {
listItem.values({"description": delta[key]["description"][1]});
}
if (delta[key]["title"]) {
listItem.values({"title": delta[key]["title"][1]});
}
}
}
this.add(
[{description: job.description, id: job.id, title: job.title}],
function(items) {items[0].elm = jobElement;}
);
}
}
JobList.SERVICE_COLORS = {"nlp": "blue",
"ocr": "green",
"default": "red"};

4913
app/static/js/jsondiffpatch.umd.js
View File

File diff suppressed because it is too large Load Diff