feat: Introduce queue based live stat refresh (#1059)

resources/assets/js/liveStatRefresh.js

@@ -0,0 +1,100 @@
+const REFRESH_INTERVAL_SMALL = 5000;
+const REFRESH_INTERVAL_BIG = 30000;
+const QUEUE_PROCESSING_INTERVAL = 1000;
+const CONTAINER_SELECTOR = ".livestats-container";
+
+/**
+ * @returns {*[]}
+ */
+function createQueue() {
+  const queue = [];
+  let suspended = false;
+
+  function processQueue() {
+    if (queue.length === 0 || suspended === true) {
+      return;
+    }
+
+    const next = queue.shift();
+    next();
+  }
+
+  document.addEventListener("visibilitychange", () => {
+    suspended = document.hidden;
+  });
+
+  setInterval(processQueue, QUEUE_PROCESSING_INTERVAL);
+
+  return queue;
+}
+
+/**
+ * @returns {NodeListOf<Element>}
+ */
+function getContainers() {
+  return document.querySelectorAll(CONTAINER_SELECTOR);
+}
+
+/**
+ *
+ * @param {boolean} dataOnly
+ * @param {boolean} active
+ * @returns {number}
+ */
+function getQueueInterval(dataOnly, active) {
+  if (dataOnly) {
+    return REFRESH_INTERVAL_BIG;
+  }
+
+  if (active) {
+    return REFRESH_INTERVAL_SMALL;
+  }
+
+  return REFRESH_INTERVAL_BIG;
+}
+
+/**
+ * @param {HTMLElement} container
+ * @param {array} queue
+ * @returns {function(): Promise<Response>}
+ */
+function createUpdateJob(container, queue) {
+  const id = container.getAttribute("data-id");
+  // Data only attribute seems to indicate that the item should not be updated that often
+  const isDataOnly = container.getAttribute("data-dataonly") === "1";
+
+  return () =>
+    fetch(`get_stats/${id}`)
+      .then((response) => {
+        if (response.ok) {
+          return response.json();
+        }
+
+        throw new Error(`Network response was not ok: ${response.status}`);
+      })
+      .then((data) => {
+        // eslint-disable-next-line no-param-reassign
+        container.innerHTML = data.html;
+
+        const isActive = data.status === "active";
+
+        if (queue) {
+          setTimeout(() => {
+            queue.push(createUpdateJob(container, queue));
+          }, getQueueInterval(isDataOnly, isActive));
+        }
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+}
+
+const livestatContainers = getContainers();
+
+if (livestatContainers.length > 0) {
+  const myQueue = createQueue();
+
+  livestatContainers.forEach((container) => {
+    createUpdateJob(container, myQueue)();
+  });
+}