Aruba-PoE/srv/poe_manager/templates/index.html

{% extends "base.html" %}
{% block content %}

<h2 class="d-flex justify-content-between align-items-center">
    Dashboard
    <span id="dashboard-timer" class="badge bg-success">
        Nächste Prüfung in -- Sekunden
    </span>
</h2>
<div class="row g-3">
    {% for d in devices %}
    <div class="col-6 col-md-4 col-lg-3 col-xl-2">
        <div class="card text-center p-2 device-card"
             style="cursor:pointer;"
             data-mac="{{ d[0] }}"
             data-name="{{ d[1] }}"
             data-ip="{{ d[2] }}"
             data-switch="{{ d[3] }}"
             data-port="{{ d[4] }}"
             data-active="{{ d[5] }}"
     {% if last_seen.get(d[0]) %}
         title="{{ last_seen[d[0]] }}"
     {% elif status[d[0]] == 'offline' %}
         title="Noch nie online"
     {% endif %}>
            <div class="card-header">{{ d[1] }}</div>
            <div class="card-body">
                <span class="fw-bold" style="color: 
                    {% if d[5] == 0 %}gray
                    {% elif status[d[0]] == 'online' %}green
                    {% else %}red
                    {% endif %};">
                    {% if d[5] == 0 %}
                        Deaktiviert
                    {% else %}
                        {% if status[d[0]] %}{{ status[d[0]]|capitalize }}{% else %}Unbekannt{% endif %}
                    {% endif %}
                </span>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
    const intervalMinutes = {{ interval | int }}; // aus DB
    const intervalMilliseconds = intervalMinutes * 60 * 1000;
    let lastUpdateTime = Date.now();
    let selectedCard = null;
    let selectedMac = null;

    const deviceModal = new bootstrap.Modal(
        document.getElementById("deviceModal")
    );

    const restartModal = new bootstrap.Modal(
        document.getElementById("restartModal")
    );

    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 updateTimer() {
        const now = Date.now();
        const elapsed = now - lastUpdateTime;
        const remainingMs = intervalMilliseconds - (elapsed % intervalMilliseconds);
        const remainingSec = Math.ceil(remainingMs / 1000);
        document.getElementById("dashboard-timer").innerText =
            `Nächste Prüfung in ${remainingSec} Sekunden`;

        if (remainingSec <= 1) {
            // Timer abgelaufen → Reload starten
            window.location.reload();
        }
    }

    function fetchLastLog() {
        fetch("{{ url_for('get_log') }}")
            .then(response => response.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 firstLine = lines[lastSepIndex + 1];
                    const match = firstLine.match(/^(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/);
                    if (match) lastUpdateTime = parseLogTimestamp(match[1]);
                }
            })
            .catch(err => console.error("Fehler beim Laden der Logs:", err));
    }

    document.querySelectorAll(".device-card").forEach(card => {
        const mac = card.dataset.mac;
        if (sessionStorage.getItem("restart_" + mac)) {
            const span = card.querySelector(".fw-bold");
            span.innerHTML =
                '<span class="spinner-border spinner-border-sm me-2"></span>Restarting...';
            span.style.color = "#ffc107";
        }

        card.addEventListener("click", function () {
            selectedCard = this;
            selectedMac = this.dataset.mac;
            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("deviceStatus").innerText =
                this.querySelector(".fw-bold").innerText;
            deviceModal.show();
        });
    });

    // Timer alle 1 Sekunde aktualisieren
    setInterval(updateTimer, 1000);

    // einmal beim Laden die letzte Log-Zeit setzen
    fetchLastLog();
});
</script>

<!-- ========================================================= -->
<!-- Geräteinformationen -->
<!-- ========================================================= -->

<div class="modal fade"
     id="deviceModal"
     tabindex="-1"
     aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <h5
                    id="deviceModalTitle"
                    class="modal-title">
                </h5>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Schließen">
                </button>

            </div>

            <div class="modal-body">

                <table class="table table-sm align-middle mb-0">

                    <tr>
                        <th style="width:120px;">IP-Adresse</th>
                        <td id="deviceIp"></td>
                    </tr>

                    <tr>
                        <th>Switch</th>
                        <td id="deviceSwitch"></td>
                    </tr>

                    <tr>
                        <th>Port</th>
                        <td id="devicePort"></td>
                    </tr>

                    <tr>
                        <th>Status</th>
                        <td id="deviceStatus"></td>
                    </tr>

                </table>

            </div>

            <div class="modal-footer">

                <button
                    id="restartButton"
                    class="btn btn-warning">

                    🔄 Neustarten

                </button>

                <button
                    class="btn btn-secondary"
                    data-bs-dismiss="modal">

                    Schließen

                </button>

            </div>

        </div>

    </div>

</div>

<!-- ========================================================= -->
<!-- Neustart bestätigen -->
<!-- ========================================================= -->

<div class="modal fade"
     id="restartModal"
     tabindex="-1"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5
                    id="restartTitle"
                    class="modal-title">
                </h5>
            </div>
            <div class="modal-body">
                <p class="mb-2">
                    Der Neustart erfolgt durch einen kurzen
                    PoE-Reset.
                </p>
                <p class="mb-0">
                    Der Pi wird für wenige Sekunden
                    vom Netzwerk getrennt.
                </p>
            </div>
            <div class="modal-footer">
                <button
                    class="btn btn-secondary"
                    data-bs-dismiss="modal">
                    Abbrechen
                </button>
                <button
                    id="confirmRestart"
                    class="btn btn-danger">
                    Neustarten
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}