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

RFID message ins backend geht, websocket fürs frontend

Browse Source
This commit is contained in:
Carsten Graf
2025-06-08 00:38:00 +02:00
parent e5c4094cfa
commit c35e857904
11 changed files with 311 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
data/index.html
View File

@@ -1,14 +1,14 @@
<!DOCTYPE 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>
<body>
<a href="/about" class="logo" title="Über NinjaCross Timer">
<img src="/pictures/logo.png" alt="NinjaCross Logo" />
</a>
@@ -29,12 +29,14 @@
<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>
@@ -64,6 +66,37 @@
let lastSync = Date.now();
let learningMode = false;
let learningButton = "";
let name1 = "";
let name2 = "";
const ws = new WebSocket(`ws://${window.location.host}/ws`);
// 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);
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);
}
};
function formatTime(seconds) {
if (seconds === 0) return "00.00";
@@ -83,7 +116,6 @@
display2 += (now - lastSync) / 1000;
}
document.getElementById("time1").textContent = formatTime(display1);
const s1 = document.getElementById("status1");
s1.className = `status ${status1}`;
@@ -109,6 +141,24 @@
document.getElementById("best2").textContent =
best2 > 0 ? formatTime(best2) + "s" : "--.-";
// Namen anzeigen/verstecken - verbesserte Logik
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) {
@@ -139,7 +189,7 @@
);
}
// Sync with backend every 2 seconds
// Sync with backend every 1 second
setInterval(syncFromBackend, 1000);
// Smooth update every 50ms