enhancement

ui/templates/index.html

@@ -112,8 +112,8 @@
   </table>
 </main>
 
-<footer>
-  Visualizzazione aggiornata ogni 60 secondi
+<footer id="status">
+  Visualizzazione aggiornata ogni {{ refresh_seconds }} secondi | Ultimo aggiornamento: <span id="last-update">ora</span>
 </footer>
 
 <script>
@@ -128,9 +128,41 @@ function timeAgo(date) {
     return "pochi secondi fa";
 }
 
-document.querySelectorAll('.time').forEach(td => {
-    td.textContent = timeAgo(td.dataset.timestamp);
-});
+function updateTimeAgo() {
+    document.querySelectorAll('.time').forEach(td => {
+        td.textContent = timeAgo(td.dataset.timestamp);
+    });
+}
+
+function updateRecords() {
+    fetch('/api/records')
+        .then(res => res.json())
+        .then(data => {
+            if (data.success) {
+                const tbody = document.querySelector('tbody');
+                tbody.innerHTML = data.records.map(r => `
+                    <tr>
+                        <td>${r.name}</td>
+                        <td>${r.dns_ip}</td>
+                        <td>${r.public_ip}</td>
+                        <td>${r.proxied ? 'ON' : 'OFF'}</td>
+                        <td><span class="badge ${r.status === 'OK' ? 'ok' : 'bad'}">${r.status}</span></td>
+                        <td class="time" data-timestamp="${r.last_updated}">${timeAgo(r.last_updated)}</td>
+                    </tr>
+                `).join('');
+                document.getElementById('last-update').textContent = new Date().toLocaleTimeString('it-IT');
+            }
+        })
+        .catch(err => {
+            console.error('Errore aggiornamento:', err);
+            document.getElementById('status').style.color = '#ff5252';
+        });
+}
+
+// Init
+updateTimeAgo();
+setInterval(updateTimeAgo, 5000);
+setInterval(updateRecords, {{ refresh_seconds }} * 1000);
 </script>
 
 </body>