new ui 6

apps/ui/templates/rooms.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Räume - Home Automation</title>
+    <script src="/static/types.js"></script>
+    <script src="/static/api-client.js"></script>
     <style>
         * {
             margin: 0;
@@ -149,11 +151,6 @@
     <script>
         // API configuration from backend
         window.API_BASE = '{{ api_base }}';
-        
-        // Helper function to construct API URLs
-        function api(url) {
-            return `${window.API_BASE}${url}`;
-        }
 
         // Room icon mapping
         const roomIcons = {
@@ -193,19 +190,9 @@
             const errorContainer = document.getElementById('error-container');
 
             try {
-                // Load layout
-                const layoutResponse = await fetch(api('/layout'));
-                if (!layoutResponse.ok) {
-                    throw new Error(`Layout API error: ${layoutResponse.status}`);
-                }
-                const layoutData = await layoutResponse.json();
-
-                // Load devices for feature checks
-                const devicesResponse = await fetch(api('/devices'));
-                if (!devicesResponse.ok) {
-                    throw new Error(`Devices API error: ${devicesResponse.status}`);
-                }
-                const devicesData = await devicesResponse.json();
+                // Load layout and devices using API client
+                const layoutData = await window.apiClient.getLayout();
+                const devicesData = await window.apiClient.getDevices();
 
                 // Create device lookup
                 const deviceMap = {};