417 lines
13 KiB
HTML
417 lines
13 KiB
HTML
<html lang="de">
|
|
<head>
|
|
<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" />
|
|
|
|
<title>NinjaCross Timer</title>
|
|
</head>
|
|
<body>
|
|
<!-- Batterie-Banner -->
|
|
<div id="battery-banner" class="battery-banner">
|
|
<div class="banner-content">
|
|
<div class="banner-icon">🔋</div>
|
|
<div>
|
|
<div class="banner-text">⚠️ Niedrige Batterie erkannt!</div>
|
|
<div class="banner-devices" id="battery-devices">
|
|
Geräte mit niedriger Batterie: <span id="low-battery-list"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="close-btn" onclick="closeBatteryBanner()">×</button>
|
|
</div>
|
|
|
|
<img src="/pictures/logo.png" class="logo" alt="NinjaCross Logo" />
|
|
<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="heartbeat2" data-label="Stop1"></div>
|
|
<div
|
|
class="heartbeat-indicator"
|
|
id="heartbeat3"
|
|
data-label="Start2"
|
|
></div>
|
|
<div class="heartbeat-indicator" id="heartbeat4" data-label="Stop2"></div>
|
|
</div>
|
|
|
|
<div class="header">
|
|
<h1>🏊♀️ NinjaCross Timer</h1>
|
|
<p>Professioneller Zeitmesser für Ninjacross Wettkämpfe</p>
|
|
</div>
|
|
|
|
<div id="learning-display" class="learning-mode" style="display: none">
|
|
<h3>📚 Lernmodus aktiv</h3>
|
|
<p>
|
|
Bitte drücken Sie den Button für: <span id="learning-button"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="timer-container">
|
|
<div class="lane">
|
|
<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>
|
|
<h2>🏊♂️ Bahn 2</h2>
|
|
<div id="time2" class="time-display">00.00</div>
|
|
<div id="status2" class="status ready">Bereit</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="best-times">
|
|
<h3>🏆 Beste Zeiten des Tages</h3>
|
|
<div class="best-time-row">
|
|
<span>Bahn 1:</span>
|
|
<span id="best1">--.-</span>
|
|
</div>
|
|
<div class="best-time-row">
|
|
<span>Bahn 2:</span>
|
|
<span id="best2">--.-</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// State variables
|
|
let timer1 = 0;
|
|
let timer2 = 0;
|
|
let status1 = "ready";
|
|
let status2 = "ready";
|
|
let best1 = 0;
|
|
let best2 = 0;
|
|
let lastSync = Date.now();
|
|
let learningMode = false;
|
|
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
|
|
const heartbeatTimeouts = {
|
|
start1: 0,
|
|
stop1: 0,
|
|
start2: 0,
|
|
stop2: 0,
|
|
};
|
|
|
|
// Set all heartbeats to red initially
|
|
["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");
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
console.log("WebSocket message received:", event.data);
|
|
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
|
|
// Batterie-Status Handling für einzelne Geräte
|
|
if (data.button && data.mac && data.batteryLevel !== undefined) {
|
|
handleSingleBatteryStatus(data);
|
|
}
|
|
|
|
// Heartbeat-Handling
|
|
if (data.button && data.mac && data.timestamp) {
|
|
let indicatorId = null;
|
|
if (data.button === "start1") indicatorId = "heartbeat1";
|
|
else if (data.button === "stop1") indicatorId = "heartbeat2";
|
|
else if (data.button === "start2") indicatorId = "heartbeat3";
|
|
else if (data.button === "stop2") indicatorId = "heartbeat4";
|
|
|
|
if (indicatorId) {
|
|
heartbeatTimeouts[data.button] = Date.now();
|
|
document.getElementById(indicatorId).classList.add("active");
|
|
}
|
|
}
|
|
|
|
// Namen-Handling
|
|
if (
|
|
(data.firstname == "" || data.lastname == "") &&
|
|
data.lane == "start1"
|
|
) {
|
|
name1 = "";
|
|
}
|
|
if (
|
|
(data.firstname == "" || data.lastname == "") &&
|
|
data.lane == "start2"
|
|
) {
|
|
name2 = "";
|
|
}
|
|
|
|
if (data.firstname && data.lastname && data.lane) {
|
|
if (data.lane === "start1") {
|
|
name1 = `${data.firstname} ${data.lastname}`;
|
|
} else if (data.lane === "start2") {
|
|
name2 = `${data.firstname} ${data.lastname}`;
|
|
}
|
|
updateDisplay();
|
|
}
|
|
} catch (error) {
|
|
console.error("Error processing WebSocket message:", error);
|
|
}
|
|
};
|
|
|
|
// 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
|
|
let found = false;
|
|
for (let device of lowBatteryDevices) {
|
|
if (device.button === data.button && device.mac === data.mac) {
|
|
device.battery = batteryLevel;
|
|
found = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!found) {
|
|
lowBatteryDevices.add({
|
|
button: data.button,
|
|
mac: data.mac,
|
|
battery: batteryLevel,
|
|
});
|
|
}
|
|
|
|
if (!batteryBannerDismissed) {
|
|
showBatteryBanner();
|
|
}
|
|
} else {
|
|
// Gerät aus niedrige Batterie Liste entfernen
|
|
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();
|
|
} else {
|
|
// Banner aktualisieren
|
|
showBatteryBanner();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Alte Batterie-Status Handler (als Fallback)
|
|
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) => {
|
|
lowBatteryDevices.add({
|
|
button: device.button,
|
|
mac: device.mac,
|
|
battery: device.battery || 0,
|
|
});
|
|
});
|
|
|
|
if (!batteryBannerDismissed) {
|
|
showBatteryBanner();
|
|
}
|
|
} else {
|
|
hideBatteryBanner();
|
|
}
|
|
}
|
|
|
|
// Batterie-Banner anzeigen
|
|
function showBatteryBanner() {
|
|
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(", ");
|
|
|
|
deviceList.textContent = deviceNames;
|
|
|
|
// Banner anzeigen
|
|
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");
|
|
batteryBannerDismissed = false;
|
|
}
|
|
|
|
// Banner manuell schließen
|
|
function closeBatteryBanner() {
|
|
batteryBannerDismissed = true;
|
|
hideBatteryBanner();
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
function formatTime(seconds) {
|
|
if (seconds === 0) return "00.00";
|
|
return seconds.toFixed(2);
|
|
}
|
|
|
|
function updateDisplay() {
|
|
// Calculate elapsed time since last sync
|
|
const now = Date.now();
|
|
let display1 = timer1;
|
|
let display2 = timer2;
|
|
|
|
if (status1 === "running") {
|
|
display1 += (now - lastSync) / 1000;
|
|
}
|
|
if (status2 === "running") {
|
|
display2 += (now - lastSync) / 1000;
|
|
}
|
|
|
|
document.getElementById("time1").textContent = formatTime(display1);
|
|
const s1 = document.getElementById("status1");
|
|
s1.className = `status ${status1}`;
|
|
s1.textContent =
|
|
status1 === "ready"
|
|
? "Bereit"
|
|
: status1 === "running"
|
|
? "Läuft..."
|
|
: "Beendet";
|
|
|
|
document.getElementById("time2").textContent = formatTime(display2);
|
|
const s2 = document.getElementById("status2");
|
|
s2.className = `status ${status2}`;
|
|
s2.textContent =
|
|
status2 === "ready"
|
|
? "Bereit"
|
|
: status2 === "running"
|
|
? "Läuft..."
|
|
: "Beendet";
|
|
|
|
document.getElementById("best1").textContent =
|
|
best1 > 0 ? formatTime(best1) + "s" : "--.-";
|
|
document.getElementById("best2").textContent =
|
|
best2 > 0 ? formatTime(best2) + "s" : "--.-";
|
|
|
|
// Namen anzeigen/verstecken
|
|
const name1Element = document.getElementById("name1");
|
|
const name2Element = document.getElementById("name2");
|
|
|
|
if (name1 && name1.trim() !== "") {
|
|
name1Element.textContent = name1;
|
|
name1Element.style.display = "block";
|
|
} else {
|
|
name1Element.style.display = "none";
|
|
}
|
|
|
|
if (name2 && name2.trim() !== "") {
|
|
name2Element.textContent = name2;
|
|
name2Element.style.display = "block";
|
|
} else {
|
|
name2Element.style.display = "none";
|
|
}
|
|
|
|
// Lernmodus
|
|
const learningDisplay = document.getElementById("learning-display");
|
|
if (learningMode) {
|
|
document.getElementById("learning-button").textContent =
|
|
learningButton;
|
|
learningDisplay.style.display = "block";
|
|
} else {
|
|
learningDisplay.style.display = "none";
|
|
}
|
|
}
|
|
|
|
function syncFromBackend() {
|
|
fetch("/api/data")
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
timer1 = data.time1;
|
|
timer2 = data.time2;
|
|
status1 = data.status1;
|
|
status2 = data.status2;
|
|
best1 = data.best1;
|
|
best2 = data.best2;
|
|
learningMode = data.learningMode;
|
|
learningButton = data.learningButton || "";
|
|
lastSync = Date.now();
|
|
updateDisplay();
|
|
})
|
|
.catch((error) =>
|
|
console.error("Fehler beim Laden der Daten:", error),
|
|
);
|
|
}
|
|
|
|
// Sync with backend every 1 second
|
|
setInterval(syncFromBackend, 1000);
|
|
|
|
// Smooth update every 50ms
|
|
setInterval(updateDisplay, 50);
|
|
|
|
// Heartbeat timeout check (every second)
|
|
setInterval(() => {
|
|
const now = Date.now();
|
|
[
|
|
{ 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");
|
|
}
|
|
});
|
|
}, 1000);
|
|
|
|
// Initial load
|
|
syncFromBackend();
|
|
</script>
|
|
</body>
|
|
</html>
|