Initial commit: PoE Manager modern UI rebuild

- Neues, eigenständiges Frontend (Sidebar, zentriertes Logo in der Topbar, Dark/Light-Theme, Karten-Dashboard, Toasts/Modals statt Bootstrap) - Oeffentliches Kurz-Dashboard ohne Login (Status-Uebersicht) - Browser-SSH-Terminal (paramiko, plattformunabhaengig) zum Testen von Switch-Zugangsdaten inkl. interaktiver Host-Key-Bestaetigung - Granulares Rechtesystem mit Gruppen (Devices/Switches-Berechtigungen) - Aufgeraeumtes Backend mit konfigurierbaren Pfaden, auto-generierten Secrets statt hart codierter Werte im Original Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-10 12:18:49 +02:00
commit 82bfeb17ed
31 changed files with 4648 additions and 0 deletions
@@ -0,0 +1,91 @@
+{% extends "base.html" %}
+{% set active_page = "logs" %}
+{% block page_title %}Live-Log{% endblock %}
+{% block page_sub %}<div class="topbar-sub">{{ log_name or "kein Logfile" }}</div>{% endblock %}
+{% block topbar_right %}
+<span class="timer-pill"><span class="dot"></span>Update in <span id="timer">--</span>s</span>
+<button id="refresh-btn" class="btn btn-secondary">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 11-3.2-6.9M21 4v5h-5"/></svg>
+  Aktualisieren
+</button>
+{% endblock %}
+
+{% block content %}
+<div class="log-shell">
+  <div class="log-toolbar">
+    <div class="log-dots"><span></span><span></span><span></span></div>
+    <span class="text-faint mono" style="font-size:11.5px;">{{ log_name or "" }}</span>
+  </div>
+  <div id="log-box">{{ log_content or "Keine Logfiles gefunden." }}</div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+function parseLogTimestamp(ts) {
+    const parts = ts.match(/^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/);
+    if (!parts) return Date.now();
+    const [, year, month, day, hour, minute, second] = parts.map(Number);
+    return new Date(year, month - 1, day, hour, minute, second).getTime();
+}
+
+function colorizeLine(line) {
+    let cls = "";
+    if (line.includes(" ist erreichbar!")) cls = "online";
+    else if (line.includes(" ist nicht erreichbar!")) cls = "offline";
+    else if (line.startsWith("----")) cls = "sep";
+    else if (line.toLowerCase().includes("manuell")) cls = "manual";
+    const span = document.createElement("span");
+    span.className = "log-line" + (cls ? " " + cls : "");
+    span.textContent = line;
+    return span;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    const intervalMinutes = {{ interval | int }};
+    const intervalMilliseconds = intervalMinutes * 60 * 1000;
+    let lastUpdateTime = Date.now();
+
+    function renderLog(data) {
+        const box = document.getElementById("log-box");
+        box.innerHTML = "";
+        const lines = data.split("\n");
+        lines.forEach((line, i) => {
+            box.appendChild(colorizeLine(line));
+            if (i < lines.length - 1) box.appendChild(document.createElement("br"));
+        });
+        box.scrollTop = box.scrollHeight;
+
+        let lastSep = -1;
+        for (let i = lines.length - 1; i >= 0; i--) {
+            if (lines[i].startsWith("----")) { lastSep = i; break; }
+        }
+        if (lastSep >= 0 && lastSep + 1 < lines.length) {
+            const match = lines[lastSep + 1].match(/^(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/);
+            lastUpdateTime = match ? parseLogTimestamp(match[1]) : Date.now();
+        } else {
+            lastUpdateTime = Date.now();
+        }
+    }
+
+    function fetchLog() {
+        fetch("{{ url_for('get_log') }}")
+            .then(r => r.text())
+            .then(renderLog)
+            .catch(err => console.error(err));
+    }
+
+    function updateTimer() {
+        const now = Date.now();
+        const elapsed = now - lastUpdateTime;
+        const remainingMs = intervalMilliseconds - (elapsed % intervalMilliseconds);
+        document.getElementById("timer").innerText = Math.ceil(remainingMs / 1000);
+    }
+
+    document.getElementById("refresh-btn").addEventListener("click", fetchLog);
+    fetchLog();
+    setInterval(fetchLog, intervalMilliseconds);
+    setInterval(updateTimer, 1000);
+});
+</script>
+{% endblock %}