Heartbead und Indicators

data/index.html

@@ -14,6 +14,13 @@
 
     <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>
@@ -69,6 +76,20 @@
   let name2 = "";
   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');
+  //document.getElementById(id).style.backgroundColor = "red";
+});
+
 // Handle WebSocket events
 ws.onopen = () => {
   console.log("WebSocket connected");
@@ -83,6 +104,22 @@ ws.onmessage = (event) => {
   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";
+
+      if (indicatorId) {
+        //heartbeatStatus[deviceId].active = true;
+        //document.getElementById(indicatorId).style.backgroundColor = "limegreen";
+        heartbeatTimeouts[data.button] = Date.now();
+        document.getElementById(indicatorId).classList.add('active');
+      }
+    }
+
     if ((data.firstname == "" || data.lastname == "") && data.lane == "start1") {
       name1 = "";
     }
@@ -200,8 +237,23 @@ ws.onmessage = (event) => {
   setInterval(syncFromBackend, 1000);
 
   // Smooth update every 50ms
-    setInterval(updateDisplay, 50);
-  
+  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');
+      //document.getElementById(id).style.backgroundColor = "red";
+    }
+  });
+}, 1000);
   
   // Initial load
   syncFromBackend();