klappbare Räume

apps/ui/templates/dashboard.html

@@ -57,27 +57,67 @@
         .room {
             background: white;
             border-radius: 20px;
-            padding: 2rem;
-            margin-bottom: 2rem;
+            margin-bottom: 1rem;
             box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
-            transition: transform 0.2s, box-shadow 0.2s;
+            overflow: hidden;
+            transition: box-shadow 0.2s;
         }
         
         .room:hover {
-            transform: translateY(-2px);
             box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
         }
         
+        .room-header {
+            padding: 1.5rem 2rem;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: white;
+            transition: background-color 0.2s;
+            user-select: none;
+        }
+        
+        .room-header:hover {
+            background: #f8f9fa;
+        }
+        
+        .room-header:active {
+            background: #e9ecef;
+        }
+        
         .room-title {
             color: #333;
-            font-size: 1.75rem;
+            font-size: 1.5rem;
             font-weight: 700;
-            margin-bottom: 1.5rem;
-            padding-bottom: 1rem;
-            border-bottom: 3px solid #667eea;
             display: flex;
             align-items: center;
             gap: 0.75rem;
+            margin: 0;
+        }
+        
+        .room-toggle {
+            font-size: 1.5rem;
+            color: #667eea;
+            transition: transform 0.3s;
+            line-height: 1;
+        }
+        
+        .room-toggle.collapsed {
+            transform: rotate(-90deg);
+        }
+        
+        .room-content {
+            padding: 0 2rem 2rem 2rem;
+            max-height: 5000px;
+            overflow: hidden;
+            transition: max-height 0.3s ease-out, padding 0.3s ease-out;
+        }
+        
+        .room-content.collapsed {
+            max-height: 0;
+            padding-top: 0;
+            padding-bottom: 0;
         }
         
         .devices {
@@ -401,9 +441,13 @@
         {% if rooms %}
             {% for room in rooms %}
             <section class="room">
-                <h2 class="room-title">{{ room.name }}</h2>
+                <div class="room-header" onclick="toggleRoom('room-{{ loop.index }}')">
+                    <h2 class="room-title">{{ room.name }}</h2>
+                    <span class="room-toggle" id="toggle-room-{{ loop.index }}">▼</span>
+                </div>
                 
-                <div class="devices">
+                <div class="room-content" id="room-{{ loop.index }}">
+                    <div class="devices">
                     {% for device in room.devices %}
                     <div class="device-card" data-device-id="{{ device.device_id }}">
                         <div class="device-header">
@@ -515,6 +559,7 @@
                         {% endif %}
                     </div>
                     {% endfor %}
+                    </div>
                 </div>
             </section>
             {% endfor %}
@@ -534,6 +579,17 @@
     </div>
     
     <script>
+        // Toggle room visibility
+        function toggleRoom(roomId) {
+            const content = document.getElementById(roomId);
+            const toggle = document.getElementById(`toggle-${roomId}`);
+            
+            if (content && toggle) {
+                content.classList.toggle('collapsed');
+                toggle.classList.toggle('collapsed');
+            }
+        }
+        
         // Set room icons based on room name
         document.addEventListener('DOMContentLoaded', () => {
             const roomTitles = document.querySelectorAll('.room-title');