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

v2/index.html aktualisiert

Browse Source
This commit is contained in:
manuel.maier
2026-07-28 00:35:05 +02:00
parent 485b68724c
commit 1c60b2eb29
1 changed files with 53 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
v2/index.html
+53 -33
View File
@@ -15,9 +15,29 @@
} }
h1 { h1 {
font-size: 1.5rem; font-size: 1.5rem;
border-bottom: 1px solid #333; border-bottom: 2px solid #444;
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 20px; margin-bottom: 30px;
}
#dashboard {
max-width: 1000px;
}
/* Server-Block Überschrift */
.server-group-title {
font-size: 1.1rem;
color: #4da6ff; /* Ein schönes, techy Blau zur Abhebung */
margin-top: 35px;
margin-bottom: 12px;
padding-bottom: 6px;
border-bottom: 1px solid #333;
display: flex;
align-items: center;
gap: 10px;
}
.server-group-title:first-child {
margin-top: 0;
} }
/* Kompaktes Listen-Layout */ /* Kompaktes Listen-Layout */
@@ -25,7 +45,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 6px;
max-width: 1000px; /* Maximale Breite für bessere Lesbarkeit auf großen Monitoren */
} }
.node-row { .node-row {
display: flex; display: flex;
@@ -49,25 +68,9 @@
.online .status-dot { background-color: #00C851; box-shadow: 0 0 8px rgba(0, 200, 81, 0.5); } .online .status-dot { background-color: #00C851; box-shadow: 0 0 8px rgba(0, 200, 81, 0.5); }
.offline .status-dot { background-color: #ff4444; box-shadow: 0 0 8px rgba(255, 68, 68, 0.5); } .offline .status-dot { background-color: #ff4444; box-shadow: 0 0 8px rgba(255, 68, 68, 0.5); }
.server-badge {
background: #333;
padding: 2px 6px;
border-radius: 4px;
font-size: 0.75rem;
color: #aaa;
text-transform: uppercase;
margin-right: 15px;
width: 110px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-shrink: 0;
}
.client-name { .client-name {
font-weight: 600; font-weight: 600;
width: 220px; width: 250px;
margin-right: 15px; margin-right: 15px;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -94,52 +97,69 @@
/* Responsiv für Smartphones */ /* Responsiv für Smartphones */
@media (max-width: 700px) { @media (max-width: 700px) {
.node-row { flex-wrap: wrap; gap: 5px; padding: 10px; } .node-row { flex-wrap: wrap; gap: 5px; padding: 10px; }
.server-badge, .client-name { width: auto; margin-right: 10px; } .client-name { width: auto; margin-right: 10px; }
.handshake { width: 100%; margin-left: 25px; margin-top: 4px; } .handshake { width: 100%; margin-left: 25px; margin-top: 4px; }
.time { width: auto; margin-left: 25px; text-align: left; } .time { width: auto; margin-left: 25px; text-align: left; }
} }
</style> </style>
</head> </head>
<body> <body>
<h1>Gateway Status</h1> <h1>Gateway Status Übersicht</h1>
<div class="node-list" id="node-list"> <div id="dashboard">
<p>Lade Status-Daten...</p> <p>Lade Status-Daten...</p>
</div> </div>
<script> <script>
// API URL anpassen (da index.html im selben Ordner liegt, reicht der Dateiname)
const API_URL = 'api.php'; const API_URL = 'api.php';
async function fetchStatus() { async function fetchStatus() {
try { try {
const response = await fetch(API_URL); const response = await fetch(API_URL);
const data = await response.json(); const data = await response.json();
const list = document.getElementById('node-list'); const dashboard = document.getElementById('dashboard');
list.innerHTML = ''; dashboard.innerHTML = '';
let currentServer = null;
let currentListContainer = null;
data.forEach(node => { 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 lastSeen = new Date(node.last_seen + " UTC");
const now = new Date(); const now = new Date();
const diffMinutes = (now - lastSeen) / 1000 / 60; const diffMinutes = (now - lastSeen) / 1000 / 60;
// Offline wenn letzter Ping älter als 5 Minuten ist
const isOnline = (node.status === 'true' && diffMinutes < 5); const isOnline = (node.status === 'true' && diffMinutes < 5);
const row = document.createElement('div');
row.className = `node-row ${isOnline ? 'online' : 'offline'}`;
// Runden oder "< 1" anzeigen, wenn es unter einer Minute ist
let timeText = Math.round(diffMinutes) + ' Min.'; let timeText = Math.round(diffMinutes) + ' Min.';
if (diffMinutes < 1) timeText = '< 1 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'}`;
row.innerHTML = ` row.innerHTML = `
<div class="status-dot"></div> <div class="status-dot"></div>
<div class="server-badge" title="${node.server}">${node.server}</div>
<div class="client-name">${node.client}</div> <div class="client-name">${node.client}</div>
<div class="handshake">Handshake: ${node.handshake}</div> <div class="handshake">Handshake: ${node.handshake}</div>
<div class="time" title="Letztes Update: ${lastSeen.toLocaleString()}">vor ${timeText}</div> <div class="time" title="Letztes Update: ${lastSeen.toLocaleString()}">vor ${timeText}</div>
`; `;
list.appendChild(row); currentListContainer.appendChild(row);
}); });
} catch (err) { } catch (err) {
console.error("Fehler beim Abrufen der Daten:", err); console.error("Fehler beim Abrufen der Daten:", err);