Add new status' and easier API edit

- Added a maintenance status - Added a slow status - Made it so you can modify the API via value at top of script.js
layeredy · Oct 22, 2024 · b37fa53 · b37fa53
1 parent 92993de
commit b37fa53
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 50 deletions.
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!-- Status page developed by UptimeMatrix, a venture by Layeredy LLC (Version 1.0.4). | github.com/layeredy/uptimematrix-statuspage-spark  -->
+<!-- Status page developed by UptimeMatrix, a venture by Layeredy LLC (Version 1.0.5). | github.com/layeredy/uptimematrix-statuspage-spark  -->
 <!-- Theme: Spark github.com/layeredy/uptimematrix-statuspage-spark --> 
 <!DOCTYPE html>
 <html lang="en">
@@ -34,5 +34,5 @@ <h1><a href="https://layeredy.com"><img src="https://cdn.layeredy.com/uptimematr
     <script src="script.js"></script>
 </body>
 </html>
-<!-- Status page developed by UptimeMatrix, a venture by Layeredy LLC (Version 1.0.4). | github.com/layeredy/uptimematrix-statuspage-spark  -->
+<!-- Status page developed by UptimeMatrix, a venture by Layeredy LLC (Version 1.0.5). | github.com/layeredy/uptimematrix-statuspage-spark  -->
 <!-- Theme: Spark github.com/layeredy/uptimematrix-statuspage-spark -->
