91 lines
3.0 KiB
HTML
91 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="style.css">
|
|
<title>Port Status</title>
|
|
<style>
|
|
:root {
|
|
--blink-duration: 1s;
|
|
}
|
|
.port {
|
|
margin: 10px;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
display: inline-block;
|
|
width: 200px;
|
|
}
|
|
.disabled {
|
|
background-color: lightgray;
|
|
color: gray;
|
|
}
|
|
.ok {
|
|
background-color: lightgreen;
|
|
}
|
|
.missing {
|
|
background-color: red;
|
|
animation: blink var(--blink-duration) infinite;
|
|
}
|
|
@keyframes blink {
|
|
0%, 50% { background-color: red; }
|
|
51%, 100% { background-color: white; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Port Status Übersicht</h1>
|
|
<div id="portsContainer"></div>
|
|
<br>
|
|
<button onclick="location.href='/portconfig.html'">Zur Konfiguration</button>
|
|
<button onclick="location.href='/admin.html'">Zur Admin Seite</button>
|
|
|
|
|
|
<script>
|
|
async function loadStatus() {
|
|
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) => {
|
|
const div = document.createElement('div');
|
|
div.className = 'port';
|
|
let statusClass = '';
|
|
let statusText = '';
|
|
if (!port.enabled) {
|
|
statusClass = 'disabled';
|
|
statusText = 'disabled';
|
|
} else if (port.state === 0) {
|
|
statusClass = 'ok';
|
|
statusText = 'OK';
|
|
} else {
|
|
statusClass = 'missing';
|
|
statusText = 'Fehlt';
|
|
}
|
|
div.classList.add(statusClass);
|
|
div.innerHTML = `
|
|
<strong>Port ${index}: ${port.name}</strong><br>
|
|
Status: ${statusText}
|
|
`;
|
|
container.appendChild(div);
|
|
});
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden des Status:', error);
|
|
}
|
|
}
|
|
|
|
// 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>
|
|
</body>
|
|
</html> |