RSL-Progress (120s Overlay mit Balken + Blockierung) ist implementiert: Button zeigt RSL läuft…, Daten laden ist gesperrt, Overlay mit Restsekunden und Fortschritt. Countdown endet automatisch.

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx

@@ -1,6 +1,6 @@
 "use client";
 // /components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
-import React from "react";
+import React, { useEffect, useState } from "react";
 import DateRangePicker from "@/components/common/DateRangePicker";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "@/redux/store";
@@ -93,6 +93,34 @@ export const useLoopChartLoader = () => {
 //-----------------------------------------------------------------------------------LoopChartActionBar
 const LoopChartActionBar: React.FC = () => {
   const dispatch = useDispatch();
+  // RSL Progress State (120s künstlicher Countdown)
+  const TOTAL_DURATION = 120; // Sekunden
+  const [rslRunning, setRslRunning] = useState(false);
+  const [rslProgress, setRslProgress] = useState(0);
+
+  // Fortschritt aktualisieren
+  useEffect(() => {
+    if (!rslRunning) return;
+    setRslProgress(0);
+    const startedAt = Date.now();
+    const interval = setInterval(() => {
+      const elapsed = Math.floor((Date.now() - startedAt) / 1000);
+      if (elapsed >= TOTAL_DURATION) {
+        setRslProgress(TOTAL_DURATION);
+        setRslRunning(false);
+        clearInterval(interval);
+        // Optional automatische Daten-Nachladung anstoßen
+      } else {
+        setRslProgress(elapsed);
+      }
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [rslRunning]);
+
+  const startRslProgress = () => {
+    setRslRunning(true);
+    setRslProgress(0);
+  };
 
   const {
     vonDatum,
@@ -147,7 +175,8 @@ const LoopChartActionBar: React.FC = () => {
       }
 
       console.log("✅ RSL Messung gestartet für Slot", slotNumber);
-      alert(`✅ RSL Messung für Slot ${slotNumber + 1} gestartet`);
+      // Start der lokalen Progress-Anzeige (ca. 120s)
+      startRslProgress();
     } catch (err) {
       console.error("❌ Fehler beim Starten der RSL Messung:", err);
       alert("❌ Fehler beim Starten der RSL Messung.");
@@ -306,18 +335,35 @@ const LoopChartActionBar: React.FC = () => {
           <button
             onClick={handleStartRSL}
             className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
-            disabled={isLoading}
+            disabled={isLoading || rslRunning}
           >
-            RSL starten
+            {rslRunning ? "RSL läuft..." : "RSL starten"}
           </button>
           <button
             onClick={handleFetchData}
             className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap"
+            disabled={rslRunning}
           >
             Daten laden
           </button>
         </div>
       </div>
+      {rslRunning && (
+        <div className="fixed inset-0 z-[1000] flex flex-col items-center justify-center bg-white/80 backdrop-blur-sm">
+          <div className="mb-4 text-center space-y-1">
+            <p className="text-lg font-semibold">RSL Messung läuft</p>
+            <p className="text-sm text-gray-700">
+              Bitte warten… (noch {TOTAL_DURATION - rslProgress}s)
+            </p>
+          </div>
+          <div className="w-2/3 max-w-xl h-4 bg-gray-200 rounded overflow-hidden shadow-inner">
+            <div
+              className="h-full bg-littwin-blue transition-all ease-linear"
+              style={{ width: `${(rslProgress / TOTAL_DURATION) * 100}%` }}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 };