Update templates/index.html

templates/index.html

@@ -309,6 +309,10 @@
                 <span class="status-label">MQTT Connection:</span>
                 <span id="connectionStatus" class="status-value disconnected">Disconnected</span>
             </div>
+            <div class="status-row" id="errorRow" style="display: none;">
+                <span class="status-label">Error:</span>
+                <span id="connectionError" class="status-value" style="background: #dc3545; color: white; font-size: 0.9em;"></span>
+            </div>
             <div class="status-row">
                 <span class="status-label">Last Message:</span>
                 <span id="lastMessage" class="status-value">Never</span>
@@ -319,6 +323,7 @@
             <button id="toggleBtn" class="toggle-btn">🔄 Toggle Relay</button>
             <button id="onBtn" class="on-btn">🟢 Turn ON</button>
             <button id="offBtn" class="off-btn">🔴 Turn OFF</button>
+            <button id="reconnectBtn" class="clear-btn">🔄 Reconnect MQTT</button>
         </div>
         
         <div class="log-section">
@@ -359,6 +364,16 @@
                     connectionStatusEl.textContent = data.connection_status;
                     connectionStatusEl.className = data.connection_status === 'Connected' ? 'status-value connected' : 'status-value disconnected';
                     
+                    // Update connection error
+                    const errorRow = document.getElementById('errorRow');
+                    const errorEl = document.getElementById('connectionError');
+                    if (data.connection_error) {
+                        errorEl.textContent = data.connection_error;
+                        errorRow.style.display = 'flex';
+                    } else {
+                        errorRow.style.display = 'none';
+                    }
+                    
                     // Update last message time
                     document.getElementById('lastMessage').textContent = data.last_message_time;
                     
@@ -416,6 +431,8 @@
                     button.innerHTML = '🔴 Turn OFF';
                 } else if (button.id === 'clearLogBtn') {
                     button.innerHTML = '🗑️ Clear Log';
+                } else if (button.id === 'reconnectBtn') {
+                    button.innerHTML = '🔄 Reconnect MQTT';
                 }
             }
         }
@@ -535,6 +552,35 @@
                 setButtonLoading(this, false);
             });
         });
+
+        document.getElementById('reconnectBtn').addEventListener('click', function() {
+            if (isLoading) return;
+            isLoading = true;
+            setButtonLoading(this, true);
+            
+            fetch('/api/reconnect', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    showNotification('Reconnecting to MQTT...', 'success');
+                    setTimeout(updateStatus, 2000); // Update status after 2 seconds
+                } else {
+                    showNotification(data.error || 'Failed to reconnect', 'error');
+                }
+            })
+            .catch(error => {
+                showNotification('Error: ' + error.message, 'error');
+            })
+            .finally(() => {
+                isLoading = false;
+                setButtonLoading(this, false);
+            });
+        });
     </script>
 </body>
 </html>