Refactor: New Home Page

static/js/status.js

@@ -0,0 +1,93 @@
+const statusIcon = document.getElementById("status-icon");
+const statusText = document.getElementById("status-text");
+const statusAnimate = document.getElementById("status-animate");
+
+const serviceUp = {
+  color: ["bg-green-500", "dark:bg-green-400"],
+  text: "Operational",
+};
+const serviceDegraded = {
+  color: ["bg-yellow-400", "dark:bg-yellow-200"],
+  text: "Degraded",
+};
+const serviceDown = {
+  color: ["bg-red-600", "dark:bg-red-500"],
+  text: "Down",
+};
+const serviceUnknown = {
+  color: ["bg-gray-500", "dark:bg-gray-400"],
+  text: "Unknown",
+};
+
+async function getServicesHealth() {
+  try {
+    const serviceStatus = await fetch(
+      "https://status.wah.su/api/status-page/heartbeat/services"
+    );
+
+    const services = await serviceStatus.json();
+    const heartbeatDict = services.heartbeatList;
+    let lastHeartbeats = [];
+
+    for (const [key, value] of Object.entries(heartbeatDict)) {
+      lastHeartbeats.push(
+        heartbeatDict[key][heartbeatDict[key].length - 1].status
+      );
+    }
+
+    let status = "up";
+    const count = lastHeartbeats.reduce((partialSum, a) => partialSum + a, 0);
+
+    if (count === lastHeartbeats.length) {
+      status = "up";
+    } else if (count === 0) {
+      status = "down";
+    } else {
+      status = "degraded";
+    }
+
+    if (status === "up") {
+      statusIcon.classList.add(...serviceUp.color);
+      statusIcon.classList.remove(
+        ...serviceDegraded.color,
+        ...serviceDown.color,
+        ...serviceUnknown.color
+      );
+      statusText.textContent = serviceUp.text;
+      statusAnimate.classList.remove("hidden");
+    } else if (status === "degraded") {
+      statusIcon.classList.add(...serviceDegraded.color);
+      statusIcon.classList.remove(
+        ...serviceUp.color,
+        ...serviceDown.color,
+        ...serviceUnknown.color
+      );
+      statusText.textContent = serviceDegraded.text;
+      statusAnimate.classList.remove("hidden");
+    } else if (status === "down") {
+      statusIcon.classList.add(...serviceDown.color);
+      statusIcon.classList.remove(
+        ...serviceUp.color,
+        ...serviceDegraded.color,
+        ...serviceUnknown.color
+      );
+      statusText.textContent = serviceDown.text;
+      statusAnimate.classList.add("hidden");
+    }
+  } catch (error) {
+    statusIcon.classList.add(...serviceUnknown.color);
+    statusIcon.classList.remove(
+      ...serviceUp.color,
+      ...serviceDegraded.color,
+      ...serviceDown.color
+    );
+    statusText.textContent = serviceUnknown.text;
+    statusAnimate.classList.add("hidden");
+    console.log("Failed to fetch services status: " + error);
+    return;
+  }
+}
+
+getServicesHealth();
+
+setInterval(getServicesHealth, 600000);

static/js/tags.js

@@ -0,0 +1,26 @@
+const services_container = document.getElementById('services');
+const all_services = services_container.children;
+
+const tags = {
+    'media': '<p class="px-4 py-1 text-white bg-green-500 rounded-md max-w-fit">media</p>',
+    'security': '<p class="px-4 py-1 text-white bg-blue-500 rounded-md max-w-fit">security</p>',
+    'communication': '<p class="px-4 py-1 text-white bg-pink-600 rounded-md max-w-fit">communication</p>',
+    'member only': '<p class="px-4 py-1 text-white bg-red-500 rounded-md max-w-fit">member only</p>',
+    'games': '<p class="px-4 py-1 text-white bg-yellow-500 rounded-md max-w-fit">games</p>',
+}
+
+for (let i = 0; i < all_services.length; i++) {
+
+    const service = all_services.item(i);
+    const service_tags_container = service.querySelector('[data-tags]');
+    const service_tags_content = service_tags_container.dataset.tags.split(',');
+
+    for (let j = 0; j < service_tags_content.length; j++) {
+        const tag = service_tags_content[j];
+        if (tags[tag]) {
+            service_tags_container.innerHTML += tags[tag];
+        } else {
+            service_tags_container.innerHTML += '<p class="px-4 py-1 text-white bg-gray-500 rounded-md max-w-fit">' + tag + '</p>';
+        }
+    }
+}