WIP: Timer für jeder KÜ separate und nicht eine für alle, aktuell wird prozentzahl bei allen das gleiche angezeigt

components/common/DeviceEventsBridge.tsx

@@ -7,7 +7,7 @@ declare global {
   interface Window {
     loopMeasurementEvent?: number[];
     tdrMeasurementEvent?: number[];
-    alignmentEvent?: number[];
+    comparisonEvent?: number[]; // renamed from alignmentEvent
   }
 }
 
@@ -25,8 +25,8 @@ export default function DeviceEventsBridge() {
       const ksy = Array.isArray(window.tdrMeasurementEvent)
         ? window.tdrMeasurementEvent
         : undefined;
-      const ksz = Array.isArray(window.alignmentEvent)
-        ? window.alignmentEvent
+      const ksz = Array.isArray(window.comparisonEvent)
+        ? window.comparisonEvent
         : undefined;
       // Build a stable signature of first 32 values per array
       const to32 = (a?: number[]) => {

components/common/GlobalActivityOverlay.tsx

@@ -5,14 +5,14 @@ import { useAppSelector } from "@/redux/store";
 export default function GlobalActivityOverlay() {
   const anyLoop = useAppSelector((s) => s.deviceEvents.anyLoopActive);
   const anyTdr = useAppSelector((s) => s.deviceEvents.anyTdrActive);
-  const anyAlign = useAppSelector((s) => s.deviceEvents.anyAlignmentActive);
+  const anyCompare = useAppSelector((s) => s.deviceEvents.anyComparisonActive);
   const ksx = useAppSelector((s) => s.deviceEvents.ksx);
   const ksy = useAppSelector((s) => s.deviceEvents.ksy);
   const ksz = useAppSelector((s) => s.deviceEvents.ksz);
   const loopStartedAt = useAppSelector((s) => s.deviceEvents.loopStartedAt);
   const tdrStartedAt = useAppSelector((s) => s.deviceEvents.tdrStartedAt);
-  const alignmentStartedAt = useAppSelector(
-    (s) => s.deviceEvents.alignmentStartedAt
+  const comparisonStartedAt = useAppSelector(
+    (s) => s.deviceEvents.comparisonStartedAt
   );
 
   const fmt = (arr: number[]) =>
@@ -24,13 +24,13 @@ export default function GlobalActivityOverlay() {
   // Simple 1s ticker so progress bars advance while overlay is shown
   const [now, setNow] = useState<number>(Date.now());
   useEffect(() => {
-    const active = anyLoop || anyTdr || anyAlign;
+    const active = anyLoop || anyTdr || anyCompare;
     if (!active) return;
     const id = setInterval(() => setNow(Date.now()), 1000);
     return () => clearInterval(id);
-  }, [anyLoop, anyTdr, anyAlign]);
+  }, [anyLoop, anyTdr, anyCompare]);
 
-  const active = anyLoop || anyTdr || anyAlign;
+  const active = anyLoop || anyTdr || anyCompare;
   if (!active) return null;
 
   const clamp = (v: number, min = 0, max = 1) =>
@@ -102,13 +102,13 @@ export default function GlobalActivityOverlay() {
             </div>
           )}
 
-          {anyAlign && (
+          {anyCompare && (
             <div>
               <div className="text-sm text-gray-800 mb-1">
-                Abgleich läuft… (KÜ: {fmt(ksz)}) kann bis zu 10 Minuten dauern
+                Comparison läuft… (KÜ: {fmt(ksz)}) kann bis zu 10 Minuten dauern
               </div>
               {(() => {
-                const { pct } = compute(alignmentStartedAt, ALIGN_MS);
+                const { pct } = compute(comparisonStartedAt, ALIGN_MS);
                 return (
                   <div>
                     <div className="h-2 w-full bg-gray-200 rounded overflow-hidden">

components/main/kabelueberwachung/kue705FO/SlotActivityOverlay.tsx

@@ -1,6 +1,7 @@
 "use client";
 import React, { useEffect, useState } from "react";
-import { useAppSelector } from "@/redux/store";
+import { useAppSelector, useAppDispatch } from "@/redux/store";
+import { initPersistedTimings } from "@/redux/slices/deviceEventsSlice";
 
 export default function SlotActivityOverlay({
   slotIndex,
@@ -12,22 +13,69 @@ export default function SlotActivityOverlay({
   const ksz = useAppSelector((s) => s.deviceEvents.ksz);
   const loopStartedAt = useAppSelector((s) => s.deviceEvents.loopStartedAt);
   const tdrStartedAt = useAppSelector((s) => s.deviceEvents.tdrStartedAt);
-  const alignmentStartedAt = useAppSelector(
-    (s) => s.deviceEvents.alignmentStartedAt
+  const comparisonStartedAt = useAppSelector(
+    (s) => s.deviceEvents.comparisonStartedAt
   );
+  const loopStartedAtBySlot = useAppSelector(
+    (s) => s.deviceEvents.loopStartedAtBySlot
+  );
+  const tdrStartedAtBySlot = useAppSelector(
+    (s) => s.deviceEvents.tdrStartedAtBySlot
+  );
+  const comparisonStartedAtBySlot = useAppSelector(
+    (s) => s.deviceEvents.comparisonStartedAtBySlot
+  );
+  const dispatch = useAppDispatch();
 
   const loopActive = Array.isArray(ksx) && ksx[slotIndex] === 1;
   const tdrActive = Array.isArray(ksy) && ksy[slotIndex] === 1;
-  const alignActive = Array.isArray(ksz) && ksz[slotIndex] === 1;
+  const comparisonActive = Array.isArray(ksz) && ksz[slotIndex] === 1;
+
+  // Load persisted timings only once (on mount)
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem("deviceEventsTimingsV1");
+      if (raw) {
+        const parsed = JSON.parse(raw);
+        dispatch(
+          initPersistedTimings({
+            loop: parsed.loop,
+            tdr: parsed.tdr,
+            compare: parsed.align || parsed.compare,
+          })
+        );
+      }
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn("Failed to load persisted timings", e);
+    }
+  }, [dispatch]);
+
+  // Persist whenever arrays change
+  useEffect(() => {
+    try {
+      localStorage.setItem(
+        "deviceEventsTimingsV1",
+        JSON.stringify({
+          loop: loopStartedAtBySlot,
+          tdr: tdrStartedAtBySlot,
+          compare: comparisonStartedAtBySlot,
+        })
+      );
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.warn("Failed to persist timings", e);
+    }
+  }, [loopStartedAtBySlot, tdrStartedAtBySlot, comparisonStartedAtBySlot]);
 
   // Progress ticker
   const [now, setNow] = useState<number>(Date.now());
   useEffect(() => {
-    const any = loopActive || tdrActive || alignActive;
+    const any = loopActive || tdrActive || comparisonActive;
     if (!any) return;
     const id = setInterval(() => setNow(Date.now()), 1000);
     return () => clearInterval(id);
-  }, [loopActive, tdrActive, alignActive]);
+  }, [loopActive, tdrActive, comparisonActive]);
 
   const clamp = (v: number, min = 0, max = 1) =>
     Math.max(min, Math.min(max, v));
@@ -43,7 +91,7 @@ export default function SlotActivityOverlay({
   const TDR_MS = 30 * 1000; // ~30 s
   const ALIGN_MS = 10 * 60 * 1000; // ~10 min
 
-  if (!loopActive && !tdrActive && !alignActive) return null;
+  if (!loopActive && !tdrActive && !comparisonActive) return null;
 
   return (
     <div className="absolute inset-0 z-20 flex items-center justify-center bg-white/70 backdrop-blur-sm">
@@ -56,7 +104,8 @@ export default function SlotActivityOverlay({
             <div>
               <div className="text-[0.7rem] text-gray-800 mb-1">Schleife</div>
               {(() => {
-                const { pct } = compute(loopStartedAt, LOOP_MS);
+                const started = loopStartedAtBySlot[slotIndex] ?? loopStartedAt;
+                const { pct } = compute(started, LOOP_MS);
                 return (
                   <div>
                     <div className="h-2 w-full bg-gray-200 rounded overflow-hidden">
@@ -77,7 +126,8 @@ export default function SlotActivityOverlay({
             <div>
               <div className="text-[0.7rem] text-gray-800 mb-1">TDR</div>
               {(() => {
-                const { pct } = compute(tdrStartedAt, TDR_MS);
+                const started = tdrStartedAtBySlot[slotIndex] ?? tdrStartedAt;
+                const { pct } = compute(started, TDR_MS);
                 return (
                   <div>
                     <div className="h-2 w-full bg-gray-200 rounded overflow-hidden">
@@ -94,11 +144,13 @@ export default function SlotActivityOverlay({
               })()}
             </div>
           )}
-          {alignActive && (
+          {comparisonActive && (
             <div>
               <div className="text-[0.7rem] text-gray-800 mb-1">Abgleich</div>
               {(() => {
-                const { pct } = compute(alignmentStartedAt, ALIGN_MS);
+                const started =
+                  comparisonStartedAtBySlot[slotIndex] ?? comparisonStartedAt;
+                const { pct } = compute(started, ALIGN_MS);
                 return (
                   <div>
                     <div className="h-2 w-full bg-gray-200 rounded overflow-hidden">