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.

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.689
+NEXT_PUBLIC_APP_VERSION=1.6.690
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.689
+NEXT_PUBLIC_APP_VERSION=1.6.690
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.690] – 2025-08-11
+
+- Globales Auto-Highlight wurde eingefügt
+
+---
 ## [1.6.689] – 2025-08-11
 
 - playwright recording and testing

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>
   );
 };

docs/TODO.md

@@ -56,4 +56,12 @@ Beispiel: ISO: 100 MOHm der beim Abliech: ISO: Abgleich
 
 in Rot, wenn Schleifenfehler ansteht
 
-Beispiel:: RSL: 1,7 kOhm oder wenn Schleifenmessung aktiv: RSL: Messung
+## Beispiel:: RSL: 1,7 kOhm oder wenn Schleifenmessung aktiv: RSL: Messung
+
+## 11.08.2025
+
+- [ ] TODO: Bei Schleife starten messen wie lange es dauert, dann entsprechend progress balken einbauen
+- [ ] TODO: Kalibrieren auch so
+- [ ] TODO: Abgleich auch so
+- [ ] TODO: Benutzer passwort ändern
+- [ ] TODO: PlayWright

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.689",
+  "version": "1.6.690",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.689",
+      "version": "1.6.690",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.689",
+  "version": "1.6.690",
   "private": true,
   "scripts": {
     "dev": "next dev",