From 74c863e0f7e10dd8303bf8673b26b05f38b59011 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Mon, 19 Aug 2019 17:09:01 +0200
Subject: [PATCH] Only handle difference of changes to the job list.
---
app/static/js/jobs.js | 10 +++-----
app/static/js/polls.js | 9 ++++---
app/templates/main/dashboard.html.j2 | 38 +++++++++++++++++++++++++---
3 files changed, 42 insertions(+), 15 deletions(-)
diff --git a/app/static/js/jobs.js b/app/static/js/jobs.js
index 97fd1afa..fbdb993e 100644
--- a/app/static/js/jobs.js
+++ b/app/static/js/jobs.js
@@ -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);
diff --git a/app/static/js/polls.js b/app/static/js/polls.js
index c8e8ce34..a4ae2c00 100644
--- a/app/static/js/polls.js
+++ b/app/static/js/polls.js
@@ -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);
}
}
})
diff --git a/app/templates/main/dashboard.html.j2 b/app/templates/main/dashboard.html.j2
index 94c97662..d77865ff 100644
--- a/app/templates/main/dashboard.html.j2
+++ b/app/templates/main/dashboard.html.j2
@@ -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>
--
GitLab