dynamic dashboard seems to work

This commit is contained in:
2025-11-04 19:45:13 +01:00
parent ca623121a3
commit a5c87247f9
2 changed files with 515 additions and 72 deletions

View File

@@ -3,44 +3,325 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Automation Dashboard</title> <title>Home Automation</title>
<link rel="stylesheet" href="/static/style.css"> <style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}
h1 {
color: #333;
margin-bottom: 0.5rem;
}
.status {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.875rem;
font-weight: 500;
}
.status.connected {
background: #d4edda;
color: #155724;
}
.status.disconnected {
background: #f8d7da;
color: #721c24;
}
.room {
margin-bottom: 2rem;
}
.room-title {
color: white;
font-size: 1.5rem;
margin-bottom: 1rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.devices {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.device-card {
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.device-header {
margin-bottom: 1.5rem;
}
.device-name {
font-size: 1.5rem;
font-weight: 600;
color: #333;
margin-bottom: 0.25rem;
}
.device-type {
font-size: 0.875rem;
color: #666;
text-transform: uppercase;
}
.device-id {
font-size: 0.75rem;
color: #999;
margin-top: 0.25rem;
font-family: 'Courier New', monospace;
}
.device-state {
padding: 0.5rem 1rem;
background: #f8f9fa;
border-radius: 8px;
margin: 1rem 0;
font-family: 'Courier New', monospace;
font-size: 0.875rem;
}
.state-label {
color: #666;
font-weight: 500;
}
.state-value {
color: #333;
font-weight: 600;
}
.state-value.on {
color: #28a745;
}
.state-value.off {
color: #dc3545;
}
.controls {
display: flex;
flex-direction: column;
gap: 1rem;
}
.toggle-button {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
color: white;
}
.toggle-button.on {
background: #28a745;
}
.toggle-button.on:hover {
background: #218838;
}
.toggle-button.off {
background: #6c757d;
}
.toggle-button.off:hover {
background: #5a6268;
}
.brightness-control {
margin-top: 1rem;
}
.brightness-label {
font-size: 0.875rem;
color: #666;
display: block;
margin-bottom: 0.5rem;
}
.brightness-slider {
width: 100%;
height: 8px;
border-radius: 4px;
background: #ddd;
outline: none;
-webkit-appearance: none;
}
.brightness-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #667eea;
cursor: pointer;
}
.brightness-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #667eea;
cursor: pointer;
border: none;
}
.events {
margin-top: 2rem;
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.events h2 {
color: #333;
margin-bottom: 1rem;
font-size: 1.25rem;
}
.event-list {
max-height: 300px;
overflow-y: auto;
}
.event-item {
padding: 0.75rem;
border-left: 3px solid #667eea;
background: #f8f9fa;
margin-bottom: 0.5rem;
border-radius: 4px;
font-size: 0.875rem;
}
.event-time {
color: #666;
font-size: 0.75rem;
}
.event-data {
color: #333;
margin-top: 0.25rem;
font-family: 'Courier New', monospace;
}
.empty-state {
background: white;
border-radius: 16px;
padding: 3rem;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.empty-state p {
color: #666;
margin-bottom: 0.5rem;
}
.hint {
font-size: 0.875rem;
color: #999;
}
</style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<header> <header>
<h1>🏠 Home Automation</h1> <h1>🏠 Home Automation</h1>
<p>Realtime Status: <span class="status disconnected" id="connection-status">Verbinde...</span></p>
</header> </header>
<main>
{% if rooms %} {% if rooms %}
{% for room in rooms %} {% for room in rooms %}
<section class="room"> <section class="room">
<h2 class="room-title">{{ room.name }}</h2> <h2 class="room-title">{{ room.name }}</h2>
<div class="devices-grid"> <div class="devices">
{% for device in room.devices %} {% for device in room.devices %}
<div class="device-tile" data-device-id="{{ device.device_id }}"> <div class="device-card" data-device-id="{{ device.device_id }}">
<div class="device-header"> <div class="device-header">
<div class="device-icon">{{ device.icon }}</div> <div class="device-name">{{ device.icon }} {{ device.title }}</div>
<div class="device-info"> <div class="device-type">
<h3 class="device-title">{{ device.title }}</h3> {% if device.type == "light" %}
<p class="device-id">{{ device.device_id }}</p> Light
{% if device.features.brightness %}• Dimmbar{% endif %}
{% else %}
{{ device.type or "Unknown" }}
{% endif %}
</div> </div>
<div class="device-id">{{ device.device_id }}</div>
</div> </div>
<div class="device-state"> <div class="device-state">
<span id="state-{{ device.device_id }}" class="state-text"></span> <span class="state-label">Status:</span>
<span class="state-value off" id="state-{{ device.device_id }}">off</span>
{% if device.features.brightness %}
<br>
<span class="state-label">Helligkeit:</span>
<span class="state-value" id="brightness-{{ device.device_id }}">50</span>%
{% endif %}
</div> </div>
{% if device.type == "light" and device.features.power %} {% if device.type == "light" and device.features.power %}
<div class="device-controls"> <div class="controls">
<button class="btn btn-on" onclick="setDeviceState('{{ device.device_id }}', 'on')"> <button
AN class="toggle-button off"
</button> id="toggle-{{ device.device_id }}"
<button class="btn btn-off" onclick="setDeviceState('{{ device.device_id }}', 'off')"> onclick="toggleDevice('{{ device.device_id }}')">
AUS Einschalten
</button> </button>
{% if device.features.brightness %}
<div class="brightness-control">
<label for="brightness-slider-{{ device.device_id }}" class="brightness-label">
Helligkeit: <span id="brightness-value-{{ device.device_id }}">50</span>%
</label>
<input
type="range"
class="brightness-slider"
id="brightness-slider-{{ device.device_id }}"
min="0"
max="100"
value="50"
oninput="updateBrightnessValue('{{ device.device_id }}', this.value)"
onchange="setBrightness('{{ device.device_id }}', this.value)">
</div>
{% endif %}
</div> </div>
{% endif %} {% endif %}
</div> </div>
@@ -54,58 +335,219 @@
<p class="hint">Prüfe config/layout.yaml und das API-Gateway.</p> <p class="hint">Prüfe config/layout.yaml und das API-Gateway.</p>
</div> </div>
{% endif %} {% endif %}
</main>
<footer> <div class="events">
<p>Home Automation System v0.1.0</p> <h2>📡 Realtime Events</h2>
</footer> <div class="event-list" id="event-list">
<p style="color: #666; font-size: 0.875rem;">Warte auf Events...</p>
</div>
</div>
</div> </div>
<script> <script>
// Set device state via API const API_BASE = 'http://localhost:8001';
async function setDeviceState(deviceId, power) { let eventSource = null;
const stateSpan = document.getElementById(`state-${deviceId}`); let currentState = {};
// Initialize device states
{% for room in rooms %}
{% for device in room.devices %}
currentState['{{ device.device_id }}'] = 'off';
{% endfor %}
{% endfor %}
// Toggle device state
async function toggleDevice(deviceId) {
const newState = currentState[deviceId] === 'on' ? 'off' : 'on';
try { try {
stateSpan.textContent = `${power}...`; const response = await fetch(`${API_BASE}/devices/${deviceId}/set`, {
const response = await fetch(`http://localhost:8001/devices/${deviceId}/set`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json'
}, },
body: JSON.stringify({ body: JSON.stringify({
type: 'light', type: 'light',
payload: { payload: {
power: power power: newState
} }
}) })
}); });
if (!response.ok) { if (response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`); console.log(`Sent ${newState} command to ${deviceId}`);
addEvent({
action: 'command_sent',
device_id: deviceId,
state: newState
});
} }
const result = await response.json();
console.log('Device state set:', deviceId, power, result);
stateSpan.textContent = `${power}`;
// Reset to "—" after 2 seconds
setTimeout(() => {
stateSpan.textContent = '—';
}, 2000);
} catch (error) { } catch (error) {
console.error('Error setting device state:', error); console.error('Failed to toggle device:', error);
stateSpan.textContent = `✗ Error`; }
}
// Reset after 3 seconds // Update brightness value display
setTimeout(() => { function updateBrightnessValue(deviceId, value) {
stateSpan.textContent = '—'; const valueSpan = document.getElementById(`brightness-value-${deviceId}`);
}, 3000); if (valueSpan) {
valueSpan.textContent = value;
} }
} }
// Set brightness
async function setBrightness(deviceId, brightness) {
try {
const response = await fetch(`${API_BASE}/devices/${deviceId}/set`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
type: 'light',
payload: {
brightness: parseInt(brightness)
}
})
});
if (response.ok) {
console.log(`Sent brightness ${brightness} to ${deviceId}`);
addEvent({
action: 'brightness_set',
device_id: deviceId,
brightness: parseInt(brightness)
});
}
} catch (error) {
console.error('Failed to set brightness:', error);
}
}
// Update device UI
function updateDeviceUI(deviceId, power, brightness) {
currentState[deviceId] = power;
const stateSpan = document.getElementById(`state-${deviceId}`);
const toggleButton = document.getElementById(`toggle-${deviceId}`);
if (stateSpan) {
stateSpan.textContent = power;
stateSpan.className = `state-value ${power}`;
}
if (toggleButton) {
if (power === 'on') {
toggleButton.textContent = 'Ausschalten';
toggleButton.className = 'toggle-button on';
} else {
toggleButton.textContent = 'Einschalten';
toggleButton.className = 'toggle-button off';
}
}
// Update brightness display and slider
if (brightness !== undefined) {
const brightnessSpan = document.getElementById(`brightness-${deviceId}`);
const brightnessValue = document.getElementById(`brightness-value-${deviceId}`);
const brightnessSlider = document.getElementById(`brightness-slider-${deviceId}`);
if (brightnessSpan) {
brightnessSpan.textContent = brightness;
}
if (brightnessValue) {
brightnessValue.textContent = brightness;
}
if (brightnessSlider) {
brightnessSlider.value = brightness;
}
}
}
// Add event to list
function addEvent(event) {
const eventList = document.getElementById('event-list');
// Clear placeholder
if (eventList.children.length === 1 && eventList.children[0].tagName === 'P') {
eventList.innerHTML = '';
}
const eventItem = document.createElement('div');
eventItem.className = 'event-item';
const now = new Date().toLocaleTimeString('de-DE');
eventItem.innerHTML = `
<div class="event-time">${now}</div>
<div class="event-data">${JSON.stringify(event, null, 2)}</div>
`;
eventList.insertBefore(eventItem, eventList.firstChild);
// Keep only last 10 events
while (eventList.children.length > 10) {
eventList.removeChild(eventList.lastChild);
}
}
// Connect to SSE
function connectSSE() {
eventSource = new EventSource(`${API_BASE}/realtime`);
eventSource.onopen = () => {
console.log('SSE connected');
document.getElementById('connection-status').textContent = 'Verbunden';
document.getElementById('connection-status').className = 'status connected';
};
eventSource.addEventListener('message', (e) => {
const data = JSON.parse(e.data);
console.log('SSE message:', data);
addEvent(data);
// Update device state
if (data.type === 'state' && data.device_id) {
if (data.payload) {
updateDeviceUI(
data.device_id,
data.payload.power,
data.payload.brightness
);
}
}
});
eventSource.addEventListener('ping', (e) => {
console.log('Heartbeat received');
});
eventSource.onerror = (error) => {
console.error('SSE error:', error);
document.getElementById('connection-status').textContent = 'Getrennt';
document.getElementById('connection-status').className = 'status disconnected';
eventSource.close();
// Reconnect after 5 seconds
setTimeout(connectSSE, 5000);
};
}
// Initialize
connectSSE();
// Optional: Load initial state from API
async function loadDevices() {
try {
const response = await fetch(`${API_BASE}/devices`);
const devices = await response.json();
console.log('Loaded devices:', devices);
} catch (error) {
console.error('Failed to load devices:', error);
}
}
loadDevices();
</script> </script>
</body> </body>
</html> </html>

View File

@@ -38,6 +38,7 @@ devices:
technology: zigbee2mqtt technology: zigbee2mqtt
features: features:
power: true power: true
brightness: true
topics: topics:
set: "vendor/test_lampe_3/set" set: "vendor/test_lampe_3/set"
state: "vendor/test_lampe_3/state" state: "vendor/test_lampe_3/state"