Blinken der LEDs und des WebInterface in Sync
This commit is contained in:
+13
-1
@@ -6,6 +6,9 @@
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Port Status</title>
|
||||
<style>
|
||||
:root {
|
||||
--blink-duration: 1s;
|
||||
}
|
||||
.port {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
@@ -22,7 +25,7 @@
|
||||
}
|
||||
.missing {
|
||||
background-color: red;
|
||||
animation: blink 1s infinite;
|
||||
animation: blink var(--blink-duration) infinite;
|
||||
}
|
||||
@keyframes blink {
|
||||
0%, 50% { background-color: red; }
|
||||
@@ -43,6 +46,9 @@
|
||||
try {
|
||||
const response = await fetch('/status/data');
|
||||
const data = await response.json();
|
||||
if (data.blink_interval !== undefined) {
|
||||
updateBlinkDuration(data.blink_interval);
|
||||
}
|
||||
const container = document.getElementById('portsContainer');
|
||||
container.innerHTML = '';
|
||||
data.ports.forEach((port, index) => {
|
||||
@@ -72,6 +78,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
// blink length updater must be defined before starting
|
||||
async function updateBlinkDuration(blinkInterval) {
|
||||
const period = blinkInterval * 2;
|
||||
document.documentElement.style.setProperty('--blink-duration', period + 'ms');
|
||||
}
|
||||
|
||||
loadStatus();
|
||||
setInterval(loadStatus, 1000); // Aktualisiere jede Sekunde
|
||||
</script>
|
||||
|
||||
+10
-1
@@ -9,6 +9,9 @@
|
||||
<body>
|
||||
<h1>Port Konfiguration</h1>
|
||||
<form id="portForm">
|
||||
<label>
|
||||
Blinkintervall (ms): <input type="number" id="blinkInput" name="blink_interval" min="1" value="">
|
||||
</label><br>
|
||||
<div id="portsContainer"></div>
|
||||
<input type="submit" value="Speichern">
|
||||
</form>
|
||||
@@ -19,6 +22,9 @@
|
||||
try {
|
||||
const response = await fetch('/portconfig/data');
|
||||
const data = await response.json();
|
||||
if (data.blink_interval !== undefined) {
|
||||
document.getElementById('blinkInput').value = data.blink_interval;
|
||||
}
|
||||
const container = document.getElementById('portsContainer');
|
||||
container.innerHTML = '';
|
||||
data.ports.forEach((port, index) => {
|
||||
@@ -46,11 +52,14 @@
|
||||
enabled: formData.has(`enabled${i}`)
|
||||
});
|
||||
}
|
||||
const blink = parseInt(formData.get('blink_interval')) || null;
|
||||
const payload = { ports };
|
||||
if (blink !== null) payload.blink_interval = blink;
|
||||
try {
|
||||
await fetch('/portconfig', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ ports })
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
alert('Konfiguration gespeichert!');
|
||||
loadConfig(); // Reload
|
||||
|
||||
Reference in New Issue
Block a user