Batteriebanner hinzugefügt
This commit is contained in:
Carsten Graf
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