Services Monitor

2025-09-26 23:59:18 -04:00
parent d55333a652
commit fa0a7bba8a
13 changed files with 297 additions and 106 deletions
--- a/public/assets/js/home.js
+++ b/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);
+    }
+}
+}
--- a/public/assets/js/scripts.js
+++ b/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 => {
--- a/public/index.html
+++ b/public/index.html
@@ -17,8 +17,8 @@
    <link rel="icon" href="/images/favicon.png" type="image/png">

    <!-- scripts -->
-    <script src="/assets/js/scripts.js" defer></script>

+    <script src="/assets/js/home.js"></script>
    <link rel="stylesheet" href="/assets/css/main.css">
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet">
 </head>
@@ -40,32 +40,35 @@
        </div>
        <button class="button" id="bitcoin-folder-btn" onclick="toggleFolder('folder2', 'bitcoin-folder-btn')">Use Bitcoin <span style="color: #F7931A;">↓</span></button>
        <div class="links" id="folder2">
-            All apps hosted by BTCforPlebs<br></br>
-            <a href="https://lightning.btcforplebs.com" target="_blank" class="prefetch">Lightning</a>
-            <a href="https://mempool.btcforplebs.com" target="_blank" class="prefetch">Mempool</a>
-            <a href="https://bitview.space/" target="_blank" class="prefetch">Bitview.space (external host)</a>
+            <a href="https://lightning.btcforplebs.com" target="_blank" class="prefetch">Lightning <span class="status-emoji"></span></a>
+            <a href="https://mempool.btcforplebs.com" target="_blank" class="prefetch">Mempool <span class="status-emoji"></span></a>
+            <a href="https://bitview.space/" target="_blank" class="prefetch">Bitview.space ⚪️</span></a>
        </div>
        
        <button class="button" id="nostr-folder-btn" onclick="toggleFolder('folder1', 'nostr-folder-btn')">Use Nostr <span style="color: #F7931A;">↓</span></button>
        <div class="links" id="folder1">
-            All apps hosted by BTCforPlebs<br></br>
-            <a href="https://nostrudel.btcforplebs.com" target="_blank" class="prefetch">Nostrudel</a>
-            <a href="https://nosotros.btcforplebs.com" target="_blank" class="prefetch">Nosotros</a>
-            <a href="https://bloom.btcforplebs.com" target="_blank" class="prefetch">Bloom</a>
-            <a href="https://btcforplebs.com/relay" target="_blank" class="prefetch">Relay</a>
-            <br></br>
-            <a href="https://nostrapps.com" target="_blank">NostrApps.com</a>
+            <a href="https://nostrudel.btcforplebs.com" target="_blank" class="prefetch">Nostrudel <span class="status-emoji"></span></a>
+            <a href="https://nosotros.btcforplebs.com" target="_blank" class="prefetch">Nosotros <span class="status-emoji"></span></a>
+            <a href="https://bloom.btcforplebs.com" target="_blank" class="prefetch">Bloom <span class="status-emoji"></span></a>
+            <a href="https://relay.btcforplebs.com" target="_blank" class="prefetch">Relay <span class="status-emoji"></span></a>
+            <a href="https://nostrapps.com" target="_blank">NostrApps.com ⚪️</a>
        </div>
        <button class="button" id="cashu-folder-btn" onclick="toggleFolder('folder3', 'cashu-folder-btn')">Use Cashu <span style="color: #F7931A;">↓</span></button>
        <div class="links" id="folder3">
-            <a href="https://cashu.me" class="prefetch">Cashu.me</a>
+            <a href="https://cashu.btcforplebs.com" class="prefetch">Cashu Web App <span class="status-emoji"></span></a>
+            <a href="https://macadamia.cash" class="prefetch">Macadamia (iOS) ⚪️</a>
+            <a href="https://minibits.cash" class="prefetch">Minibits (Android) ⚪️</a>
        </div>

-        <a href="https://live.btcforplebs.com" class="button" class="prefetch">BTCforPlebs Live</a>
+        <a href="https://live.btcforplebs.com" class="button" class="prefetch">BTCforPlebs Live<span class="status-emoji"></span></a> 
        <br></br>
    </div>
    
-<div id="footer"></div>

+<script>
+
+</script>
+
+<div id="footer"></div>
 </body>
 </html>
--- a/public/learn-bitcoin/index.html
+++ b/public/learn-bitcoin/index.html
@@ -6,7 +6,6 @@
    <title>Learn Bitcoin</title>
    
    <!-- scripts -->
-    <script src="/assets/js/scripts.js" defer></script>

 </head>
 <link rel="stylesheet" href="/assets/css/main.css">
@@ -194,7 +193,12 @@

    <div id="back-to-top">
 <a href="#top" title="Back to Top">🔝</a>
-    
+        <script>function navigateToSection(select) {
+        const sectionId = select.value;
+        if (sectionId) {
+        document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
+        }
+        }</script>


 </html>
--- a/public/learn-cashu/index.html
+++ b/public/learn-cashu/index.html
@@ -9,7 +9,6 @@
    <link rel="stylesheet" href="/assets/css/main.css">
    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" rel="stylesheet">
-    <script src="/assets/js/scripts.js" defer></script>
 </head>
 <body>
    <!-- Bitcoin Price Banner -->
@@ -107,5 +106,10 @@
 </div>
 <div id="footer"></div>
 <a href="#top" title="Back to Top">🔝</a>
-</body>
+    <script>function navigateToSection(select) {
+    const sectionId = select.value;
+    if (sectionId) {
+        document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
+    }
+}</script>
 </html>
--- a/public/learn-nostr/index.html
+++ b/public/learn-nostr/index.html
@@ -48,7 +48,12 @@
    <div id="footer"></div>
    
    <a href="#top" title="Back to Top">🔝</a>
-
+    <script>function navigateToSection(select) {
+    const sectionId = select.value;
+    if (sectionId) {
+        document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
+    }
+}</script>
 </body>
 </html>

--- a/public/parts/footer.html
+++ b/public/parts/footer.html
@@ -1,6 +1,6 @@
 <link rel="stylesheet" href="/assets/css/main.css">
 <footer>
-    <script src="/assets/js/scripts.js" defer></script>
+    <script src="/assets/js/scripts.js"></script>
    <h3>We operate on solely on Bitcoin donations; from a pleb just like you!</h3>

                       <!-- Button Section -->