MAIEREDV/netmaker-status-script
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

index.html aktualisiert

Browse Source
This commit is contained in:
manuel.maier
2026-07-29 12:47:01 +02:00
parent 0bb624c372
commit 7faa9f7f0c
1 changed files with 46 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+46 -20
View File
@@ -3,12 +3,12 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netmaker GW-Status</title> <title>Netmaker GW-Status</title>
<!-- Standard Favicon (relativer Pfad und Cache-Buster) --> <!-- Standard Favicon (relativer Pfad und Cache-Buster) -->
<link rel="icon" href="favicon.ico?v=1" type="image/x-icon"> <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"> <link rel="apple-touch-icon" href="favicon.ico?v=1">
<style> <style>
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #121212; background-color: #121212;
@@ -246,31 +246,59 @@
const isSearching = document.getElementById('searchInput').value.trim() !== ''; const isSearching = document.getElementById('searchInput').value.trim() !== '';
// 1. Daten nach Servern gruppieren
const servers = {}; const servers = {};
data.forEach(node => { data.forEach(node => {
if (!servers[node.server]) servers[node.server] = []; if (!servers[node.server]) servers[node.server] = [];
servers[node.server].push(node); 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'); const dashboard = document.getElementById('dashboard');
dashboard.innerHTML = ''; dashboard.innerHTML = '';
for (const [serverName, nodes] of Object.entries(servers)) { serverArray.forEach(serverGroup => {
let onlineCount = 0; 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 safeDateString = node.last_seen.replace(' ', 'T') + 'Z';
const lastSeen = new Date(safeDateString); const lastSeen = new Date(safeDateString);
const diffMinutes = (now - lastSeen) / 1000 / 60; const diffMinutes = (now - lastSeen) / 1000 / 60;
if (diffMinutes < minDiffMinutes) {
minDiffMinutes = diffMinutes;
}
const isOnline = (node.status === 'true' && diffMinutes < 5); const isOnline = (node.status === 'true' && diffMinutes < 5);
if (isOnline) onlineCount++; if (isOnline) onlineCount++;
let timeText = Math.round(diffMinutes) + ' Min.'; let timeText = Math.round(diffMinutes) + ' Min.';
@@ -287,21 +315,19 @@
return row; return row;
}); });
const isGatewayOffline = (minDiffMinutes >= 5);
const header = document.createElement('div'); const header = document.createElement('div');
header.className = `server-group-title ${isGatewayOffline ? 'gateway-offline' : ''}`; header.className = `server-group-title ${serverGroup.isGatewayOffline ? 'gateway-offline' : ''}`;
let badgeHTML = ''; let badgeHTML = '';
if (isGatewayOffline) { if (serverGroup.isGatewayOffline) {
badgeHTML = `<div class="gateway-offline-badge">Gateway Offline</div>`; badgeHTML = `<div class="gateway-offline-badge">Gateway Offline</div>`;
} else { } else {
badgeHTML = `<div class="summary-badge">${onlineCount} / ${nodes.length} online</div>`; badgeHTML = `<div class="summary-badge">${onlineCount} / ${serverGroup.nodes.length} online</div>`;
} }
header.innerHTML = ` header.innerHTML = `
<div class="server-group-left"> <div class="server-group-left">
<span>🖥️ ${serverName}</span> <span>🖥️ ${serverGroup.serverName}</span>
</div> </div>
${badgeHTML} ${badgeHTML}
`; `;
@@ -312,7 +338,7 @@
rowElements.forEach(row => listContainer.appendChild(row)); rowElements.forEach(row => listContainer.appendChild(row));
dashboard.appendChild(listContainer); dashboard.appendChild(listContainer);
} });
if (isSearching) applySearchFilter(); if (isSearching) applySearchFilter();