RFID message ins backend geht, websocket fürs frontend
This commit is contained in:
Carsten Graf
@@ -150,6 +150,35 @@ html {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.swimmer-name {
|
||||
font-size: clamp(1.5rem, 3.5vw, 2.2rem);
|
||||
font-weight: bold;
|
||||
margin-bottom: clamp(15px, 2vh, 25px);
|
||||
padding: clamp(8px, 1.5vh, 12px) clamp(12px, 2vw, 18px);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 15px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(5px);
|
||||
animation: fadeIn 0.5s ease-in;
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.time-display {
|
||||
font-size: clamp(3rem, 9vw, 10rem);
|
||||
font-weight: bold;
|
||||
@@ -280,6 +309,11 @@ html {
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.swimmer-name {
|
||||
font-size: clamp(1.2rem, 4vw, 1.8rem);
|
||||
margin-bottom: clamp(10px, 1.5vh, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@@ -299,4 +333,9 @@ html {
|
||||
.timer-container {
|
||||
padding: 0 2vw;
|
||||
}
|
||||
}
|
||||
|
||||
.swimmer-name {
|
||||
font-size: clamp(1rem, 4vw, 1.5rem);
|
||||
padding: clamp(6px, 1vh, 10px) clamp(8px, 1.5vw, 12px);
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
|
||||
BIN
data/pictures/favicon.ico
Normal file
BIN
data/pictures/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="rfid.css" />
|
||||
<link rel="icon" type="image/x-icon" href="/pictures/favicon.ico">
|
||||
|
||||
<title>RFID Daten Eingabe</title>
|
||||
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
<!-- Meta Tags -->
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/x-icon" href="/pictures/favicon.ico">
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="settings.css" />
|
||||
|
||||
Reference in New Issue
Block a user