feat: ixvd/hub integration

public/obj/js/issues.js

@@ -0,0 +1,62 @@
+const issuesDiv = document.querySelector("#issues");
+const issuesHolderDiv = document.querySelector("#issues-holder");
+
+async function updateIssues() {
+    let fetchResult = await (await fetch('/relay/hub_issues')).json()
+    if (fetchResult.length > 0) {
+        issuesDiv.removeAttribute("hidden");
+        issuesHolderDiv.innerHTML = '';
+        fetchResult.forEach((issue) => {
+            let issueDiv = document.createElement("div");
+            issueDiv.classList.add("issue");
+            let detailsDiv = document.createElement("div");
+            detailsDiv.classList.add("issue-details");
+            issueDiv.append(detailsDiv);
+
+            let titleSpan = document.createElement("span");
+            titleSpan.classList.add("issue-title");
+            detailsDiv.append(titleSpan);
+            titleSpan.innerText = issue.title;
+
+
+            let descriptionSpan = document.createElement("span");
+            descriptionSpan.classList.add("issue-description");
+            detailsDiv.append(descriptionSpan);
+            let desc = () => {
+                let body = issue.body.replaceAll("\r", "").replaceAll("\n", "  ");
+                if (body.length > 100) {
+                    return body.slice(0, 100) + "..."
+                } else {
+                    return body
+                }
+            };
+            descriptionSpan.innerText = desc();
+
+            let dataDiv = document.createElement("div");
+            dataDiv.classList.add("issue-data");
+            issueDiv.append(dataDiv);
+
+            let statusSpan = document.createElement("span");
+            statusSpan.classList.add("issue-status");
+            dataDiv.append(statusSpan);
+            statusSpan.innerText = issue.state;
+            switch (issue.state) {
+                case 'open':
+                    statusSpan.style.color = "#ff8f8f";
+                    break
+                case 'closed':
+                    statusSpan.style.color = "#8fff91";
+                    break
+            }
+
+            let timeSpan = document.createElement("span");
+            statusSpan.classList.add("issue-time");
+            dataDiv.append(timeSpan);
+            timeSpan.innerText = issue.updated_at;
+
+            issuesHolderDiv.append(issueDiv)
+        })
+    } else issuesDiv.setAttribute("hidden", "true");
+}
+
+window.updateLoop.push(updateIssues);

public/obj/js/services.js

@@ -6,9 +6,9 @@ const SERVICE_BLACKLIST = [
 ];
 
 const serviceHolderDiv = document.querySelector('#service-holder');
+serviceHolderDiv.innerHTML = 'Loading...';
 
-async function update() {
-    serviceHolderDiv.innerHTML = 'Loading...';
+async function updateServices() {
     let fetchResult = await (await fetch('/relay/gatus')).json()
     serviceHolderDiv.innerHTML = '';
 
@@ -27,4 +27,4 @@ async function update() {
     })
 }
 
-update();
+window.updateLoop.push(updateServices);

public/obj/js/updateLoop.js

@@ -0,0 +1,15 @@
+window.updateLoop = [];
+
+(() => {
+    let updLoop = setInterval(() => {
+        updateLoop.forEach(f => f());
+    }, 15000);
+
+    let everythingLoaded = setInterval(function() {
+        if (/loaded|complete/.test(document.readyState)) {
+            clearInterval(everythingLoaded);
+            updateLoop.forEach(f => f());
+        }
+    }, 10);
+})();
+