Progressbar mit Prozent und Zeit

components/common/GlobalActivityOverlay.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useAppSelector } from "@/redux/store";
 
 export default function GlobalActivityOverlay() {
@@ -9,9 +9,11 @@ export default function GlobalActivityOverlay() {
   const ksx = useAppSelector((s) => s.deviceEvents.ksx);
   const ksy = useAppSelector((s) => s.deviceEvents.ksy);
   const ksz = useAppSelector((s) => s.deviceEvents.ksz);
-
-  const active = anyLoop || anyTdr || anyAlign;
-  if (!active) return null;
+  const loopStartedAt = useAppSelector((s) => s.deviceEvents.loopStartedAt);
+  const tdrStartedAt = useAppSelector((s) => s.deviceEvents.tdrStartedAt);
+  const alignmentStartedAt = useAppSelector(
+    (s) => s.deviceEvents.alignmentStartedAt
+  );
 
   const fmt = (arr: number[]) =>
     arr
@@ -19,16 +21,121 @@ export default function GlobalActivityOverlay() {
       .filter((n) => n !== 0)
       .join(", ");
 
-  const messages: string[] = [];
-  if (anyLoop) messages.push(`Schleifenmessung läuft… (KÜ: ${fmt(ksx)})`);
-  if (anyTdr) messages.push(`TDR-Messung läuft… (KÜ: ${fmt(ksy)})`);
-  if (anyAlign) messages.push(`Abgleich läuft… (KÜ: ${fmt(ksz)})`);
+  // Simple 1s ticker so progress bars advance while overlay is shown
+  const [now, setNow] = useState<number>(Date.now());
+  useEffect(() => {
+    const active = anyLoop || anyTdr || anyAlign;
+    if (!active) return;
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [anyLoop, anyTdr, anyAlign]);
+
+  const active = anyLoop || anyTdr || anyAlign;
+  if (!active) return null;
+
+  const clamp = (v: number, min = 0, max = 1) =>
+    Math.max(min, Math.min(max, v));
+  const formatEta = (ms: number) => {
+    if (ms <= 0) return "gleich fertig";
+    const totalSec = Math.ceil(ms / 1000);
+    const m = Math.floor(totalSec / 60);
+    const s = totalSec % 60;
+    return m > 0 ? `${m}:${s.toString().padStart(2, "0")} min` : `${s} s`;
+  };
+
+  const compute = (startedAt: number | null, durationMs: number) => {
+    if (!startedAt) return { pct: 0, remaining: durationMs };
+    const elapsed = now - startedAt;
+    const pct = clamp(elapsed / durationMs) * 100;
+    const remaining = Math.max(0, durationMs - Math.max(0, elapsed));
+    return { pct, remaining };
+  };
+
+  // Durations
+  const LOOP_MS = 2 * 60 * 1000; // ~2 min
+  const TDR_MS = 30 * 1000; // ~30 s
+  const ALIGN_MS = 10 * 60 * 1000; // ~10 min
 
   return (
     <div className="fixed inset-0 z-[2000] flex items-center justify-center bg-white/70 backdrop-blur-sm">
-      <div className="p-4 rounded-md shadow bg-white border border-gray-200">
-        <div className="font-semibold mb-2">Bitte warten…</div>
-        <div className="text-sm text-gray-700">{messages.join(" · ")}</div>
+      <div className="p-4 rounded-md shadow bg-white border border-gray-200 w-[min(90vw,680px)]">
+        <div className="font-semibold mb-3">Bitte warten…</div>
+        <div className="space-y-3">
+          {anyLoop && (
+            <div>
+              <div className="text-sm text-gray-800 mb-1">
+                Schleifenmessung läuft… (KÜ: {fmt(ksx)})
+              </div>
+              {(() => {
+                const { pct, remaining } = compute(loopStartedAt, LOOP_MS);
+                return (
+                  <div>
+                    <div className="h-2 w-full bg-gray-200 rounded overflow-hidden">
+                      <div
+                        className="h-full bg-littwin-blue transition-all"
+                        style={{ width: `${pct}%` }}
+                      />
+                    </div>
+                    <div className="text-xs text-gray-600 mt-1">
+                      {Math.round(pct)}% · ~{formatEta(remaining)}
+                    </div>
+                  </div>
+                );
+              })()}
+            </div>
+          )}
+
+          {anyTdr && (
+            <div>
+              <div className="text-sm text-gray-800 mb-1">
+                TDR-Messung läuft… (KÜ: {fmt(ksy)})
+              </div>
+              {(() => {
+                const { pct, remaining } = compute(tdrStartedAt, TDR_MS);
+                return (
+                  <div>
+                    <div className="h-2 w-full bg-gray-200 rounded overflow-hidden">
+                      <div
+                        className="h-full bg-yellow-500 transition-all"
+                        style={{ width: `${pct}%` }}
+                      />
+                    </div>
+                    <div className="text-xs text-gray-600 mt-1">
+                      {Math.round(pct)}% · ~{formatEta(remaining)}
+                    </div>
+                  </div>
+                );
+              })()}
+            </div>
+          )}
+
+          {anyAlign && (
+            <div>
+              <div className="text-sm text-gray-800 mb-1">
+                Abgleich läuft… (KÜ: {fmt(ksz)})
+              </div>
+              {(() => {
+                const { pct, remaining } = compute(
+                  alignmentStartedAt,
+                  ALIGN_MS
+                );
+                return (
+                  <div>
+                    <div className="h-2 w-full bg-gray-200 rounded overflow-hidden">
+                      <div
+                        className="h-full bg-emerald-500 transition-all"
+                        style={{ width: `${pct}%` }}
+                      />
+                    </div>
+                    <div className="text-xs text-gray-600 mt-1">
+                      {Math.round(pct)}% · ~{formatEta(remaining)}
+                    </div>
+                  </div>
+                );
+              })()}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );