mirror of
				https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git
				synced 2025-11-04 04:12:45 +00:00 
			
		
		
		
	Only handle difference of changes to the job list.
This commit is contained in:
		@@ -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>
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user