diff --git a/apps/ui/templates/dashboard.html b/apps/ui/templates/dashboard.html index 6d698d0..b3f3585 100644 --- a/apps/ui/templates/dashboard.html +++ b/apps/ui/templates/dashboard.html @@ -29,6 +29,16 @@ padding: 2rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 1rem; + flex-wrap: wrap; + } + + .header-content { + flex: 1; + min-width: 200px; } h1 { @@ -36,6 +46,30 @@ margin-bottom: 0.5rem; } + .collapse-all-btn { + padding: 0.75rem 1.5rem; + background: #667eea; + color: white; + border: none; + border-radius: 8px; + font-size: 0.875rem; + font-weight: 600; + cursor: pointer; + transition: all 0.2s; + white-space: nowrap; + min-height: 44px; + } + + .collapse-all-btn:hover { + background: #5568d3; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); + } + + .collapse-all-btn:active { + transform: translateY(0); + } + .status { display: inline-block; padding: 0.25rem 0.75rem; @@ -434,8 +468,13 @@
-

🏠 Home Automation

-

Realtime Status: Verbinde...

+
+

🏠 Home Automation

+

Realtime Status: Verbinde...

+
+
{% if rooms %} @@ -590,6 +629,28 @@ } } + // Toggle all rooms + function toggleAllRooms() { + const allContents = document.querySelectorAll('.room-content'); + const allToggles = document.querySelectorAll('.room-toggle'); + const buttonText = document.getElementById('collapse-all-text'); + + // Check if any room is expanded + const anyExpanded = Array.from(allContents).some(content => !content.classList.contains('collapsed')); + + if (anyExpanded) { + // Collapse all + allContents.forEach(content => content.classList.add('collapsed')); + allToggles.forEach(toggle => toggle.classList.add('collapsed')); + buttonText.textContent = 'Alle ausklappen'; + } else { + // Expand all + allContents.forEach(content => content.classList.remove('collapsed')); + allToggles.forEach(toggle => toggle.classList.remove('collapsed')); + buttonText.textContent = 'Alle einklappen'; + } + } + // Set room icons based on room name document.addEventListener('DOMContentLoaded', () => { const roomTitles = document.querySelectorAll('.room-title');