feat: realtime services

public/obj/css/main.css

@@ -23,6 +23,20 @@ main {
     background-color: #fff;
 }
 
+#service-holder {
+    display: flex;
+    flex-direction: column;
+}
+
+#service-holder .service {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+}
+
+#service-holder .service > .service-status {
+    text-align: right;
+}
+
 a {
     color: #000;
     transition: 0.5s all;

public/obj/js/services.js

@@ -0,0 +1,30 @@
+const SERVICE_BLACKLIST = [
+    'ixvd.net',
+    'proxy',
+    '2d.neo.ixvd.net',
+    'pad.sandbox.neo.ixvd.net',
+];
+
+const serviceHolderDiv = document.querySelector('#service-holder');
+
+async function update() {
+    serviceHolderDiv.innerHTML = 'Loading...';
+    let fetchResult = await (await fetch('https://s.ixvd.net/api/v1/endpoints/statuses')).json()
+    serviceHolderDiv.innerHTML = '';
+
+    fetchResult.forEach(s => {
+        if (!s.results || s.results.length === 0) return;
+        let service = s.results[0];
+        if (service.hostname && !SERVICE_BLACKLIST.includes(service.hostname) && service.status === 200) {
+            let serviceDiv = document.createElement('div');
+            serviceDiv.classList.add('service');
+            serviceDiv.innerHTML = `
+                <span class="service-name"><a href="https://${service.hostname}" target="_blank" style="color: #de4aff">${service.hostname}</a></span>
+                <span class="service-status"><b style="color: ${service.success ? '#4f4' : 'red'}">${service.success ? 'Online' : 'Offline'}</b></span>
+            `;
+            serviceHolderDiv.appendChild(serviceDiv);
+        }
+    })
+}
+
+update();