tesm/srv/poe_manager/templates/index.html

{% extends "base.html" %}
{% set active_page = "index" %}
{% block page_title %}Dashboard{% endblock %}
{% block page_sub %}<div class="topbar-sub">{{ devices|length }} Geräte im Bestand</div>{% endblock %}
{% block topbar_right %}
<span class="timer-pill"><span class="dot"></span><span id="dashboard-timer">Nächste Prüfung in --s</span></span>
{% endblock %}

{% block content %}

<div class="stat-row">
  <div class="stat-card">
    <div class="stat-label">Online</div>
    <div class="stat-value online">{{ stats.online }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Offline</div>
    <div class="stat-value offline">{{ stats.offline }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Deaktiviert</div>
    <div class="stat-value disabled">{{ stats.disabled }}</div>
  </div>
  <div class="stat-card">
    <div class="stat-label">Gesamt</div>
    <div class="stat-value">{{ stats.total }}</div>
  </div>
</div>

{% if not current_user.is_authenticated %}
{# ============================================================ #}
{# Öffentliche, schreibgeschützte Kurzübersicht (kein Login)     #}
{# ============================================================ #}
<div class="table-wrap">
  <div style="overflow-x:auto;">
  <table class="data-table">
    <thead>
      <tr><th>Hostname</th><th>IP-Adresse</th><th>Status</th><th>Letzte Prüfung</th></tr>
    </thead>
    <tbody>
      {% for d in devices %}
      {% set st = status.get(d['mac'], 'unbekannt') %}
      <tr>
        <td class="cell-name">{{ d['name'] }}</td>
        <td class="mono">{{ d['rpi_ip'] }}</td>
        <td>
          {% if d['is_active'] == 0 %}
            <span class="pill disabled">Deaktiviert</span>
          {% else %}
            <span class="pill {{ st }}">{{ {'online':'Online','offline':'Offline','unbekannt':'Unbekannt'}[st] }}</span>
          {% endif %}
        </td>
        <td class="text-dim">{{ last_checked.get(d['mac']) or '—' }}</td>
      </tr>
      {% else %}
      <tr class="empty-row"><td colspan="4">Noch keine Geräte vorhanden.</td></tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
</div>
<p class="text-faint mt-3" style="font-size:12px;">
  Nur Lese-Ansicht. <a href="{{ url_for('login') }}" style="color:var(--accent-strong); font-weight:600;">Anmelden</a>,
  um Geräte zu verwalten oder einen PoE-Neustart auszulösen.
</p>

{% else %}
{# ============================================================ #}
{# Vollständiges Dashboard für eingeloggte Benutzer               #}
{# ============================================================ #}
{% if devices %}
<div class="device-grid">
  {% for d in devices %}
  {% set st = status.get(d['mac'], 'unbekannt') %}
  <div class="device-card {% if d['is_active'] == 0 %}is-disabled{% endif %}"
       data-status="{{ 'offline' if d['is_active'] == 0 else st }}"
       data-mac="{{ d['mac'] }}"
       data-name="{{ d['name'] }}"
       data-ip="{{ d['rpi_ip'] }}"
       data-switch="{{ d['switch_hostname'] or '-' }}"
       data-port="{{ d['port'] or '-' }}"
       data-active="{{ d['is_active'] }}"
       data-checked="{{ last_checked.get(d['mac']) or '-' }}"
       {% if last_seen.get(d['mac']) %}title="{{ last_seen[d['mac']] }}"{% endif %}>
    <div class="dc-top">
      <div class="dc-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2.5"/><path d="M8 2v3M16 2v3M8 19v3M16 19v3M2 8h3M2 16h3M19 8h3M19 16h3"/></svg>
      </div>
      {% if d['is_active'] == 0 %}
        <span class="pill disabled">Aus</span>
      {% else %}
        <span class="pill {{ st }}">{{ {'online':'Online','offline':'Offline','unbekannt':'Unbekannt'}[st] }}</span>
      {% endif %}
    </div>
    <div class="dc-name">{{ d['name'] }}</div>
    <div class="dc-ip">{{ d['rpi_ip'] }}</div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="card card-pad" style="text-align:center; color:var(--text-faint);">
  Noch keine Geräte angelegt. Füge welche unter <a href="{{ url_for('devices') }}" style="color:var(--accent-strong); font-weight:600;">Devices</a> hinzu.
</div>
{% endif %}

<!-- Device detail modal -->
<div class="modal-overlay" id="deviceModal">
  <div class="modal">
    <div class="modal-header">
      <h3 id="deviceModalTitle">Gerät</h3>
      <button type="button" class="modal-close" data-close-modal>&times;</button>
    </div>
    <div class="modal-body">
      <div class="detail-list">
        <div class="detail-row"><span class="k">IP-Adresse</span><span class="v mono" id="deviceIp">-</span></div>
        <div class="detail-row"><span class="k">Switch</span><span class="v" id="deviceSwitch">-</span></div>
        <div class="detail-row"><span class="k">Port</span><span class="v" id="devicePort">-</span></div>
        <div class="detail-row"><span class="k">Status</span><span class="v" id="deviceStatus">-</span></div>
        <div class="detail-row"><span class="k">Letzte Prüfung</span><span class="v" id="deviceChecked">-</span></div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-close-modal>Schließen</button>
      {% if current_user.has_permission('devices.restart') %}
      <button type="button" class="btn btn-primary" id="restartButton">
        <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>
        Neustarten
      </button>
      {% endif %}
    </div>
  </div>
</div>

{% if current_user.has_permission('devices.restart') %}
<!-- Restart confirm modal -->
<div class="modal-overlay" id="restartModal">
  <div class="modal" style="max-width:400px;">
    <div class="modal-header">
      <h3 id="restartTitle">Neustart</h3>
      <button type="button" class="modal-close" data-close-modal>&times;</button>
    </div>
    <div class="modal-body">
      <p class="text-dim">Der Neustart erfolgt durch einen kurzen PoE-Reset. Das Gerät wird für wenige Sekunden vom Netzwerk getrennt.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
      <button type="button" class="btn btn-primary" id="confirmRestart" style="background:var(--warning); color:#241a00;">Neustarten</button>
    </div>
  </div>
</div>
{% endif %}
{% endif %}

{% endblock %}

{% block scripts %}
<script>
document.addEventListener("DOMContentLoaded", () => {
    const intervalMinutes = {{ interval | int }};
    const intervalMilliseconds = intervalMinutes * 60 * 1000;
    const isAuthenticated = {{ "true" if current_user.is_authenticated else "false" }};
    let lastUpdateTime = Date.now();

    function updateTimer() {
        const now = Date.now();
        const elapsed = now - lastUpdateTime;
        const remainingMs = intervalMilliseconds - (elapsed % intervalMilliseconds);
        const remainingSec = Math.ceil(remainingMs / 1000);
        const el = document.getElementById("dashboard-timer");
        if (el) el.innerText = `Nächste Prüfung in ${remainingSec}s`;
        if (remainingSec <= 1) window.location.reload();
    }

    if (!isAuthenticated) {
        // Öffentliche Ansicht: einfacher Reload-Timer, kein Zugriff auf /get_log nötig.
        setInterval(updateTimer, 1000);
        return;
    }

    let selectedCard = null, selectedMac = null, selectedName = null;

    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 fetchLastLog() {
        fetch("{{ url_for('get_log') }}")
            .then(r => r.text())
            .then(data => {
                const lines = data.split("\n");
                let lastSepIndex = -1;
                for (let i = lines.length - 1; i >= 0; i--) {
                    if (lines[i].startsWith("----")) { lastSepIndex = i; break; }
                }
                if (lastSepIndex >= 0 && lastSepIndex + 1 < lines.length) {
                    const match = lines[lastSepIndex + 1].match(/^(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/);
                    if (match) lastUpdateTime = parseLogTimestamp(match[1]);
                }
            })
            .catch(() => {});
    }

    document.querySelectorAll(".device-card").forEach(card => {
        const mac = card.dataset.mac;
        const restartKey = "restart_" + mac;
        if (sessionStorage.getItem(restartKey)) {
            const pill = card.querySelector(".pill");
            if (pill && pill.innerText.trim().toLowerCase() === "online") {
                sessionStorage.removeItem(restartKey);
            } else if (pill) {
                pill.innerHTML = '<span class="spinner"></span> Restarting…';
            }
        }
        card.addEventListener("click", function () {
            if (this.dataset.active == "0") return;
            if (sessionStorage.getItem("restart_" + this.dataset.mac)) return;
            selectedCard = this;
            selectedMac = this.dataset.mac;
            selectedName = this.dataset.name;
            document.getElementById("deviceModalTitle").innerText = this.dataset.name;
            document.getElementById("deviceIp").innerText = this.dataset.ip || "-";
            document.getElementById("deviceSwitch").innerText = this.dataset.switch || "-";
            document.getElementById("devicePort").innerText = this.dataset.port || "-";
            document.getElementById("deviceChecked").innerText = this.dataset.checked || "-";
            const pill = this.querySelector(".pill");
            document.getElementById("deviceStatus").innerText = pill ? pill.innerText.trim() : "-";
            PoeUI.openModal("deviceModal");
        });
    });

    const restartButton = document.getElementById("restartButton");
    if (restartButton) {
        restartButton.addEventListener("click", function () {
            PoeUI.closeModal(document.getElementById("deviceModal"));
            document.getElementById("restartTitle").innerText = selectedName + " neu starten?";
            PoeUI.openModal("restartModal");
        });
    }

    const confirmRestart = document.getElementById("confirmRestart");
    if (confirmRestart) {
        confirmRestart.addEventListener("click", function () {
            const button = this;
            button.disabled = true;
            fetch("/restart/" + encodeURIComponent(selectedMac), { method: "POST" })
                .then(r => r.json())
                .then(data => {
                    button.disabled = false;
                    if (!data.success) {
                        showToast(data.message || "Neustart konnte nicht gestartet werden.", "danger");
                        return;
                    }
                    PoeUI.closeModal(document.getElementById("restartModal"));
                    PoeUI.closeModal(document.getElementById("deviceModal"));
                    sessionStorage.setItem("restart_" + selectedMac, "1");
                    const pill = selectedCard.querySelector(".pill");
                    if (pill) pill.innerHTML = '<span class="spinner"></span> Restarting…';
                    showToast(`Neustart von ${data.device} gestartet.`, "success");
                })
                .catch(err => { button.disabled = false; showToast("Fehler beim Starten des Neustarts.", "danger"); });
        });
    }

    setInterval(updateTimer, 1000);
    fetchLastLog();
});
</script>
{% endblock %}