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:37:17 +02:00
parent 1c60b2eb29
commit 7311bb1d36
1 changed files with 68 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
v2/index.html
+67 -7
View File
@@ -17,8 +17,32 @@
font-size: 1.5rem; font-size: 1.5rem;
border-bottom: 2px solid #444; border-bottom: 2px solid #444;
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 20px;
}
/* Suchfeld Styling */
.search-container {
max-width: 1000px;
margin-bottom: 30px; 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 { #dashboard {
max-width: 1000px; max-width: 1000px;
@@ -27,7 +51,7 @@
/* Server-Block Überschrift */ /* Server-Block Überschrift */
.server-group-title { .server-group-title {
font-size: 1.1rem; font-size: 1.1rem;
color: #4da6ff; /* Ein schönes, techy Blau zur Abhebung */ color: #4da6ff;
margin-top: 35px; margin-top: 35px;
margin-bottom: 12px; margin-bottom: 12px;
padding-bottom: 6px; padding-bottom: 6px;
@@ -57,7 +81,7 @@
} }
.node-row:hover { background: #252525; } .node-row:hover { background: #252525; }
/* Status Indikator (Leuchtender Punkt) */ /* Status Indikator */
.status-dot { .status-dot {
width: 10px; width: 10px;
height: 10px; height: 10px;
@@ -105,6 +129,11 @@
</head> </head>
<body> <body>
<h1>Gateway Status Übersicht</h1> <h1>Gateway Status Übersicht</h1>
<div class="search-container">
<input type="text" id="searchInput" placeholder="🔍 Nodes durchsuchen..." autocomplete="off">
</div>
<div id="dashboard"> <div id="dashboard">
<p>Lade Status-Daten...</p> <p>Lade Status-Daten...</p>
</div> </div>
@@ -112,6 +141,38 @@
<script> <script>
const API_URL = 'api.php'; 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() { async function fetchStatus() {
try { try {
const response = await fetch(API_URL); const response = await fetch(API_URL);
@@ -123,23 +184,19 @@
let currentListContainer = 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) { if (node.server !== currentServer) {
currentServer = node.server; currentServer = node.server;
// Überschrift für den Server anlegen
const header = document.createElement('h2'); const header = document.createElement('h2');
header.className = 'server-group-title'; header.className = 'server-group-title';
header.innerHTML = `🖥️ ${node.server}`; header.innerHTML = `🖥️ ${node.server}`;
dashboard.appendChild(header); dashboard.appendChild(header);
// Neuen Container für die Nodes dieses Servers anlegen
currentListContainer = document.createElement('div'); currentListContainer = document.createElement('div');
currentListContainer.className = 'node-list'; currentListContainer.className = 'node-list';
dashboard.appendChild(currentListContainer); 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;
@@ -149,7 +206,6 @@
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'); const row = document.createElement('div');
row.className = `node-row ${isOnline ? 'online' : 'offline'}`; row.className = `node-row ${isOnline ? 'online' : 'offline'}`;
@@ -161,6 +217,10 @@
`; `;
currentListContainer.appendChild(row); currentListContainer.appendChild(row);
}); });
// Suchfilter nach dem Neuladen der Daten direkt wieder anwenden
applySearchFilter();
} catch (err) { } catch (err) {
console.error("Fehler beim Abrufen der Daten:", err); console.error("Fehler beim Abrufen der Daten:", err);
} }