groups and scenes initial

apps/ui/static/favicon.svg

@@ -1,5 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <path d="M50 15 L85 45 L85 85 L15 85 L15 45 Z" fill="#667eea" stroke="#4c51bf" stroke-width="2"/>
-  <rect x="35" y="55" width="15" height="30" fill="#4c51bf"/>
-  <rect x="60" y="55" width="15" height="20" fill="#fbbf24"/>
+  <!-- Roof -->
+  <path d="M50 10 L90 45 L85 45 L85 50 L15 50 L15 45 L10 45 Z" fill="#667eea" stroke="#4c51bf" stroke-width="2" stroke-linejoin="round"/>
+  <!-- House body -->
+  <rect x="15" y="45" width="70" height="45" fill="#764ba2" stroke="#4c51bf" stroke-width="2"/>
+  <!-- Door -->
+  <rect x="35" y="60" width="15" height="30" fill="#4c51bf" rx="2"/>
+  <!-- Window -->
+  <rect x="60" y="60" width="20" height="15" fill="#fbbf24" stroke="#f59e0b" stroke-width="1"/>
+  <!-- Window panes -->
+  <line x1="70" y1="60" x2="70" y2="75" stroke="#f59e0b" stroke-width="1"/>
+  <line x1="60" y1="67.5" x2="80" y2="67.5" stroke="#f59e0b" stroke-width="1"/>
 </svg>

apps/ui/templates/dashboard.html

@@ -479,6 +479,208 @@
             text-align: center;
         }
         
