sip-dmr-gateway/static/dashboard.html

<!DOCTYPE html>
<html lang="it" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SIP-DMR Live Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { background-color: #121212; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .badge-rx { background-color: #198754; color: white; }
        .badge-tx { background-color: #dc3545; color: white; }
        .pulsing { animation: pulse 1.5s infinite; }
        @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
        .table-dark { --bs-table-bg: #1e1e1e; }
    </style>
</head>
<body>
    <div class="container py-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2 class="m-0 text-light">📡 SIP-DMR Gateway</h2>
            <span id="conn-status" class="badge bg-warning text-dark fs-6">Connessione in corso...</span>
        </div>

        <div class="card bg-dark border-secondary shadow-lg">
            <div class="card-body p-0">
                <table class="table table-dark table-hover m-0">
                    <thead class="table-secondary">
                        <tr>
                            <th>Orario</th>
                            <th>Dir</th>
                            <th>Mittente</th>
                            <th>Destinatario (TG)</th>
                            <th>Durata</th>
                            <th>Stato</th>
                        </tr>
                    </thead>
                    <tbody id="tabella-storico">
                        <!-- Le righe verranno iniettate qui da JS -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        // SOSTITUISCI QUI l'IP se apri il file in locale, altrimenti usa l'hostname automatico
        const SERVER_IP = window.location.hostname === "" || window.location.hostname === "localhost" 
                          ? "127.0.0.1" : window.location.hostname;
        const WS_PORT = "8081";

        const tbody = document.getElementById('tabella-storico');
        const statusBadge = document.getElementById('conn-status');

        function formattaOrario(timestamp) {
            const d = new Date(timestamp * 1000);
            return d.toLocaleTimeString('it-IT', { hour12: false }) + '.' + String(d.getMilliseconds()).padStart(3, '0').substring(0,2);
        }

        function creaRiga(dati) {
            const tr = document.createElement('tr');
            tr.id = `row-${dati.id}`;
            
            const badgeDir = dati.direzione === "RX" ? "badge-rx" : "badge-tx";
            const statoHtml = dati.stato === "ON" 
                ? `<span class="badge bg-primary pulsing">In Trasmissione</span>` 
                : `<span class="badge bg-secondary">Terminata</span>`;
            
            const durata = dati.durata ? `${dati.durata}s` : `<span class="spinner-grow spinner-grow-sm text-light" role="status"></span>`;

            tr.innerHTML = `
                <td class="text-secondary">${formattaOrario(dati.inizio)}</td>
                <td><span class="badge ${badgeDir} px-2 py-1">${dati.direzione}</span></td>
                <td class="fw-bold text-light">${dati.mittente}</td>
                <td class="text-info">${dati.destinatario}</td>
                <td id="durata-${dati.id}">${durata}</td>
                <td id="stato-${dati.id}">${statoHtml}</td>
            `;
            return tr;
        }

        async function caricaStorico() {
            try {
                const res = await fetch(`http://${SERVER_IP}:${WS_PORT}/api/storico`);
                const data = await res.json();
                
                tbody.innerHTML = "";
                // Inseriamo prima le attive, poi lo storico
                data.attive.forEach(call => tbody.appendChild(creaRiga(call)));
                data.storico.forEach(call => tbody.appendChild(creaRiga(call)));
            } catch (err) {
                console.error("Errore caricamento storico:", err);
            }
        }

        function avviaWebSocket() {
            const ws = new WebSocket(`ws://${SERVER_IP}:${WS_PORT}/ws`);

            ws.onopen = () => {
                statusBadge.textContent = "Connesso (Live)";
                statusBadge.className = "badge bg-success text-white fs-6";
                caricaStorico(); // Ricarica tutto quando la connessione si stabilisce
            };

            ws.onclose = () => {
                statusBadge.textContent = "Disconnesso - Riconnessione...";
                statusBadge.className = "badge bg-danger text-white fs-6";
                setTimeout(avviaWebSocket, 3000);
            };

            ws.onmessage = (event) => {
                const msg = JSON.parse(event.data);
                const dati = msg.dati;

                if (msg.evento === "chiamata_iniziata") {
                    tbody.insertBefore(creaRiga(dati), tbody.firstChild);
                    // Rimuove eventuali righe in eccesso per non appesantire la pagina
                    if (tbody.children.length > 100) tbody.lastChild.remove();
                } 
                else if (msg.evento === "chiamata_terminata") {
                    const rigaEx = document.getElementById(`row-${dati.id}`);
                    if (rigaEx) {
                        document.getElementById(`durata-${dati.id}`).textContent = `${dati.durata}s`;
                        document.getElementById(`stato-${dati.id}`).innerHTML = `<span class="badge bg-secondary">Terminata</span>`;
                    } else {
                        // Se la riga non esisteva (es. connessione lenta), la aggiungiamo
                        tbody.insertBefore(creaRiga(dati), tbody.firstChild);
                    }
                }
            };
        }

        avviaWebSocket();
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>