diff --git a/script.js b/script.js
@@ -1,3 +1,8 @@
+const apiUrl = "data.json"; 
+// ^^ Set this to your UptimeMatrix API URL, you can find this either at https://app.uptimematrix.com or if you are self-hosting, it will just be data.json ^^
+// Acceptable status' -- Operational, Degraded, Issue, Slow, Maintenance | If you need extras, you will need to edit this file and the styles file.
+// You do not need to modify anything below this line. See styles.css for styling.
+
 function setCookie(name, value, days) {
     let expires = "";
     if (days) {
@@ -23,9 +28,9 @@ function getCookie(name) {
 document.addEventListener("DOMContentLoaded", () => {
     const startTime = performance.now();
 
-    showLoadingAnimation(); 
+    showLoadingAnimation();
 
-    fetch("data.json")
+    fetch(apiUrl)
         .then((response) => {
             if (!response.ok) {
                 throw new Error(
@@ -50,7 +55,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
             handleWhitelabel(data.Whitelabel);
 
-            hideLoadingAnimation(); 
+            hideLoadingAnimation();
 
             const endTime = performance.now();
             const loadTime = (endTime - startTime).toFixed(2);
@@ -60,7 +65,7 @@ document.addEventListener("DOMContentLoaded", () => {
         })
         .catch((error) => {
             console.error("UptimeMatrix load failure!:", error.message);
-            hideLoadingAnimation(); 
+            hideLoadingAnimation();
             displayErrorMessage();
             console.error(
                 "--- What should I do? --- \n\n\n If you are a user: \n\n Please try again in a few minutes or check out our network status at status.layeredy.com \n\n\n If you are the site owner: \n\n Try re-checking in a few minutes or check your monitor configuration at app.uptimematrix.com if you are using a external database."
@@ -153,62 +158,57 @@ function updateAnnouncementBar(announcement) {
 function updateOverallStatus(services, RandomOperationalMessage, data) {
     const overallStatusElement = document.getElementById("overall-status");
 
-    let isMaintenanceOngoing = false;
-    if (data.maintenanceAlerts && data.maintenanceAlerts.length > 0) {
-        const now = new Date();
-        data.maintenanceAlerts.forEach((alert) => {
-            if (alert.start && alert.end) {
-                const startTime = new Date(alert.start);
-                const endTime = new Date(alert.end);
-                if (now >= startTime && now <= endTime) {
-                    isMaintenanceOngoing = true;
-                }
-            }
-        });
-    }
-    if (isMaintenanceOngoing) {
-        overallStatusElement.innerHTML = `
-            <div class="status-icon">//</div>
-            Undergoing maintenance
-        `;
-        overallStatusElement.className = "status-maintenance";
-        return;
-    }
-
     let overallStatus = "Operational";
     if (data.OverallStatus && data.OverallStatus !== "NoOverride") {
         overallStatus = data.OverallStatus;
     } else {
         const allStatuses = Object.values(services).flatMap((group) =>
             Object.values(group)
         );
-        if (allStatuses.some((status) => status === "Issue")) {
+        if (allStatuses.some((status) => status === "Maintenance")) {
+            overallStatus = "Maintenance";
+        } else if (allStatuses.some((status) => status === "Issue")) {
             overallStatus = "Issue";
+        } else if (allStatuses.some((status) => status === "Slow")) {
+            overallStatus = "Slow";
         } else if (allStatuses.some((status) => status === "Degraded")) {
             overallStatus = "Degraded";
+        } else {
+            overallStatus = "Operational";
         }
     }
 
-    let statusText = "All systems operational";
-    let statusIcon = "✓";
-
-    if (overallStatus === "Operational" && RandomOperationalMessage) {
-        const successMessages = [
-            "All systems are operational",
-            "Systems are functioning normally",
-            "Services are running smoothly",
-            "All systems are performing as expected",
-            "All platforms are operational and responsive",
-            "All systems are live",
-        ];
-        statusText =
-            successMessages[Math.floor(Math.random() * successMessages.length)];
-    } else if (overallStatus === "Degraded") {
-        statusText = "Some systems may be experiencing issues";
-        statusIcon = "!";
+    let statusText = "";
+    let statusIcon = "";
+
+    if (overallStatus === "Maintenance") {
+        statusText = "Undergoing maintenance";
+        statusIcon = "//";
     } else if (overallStatus === "Issue") {
         statusText = "Major outage detected";
         statusIcon = "✕";
+    } else if (overallStatus === "Slow") {
+        statusText = "Some services may be slow";
+        statusIcon = "…";
+    } else if (overallStatus === "Degraded") {
+        statusText = "Some systems may be experiencing issues";
+        statusIcon = "!";
+    } else if (overallStatus === "Operational") {
+        if (RandomOperationalMessage) {
+            const successMessages = [
+                "All systems are operational",
+                "Systems are functioning normally",
+                "Services are running smoothly",
+                "All systems are performing as expected",
+                "All platforms are operational and responsive",
+                "All systems are live",
+            ];
+            statusText =
+                successMessages[Math.floor(Math.random() * successMessages.length)];
+        } else {
+            statusText = "All systems operational";
+        }
+        statusIcon = "✓";
     } else {
         statusText = overallStatus;
         statusIcon = "?";
@@ -352,9 +352,15 @@ function calculateGroupStatus(serviceGroup) {
     const statuses = Object.values(serviceGroup);
     if (statuses.every((status) => status === "Operational")) {
         return "Operational";
+    } else if (statuses.some((status) => status === "Maintenance")) {
+        return "Maintenance";
     } else if (statuses.some((status) => status === "Issue")) {
         return "Issue";
-    } else {
+    } else if (statuses.some((status) => status === "Slow")) {
+        return "Slow";
+    } else if (statuses.some((status) => status === "Degraded")) {
         return "Degraded";
+    } else {
+        return "Unknown";
     }
 }
diff --git a/styles.css b/styles.css
@@ -5,6 +5,8 @@
   --alert-color: #ef4444;
   --success-color: #22c55e;
   --warning-color: #f59e0b;
+  --slow-color: #ff9800;
+  --maintenance-color: #9c27b0;  
   --dropdown-bg: #1e293b;
   --card-bg: #1e293b;
   --border-radius: 10px;
@@ -215,6 +217,24 @@ h1 {
   animation: blip 2s infinite;
 }
 
+.status-slow {
+  background-color: rgba(255, 152, 0, 0.2);
+}
+
+.status-slow::before {
+  background-color: var(--slow-color);
+  animation: blip 2s infinite;
+}
+
+.status-maintenance {
+  background-color: rgba(156, 39, 176, 0.2);
+}
+
+.status-maintenance::before {
+  background-color: var(--maintenance-color);
+  animation: blip 2s infinite;
+}
+
 #overall-status {
   background-color: var(--overall-status-bg);
   color: var(--overall-status-text);
@@ -247,15 +267,31 @@ h1 {
   animation: blip 2s infinite;
 }
 
+.status-degraded .status-icon {
+  color: var(--warning-color);
+}
+
+.status-issue .status-icon {
+  color: var(--alert-color);
+}
+
+.status-slow .status-icon {
+  color: var(--slow-color);
+}
+
+.status-maintenance .status-icon {
+  color: var(--maintenance-color);
+}
+
 @keyframes blip {
   0% {
-    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
   }
   70% {
-    box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
+    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
   }
   100% {
-    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
+    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
   }
 }
 
@@ -345,6 +381,14 @@ body.light-mode .status-issue {
   background-color: rgba(239, 68, 68, 0.1);
 }
 
+body.light-mode .status-slow {
+  background-color: rgba(255, 152, 0, 0.1);
+}
+
+body.light-mode .status-maintenance {
+  background-color: rgba(156, 39, 176, 0.1);
+}
+
 @media (max-width: 768px) {
   .container {
     padding: var(--spacing-md) var(--spacing-sm);