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

Dateien nach "/" hochladen

Browse Source
This commit is contained in:
manuel.maier
2026-07-29 11:38:36 +02:00
parent c9482d5cf0
commit 0bb624c372
3 changed files with 200 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
api.php
+11
View File
@@ -5,6 +5,17 @@ $db_file = __DIR__ . '/status.sqlite';
$pdo = new PDO('sqlite:' . $db_file); $pdo = new PDO('sqlite:' . $db_file);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// --- Manuelle Bereinigung per Frontend ---
if (isset($_GET['action']) && $_GET['action'] === 'cleanup') {
// FEHLER BEHOBEN: Es muss $pdo heißen, nicht $db!
// Zeitabgleich gefixt: Wir nutzen datetime('now', '-2 minutes'), da der INSERT auch in UTC erfolgt.
$pdo->exec("DELETE FROM nodes WHERE last_seen < datetime('now', '-1 days')");
header('Content-Type: application/json');
echo json_encode(["status" => "success"]);
exit;
}
// Tabelle erstellen, falls nicht existent // Tabelle erstellen, falls nicht existent
$pdo->exec("CREATE TABLE IF NOT EXISTS nodes ( $pdo->exec("CREATE TABLE IF NOT EXISTS nodes (
id INTEGER PRIMARY KEY AUTOINCREMENT, id INTEGER PRIMARY KEY AUTOINCREMENT,
favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 473 B

index.html
+189 -94
View File
@@ -3,8 +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>Gateway Status</title> <title>Netmaker GW-Status</title>
<style> <!-- 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 -->
<link rel="apple-touch-icon" href="favicon.ico?v=1">
<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;
@@ -13,14 +17,46 @@
padding: 20px; padding: 20px;
font-size: 14px; font-size: 14px;
} }
/* Header-Bereich für Logo, Titel und Bereinigungs-Button */
.header-container {
display: flex;
align-items: center;
border-bottom: 2px solid #444;
padding-bottom: 10px;
margin-bottom: 20px;
}
.header-logo {
height: 70px;
margin-right: 15px;
}
h1 { h1 {
font-size: 1.5rem; font-size: 1.5rem;
border-bottom: 2px solid #444; margin: 0;
padding-bottom: 10px;
margin-bottom: 20px;
} }
/* Suchfeld Styling */ /* Bereinigungs-Button */
.cleanup-btn {
margin-left: auto; /* Schiebt den Button ganz nach rechts */
background-color: #1e1e1e;
color: #e0e0e0;
border: 1px solid #444;
padding: 8px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 5px;
}
.cleanup-btn:hover {
background-color: #ff4444;
color: white;
border-color: #ff4444;
}
/* Suchfeld */
.search-container { .search-container {
max-width: 1000px; max-width: 1000px;
margin-bottom: 30px; margin-bottom: 30px;
@@ -36,39 +72,70 @@
box-sizing: border-box; box-sizing: border-box;
transition: border-color 0.2s; transition: border-color 0.2s;
} }
#searchInput:focus { #searchInput:focus { outline: none; border-color: #4da6ff; }
outline: none; #searchInput::placeholder { color: #888; }
border-color: #4da6ff;
}
#searchInput::placeholder {
color: #888;
}
#dashboard { #dashboard { max-width: 1000px; }
max-width: 1000px;
}
/* Server-Block Überschrift */ /* Server-Block Header */
.server-group-title { .server-group-title {
font-size: 1.1rem; font-size: 1.1rem;
color: #4da6ff; color: #4da6ff;
margin-top: 35px; margin-top: 25px;
margin-bottom: 12px; margin-bottom: 8px;
padding-bottom: 6px; padding: 10px;
border-bottom: 1px solid #333; border-radius: 6px;
background-color: #1a1a1a;
border: 1px solid #333;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}
.server-group-left {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
} }
.server-group-title:first-child {
margin-top: 0; /* Styling wenn das Gateway offline ist */
.server-group-title.gateway-offline {
border: 1px solid rgba(255, 68, 68, 0.4);
background-color: rgba(255, 68, 68, 0.08);
}
.server-group-title.gateway-offline .server-group-left {
color: #ff4444;
}
/* Zusammenfassungs-Badge (Neutrales Info-Design) */
.summary-badge {
font-size: 0.85rem;
padding: 4px 10px;
border-radius: 12px;
font-weight: 600;
background: rgba(77, 166, 255, 0.15);
color: #4da6ff;
border: 1px solid rgba(77, 166, 255, 0.3);
}
/* Roter Badge für Offline-Gateway */
.gateway-offline-badge {
font-size: 0.85rem;
padding: 4px 10px;
border-radius: 12px;
font-weight: 600;
background: rgba(255, 68, 68, 0.15);
color: #ff4444;
border: 1px solid rgba(255, 68, 68, 0.3);
} }
/* Kompaktes Listen-Layout */ /* Listen-Layout */
.node-list { .node-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 6px;
margin-bottom: 25px;
} }
.node-row { .node-row {
display: flex; display: flex;
@@ -81,7 +148,6 @@
} }
.node-row:hover { background: #252525; } .node-row:hover { background: #252525; }
/* Status Indikator */
.status-dot { .status-dot {
width: 10px; width: 10px;
height: 10px; height: 10px;
@@ -92,33 +158,10 @@
.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); }
.client-name { .client-name { font-weight: 600; width: 250px; margin-right: 15px; flex-shrink: 0; }
font-weight: 600; .handshake { color: #888; font-size: 0.85rem; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
width: 250px; .time { color: #aaa; font-size: 0.85rem; text-align: right; white-space: nowrap; margin-left: 15px; width: 90px; flex-shrink: 0; }
margin-right: 15px;
flex-shrink: 0;
}
.handshake {
color: #888;
font-size: 0.85rem;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.time {
color: #aaa;
font-size: 0.85rem;
text-align: right;
white-space: nowrap;
margin-left: 15px;
width: 90px;
flex-shrink: 0;
}
/* 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; }
.client-name { width: auto; margin-right: 10px; } .client-name { width: auto; margin-right: 10px; }
@@ -128,7 +171,11 @@
</style> </style>
</head> </head>
<body> <body>
<h1>Gateway Status Übersicht</h1> <div class="header-container">
<img src="https://api.scalar.com/cdn/images/nihKnpk06xBjyKI4sa5CZ/38l8utJFkH2jkoeca3c7U.png" alt="Netmaker Logo" class="header-logo">
<h1>GW-Status</h1>
<button id="cleanupBtn" class="cleanup-btn" title="Entfernt alle inaktiven Nodes">🧹 Bereinigen</button>
</div>
<div class="search-container"> <div class="search-container">
<input type="text" id="searchInput" placeholder="🔍 Nodes durchsuchen..." autocomplete="off"> <input type="text" id="searchInput" placeholder="🔍 Nodes durchsuchen..." autocomplete="off">
@@ -141,7 +188,23 @@
<script> <script>
const API_URL = 'api.php'; const API_URL = 'api.php';
// Such-Logik // --- Neue Funktion für den Bereinigungs-Button ---
document.getElementById('cleanupBtn').addEventListener('click', async () => {
if (confirm('Möchtest du wirklich alle alten, inaktiven Nodes aus der Datenbank löschen?')) {
try {
const response = await fetch(API_URL + '?action=cleanup');
if (response.ok) {
fetchStatus(); // Lädt das Dashboard nach dem Löschen direkt neu
} else {
alert('Fehler bei der Bereinigung.');
}
} catch (err) {
console.error('Verbindungsfehler:', err);
alert('Konnte die API nicht erreichen.');
}
}
});
function applySearchFilter() { function applySearchFilter() {
const searchTerm = document.getElementById('searchInput').value.toLowerCase(); const searchTerm = document.getElementById('searchInput').value.toLowerCase();
const serverGroups = document.querySelectorAll('.server-group-title'); const serverGroups = document.querySelectorAll('.server-group-title');
@@ -153,8 +216,6 @@
rows.forEach(row => { rows.forEach(row => {
const clientName = row.querySelector('.client-name').textContent.toLowerCase(); const clientName = row.querySelector('.client-name').textContent.toLowerCase();
// Zeile anzeigen, wenn Suchbegriff im Client-Namen enthalten ist
if (clientName.includes(searchTerm)) { if (clientName.includes(searchTerm)) {
row.style.display = 'flex'; row.style.display = 'flex';
hasVisibleNodes = true; hasVisibleNodes = true;
@@ -163,63 +224,97 @@
} }
}); });
// Gesamte Server-Überschrift ausblenden, wenn kein Client darin den Suchkriterien entspricht const header = serverGroups[index];
if (serverGroups[index]) { if (header) {
serverGroups[index].style.display = hasVisibleNodes ? 'flex' : 'none'; if (searchTerm !== '') {
header.style.display = hasVisibleNodes ? 'flex' : 'none';
list.style.display = hasVisibleNodes ? 'flex' : 'none';
} else {
header.style.display = 'flex';
list.style.display = 'flex';
}
} }
}); });
} }
// Event-Listener an das Suchfeld hängen
document.getElementById('searchInput').addEventListener('input', applySearchFilter); 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);
const data = await response.json(); const data = await response.json();
const isSearching = document.getElementById('searchInput').value.trim() !== '';
const servers = {};
data.forEach(node => {
if (!servers[node.server]) servers[node.server] = [];
servers[node.server].push(node);
});
const dashboard = document.getElementById('dashboard'); const dashboard = document.getElementById('dashboard');
dashboard.innerHTML = ''; dashboard.innerHTML = '';
let currentServer = null; for (const [serverName, nodes] of Object.entries(servers)) {
let currentListContainer = null; let onlineCount = 0;
let minDiffMinutes = Infinity;
data.forEach(node => { const now = new Date();
if (node.server !== currentServer) {
currentServer = node.server; const rowElements = nodes.map(node => {
const safeDateString = node.last_seen.replace(' ', 'T') + 'Z';
const lastSeen = new Date(safeDateString);
const diffMinutes = (now - lastSeen) / 1000 / 60;
const header = document.createElement('h2'); if (diffMinutes < minDiffMinutes) {
header.className = 'server-group-title'; minDiffMinutes = diffMinutes;
header.innerHTML = `🖥️ ${node.server}`; }
dashboard.appendChild(header);
const isOnline = (node.status === 'true' && diffMinutes < 5);
currentListContainer = document.createElement('div'); if (isOnline) onlineCount++;
currentListContainer.className = 'node-list';
dashboard.appendChild(currentListContainer); let timeText = Math.round(diffMinutes) + ' Min.';
if (diffMinutes < 1) timeText = '< 1 Min.';
const row = document.createElement('div');
row.className = `node-row ${isOnline ? 'online' : 'offline'}`;
row.innerHTML = `
<div class="status-dot"></div>
<div class="client-name">${node.client}</div>
<div class="handshake">Handshake: ${node.handshake}</div>
<div class="time" title="Letztes Update: ${lastSeen.toLocaleString()}">vor ${timeText}</div>
`;
return row;
});
const isGatewayOffline = (minDiffMinutes >= 5);
const header = document.createElement('div');
header.className = `server-group-title ${isGatewayOffline ? 'gateway-offline' : ''}`;
let badgeHTML = '';
if (isGatewayOffline) {
badgeHTML = `<div class="gateway-offline-badge">Gateway Offline</div>`;
} else {
badgeHTML = `<div class="summary-badge">${onlineCount} / ${nodes.length} online</div>`;
} }
const lastSeen = new Date(node.last_seen + " UTC"); header.innerHTML = `
const now = new Date(); <div class="server-group-left">
const diffMinutes = (now - lastSeen) / 1000 / 60; <span>🖥️ ${serverName}</span>
</div>
const isOnline = (node.status === 'true' && diffMinutes < 5); ${badgeHTML}
let timeText = Math.round(diffMinutes) + ' Min.';
if (diffMinutes < 1) timeText = '< 1 Min.';
const row = document.createElement('div');
row.className = `node-row ${isOnline ? 'online' : 'offline'}`;
row.innerHTML = `
<div class="status-dot"></div>
<div class="client-name">${node.client}</div>
<div class="handshake">Handshake: ${node.handshake}</div>
<div class="time" title="Letztes Update: ${lastSeen.toLocaleString()}">vor ${timeText}</div>
`; `;
currentListContainer.appendChild(row); dashboard.appendChild(header);
});
const listContainer = document.createElement('div');
listContainer.className = 'node-list';
rowElements.forEach(row => listContainer.appendChild(row));
dashboard.appendChild(listContainer);
}
// Suchfilter nach dem Neuladen der Daten direkt wieder anwenden if (isSearching) applySearchFilter();
applySearchFilter();
} catch (err) { } catch (err) {
console.error("Fehler beim Abrufen der Daten:", err); console.error("Fehler beim Abrufen der Daten:", err);
@@ -227,7 +322,7 @@
} }
fetchStatus(); fetchStatus();
setInterval(fetchStatus, 30000); // 30 Sekunden Refresh setInterval(fetchStatus, 30000);
</script> </script>
</body> </body>
</html> </html>