wn/home-automation
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new ui 6

Browse Source
This commit is contained in:
Wolfgang Hottgenroth
2025-11-17 21:52:24 +01:00
parent 74d4fea695
commit ecf31c7f8b
6 changed files with 767 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
apps/ui/templates/room.html
View File

@@ -3,7 +3,9 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raum - Home Automation</title>
<title>{{ room_name }} - Home Automation</title>
<script src="/static/types.js"></script>
<script src="/static/api-client.js"></script>
<style>
* {
margin: 0;
@@ -206,11 +208,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 room name from URL
const pathParts = window.location.pathname.split('/');
@@ -242,15 +239,12 @@
const roomInfoEl = document.getElementById('room-info');
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 layout and devices using API client
const layoutData = await window.apiClient.getLayout();
const devicesData = await window.apiClient.getDevices();
// Find the room
const room = layoutData.rooms.find(r => r.name === roomName);
// Find the room using API client helper
const room = window.apiClient.findRoom(layoutData, roomName);
if (!room) {
throw new Error(`Raum "${roomName}" nicht gefunden`);
}
@@ -259,13 +253,6 @@
roomNameEl.textContent = room.name;
roomInfoEl.textContent = `${room.devices.length} Gerät${room.devices.length !== 1 ? 'e' : ''}`;
// Load devices
const devicesResponse = await fetch(api('/devices'));
if (!devicesResponse.ok) {
throw new Error(`Devices API error: ${devicesResponse.status}`);
}
const devicesData = await devicesResponse.json();
// Create device lookup
const deviceMap = {};
devicesData.forEach(device => {
@@ -310,14 +297,11 @@
async function loadDeviceStates(deviceIds) {
try {
// Load states for all devices
// Load states for all devices using API client
const statePromises = deviceIds.map(async deviceId => {
try {
const response = await fetch(api(`/devices/${deviceId}/state`));
if (response.ok) {
const state = await response.json();
deviceStates[deviceId] = state;
}
const state = await window.apiClient.getDeviceState(deviceId);
deviceStates[deviceId] = state;
} catch (e) {
console.warn(`Failed to load state for ${deviceId}:`, e);
}
@@ -427,7 +411,7 @@
function connectRealtime() {
try {
eventSource = new EventSource(api('/realtime'));
eventSource = new EventSource(window.apiClient.api('/realtime'));
eventSource.onmessage = (event) => {
try {
@@ -441,8 +425,8 @@
const card = document.querySelector(`[data-device-id="${data.device_id}"]`);
if (card) {
const stateDiv = card.querySelector('.device-state');
const devicesResponse = fetch(api('/devices')).then(r => r.json()).then(devices => {
const device = devices.find(d => d.device_id === data.device_id);
window.apiClient.getDevices().then(devices => {
const device = window.apiClient.findDevice(devices, data.device_id);
if (device) {
updateDeviceCardState(stateDiv, device);
}