scripts.js in good_job-2.11.0

- old
+ new
@@ -1,132 +1,264 @@
-GoodJob = {};
+/*jshint esversion: 6, strict: false */
+const GOOD_JOB_DEFAULT_POLL_INTERVAL_SECONDS = 30;
+const GOOD_JOB_MINIMUM_POLL_INTERVAL = 1000;
+
+const GoodJob = {
+  // Register functions to execute when the DOM is ready
+  ready: (callback) => {
+    if (document.readyState !== "loading") {
+      callback();
+    } else {
+      document.addEventListener("DOMContentLoaded", callback);
+    }
+  },
+
+  init: () => {
+    GoodJob.updateSettings();
+    GoodJob.addListeners();
+    GoodJob.pollUpdates();
+    GoodJob.renderCharts(true);
+  },
+
+  addListeners: () => {
+    const gjActionEls = document.querySelectorAll('[data-gj-action]');
+
+    for (let i = 0; i < gjActionEls.length; i++) {
+      const el = gjActionEls[i];
+      const [eventName, func] = el.dataset.gjAction.split('#');
+
+      el.addEventListener(eventName, GoodJob[func]);
+    }
+  },
+
+  updateSettings: () => {
+    const queryString = window.location.search;
+    const urlParams = new URLSearchParams(queryString);
+
+    // live poll interval and enablement
+    if (urlParams.has('poll')) {
+      const parsedInterval = (parseInt(urlParams.get('poll')) || GOOD_JOB_DEFAULT_POLL_INTERVAL_SECONDS) * 1000;
+
+      GoodJob.pollEnabled = true;
+      GoodJob.pollInterval = Math.max(parsedInterval, GOOD_JOB_MINIMUM_POLL_INTERVAL);
+      GoodJob.setStorage('pollInterval', GoodJob.pollInterval);
+    } else {
+      GoodJob.pollEnabled = GoodJob.getStorage('pollEnabled') || false;
+      GoodJob.pollInterval = GoodJob.getStorage('pollInterval') || GOOD_JOB_DEFAULT_POLL_INTERVAL_SECONDS;
+    }
+
+    document.getElementById('toggle-poll').checked = GoodJob.pollEnabled;
+  },
+
+  togglePoll: (ev) => {
+    GoodJob.pollEnabled = ev.currentTarget.checked;
+    GoodJob.setStorage('pollEnabled', GoodJob.pollEnabled);
+  },
+
+  pollUpdates: () => {
+    setTimeout(() => {
+      if (GoodJob.pollEnabled === true) {
+        fetch(window.location.href)
+          .then(resp => resp.text())
+          .then(GoodJob.updateContent)
+          .finally(GoodJob.pollUpdates);
+      } else {
+        GoodJob.pollUpdates();
+      }
+    }, GoodJob.pollInterval);
+  },
+
+  updateContent: (newContent) => {
+    const domParser = new DOMParser();
+    const parsedDOM = domParser.parseFromString(newContent, "text/html");
+
+    const newElements = parsedDOM.querySelectorAll('[data-gj-poll-replace]');
+
+    for (let i = 0; i < newElements.length; i++) {
+      const newEl = newElements[i];
+      const oldEl = document.getElementById(newEl.id);
+
+      if (oldEl) {
+        oldEl.replaceWith(newEl);
+      }
+    }
+
+    GoodJob.renderCharts(false);
+  },
+
+  renderCharts: (animate) => {
+    const charts = document.querySelectorAll('.chart');
+
+    for (let i = 0; i < charts.length; i++) {
+      const chartEl = charts[i];
+      const chartData = JSON.parse(chartEl.dataset.json);
+
+      const ctx = chartEl.getContext('2d');
+      const chart = new Chart(ctx, {
+        type: 'line',
+        data: {
+          labels: chartData.labels,
+          datasets: chartData.datasets
+        },
+        options: {
+          animation: animate,
+          responsive: true,
+          maintainAspectRatio: false,
+          scales: {
+            y: {
+              beginAtZero: true
+            }
+          }
+        }
+      });
+    }
+  },
+
+  getStorage: (key) => {
+    const value = localStorage.getItem('good_job-' + key);
+
+    if (value === 'true') {
+      return true;
+    } else if (value === 'false') {
+      return false;
+    } else {
+      return value;
+    }
+  },
+
+  setStorage: (key, value) => {
+    localStorage.setItem('good_job-' + key, value);
+  }
+};
+
+GoodJob.ready(GoodJob.init);