reptil1990/AquaMasterMQTT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Formatting

Browse Source
This commit is contained in:
Carsten Graf
2025-07-12 17:06:42 +02:00
parent 337e12078b
commit 3b4c5d2b92
6 changed files with 1651 additions and 1462 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
data/index.html
View File

@@ -3,12 +3,11 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<link rel="icon" type="image/x-icon" href="/pictures/favicon.ico">
<link rel="icon" type="image/x-icon" href="/pictures/favicon.ico" />
<title>NinjaCross Timer</title>
</head>
<body>
<body>
<!-- Batterie-Banner -->
<div id="battery-banner" class="battery-banner">
<div class="banner-content">
@@ -27,9 +26,17 @@
<a href="/settings" class="settings-btn">⚙️</a>
<div class="heartbeat-indicators">
<div class="heartbeat-indicator" id="heartbeat1" data-label="Start1"></div>
<div
class="heartbeat-indicator"
id="heartbeat1"
data-label="Start1"
></div>
<div class="heartbeat-indicator" id="heartbeat2" data-label="Stop1"></div>
<div class="heartbeat-indicator" id="heartbeat3" data-label="Start2"></div>
<div
class="heartbeat-indicator"
id="heartbeat3"
data-label="Start2"
></div>
<div class="heartbeat-indicator" id="heartbeat4" data-label="Stop2"></div>
</div>
@@ -47,14 +54,14 @@
<div class="timer-container">
<div class="lane">
<div id="name1" class="swimmer-name" style="display: none;"></div>
<div id="name1" class="swimmer-name" style="display: none"></div>
<h2>🏊‍♀️ Bahn 1</h2>
<div id="time1" class="time-display">00.00</div>
<div id="status1" class="status ready">Bereit</div>
</div>
<div class="lane">
<div id="name2" class="swimmer-name" style="display: none;"></div>
<div id="name2" class="swimmer-name" style="display: none"></div>
<h2>🏊‍♂️ Bahn 2</h2>
<div id="time2" class="time-display">00.00</div>
<div id="status2" class="status ready">Bereit</div>
@@ -86,11 +93,11 @@
let learningButton = "";
let name1 = "";
let name2 = "";
// Batterie-Banner State
let lowBatteryDevices = new Set();
let batteryBannerDismissed = false;
const ws = new WebSocket(`ws://${window.location.host}/ws`);
// Heartbeat timeout tracker
@@ -102,15 +109,15 @@
};
// Set all heartbeats to red initially
["heartbeat1", "heartbeat2", "heartbeat3", "heartbeat4"].forEach(id => {
document.getElementById(id).classList.remove('active');
["heartbeat1", "heartbeat2", "heartbeat3", "heartbeat4"].forEach((id) => {
document.getElementById(id).classList.remove("active");
});
// Handle WebSocket events
ws.onopen = () => {
console.log("WebSocket connected");
};
ws.onclose = () => {
console.log("WebSocket disconnected");
};
@@ -136,15 +143,21 @@
if (indicatorId) {
heartbeatTimeouts[data.button] = Date.now();
document.getElementById(indicatorId).classList.add('active');
document.getElementById(indicatorId).classList.add("active");
}
}
// Namen-Handling
if ((data.firstname == "" || data.lastname == "") && data.lane == "start1") {
if (
(data.firstname == "" || data.lastname == "") &&
data.lane == "start1"
) {
name1 = "";
}
if ((data.firstname == "" || data.lastname == "") && data.lane == "start2") {
if (
(data.firstname == "" || data.lastname == "") &&
data.lane == "start2"
) {
name2 = "";
}
@@ -164,10 +177,10 @@
// Batterie-Status Handler für einzelne Geräte
function handleSingleBatteryStatus(data) {
// Format: {button: "start2", mac: "98:3D:AE:AA:CF:94", batteryLevel: 0}
const deviceKey = `${data.button}-${data.mac}`;
const batteryLevel = data.batteryLevel || 0;
// Batterie als niedrig betrachten wenn <= 15%
if (batteryLevel <= 15) {
// Gerät zu niedrige Batterie Liste hinzufügen
@@ -179,26 +192,26 @@
break;
}
}
if (!found) {
lowBatteryDevices.add({
button: data.button,
mac: data.mac,
battery: batteryLevel
battery: batteryLevel,
});
}
if (!batteryBannerDismissed) {
showBatteryBanner();
}
} else {
// Gerät aus niedrige Batterie Liste entfernen
lowBatteryDevices.forEach(device => {
lowBatteryDevices.forEach((device) => {
if (device.button === data.button && device.mac === data.mac) {
lowBatteryDevices.delete(device);
}
});
// Banner verstecken wenn keine Geräte mehr niedrige Batterie haben
if (lowBatteryDevices.size === 0) {
hideBatteryBanner();
@@ -213,18 +226,18 @@
function handleBatteryStatus(data) {
// data.devices ist ein Array mit Geräten die niedrige Batterie haben
// Format: [{button: "start1", mac: "XX:XX:XX", battery: 15}, ...]
lowBatteryDevices.clear();
if (data.devices && data.devices.length > 0) {
data.devices.forEach(device => {
data.devices.forEach((device) => {
lowBatteryDevices.add({
button: device.button,
mac: device.mac,
battery: device.battery || 0
battery: device.battery || 0,
});
});
if (!batteryBannerDismissed) {
showBatteryBanner();
}
@@ -235,27 +248,29 @@
// Batterie-Banner anzeigen
function showBatteryBanner() {
const banner = document.getElementById('battery-banner');
const deviceList = document.getElementById('low-battery-list');
const banner = document.getElementById("battery-banner");
const deviceList = document.getElementById("low-battery-list");
// Geräteliste erstellen
const deviceNames = Array.from(lowBatteryDevices).map(device => {
const buttonName = getButtonDisplayName(device.button);
return `${buttonName} (${device.battery}%)`;
}).join(', ');
const deviceNames = Array.from(lowBatteryDevices)
.map((device) => {
const buttonName = getButtonDisplayName(device.button);
return `${buttonName} (${device.battery}%)`;
})
.join(", ");
deviceList.textContent = deviceNames;
// Banner anzeigen
banner.classList.add('show');
document.body.classList.add('content-shifted');
banner.classList.add("show");
document.body.classList.add("content-shifted");
}
// Batterie-Banner verstecken
function hideBatteryBanner() {
const banner = document.getElementById('battery-banner');
banner.classList.remove('show');
document.body.classList.remove('content-shifted');
const banner = document.getElementById("battery-banner");
banner.classList.remove("show");
document.body.classList.remove("content-shifted");
batteryBannerDismissed = false;
}
@@ -267,12 +282,17 @@
// Button-Namen für Anzeige
function getButtonDisplayName(button) {
switch(button) {
case 'start1': return 'Start Bahn 1';
case 'stop1': return 'Stop Bahn 1';
case 'start2': return 'Start Bahn 2';
case 'stop2': return 'Stop Bahn 2';
default: return button;
switch (button) {
case "start1":
return "Start Bahn 1";
case "stop1":
return "Stop Bahn 1";
case "start2":
return "Start Bahn 2";
case "stop2":
return "Stop Bahn 2";
default:
return button;
}
}
@@ -301,8 +321,8 @@
status1 === "ready"
? "Bereit"
: status1 === "running"
? "Läuft..."
: "Beendet";
? "Läuft..."
: "Beendet";
document.getElementById("time2").textContent = formatTime(display2);
const s2 = document.getElementById("status2");
@@ -311,8 +331,8 @@
status2 === "ready"
? "Bereit"
: status2 === "running"
? "Läuft..."
: "Beendet";
? "Läuft..."
: "Beendet";
document.getElementById("best1").textContent =
best1 > 0 ? formatTime(best1) + "s" : "--.-";
@@ -329,7 +349,7 @@
} else {
name1Element.style.display = "none";
}
if (name2 && name2.trim() !== "") {
name2Element.textContent = name2;
name2Element.style.display = "block";
@@ -340,7 +360,8 @@
// Lernmodus
const learningDisplay = document.getElementById("learning-display");
if (learningMode) {
document.getElementById("learning-button").textContent = learningButton;
document.getElementById("learning-button").textContent =
learningButton;
learningDisplay.style.display = "block";
} else {
learningDisplay.style.display = "none";
@@ -363,7 +384,7 @@
updateDisplay();
})
.catch((error) =>
console.error("Fehler beim Laden der Daten:", error)
console.error("Fehler beim Laden der Daten:", error),
);
}
@@ -377,13 +398,13 @@
setInterval(() => {
const now = Date.now();
[
{button: "start1", id: "heartbeat1"},
{button: "stop1", id: "heartbeat2"},
{button: "start2", id: "heartbeat3"},
{button: "stop2", id: "heartbeat4"},
].forEach(({button, id}) => {
{ button: "start1", id: "heartbeat1" },
{ button: "stop1", id: "heartbeat2" },
{ button: "start2", id: "heartbeat3" },
{ button: "stop2", id: "heartbeat4" },
].forEach(({ button, id }) => {
if (now - heartbeatTimeouts[button] > 10000) {
document.getElementById(id).classList.remove('active');
document.getElementById(id).classList.remove("active");
}
});
}, 1000);
@@ -392,4 +413,4 @@
syncFromBackend();
</script>
</body>
</html>
</html>