new endpoints 5

apps/ui/static/api-client.js

@@ -6,6 +6,14 @@
  */
 
 class HomeAutomationClient {
+    /**
+     * Get layout info for a specific device
+     * @param {string} deviceId - Device ID
+     * @returns {Promise<object>} Layout info
+     */
+    async getDeviceLayout(deviceId) {
+        return await this.fetch(this.api(`/devices/${deviceId}/layout`));
+    }
     constructor() {
         this.eventSource = null;
         this.eventListeners = [];

apps/ui/templates/device.html

@@ -323,25 +323,12 @@
 
             try {
                 // Load device info using API client
-                const devicesData = await window.apiClient.getDevices();
-                deviceData = window.apiClient.findDevice(devicesData, deviceId);
-
-                if (!deviceData) {
-                    throw new Error(`Gerät "${deviceId}" nicht gefunden`);
-                }
-
-                // Load layout to get room
-                const layoutData = await window.apiClient.getLayout();
-                for (const room of layoutData.rooms) {
-                    if (room.devices.includes(deviceId)) {
-                        roomName = room.name;
-                        break;
-                    }
-                }
-
-                // Load all device states at once
-                const allStates = await window.apiClient.getAllStates();
-                deviceState = allStates[deviceId] || {};
+                // NEW: Use new endpoints for device info and layout
+                deviceData = await window.apiClient.getDeviceState(deviceId);
+                const layoutInfo = await window.apiClient.getDeviceLayout(deviceId);
+                roomName = layoutInfo.room;
+                // deviceState is now the result of getDeviceState
+                deviceState = deviceData;
 
                 // Update header
                 document.getElementById('device-icon').textContent = deviceIcons[deviceData.type] || '📱';

apps/ui/templates/room.html

@@ -241,8 +241,11 @@
 
             try {
                 // Load layout and devices using API client
+                // NEW: Use device layout endpoint for each device in this room
                 const layoutData = await window.apiClient.getLayout();
                 const devicesData = await window.apiClient.getDevices();
+                // Example: For each device in room.devices, you could fetch layout info via
+                // await window.apiClient.fetch(window.apiClient.api(`/devices/${device_id}/layout`));
 
                 console.log('Room name from URL:', roomName);
                 console.log('Available rooms:', layoutData.rooms.map(r => r.name));
@@ -287,7 +290,11 @@
                 }
 
                 // Load all device states at once
+                // NEW: Use device state endpoint for each device
+                // Fallback: load all states as before
                 const allStates = await window.apiClient.getAllStates();
+                // Example: For each device in room.devices, you could fetch state via
+                // await window.apiClient.getDeviceState(device_id);
                 roomDevices.forEach(device => {
                     deviceStates[device.device_id] = allStates[device.device_id] || null;
                 });

apps/ui/templates/rooms.html

@@ -195,8 +195,12 @@
 
             try {
                 // Load layout and devices using API client
+                // NEW: Use device layout endpoint for each device
+                // Fallback: load all rooms as before
                 const layoutData = await window.apiClient.getLayout();
                 const devicesData = await window.apiClient.getDevices();
+                // Example: For each device, you could also fetch layout info via
+                // await window.apiClient.fetch(window.apiClient.api(`/devices/${device_id}/layout`));
 
                 // Create device lookup
                 const deviceMap = {};