mirror of
https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
synced 2024-12-24 02:24:20 +00:00
Only handle difference of changes to the job list.
This commit is contained in:
parent
5ba08a21f4
commit
74c863e0f7
@ -14,24 +14,20 @@ const STATUS_COLORS = {"pending": "amber",
|
||||
function createJobElement(job) {
|
||||
jobElement = document.createElement("a");
|
||||
jobElement.classList.add("avatar", "collection-item");
|
||||
jobElement.dataset.key = "id";
|
||||
jobElement.dataset.value = job.id;
|
||||
jobElement.dataset.id = job.id;
|
||||
jobElement.href = `/jobs/${job.id}`;
|
||||
jobDescriptionElement = document.createElement("p");
|
||||
jobDescriptionElement.dataset.key = "description";
|
||||
jobDescriptionElement.classList.add("description");
|
||||
jobDescriptionElement.innerText = job.description;
|
||||
jobServiceElement = document.createElement("i");
|
||||
jobServiceElement.classList.add("circle", "material-icons", SERVICE_COLORS[job.service]);
|
||||
jobServiceElement.dataset.key = "service";
|
||||
jobServiceElement.classList.add("circle", "material-icons", "service-icon", SERVICE_COLORS[job.service]);
|
||||
jobServiceElement.innerText = SERVICE_ICONS[job.service];
|
||||
jobStatusElement = document.createElement("span");
|
||||
jobStatusElement.classList.add("badge", "new", "status", STATUS_COLORS[job.status]);
|
||||
jobStatusElement.dataset.badgeCaption = "";
|
||||
jobStatusElement.dataset.key = "status";
|
||||
jobStatusElement.innerText = job.status;
|
||||
jobTitleElement = document.createElement("span");
|
||||
jobTitleElement.classList.add("title");
|
||||
jobTitleElement.dataset.key = "title";
|
||||
jobTitleElement.innerText = job.title;
|
||||
|
||||
jobElement.appendChild(jobServiceElement);
|
||||
|
@ -39,11 +39,12 @@ function getJobs() {
|
||||
.then(function(response) {
|
||||
return response.json();
|
||||
})
|
||||
.then(function(data) {
|
||||
if (JSON.stringify(jobs) != JSON.stringify(data)) {
|
||||
jobs = data;
|
||||
.then(function(json) {
|
||||
var delta = jsondiffpatch.diff(jobs, json);
|
||||
if (delta) {
|
||||
jobs = json;
|
||||
for (subscriber of subscribers.jobs) {
|
||||
subscriber();
|
||||
subscriber(delta);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
@ -76,14 +76,44 @@
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var jobList = new List("job-list", {valueNames: ["title"],
|
||||
var template = '<a><span class="title"></span></a>'
|
||||
var jobList = new List("job-list", {item: '<a><span class="title"></span></a>',
|
||||
page: 4,
|
||||
pagination: false});
|
||||
pagination: true,
|
||||
valueNames: ["description",
|
||||
"title",
|
||||
{data: ["id"]}]});
|
||||
jobList.on("filterComplete", updatePagination);
|
||||
jobList.on("searchComplete", updatePagination);
|
||||
createJobElements(jobList);
|
||||
subscribers.jobs.push(function() {
|
||||
console.log('[Jobs]: Something changed.');
|
||||
subscribers.jobs.push(function(delta) {
|
||||
for (key in delta) {
|
||||
if (key === "_t") {continue;}
|
||||
if (key.startsWith("_")) {
|
||||
jobList.remove("id", delta[key][0].id);
|
||||
} else if (Array.isArray(delta[key])) {
|
||||
jobElement = createJobElement(delta[key][0]);
|
||||
listItem = jobList.add({"description": delta[key][0].description,
|
||||
"title": delta[key][0].title,
|
||||
"id": delta[key][0].id})[0];
|
||||
listItem.elm.replaceWith(jobElement);
|
||||
listItem.elm = jobElement;
|
||||
} else {
|
||||
var listItem = jobList.get("id", jobs[parseInt(key)].id)[0];
|
||||
if (delta[key]["status"]) {
|
||||
var jobStatusElement = listItem.elm.querySelector(".status");
|
||||
jobStatusElement.classList.remove(STATUS_COLORS[delta[key]["status"][0]]);
|
||||
jobStatusElement.classList.add(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]});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user