From 7faa9f7f0ceeb41fbea455d85357fc2a13c189cd Mon Sep 17 00:00:00 2001
From: "manuel.maier" <manuel.maier@maieredv.de>
Date: Wed, 29 Jul 2026 12:47:01 +0200
Subject: [PATCH] index.html aktualisiert

---
 index.html | 66 +++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 46 insertions(+), 20 deletions(-)
diff --git a/index.html b/index.html
index 392c8cb..c3845eb 100644
--- a/index.html
+++ b/index.html
@@ -3,12 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Netmaker GW-Status</title>
-        <!-- Standard Favicon (relativer Pfad und Cache-Buster) -->
+    <title>Netmaker GW-Status</title>
+    <!-- Standard Favicon (relativer Pfad und Cache-Buster) -->
     <link rel="icon" href="favicon.ico?v=1" type="image/x-icon">
-        <!-- Extra für dein iPhone / Safari -->
+    <!-- Extra für dein iPhone / Safari -->
     <link rel="apple-touch-icon" href="favicon.ico?v=1">
-      <style>
+    <style>
         body {
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
             background-color: #121212;
@@ -246,31 +246,59 @@
                 
                 const isSearching = document.getElementById('searchInput').value.trim() !== '';
                 
+                // 1. Daten nach Servern gruppieren
                 const servers = {};
                 data.forEach(node => {
                     if (!servers[node.server]) servers[node.server] = [];
                     servers[node.server].push(node);
                 });
 
+                const now = new Date();
+                const serverArray = [];
+
+                // 2. Gateway-Status vorab berechnen und in ein Array packen
+                for (const [serverName, nodes] of Object.entries(servers)) {
+                    let minDiffMinutes = Infinity; 
+                    
+                    nodes.forEach(node => {
+                        const safeDateString = node.last_seen.replace(' ', 'T') + 'Z';
+                        const lastSeen = new Date(safeDateString);
+                        const diffMinutes = (now - lastSeen) / 1000 / 60;
+                        if (diffMinutes < minDiffMinutes) {
+                            minDiffMinutes = diffMinutes;
+                        }
+                    });
+
+                    const isGatewayOffline = (minDiffMinutes >= 5);
+                    
+                    serverArray.push({
+                        serverName: serverName,
+                        nodes: nodes,
+                        isGatewayOffline: isGatewayOffline
+                    });
+                }
+
+                // 3. Array sortieren: Offline Gateways zuerst, danach alphabetisch
+                serverArray.sort((a, b) => {
+                    if (a.isGatewayOffline === b.isGatewayOffline) {
+                        return a.serverName.localeCompare(b.serverName); // Alphabetisch
+                    }
+                    return a.isGatewayOffline ? -1 : 1; // Offline nach oben
+                });
+
+                // 4. Dashboard zeichnen
                 const dashboard = document.getElementById('dashboard');
                 dashboard.innerHTML = '';
                 
-                for (const [serverName, nodes] of Object.entries(servers)) {
+                serverArray.forEach(serverGroup => {
                     let onlineCount = 0;
-                    let minDiffMinutes = Infinity; 
-                    const now = new Date();
                     
-                    const rowElements = nodes.map(node => {
+                    const rowElements = serverGroup.nodes.map(node => {
                         const safeDateString = node.last_seen.replace(' ', 'T') + 'Z';
                         const lastSeen = new Date(safeDateString);
                         const diffMinutes = (now - lastSeen) / 1000 / 60;
                         
-                        if (diffMinutes < minDiffMinutes) {
-                            minDiffMinutes = diffMinutes;
-                        }
-
                         const isOnline = (node.status === 'true' && diffMinutes < 5);
-                        
                         if (isOnline) onlineCount++;
                         
                         let timeText = Math.round(diffMinutes) + ' Min.';
@@ -287,21 +315,19 @@
                         return row;
                     });
                     
-                    const isGatewayOffline = (minDiffMinutes >= 5);
-                    
                     const header = document.createElement('div');
-                    header.className = `server-group-title ${isGatewayOffline ? 'gateway-offline' : ''}`;
+                    header.className = `server-group-title ${serverGroup.isGatewayOffline ? 'gateway-offline' : ''}`;
                     
                     let badgeHTML = '';
-                    if (isGatewayOffline) {
+                    if (serverGroup.isGatewayOffline) {
                         badgeHTML = `<div class="gateway-offline-badge">Gateway Offline</div>`;
                     } else {
-                        badgeHTML = `<div class="summary-badge">${onlineCount} / ${nodes.length} online</div>`;
+                        badgeHTML = `<div class="summary-badge">${onlineCount} / ${serverGroup.nodes.length} online</div>`;
                     }
 
                     header.innerHTML = `
                         <div class="server-group-left">
-                            <span>🖥️ ${serverName}</span>
+                            <span>🖥️ ${serverGroup.serverName}</span>
                         </div>
                         ${badgeHTML}
                     `;
@@ -312,7 +338,7 @@
                     
                     rowElements.forEach(row => listContainer.appendChild(row));
                     dashboard.appendChild(listContainer);
-                }
+                });
 
                 if (isSearching) applySearchFilter();
 
