new ui 6

apps/ui/templates/device.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Gerät - Home Automation</title>
+    <script src="/static/types.js"></script>
+    <script src="/static/api-client.js"></script>
     <style>
         * {
             margin: 0;
@@ -289,11 +291,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}`;
-        }
 
         // Get device ID from URL
         const pathParts = window.location.pathname.split('/');
@@ -324,35 +321,25 @@
             const errorContainer = document.getElementById('error-container');
 
             try {
-                // Load device info
-                const devicesResponse = await fetch(api('/devices'));
-                if (!devicesResponse.ok) {
-                    throw new Error(`Devices API error: ${devicesResponse.status}`);
-                }
-                const devicesData = await devicesResponse.json();
-                deviceData = devicesData.find(d => d.device_id === deviceId);
+                // 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 layoutResponse = await fetch(api('/layout'));
-                if (layoutResponse.ok) {
-                    const layoutData = await layoutResponse.json();
-                    for (const room of layoutData.rooms) {
-                        if (room.devices.includes(deviceId)) {
-                            roomName = room.name;
-                            break;
-                        }
+                const layoutData = await window.apiClient.getLayout();
+                for (const room of layoutData.rooms) {
+                    if (room.devices.includes(deviceId)) {
+                        roomName = room.name;
+                        break;
                     }
                 }
 
                 // Load device state
-                const stateResponse = await fetch(api(`/devices/${deviceId}/state`));
-                if (stateResponse.ok) {
-                    deviceState = await stateResponse.json();
-                }
+                deviceState = await window.apiClient.getDeviceState(deviceId);
 
                 // Update header
                 document.getElementById('device-icon').textContent = deviceIcons[deviceData.type] || '📱';
@@ -679,18 +666,7 @@
 
         async function sendCommand(payload) {
             try {
-                const response = await fetch(api(`/devices/${deviceId}/set`), {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify(payload)
-                });
-
-                if (!response.ok) {
-                    throw new Error(`API error: ${response.status}`);
-                }
-
+                await window.apiClient.setDeviceState(deviceId, deviceData.type, payload.payload);
                 showSuccess('Befehl gesendet');
             } catch (error) {
                 console.error('Error sending command:', error);
@@ -738,31 +714,15 @@
 
         function connectRealtime() {
             try {
-                eventSource = new EventSource(api('/realtime'));
-
-                eventSource.onmessage = (event) => {
-                    try {
-                        const data = JSON.parse(event.data);
-                        
-                        if (data.device_id === deviceId && data.payload) {
-                            deviceState = { ...deviceState, ...data.payload };
-                            updateUI();
-                        }
-                    } catch (e) {
-                        console.warn('Failed to parse SSE event:', e);
+                // Use API client's realtime connection
+                window.apiClient.connectRealtime((event) => {
+                    if (event.device_id === deviceId && event.state) {
+                        deviceState = { ...deviceState, ...event.state };
+                        updateUI();
                     }
-                };
-
-                eventSource.onerror = (error) => {
+                }, (error) => {
                     console.error('SSE connection error:', error);
-                    setTimeout(() => {
-                        if (eventSource) {
-                            eventSource.close();
-                            connectRealtime();
-                        }
-                    }, 5000);
-                };
-
+                });
             } catch (error) {
                 console.error('Failed to connect to realtime events:', error);
             }