148 lines
5.7 KiB
HTML
148 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Funkstation Steuerung</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<style>
|
|
body { font-family: 'Segoe UI', Arial, sans-serif; text-align: center; background: #0f172a; color: #f8fafc; padding: 20px; }
|
|
/* Maximale Breite erhöht, um Platz für das zweispaltige Layout zu bieten */
|
|
.container { max-width: 1000px; margin: 0 auto; }
|
|
|
|
/* Das neue Haupt-Layout: Links Relais, rechts Spannungen */
|
|
.main-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
align-items: start;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Spalten-Container für korrekte Ausrichtung */
|
|
.layout-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card { background: #1e293b; padding: 20px; margin: 15px 0; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3); border: 1px solid #334155; text-align: center; }
|
|
.val { font-size: 2.5em; color: #38bdf8; font-weight: bold; font-family: monospace; }
|
|
.grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 15px; }
|
|
.btn { width: 100%; padding: 14px; font-size: 1.1em; border: none; border-radius: 8px; cursor: pointer; font-weight: bold; transition: background 0.2s, transform 0.1s; color: white; }
|
|
.btn:active { transform: scale(0.98); }
|
|
.btn-on { background: #ef4444; }
|
|
.btn-on:hover { background: #dc2626; }
|
|
.btn-off { background: #10b981; }
|
|
.btn-off:hover { background: #059669; }
|
|
.footer-nav { margin-top: 25px; font-size: 0.9em; color: #64748b; clear: both; }
|
|
|
|
/* Responsive Anpassung: Schaltet auf Smartphones automatisch untereinander um */
|
|
@media (max-width: 768px) {
|
|
.main-layout { grid-template-columns: 1fr; gap: 0; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Funkstations-Monitor</h1>
|
|
|
|
<div class="main-layout">
|
|
<!-- LINKE SPALTE: Relaissteuerung -->
|
|
<div class="layout-col">
|
|
<div class="card">
|
|
<h3>Relaissteuerung</h3>
|
|
<div class="grid">
|
|
{{range .Relais}}
|
|
<button class="btn btn-off" id="relais-btn-{{.ID}}" onclick="toggleRelais({{.ID}})">
|
|
{{.Name}}: Laden...
|
|
</button>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RECHTE SPALTE: Spannungsanzeigen -->
|
|
<div class="layout-col">
|
|
<div class="card">
|
|
<h3>{{index .Names 0}}</h3>
|
|
<div class="val" id="v1">--.-- V</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>{{index .Names 1}}</h3>
|
|
<div class="val" id="v2">--.-- V</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>{{index .Names 2}}</h3>
|
|
<div class="val" id="v3">--.-- V</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>{{index .Names 3}}</h3>
|
|
<div class="val" id="v4">--.-- V</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>{{index .Names 4}}</h3>
|
|
<div class="val" id="v5">--.-- V</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer-nav">
|
|
Live-Aktualisierung aktiv <br>
|
|
<span style="font-size: 0.8em; color: #475569; margin-top: 5px; display: block;">
|
|
Version {{.Version}} ({{.BuildDate}})
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function updateUI(data) {
|
|
document.getElementById('v1').innerText = data.v1.toFixed(2) + ' V';
|
|
document.getElementById('v2').innerText = data.v2.toFixed(2) + ' V';
|
|
document.getElementById('v3').innerText = data.v3.toFixed(2) + ' V';
|
|
document.getElementById('v4').innerText = data.v4.toFixed(2) + ' V';
|
|
document.getElementById('v5').innerText = data.v5.toFixed(2) + ' V';
|
|
|
|
data.relais.forEach(r => {
|
|
const btn = document.getElementById(`relais-btn-${r.id}`);
|
|
if (btn) {
|
|
if (r.name && r.name.toLowerCase().includes('reserve')) {
|
|
btn.className = 'btn btn-off';
|
|
btn.innerText = `${r.name}: GESPERRT`;
|
|
btn.disabled = true;
|
|
btn.style.opacity = '0.3';
|
|
btn.style.cursor = 'not-allowed';
|
|
return;
|
|
}
|
|
|
|
if (r.state) {
|
|
btn.className = 'btn btn-on';
|
|
btn.innerText = `${r.name}: AKTIV (Ausschalten)`;
|
|
} else {
|
|
btn.className = 'btn btn-off';
|
|
btn.innerText = `${r.name}: INAKTIV (Einschalten)`;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function loadStatus() {
|
|
fetch('/api/status')
|
|
.then(response => response.json())
|
|
.then(data => updateUI(data))
|
|
.catch(err => console.error('Fehler beim Laden des Status:', err));
|
|
}
|
|
|
|
function toggleRelais(id) {
|
|
fetch(`/api/toggle?id=${id}`)
|
|
.then(response => response.json())
|
|
.then(data => updateUI(data))
|
|
.catch(err => console.error('Fehler beim Schalten:', err));
|
|
}
|
|
|
|
loadStatus();
|
|
setInterval(loadStatus, 2000);
|
|
</script>
|
|
</body>
|
|
</html>
|