Batteriebanner hinzugefügt
This commit is contained in:
Carsten Graf
237
data/index.css
237
data/index.css
@@ -79,7 +79,7 @@ html {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.heartbeat-indicators {
|
||||
.heartbeat-indicators {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 90px;
|
||||
@@ -119,6 +119,134 @@ html {
|
||||
box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
|
||||
}
|
||||
|
||||
/* Batterie-Banner Styling */
|
||||
.battery-banner {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
|
||||
color: white;
|
||||
padding: 15px 20px;
|
||||
text-align: center;
|
||||
z-index: 2000;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
|
||||
border-bottom: 3px solid rgba(255, 255, 255, 0.2);
|
||||
animation: batteryPulse 2s infinite;
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.battery-banner.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.battery-banner .banner-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.battery-banner .banner-icon {
|
||||
font-size: 2rem;
|
||||
animation: batteryBlink 1.5s infinite;
|
||||
}
|
||||
|
||||
.battery-banner .banner-text {
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.battery-banner .banner-devices {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.9;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.battery-banner .close-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.battery-banner .close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
|
||||
@keyframes batteryPulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes batteryBlink {
|
||||
0%, 50% {
|
||||
opacity: 1;
|
||||
}
|
||||
51%, 100% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Anpassung für mobile Geräte */
|
||||
@media (max-width: 768px) {
|
||||
.battery-banner {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.battery-banner .banner-content {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.battery-banner .banner-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.battery-banner .banner-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.battery-banner .close-btn {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 1rem;
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hauptcontent nach unten verschieben wenn Banner sichtbar */
|
||||
.content-shifted {
|
||||
margin-top: 80px;
|
||||
transition: margin-top 0.5s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.content-shifted {
|
||||
margin-top: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 2vh;
|
||||
@@ -154,20 +282,6 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.timer-container {
|
||||
gap: 20px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.timer-container {
|
||||
max-width: 1400px;
|
||||
padding: 0 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.lane {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
@@ -319,97 +433,4 @@ html {
|
||||
|
||||
.learning-mode p {
|
||||
font-size: clamp(0.9rem, 1.8vw, 1.1rem);
|
||||
}
|
||||
|
||||
/* Responsive Logo Anpassungen für kleine Bildschirme */
|
||||
@media (max-width: 768px) {
|
||||
.logo {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-top: 60px; /* Platz für das Logo schaffen */
|
||||
margin-bottom: 1.5vh;
|
||||
}
|
||||
|
||||
.settings-btn {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1rem;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.timer-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: clamp(10px, 2vh, 15px);
|
||||
padding: 0 3vw;
|
||||
max-height: 50vh; /* Reduziert wegen des zusätzlichen Platzes oben */
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: clamp(0.7rem, 2vw, 0.9rem);
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.swimmer-name {
|
||||
font-size: clamp(1.2rem, 4vw, 1.8rem);
|
||||
margin-bottom: clamp(10px, 1.5vh, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.logo {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-top: 65px; /* Etwas mehr Platz auf sehr kleinen Bildschirmen */
|
||||
}
|
||||
|
||||
.settings-btn {
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
font-size: 0.9rem;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.timer-container {
|
||||
padding: 0 2vw;
|
||||
max-height: 45vh;
|
||||
}
|
||||
|
||||
.swimmer-name {
|
||||
font-size: clamp(1rem, 4vw, 1.5rem);
|
||||
padding: clamp(6px, 1vh, 10px) clamp(8px, 1.5vw, 12px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Für sehr kleine Bildschirme (iPhone SE, etc.) */
|
||||
@media (max-width: 375px) {
|
||||
.header {
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
.timer-container {
|
||||
max-height: 40vh;
|
||||
}
|
||||
}
|
||||
481
data/index.html
481
data/index.html
@@ -9,12 +9,24 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<img src="/pictures/logo.png" class="logo" alt="NinjaCross Logo" />
|
||||
</a>
|
||||
<!-- 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-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>
|
||||
@@ -62,199 +74,322 @@
|
||||
</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 = "";
|
||||
const ws = new WebSocket(`ws://${window.location.host}/ws`);
|
||||
// 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,
|
||||
};
|
||||
// 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');
|
||||
});
|
||||
// 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");
|
||||
};
|
||||
// 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);
|
||||
ws.onmessage = (event) => {
|
||||
console.log("WebSocket message received:", event.data);
|
||||
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
try {
|
||||
const data = JSON.parse(event.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";
|
||||
// Batterie-Status Handling für einzelne Geräte
|
||||
if (data.button && data.mac && data.batteryLevel !== undefined) {
|
||||
handleSingleBatteryStatus(data);
|
||||
}
|
||||
|
||||
if (indicatorId) {
|
||||
//heartbeatStatus[deviceId].active = true;
|
||||
//document.getElementById(indicatorId).style.backgroundColor = "limegreen";
|
||||
heartbeatTimeouts[data.button] = Date.now();
|
||||
document.getElementById(indicatorId).classList.add('active');
|
||||
}
|
||||
}
|
||||
// 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 ((data.firstname == "" || data.lastname == "") && data.lane == "start1") {
|
||||
name1 = "";
|
||||
}
|
||||
if ((data.firstname == "" || data.lastname == "") && data.lane == "start2") {
|
||||
name2 = "";
|
||||
}
|
||||
if (indicatorId) {
|
||||
heartbeatTimeouts[data.button] = Date.now();
|
||||
document.getElementById(indicatorId).classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
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}`;
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
updateDisplay();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error processing WebSocket message:", error);
|
||||
}
|
||||
};
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
|
||||
function formatTime(seconds) {
|
||||
if (seconds === 0) return "00.00";
|
||||
return seconds.toFixed(2);
|
||||
}
|
||||
// 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');
|
||||
}
|
||||
|
||||
function updateDisplay() {
|
||||
// Calculate elapsed time since last sync
|
||||
const now = Date.now();
|
||||
let display1 = timer1;
|
||||
let display2 = timer2;
|
||||
// Batterie-Banner verstecken
|
||||
function hideBatteryBanner() {
|
||||
const banner = document.getElementById('battery-banner');
|
||||
banner.classList.remove('show');
|
||||
document.body.classList.remove('content-shifted');
|
||||
batteryBannerDismissed = false;
|
||||
}
|
||||
|
||||
if (status1 === "running") {
|
||||
display1 += (now - lastSync) / 1000;
|
||||
}
|
||||
if (status2 === "running") {
|
||||
display2 += (now - lastSync) / 1000;
|
||||
}
|
||||
// Banner manuell schließen
|
||||
function closeBatteryBanner() {
|
||||
batteryBannerDismissed = true;
|
||||
hideBatteryBanner();
|
||||
}
|
||||
|
||||
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";
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
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";
|
||||
function formatTime(seconds) {
|
||||
if (seconds === 0) return "00.00";
|
||||
return seconds.toFixed(2);
|
||||
}
|
||||
|
||||
document.getElementById("best1").textContent =
|
||||
best1 > 0 ? formatTime(best1) + "s" : "--.-";
|
||||
document.getElementById("best2").textContent =
|
||||
best2 > 0 ? formatTime(best2) + "s" : "--.-";
|
||||
function updateDisplay() {
|
||||
// Calculate elapsed time since last sync
|
||||
const now = Date.now();
|
||||
let display1 = timer1;
|
||||
let display2 = timer2;
|
||||
|
||||
// Namen anzeigen/verstecken - verbesserte Logik
|
||||
const name1Element = document.getElementById("name1");
|
||||
const name2Element = document.getElementById("name2");
|
||||
if (status1 === "running") {
|
||||
display1 += (now - lastSync) / 1000;
|
||||
}
|
||||
if (status2 === "running") {
|
||||
display2 += (now - lastSync) / 1000;
|
||||
}
|
||||
|
||||
|
||||
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";
|
||||
}
|
||||
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";
|
||||
|
||||
// Lernmodus
|
||||
const learningDisplay = document.getElementById("learning-display");
|
||||
if (learningMode) {
|
||||
document.getElementById("learning-button").textContent = learningButton;
|
||||
learningDisplay.style.display = "block";
|
||||
} else {
|
||||
learningDisplay.style.display = "none";
|
||||
}
|
||||
}
|
||||
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";
|
||||
|
||||
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)
|
||||
);
|
||||
}
|
||||
document.getElementById("best1").textContent =
|
||||
best1 > 0 ? formatTime(best1) + "s" : "--.-";
|
||||
document.getElementById("best2").textContent =
|
||||
best2 > 0 ? formatTime(best2) + "s" : "--.-";
|
||||
|
||||
// Sync with backend every 1 second
|
||||
setInterval(syncFromBackend, 1000);
|
||||
// Namen anzeigen/verstecken
|
||||
const name1Element = document.getElementById("name1");
|
||||
const name2Element = document.getElementById("name2");
|
||||
|
||||
// Smooth update every 50ms
|
||||
setInterval(updateDisplay, 50);
|
||||
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";
|
||||
}
|
||||
|
||||
// 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>
|
||||
// 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>
|
||||
Reference in New Issue
Block a user