Services Monitor

public/assets/js/home.js

@@ -0,0 +1,92 @@
+// Store statuses globally
+let linkStatuses = {};
+
+// Fetch statuses on page load
+document.addEventListener('DOMContentLoaded', () => {
+    // Fetch statuses immediately but keep folders closed
+    fetch("http://localhost:5252/api/link-status")
+        .then(res => res.json())
+        .then(statuses => {
+            linkStatuses = statuses; // Store for later use
+            console.log("Cached link statuses:", linkStatuses);
+        })
+        .catch(error => console.error("Error:", error));
+});
+
+// Helper function to update status emojis
+function updateFolderStatuses(folder, statuses) {
+    folder.querySelectorAll("a").forEach(link => {
+        const url = link.href;
+        const matchingUrl = Object.keys(statuses).find(statusUrl => 
+            url.includes(new URL(statusUrl).hostname)
+        );
+        const status = matchingUrl ? statuses[matchingUrl] : "unknown";
+        const emoji = status === "online" ? "🟢" : "🔴";
+        
+        const statusSpan = link.querySelector('.status-emoji');
+        if (statusSpan) {
+            statusSpan.textContent = emoji;
+        }
+    });
+}
+
+function toggleFolder(folderId, buttonId) {
+    const folder = document.getElementById(folderId);
+    const button = document.getElementById(buttonId);
+    if (!folder || !button) return;
+
+    if (folder.style.display === "none" || folder.style.display === "") {
+        folder.style.display = "block";
+        button.innerHTML = button.innerHTML.replace("↓", "↑");
+        
+        // Use cached statuses if available, otherwise fetch new ones
+        if (Object.keys(linkStatuses).length > 0) {
+            updateFolderStatuses(folder, linkStatuses);
+        } else {
+            fetch("http://localhost:5252/api/link-status")
+                .then(res => res.json())
+                .then(statuses => {
+                    linkStatuses = statuses;
+                    updateFolderStatuses(folder, statuses);
+                })
+                .catch(error => console.error("Error:", error));
+        }
+    } else {
+        folder.style.display = "none";
+        button.innerHTML = button.innerHTML.replace("↑", "↓");
+    }
+// Wait for both DOM and fetch to complete
+async function init() {
+    try {
+        // Fetch the status first
+        console.log("Fetching statuses...");
+        const response = await fetch("http://localhost:5252/api/link-status");
+        const statuses = await response.json();
+        console.log("Got statuses:", statuses);
+
+        // Now update the links
+        document.querySelectorAll(".links a").forEach(link => {
+            const url = link.href;
+            console.log('Checking link:', url); // Debug log
+            const matchingUrl = Object.keys(statuses).find(statusUrl => {
+                const linkHostname = new URL(url).hostname;
+                const statusHostname = new URL(statusUrl).hostname;
+                console.log('Comparing:', linkHostname, 'with', statusHostname); // Debug log
+                return linkHostname === statusHostname;
+            });
+            console.log('Matching URL found:', matchingUrl); // Debug log
+            const status = matchingUrl ? statuses[matchingUrl] : "unknown";
+            console.log('Status for', url, 'is', status); // Debug log
+            const emoji = status === "online" ? "🟢" : "🔴";
+            
+            // Find the span inside this link and update it
+            const statusSpan = link.querySelector('.status-emoji');
+            if (statusSpan) {
+                statusSpan.textContent = emoji;
+            }
+        });
+    } catch (error) {
+        console.error("Error:", error);
+    }
+}
+}

public/assets/js/scripts.js

@@ -26,32 +26,9 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 }
 
-function navigateToSection(select) {
-    const sectionId = select.value;
-    if (sectionId) {
-        document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
-    }
-}
 
-  // Function to prefetch a URL
-  function prefetch(url) {
-    const link = document.createElement('link');
-    link.rel = 'prefetch';
-    link.href = url;
-    document.head.appendChild(link);
-}
 
-  // Add event listeners to your links
-  const links = document.querySelectorAll('a.prefetch');
-
-links.forEach(link => {
-    link.addEventListener('mouseenter', () => {
-      const url = link.href; // Get the link URL
-      prefetch(url); // Call prefetch function
-    });
-});
-
-  // Footer Loader and Event Listeners
+// Footer Loader and Event Listeners
   fetch('/parts/footer.html')
     .then(response => response.text())
     .then(data => {