sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-12-24 10:34:17 +00:00
Code Issues Projects Releases Wiki Activity

Only handle difference of changes to the job list.

Browse Source
This commit is contained in:
Patrick Jentsch 2019-08-19 17:09:01 +02:00
parent 5ba08a21f4
commit 74c863e0f7
3 changed files with 42 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/static/js/jobs.js
View File

@ -14,24 +14,20 @@ const STATUS_COLORS = {"pending": "amber",
function createJobElement(job) { function createJobElement(job) {
jobElement = document.createElement("a"); jobElement = document.createElement("a");
jobElement.classList.add("avatar", "collection-item"); jobElement.classList.add("avatar", "collection-item");
jobElement.dataset.key = "id"; jobElement.dataset.id = job.id;
jobElement.dataset.value = job.id;
jobElement.href = `/jobs/${job.id}`; jobElement.href = `/jobs/${job.id}`;
jobDescriptionElement = document.createElement("p"); jobDescriptionElement = document.createElement("p");
jobDescriptionElement.dataset.key = "description"; jobDescriptionElement.classList.add("description");
jobDescriptionElement.innerText = job.description; jobDescriptionElement.innerText = job.description;
jobServiceElement = document.createElement("i"); jobServiceElement = document.createElement("i");
jobServiceElement.classList.add("circle", "material-icons", SERVICE_COLORS[job.service]); jobServiceElement.classList.add("circle", "material-icons", "service-icon", SERVICE_COLORS[job.service]);
jobServiceElement.dataset.key = "service";
jobServiceElement.innerText = SERVICE_ICONS[job.service]; jobServiceElement.innerText = SERVICE_ICONS[job.service];
jobStatusElement = document.createElement("span"); jobStatusElement = document.createElement("span");
jobStatusElement.classList.add("badge", "new", "status", STATUS_COLORS[job.status]); jobStatusElement.classList.add("badge", "new", "status", STATUS_COLORS[job.status]);
jobStatusElement.dataset.badgeCaption = ""; jobStatusElement.dataset.badgeCaption = "";
jobStatusElement.dataset.key = "status";
jobStatusElement.innerText = job.status; jobStatusElement.innerText = job.status;
jobTitleElement = document.createElement("span"); jobTitleElement = document.createElement("span");
jobTitleElement.classList.add("title"); jobTitleElement.classList.add("title");
jobTitleElement.dataset.key = "title";
jobTitleElement.innerText = job.title; jobTitleElement.innerText = job.title;
jobElement.appendChild(jobServiceElement); jobElement.appendChild(jobServiceElement);

9
app/static/js/polls.js
View File

@ -39,11 +39,12 @@ function getJobs() {
.then(function(response) { .then(function(response) {
return response.json(); return response.json();
}) })
.then(function(data) { .then(function(json) {
if (JSON.stringify(jobs) != JSON.stringify(data)) { var delta = jsondiffpatch.diff(jobs, json);
jobs = data; if (delta) {
jobs = json;
for (subscriber of subscribers.jobs) { for (subscriber of subscribers.jobs) {
subscriber(); subscriber(delta);
} }
} }
}) })

38
app/templates/main/dashboard.html.j2
View File

@ -76,14 +76,44 @@
</div> </div>
</div> </div>
<script> <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, page: 4,
pagination: false}); pagination: true,
valueNames: ["description",
"title",
{data: ["id"]}]});
jobList.on("filterComplete", updatePagination); jobList.on("filterComplete", updatePagination);
jobList.on("searchComplete", updatePagination); jobList.on("searchComplete", updatePagination);
createJobElements(jobList); createJobElements(jobList);
subscribers.jobs.push(function() { subscribers.jobs.push(function(delta) {
console.log('[Jobs]: Something changed.'); 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> </script>