v2/index.html aktualisiert

2026-07-28 00:37:17 +02:00
parent 1c60b2eb29
commit 7311bb1d36
1 changed files with 68 additions and 8 deletions
@@ -17,9 +17,33 @@
            font-size: 1.5rem; 
            border-bottom: 2px solid #444; 
            padding-bottom: 10px; 
-            margin-bottom: 30px; 
+            margin-bottom: 20px; 
        }
        
+        /* Suchfeld Styling */
+        .search-container {
+            max-width: 1000px;
+            margin-bottom: 30px;
+        }
+        #searchInput {
+            width: 100%;
+            padding: 12px 15px;
+            border-radius: 6px;
+            border: 1px solid #333;
+            background-color: #1e1e1e;
+            color: #fff;
+            font-size: 1rem;
+            box-sizing: border-box;
+            transition: border-color 0.2s;
+        }
+        #searchInput:focus {
+            outline: none;
+            border-color: #4da6ff;
+        }
+        #searchInput::placeholder {
+            color: #888;
+        }
+
        #dashboard {
            max-width: 1000px;
        }
@@ -27,7 +51,7 @@
        /* Server-Block Überschrift */
        .server-group-title {
            font-size: 1.1rem;
-            color: #4da6ff; /* Ein schönes, techy Blau zur Abhebung */
+            color: #4da6ff;
            margin-top: 35px;
            margin-bottom: 12px;
            padding-bottom: 6px;
@@ -57,7 +81,7 @@
        }
        .node-row:hover { background: #252525; }
        
-        /* Status Indikator (Leuchtender Punkt) */
+        /* Status Indikator */
        .status-dot {
            width: 10px;
            height: 10px;
@@ -105,6 +129,11 @@
 </head>
 <body>
    <h1>Gateway Status Übersicht</h1>
+    
+    <div class="search-container">
+        <input type="text" id="searchInput" placeholder="🔍 Nodes durchsuchen..." autocomplete="off">
+    </div>
+
    <div id="dashboard">
        <p>Lade Status-Daten...</p>
    </div>
@@ -112,6 +141,38 @@
    <script>
        const API_URL = 'api.php';

+        // Such-Logik
+        function applySearchFilter() {
+            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
+            const serverGroups = document.querySelectorAll('.server-group-title');
+            const nodeLists = document.querySelectorAll('.node-list');
+            
+            nodeLists.forEach((list, index) => {
+                let hasVisibleNodes = false;
+                const rows = list.querySelectorAll('.node-row');
+                
+                rows.forEach(row => {
+                    const clientName = row.querySelector('.client-name').textContent.toLowerCase();
+                    
+                    // Zeile anzeigen, wenn Suchbegriff im Client-Namen enthalten ist
+                    if (clientName.includes(searchTerm)) {
+                        row.style.display = 'flex';
+                        hasVisibleNodes = true;
+                    } else {
+                        row.style.display = 'none';
+                    }
+                });
+                
+                // Gesamte Server-Überschrift ausblenden, wenn kein Client darin den Suchkriterien entspricht
+                if (serverGroups[index]) {
+                    serverGroups[index].style.display = hasVisibleNodes ? 'flex' : 'none';
+                }
+            });
+        }
+
+        // Event-Listener an das Suchfeld hängen
+        document.getElementById('searchInput').addEventListener('input', applySearchFilter);
+
        async function fetchStatus() {
            try {
                const response = await fetch(API_URL);
@@ -123,23 +184,19 @@
                let currentListContainer = null;
                
                data.forEach(node => {
-                    // 1. Prüfen, ob wir einen neuen Server-Block anfangen müssen
                    if (node.server !== currentServer) {
                        currentServer = node.server;
                        
-                        // Überschrift für den Server anlegen
                        const header = document.createElement('h2');
                        header.className = 'server-group-title';
                        header.innerHTML = `🖥️ ${node.server}`;
                        dashboard.appendChild(header);
                        
-                        // Neuen Container für die Nodes dieses Servers anlegen
                        currentListContainer = document.createElement('div');
                        currentListContainer.className = 'node-list';
                        dashboard.appendChild(currentListContainer);
                    }

-                    // 2. Zeit und Online/Offline Status berechnen
                    const lastSeen = new Date(node.last_seen + " UTC");
                    const now = new Date();
                    const diffMinutes = (now - lastSeen) / 1000 / 60;
@@ -149,7 +206,6 @@
                    let timeText = Math.round(diffMinutes) + ' Min.';
                    if (diffMinutes < 1) timeText = '< 1 Min.';
                    
-                    // 3. Zeile erstellen und in den AKTUELLEN Server-Container einfügen
                    const row = document.createElement('div');
                    row.className = `node-row ${isOnline ? 'online' : 'offline'}`;
                    
@@ -161,6 +217,10 @@
                    `;
                    currentListContainer.appendChild(row);
                });
+
+                // Suchfilter nach dem Neuladen der Daten direkt wieder anwenden
+                applySearchFilter();
+
            } catch (err) {
                console.error("Fehler beim Abrufen der Daten:", err);
            }