feat: add real-time MQTT connection status badge

app.py

@@ -161,9 +161,15 @@ active_calls = {}
 with open(CONFIG_PATH) as f: config = json.load(f)
 
 # --- MQTT CALLBACKS ---
+mqtt_connected_status = False
+
 def on_connect(client, userdata, flags, reason_code, properties=None):
+    global mqtt_connected_status
     if reason_code == 0:
+        mqtt_connected_status = True
         logger.info("✅ Successfully connected to MQTT Broker! Subscribing to topics...")
+        # Invia lo stato Online ai client web
+        socketio.emit('mqtt_status', {'connected': True})
         client.subscribe([
             ("servizi/+/stat", 0), 
             ("dmr-gateway/+/json", 0), 
@@ -177,11 +183,22 @@ def on_connect(client, userdata, flags, reason_code, properties=None):
             ("data/#", 0)
         ])
     else:
+        mqtt_connected_status = False
+        socketio.emit('mqtt_status', {'connected': False})
         logger.error(f"❌ MQTT Connection Error. Reason code: {reason_code}")
 
 def on_disconnect(client, userdata, disconnect_flags, reason_code, properties=None):
+    global mqtt_connected_status
+    mqtt_connected_status = False
+    # Invia lo stato Offline ai client web
+    socketio.emit('mqtt_status', {'connected': False})
     logger.warning(f"⚠️ MQTT Disconnection detected! Reason code: {reason_code}. Attempting automatic reconnection...")
 
+# Quando un nuovo utente apre la pagina web, inviagli subito lo stato attuale
+@socketio.on('connect')
+def handle_connect():
+    emit('mqtt_status', {'connected': mqtt_connected_status})
+
 def on_message(client, userdata, msg):
     try:
         topic = msg.topic

templates/index.html

@@ -70,6 +70,12 @@
         .actions { display: none; gap: 8px; flex-wrap: wrap; margin-top: auto; }
         .btn-cmd { flex: 1; padding: 8px 10px; border: 1px solid var(--border-color); background: #010409 !important; border-radius: 3px; font-weight: 600; font-size: 0.75rem; cursor: pointer; color: var(--text-main) !important; font-family: 'JetBrains Mono', monospace; transition: border-color 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 5px; box-shadow: none !important; }
         .btn-cmd:hover { border-color: var(--text-main); }
+  
+        /* Badge di stato MQTT */
+        .mqtt-badge { padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 800; font-family: 'JetBrains Mono', monospace; transition: all 0.3s ease; border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; height: 30px;}
+        .mqtt-online { background: rgba(46, 160, 67, 0.1); color: var(--success); border-color: var(--success); }
+        .mqtt-offline { background: rgba(218, 54, 51, 0.1); color: var(--danger); border-color: var(--danger); animation: pulse-red 2s infinite; }
+        @keyframes pulse-red { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
         
         /* Tabella LastHeard */
         .table-container { background: var(--card-bg); border-radius: 6px; border: 1px solid var(--border-color); overflow: hidden; max-height: 400px; overflow-y: auto; margin: 0 20px 40px 20px; box-shadow: none; }
@@ -125,6 +131,8 @@
     <div id="top-bar">
         <div class="title-brand">FLEET CONTROL CONSOLE</div>
         <div style="display: flex; align-items: center; gap: 12px;">
+            <span id="mqtt-badge" class="mqtt-badge mqtt-offline">MQTT: CHECKING...</span>
+            
             <button class="theme-switch" id="lang-btn" onclick="toggleLang()" data-i18n-title="ttLang">🇮🇹 ITA</button>
             <button class="theme-switch" id="push-btn" onclick="subscribeToPush()">🔔 PUSH</button>
             <div id="auth-container" style="display:flex; align-items:center; gap:8px;"></div>
@@ -1201,6 +1209,20 @@
     // --- MOTORE WEBSOCKET REAL-TIME ---
     const socket = io();
 
+   // NUOVO LISTENER PER LO STATO MQTT
+    socket.on('mqtt_status', function(data) {
+        const badge = document.getElementById('mqtt-badge');
+        if (badge) {
+            if (data.connected) {
+                badge.innerText = "MQTT: ONLINE";
+                badge.className = "mqtt-badge mqtt-online";
+            } else {
+                badge.innerText = "MQTT: OFFLINE";
+                badge.className = "mqtt-badge mqtt-offline";
+            }
+        }
+    });
+
     socket.on('connect', () => {
         console.log("🟢 Connesso al server via WebSocket in tempo reale!");
         refreshStates();