new ui 6
This commit is contained in:
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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 = {};
|
||||
|
||||
Reference in New Issue
Block a user