+        /* Groups Section Styles */
+        .groups-section .devices {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 1rem;
+        }
+        
+        .group-card {
+            background: white;
+            border-radius: 12px;
+            padding: 1.25rem;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+            transition: all 0.3s;
+        }
+        
+        .group-card:hover {
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+            transform: translateY(-2px);
+        }
+        
+        .group-card-header {
+            margin-bottom: 1rem;
+        }
+        
+        .group-card-title {
+            font-size: 1.125rem;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 0.25rem;
+        }
+        
+        .group-card-subtitle {
+            font-size: 0.875rem;
+            color: #666;
+        }
+        
+        .group-card-actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+        
+        .group-button {
+            flex: 1;
+            padding: 0.75rem;
+            border: none;
+            border-radius: 8px;
+            font-size: 0.875rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            min-height: 44px;
+            position: relative;
+        }
+        
+        .group-button.on {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        
+        .group-button.on:hover {
+            background: linear-gradient(135deg, #5568d3 0%, #653a8e 100%);
+        }
+        
+        .group-button.off {
+            background: #f1f3f5;
+            color: #495057;
+        }
+        
+        .group-button.off:hover {
+            background: #e9ecef;
+        }
+        
+        .group-button:active {
+            transform: scale(0.95);
+        }
+        
+        .group-button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+        
+        .group-button .spinner {
+            display: inline-block;
+            width: 14px;
+            height: 14px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-top-color: white;
+            border-radius: 50%;
+            animation: spin 0.6s linear infinite;
+        }
+        
+        /* Scenes Section Styles */
+        .scenes-section .devices {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 1rem;
+        }
+        
+        .scene-button {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            padding: 1.25rem;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            min-height: 80px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+        }
+        
+        .scene-button:hover {
+            background: linear-gradient(135deg, #e082ea 0%, #e4465b 100%);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+            transform: translateY(-2px);
+        }
+        
+        .scene-button:active {
+            transform: translateY(0) scale(0.95);
+        }
+        
+        .scene-button:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+        
+        .scene-button .spinner {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-top-color: white;
+            border-radius: 50%;
+            animation: spin 0.6s linear infinite;
+            margin-left: 0.5rem;
+        }
+        
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        
+        /* Toast Notification */
+        .toast {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            background: white;
+            padding: 1rem 1.5rem;
+            border-radius: 8px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            z-index: 1000;
+            animation: slideIn 0.3s ease;
+            max-width: 400px;
+        }
+        
+        @keyframes slideIn {
+            from {
+                transform: translateX(100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+        
+        .toast.success {
+            border-left: 4px solid #51cf66;
+        }
+        
+        .toast.error {
+            border-left: 4px solid #ff6b6b;
+        }
+        
+        .toast-icon {
+            font-size: 1.5rem;
+        }
+        
+        .toast-message {
+            flex: 1;
+            color: #333;
+            font-size: 0.875rem;
+        }
+        
+        .toast-close {
+            background: none;
+            border: none;
+            color: #999;
+            cursor: pointer;
+            font-size: 1.25rem;
+            padding: 0;
+            line-height: 1;
+        }
+        
         .events {
             margin-top: 2rem;
             background: white;
@@ -535,6 +737,106 @@
             font-size: 0.875rem;
             color: #999;
         }
+        
+        /* Responsive Design */
+        @media (max-width: 768px) {
+            .container {
+                padding: 1rem;
+            }
+            
+            header {
+                padding: 1rem;
+            }
+            
+            .header-content h1 {
+                font-size: 1.5rem;
+            }
+            
+            .header-content p {
+                font-size: 0.75rem;
+            }
+            
+            .header-buttons {
+                gap: 0.5rem;
+            }
+            
+            .refresh-btn, .collapse-all-btn {
+                width: 36px;
+                height: 36px;
+                font-size: 1.25rem;
+            }
+            
+            .room {
+                padding: 1rem;
+            }
+            
+            .room-header h2 {
+                font-size: 1.125rem;
+            }
+            
+            .devices {
+                grid-template-columns: 1fr;
+            }
+            
+            /* Groups responsive */
+            .groups-section .devices {
+                grid-template-columns: 1fr;
+            }
+            
+            .group-card {
+                padding: 1rem;
+            }
+            
+            .group-card-title {
+                font-size: 1rem;
+            }
+            
+            /* Scenes responsive */
+            .scenes-section .devices {
+                grid-template-columns: 1fr;
+            }
+            
+            .scene-button {
+                min-height: 60px;
+                font-size: 0.9375rem;
+            }
+            
+            /* Toast responsive */
+            .toast {
+                bottom: 1rem;
+                right: 1rem;
+                left: 1rem;
+                max-width: none;
+            }
+            
+            /* Thermostat responsive */
+            .thermostat-display {
+                grid-template-columns: 1fr;
+                gap: 0.75rem;
+            }
+            
+            .temp-controls {
+                flex-direction: column;
+            }
+            
+            .temp-button {
+                width: 100%;
+            }
+        }
+        
+        @media (min-width: 769px) and (max-width: 1024px) {
+            .devices {
+                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            }
+            
+            .groups-section .devices {
+                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            }
+            
+            .scenes-section .devices {
+                grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+            }
+        }
     </style>
 </head>
 <body>
@@ -713,6 +1015,38 @@
             </div>
         {% endif %}
         
+        <!-- Groups Section -->
+        <section class="room groups-section">
+            <div class="room-header" onclick="toggleRoom('groups-content')">
+                <div class="room-title">
+                    <h2>🎛️ Gruppen</h2>
+                    <span class="device-count" id="groups-count">Lädt...</span>
+                </div>
+                <span class="toggle-icon">▼</span>
+            </div>
+            <div class="room-content collapsed" id="groups-content">
+                <div class="devices" id="groups-container">
+                    <p style="color: #666;">Lade Gruppen...</p>
+                </div>
+            </div>
+        </section>
+        
+        <!-- Scenes Section -->
+        <section class="room scenes-section">
+            <div class="room-header" onclick="toggleRoom('scenes-content')">
+                <div class="room-title">
+                    <h2>🎬 Szenen</h2>
+                    <span class="device-count" id="scenes-count">Lädt...</span>
+                </div>
+                <span class="toggle-icon">▼</span>
+            </div>
+            <div class="room-content collapsed" id="scenes-content">
+                <div class="devices" id="scenes-container">
+                    <p style="color: #666;">Lade Szenen...</p>
+                </div>
+            </div>
+        </section>
+        
         <div class="events">
             <h2>📡 Realtime Events</h2>
             <div class="event-list" id="event-list">
@@ -1260,6 +1594,201 @@
         loadDevices().then(() => {
             console.log('Initial states loaded, now connecting SSE...');
         });
+        
+        // ===== GROUPS & SCENES FUNCTIONALITY =====
+        
+        // Show toast notification
+        function showToast(message, type = 'success') {
+            // Remove existing toasts
+            document.querySelectorAll('.toast').forEach(t => t.remove());
+            
+            const toast = document.createElement('div');
+            toast.className = `toast ${type}`;
+            toast.innerHTML = `
+                <span class="toast-icon">${type === 'success' ? '✓' : '✗'}</span>
+                <span class="toast-message">${message}</span>
+                <button class="toast-close" onclick="this.parentElement.remove()">×</button>
+            `;
+            document.body.appendChild(toast);
+            
+            // Auto-remove after 4 seconds
+            setTimeout(() => {
+                toast.style.animation = 'slideIn 0.3s ease reverse';
+                setTimeout(() => toast.remove(), 300);
+            }, 4000);
+        }
+        
+        // Load and render groups
+        async function loadGroups() {
+            try {
+                const response = await fetch(api('/groups'));
+                if (!response.ok) throw new Error('Failed to load groups');
+                
+                const groups = await response.json();
+                const container = document.getElementById('groups-container');
+                const countSpan = document.getElementById('groups-count');
+                
+                if (groups.length === 0) {
+                    container.innerHTML = '<p style="color: #666;">Keine Gruppen konfiguriert.</p>';
+                    countSpan.textContent = '0 Gruppen';
+                    return;
+                }
+                
+                countSpan.textContent = `${groups.length} ${groups.length === 1 ? 'Gruppe' : 'Gruppen'}`;
+                
+                container.innerHTML = groups.map(group => `
+                    <div class="group-card">
+                        <div class="group-card-header">
+                            <div class="group-card-title">${group.name}</div>
+                            <div class="group-card-subtitle">${group.device_count} ${group.device_count === 1 ? 'Gerät' : 'Geräte'}</div>
+                        </div>
+                        <div class="group-card-actions">
+                            <button class="group-button on" onclick="setGroup('${group.id}', 'on', this)">
+                                Alle An
+                            </button>
+                            <button class="group-button off" onclick="setGroup('${group.id}', 'off', this)">
+                                Alle Aus
+                            </button>
+                        </div>
+                    </div>
+                `).join('');
+                
+                console.log(`Loaded ${groups.length} groups`);
+            } catch (error) {
+                console.error('Failed to load groups:', error);
+                const container = document.getElementById('groups-container');
+                container.innerHTML = '<p style="color: #999;">Fehler beim Laden der Gruppen</p>';
+                showToast('Fehler beim Laden der Gruppen', 'error');
+            }
+        }
+        
+        // Execute group action
+        async function setGroup(groupId, power, buttonElement) {
+            const allButtons = buttonElement.parentElement.querySelectorAll('button');
+            allButtons.forEach(btn => btn.disabled = true);
+            
+            const originalHTML = buttonElement.innerHTML;
+            buttonElement.innerHTML = '<span class="spinner"></span>';
+            
+            try {
+                const response = await fetch(api(`/groups/${groupId}/set`), {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        action: {
+                            type: 'power',
+                            payload: { power }
+                        }
+                    })
+                });
+                
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.detail || 'Request failed');
+                }
+                
+                const result = await response.json();
+                const publishedCount = result.execution_plan.filter(p => p.status === 'published').length;
+                
+                showToast(`Gruppe ${power === 'on' ? 'eingeschaltet' : 'ausgeschaltet'}: ${publishedCount} Geräte`, 'success');
+                console.log(`Group ${groupId} set to ${power}:`, result);
+                
+                addEvent({
+                    action: 'group_set',
+                    group_id: groupId,
+                    power: power,
+                    device_count: publishedCount
+                });
+                
+            } catch (error) {
+                console.error('Failed to set group:', error);
+                showToast(`Fehler: ${error.message}`, 'error');
+            } finally {
+                buttonElement.innerHTML = originalHTML;
+                allButtons.forEach(btn => btn.disabled = false);
+            }
+        }
+        
+        // Load and render scenes
+        async function loadScenes() {
+            try {
+                const response = await fetch(api('/scenes'));
+                if (!response.ok) throw new Error('Failed to load scenes');
+                
+                const scenes = await response.json();
+                const container = document.getElementById('scenes-container');
+                const countSpan = document.getElementById('scenes-count');
+                
+                if (scenes.length === 0) {
+                    container.innerHTML = '<p style="color: #666;">Keine Szenen konfiguriert.</p>';
+                    countSpan.textContent = '0 Szenen';
+                    return;
+                }
+                
+                countSpan.textContent = `${scenes.length} ${scenes.length === 1 ? 'Szene' : 'Szenen'}`;
+                
+                container.innerHTML = scenes.map(scene => `
+                    <button class="scene-button" onclick="runScene('${scene.id}', this)">
+                        ${scene.name}
+                    </button>
+                `).join('');
+                
+                console.log(`Loaded ${scenes.length} scenes`);
+            } catch (error) {
+                console.error('Failed to load scenes:', error);
+                const container = document.getElementById('scenes-container');
+                container.innerHTML = '<p style="color: #999;">Fehler beim Laden der Szenen</p>';
+                showToast('Fehler beim Laden der Szenen', 'error');
+            }
+        }
+        
+        // Execute scene
+        async function runScene(sceneId, buttonElement) {
+            buttonElement.disabled = true;
+            
+            const originalHTML = buttonElement.innerHTML;
+            buttonElement.innerHTML = `${originalHTML} <span class="spinner"></span>`;
+            
+            try {
+                const response = await fetch(api(`/scenes/${sceneId}/run`), {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' }
+                });
+                
+                if (!response.ok) {
+                    const error = await response.json();
+                    throw new Error(error.detail || 'Request failed');
+                }
+                
+                const result = await response.json();
+                const totalPublished = result.steps.reduce((sum, step) => 
+                    sum + step.devices.filter(d => d.status === 'published').length, 0
+                );
+                
+                showToast(`Szene ausgeführt: ${totalPublished} Aktionen`, 'success');
+                console.log(`Scene ${sceneId} executed:`, result);
+                
+                addEvent({
+                    action: 'scene_run',
+                    scene_id: sceneId,
+                    steps: result.steps.length,
+                    total_actions: totalPublished
+                });
+                
+            } catch (error) {
+                console.error('Failed to run scene:', error);
+                showToast(`Fehler: ${error.message}`, 'error');
+            } finally {
+                buttonElement.innerHTML = originalHTML;
+                buttonElement.disabled = false;
+            }
+        }
+        
+        // Load groups and scenes on page load
+        document.addEventListener('DOMContentLoaded', () => {
+            loadGroups();
+            loadScenes();
+        });
     </script>
 </body>
 </html>