108 lines
3.8 KiB
HTML
108 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<!-- Für Suchmaschinen optimierte Beschreibung -->
|
|
<meta name="description" content="WIZ-Controller">
|
|
<!-- Optional: Autor der Seite -->
|
|
<meta name="author" content="Kattudden">
|
|
<title>WIZ-Controller</title>
|
|
|
|
<!-- Verknüpfung zu externen CSS-Dateien -->
|
|
<link rel="stylesheet" href="/styles.css">
|
|
<!-- Optional: Favicon -->
|
|
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
document.querySelectorAll('.group .switch input').forEach(function (checkbox) {
|
|
checkbox.addEventListener('change', function () {
|
|
const groupName = this.closest('.group').querySelector('h2').textContent.trim();
|
|
const turnOn = this.checked;
|
|
|
|
fetch('/toggle-group', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
groupName: groupName,
|
|
turnOn: turnOn
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.error) {
|
|
alert(data.error);
|
|
} else {
|
|
// Optional: Seite neu laden oder Status aktualisieren
|
|
location.reload();
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Fehler:', error);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<h1>WIZ-Controller</h1>
|
|
</header>
|
|
<main>
|
|
<!-- Hauptinhalt der Seite -->
|
|
<section id="home">
|
|
{{/* Iteration über die Gruppen */}}
|
|
{{range .groups}}
|
|
<div class="group">
|
|
<!-- Raum-Bild für die Gruppe -->
|
|
<h2>
|
|
<img src="/room.png" alt="Raum Symbol" style="width:24px;height:24px;vertical-align:middle;" />
|
|
{{.Name}}
|
|
</h2>
|
|
|
|
<!-- Toggle-Button -->
|
|
<label class="switch">
|
|
<input type="checkbox" {{if .AllOn}}checked{{end}}>
|
|
<span class="slider"></span>
|
|
</label>
|
|
|
|
<ul>
|
|
{{/* Iteriere über die Bulbs innerhalb der aktuellen Gruppe */}}
|
|
{{range .Bulbs}}
|
|
<li>
|
|
<!-- IP und Port anzeigen -->
|
|
{{.Name}}
|
|
{{if .Message}}
|
|
Fehler: {{.Message}}
|
|
{{else}}
|
|
<!-- Lichtstatus mit passendem Bild -->
|
|
<img src="{{if .IsOn}}/light-on.png{{else}}/light-off.png{{end}}"
|
|
alt="{{if .IsOn}}Licht an{{else}}Licht aus{{end}}"
|
|
style="width:24px;height:24px;vertical-align:middle;" />
|
|
Status: {{if .IsOn}}An{{else}}Aus{{end}}
|
|
{{end}}
|
|
</li>
|
|
{{end}}
|
|
</ul>
|
|
</div>
|
|
{{else}}
|
|
<p>Keine Gruppen vorhanden!</p>
|
|
{{end}}
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer>
|
|
<!-- Fußbereich -->
|
|
<p>© 2025 Kattudden. Alle Rechte vorbehalten.</p>
|
|
</footer>
|
|
|
|
</body>
|
|
|
|
</html> |