From eb952816425a0030cce279e76620cf1f43789cf5 Mon Sep 17 00:00:00 2001
From: duffyduck <info@hacker-net.de>
Date: Sat, 27 Dec 2025 16:31:26 +0100
Subject: [PATCH] =?UTF-8?q?status=20in=20der=20settings=20hinzugef=C3=BCgt?=
 =?UTF-8?q?=20aktualisieren=20button=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 node-red/settings-smoke-notify.html | 153 ++++++++++++++++++++++++++++
 1 file changed, 153 insertions(+)

diff --git a/node-red/settings-smoke-notify.html b/node-red/settings-smoke-notify.html
index 66cb01e..9ae2629 100644
--- a/node-red/settings-smoke-notify.html
+++ b/node-red/settings-smoke-notify.html
@@ -324,6 +324,66 @@
             border: 1px solid #3a3a5a;
         }
 
+        /* Status Badges */
+        .status-badges {
+            display: flex;
+            gap: 10px;
+            margin-top: 8px;
+            flex-wrap: wrap;
+        }
+
+        .status-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+            padding: 4px 10px;
+            border-radius: 12px;
+            font-size: 11px;
+            font-weight: 500;
+        }
+
+        .status-badge.smoke {
+            background: #1a3a1a;
+            color: #4ade80;
+            border: 1px solid #22c55e;
+        }
+
+        .status-badge.smoke.active {
+            background: #5c1a1a;
+            color: #ff6b6b;
+            border: 1px solid #dc3545;
+            animation: pulse-red 1.5s infinite;
+        }
+
+        .status-badge.siren {
+            background: #1a2a3a;
+            color: #60a5fa;
+            border: 1px solid #3b82f6;
+        }
+
+        .status-badge.siren.active {
+            background: #5c3a1a;
+            color: #ffa502;
+            border: 1px solid #ff9500;
+            animation: pulse-orange 1.5s infinite;
+        }
+
+        .status-badge.no-siren {
+            background: #2a2a3a;
+            color: #888;
+            border: 1px solid #444;
+        }
+
+        @keyframes pulse-red {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.6; }
+        }
+
+        @keyframes pulse-orange {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.6; }
+        }
+
         .card-header {
             display: flex;
             justify-content: space-between;
@@ -522,6 +582,24 @@
             box-shadow: 0 5px 20px rgba(56, 239, 125, 0.4);
         }
 
+        .refresh-page-btn {
+            flex: 1;
+            padding: 15px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border: none;
+            border-radius: 10px;
+            color: white;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+
+        .refresh-page-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
+        }
+
         .empty-state {
             text-align: center;
             padding: 30px;
@@ -615,6 +693,13 @@
                 💾 Alle Gruppen speichern
             </button>
         </div>
+
+        <!-- Refresh Button -->
+        <div class="actions" style="margin-top: 15px;">
+            <button class="refresh-page-btn" onclick="refreshPage()">
+                🔄 Seite aktualisieren
+            </button>
+        </div>
     </div>
 
     <script>
@@ -627,6 +712,7 @@
         let smokeEntities = [];
         let sirenEntities = [];
         let mobileAppEntities = [];
+        let entityStates = {};  // Aktueller Zustand aller Entities
 
         let groupCounter = 0;
         let detectorCounter = 0;
@@ -772,6 +858,12 @@
                 if (statesResponse.ok) {
                     const states = await statesResponse.json();
 
+                    // Alle States speichern für Status-Anzeige
+                    entityStates = {};
+                    states.forEach(s => {
+                        entityStates[s.entity_id] = s.state;
+                    });
+
                     // Rauchmelder
                     smokeEntities = states
                         .filter(s => s.entity_id.startsWith('binary_sensor.') &&
@@ -1443,6 +1535,13 @@
                     detector.sensor ||
                     'Neuer Rauchmelder';
 
+                // Status ermitteln
+                const smokeState = detector.sensor ? entityStates[detector.sensor] : null;
+                const sirenState = detector.siren ? entityStates[detector.siren] : null;
+
+                const smokeActive = smokeState === 'on';
+                const sirenActive = sirenState === 'on';
+
                 return `
                 <div class="card">
                     <div class="card-header">
@@ -1454,6 +1553,26 @@
                             <button class="delete-btn" onclick="deleteDetector(${group.id}, ${detector.id})">🗑️</button>
                         </div>
                     </div>
+                    ${detector.sensor || detector.siren ? `
+                    <div class="status-badges">
+                        ${detector.sensor ? `
+                            <span class="status-badge smoke ${smokeActive ? 'active' : ''}">
+                                ${smokeActive ? '🔴 RAUCH ERKANNT' : '✅ Kein Rauch'}
+                                ${smokeState ? '' : ' (unbekannt)'}
+                            </span>
+                        ` : ''}
+                        ${detector.siren ? `
+                            <span class="status-badge siren ${sirenActive ? 'active' : ''}">
+                                ${sirenActive ? '🔔 Sirene AN' : '🔕 Sirene aus'}
+                                ${sirenState ? '' : ' (unbekannt)'}
+                            </span>
+                        ` : `
+                            <span class="status-badge no-siren">
+                                ⚠️ Keine Sirene
+                            </span>
+                        `}
+                    </div>
+                    ` : ''}
                     <div class="card-fields">
                         <div class="form-group">
                             <label>Rauchmelder-Sensor</label>
@@ -1668,9 +1787,43 @@
             }
         }
 
+        // Seite komplett neu laden
+        function refreshPage() {
+            window.location.reload();
+        }
+
+        // Status automatisch aktualisieren (alle 5 Sekunden)
+        async function refreshStatus() {
+            const token = getToken();
+            if (!token) return;
+
+            try {
+                const response = await fetch('/api/states', {
+                    headers: {
+                        'Authorization': `Bearer ${token}`,
+                        'Content-Type': 'application/json'
+                    }
+                });
+
+                if (response.ok) {
+                    const states = await response.json();
+                    entityStates = {};
+                    states.forEach(s => {
+                        entityStates[s.entity_id] = s.state;
+                    });
+                    renderGroups();
+                }
+            } catch (error) {
+                console.log('Status-Refresh fehlgeschlagen:', error.message);
+            }
+        }
+
         // Start
         checkIframeMode();
         init();
+
+        // Status alle 5 Sekunden aktualisieren
+        setInterval(refreshStatus, 5000);
     </script>
 </body>
 </html>