fix: Beim Ausführen einer TDR-Messung (Klick auf blauen Button in der TDR-Detailseite) erscheint keine Rückmeldung. Dort müsste ein Hinweis erscheinen “TDR-Messung wird ausgeführt und kann bis zu zwei Minuten dauern”

2025-09-08 11:48:23 +02:00
parent 72341abb23
commit 531fa93b70
8 changed files with 179 additions and 109 deletions
--- a/.env.development
+++ b/.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.867
+NEXT_PUBLIC_APP_VERSION=1.6.868
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)

--- a/.env.production
+++ b/.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.867
+NEXT_PUBLIC_APP_VERSION=1.6.868
 NEXT_PUBLIC_CPL_MODE=production
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## [1.6.868] – 2025-09-08
+
+- fix: Timer für jeder KÜ separate und nicht eine für alle, aktuell wird prozentzahl bei allen das gleiche angezeigt
+
+---
 ## [1.6.867] – 2025-09-08

 - WIP: Timer für jeder KÜ separate und nicht eine für alle, aktuell wird prozentzahl bei allen das gleiche angezeigt
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
@@ -389,7 +389,8 @@ const LoopChartActionBar = forwardRef((_props, ref) => {
          <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)
+              Bitte warten…{" "}
+              {Math.min(100, Math.round((rslProgress / TOTAL_DURATION) * 100))}%
            </p>
          </div>
          <div className="w-2/3 max-w-xl h-4 bg-gray-200 rounded overflow-hidden shadow-inner">
--- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
@@ -30,6 +30,36 @@ const TDRChartActionBar: React.FC = () => {
  const [selectedId, setSelectedId] = useState<number | null>(null);
  const currentChartData = selectedId !== null ? tdrDataById[selectedId] : [];

+  // ▶ Fortschrittsanzeige für laufende TDR-Messung (max. 120s bzw. konfigurierbar)
+  const TDR_TOTAL_DURATION = parseInt(
+    process.env.NEXT_PUBLIC_TDR_DURATION_SECONDS || "120",
+    10
+  );
+  const [tdrRunning, setTdrRunning] = useState(false);
+  const [tdrProgress, setTdrProgress] = useState(0); // Sekunden
+
+  useEffect(() => {
+    if (!tdrRunning) return;
+    setTdrProgress(0);
+    const startedAt = Date.now();
+    const interval = setInterval(() => {
+      const elapsed = Math.floor((Date.now() - startedAt) / 1000);
+      if (elapsed >= TDR_TOTAL_DURATION) {
+        setTdrProgress(TDR_TOTAL_DURATION);
+        setTdrRunning(false);
+        clearInterval(interval);
+      } else {
+        setTdrProgress(elapsed);
+      }
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [tdrRunning, TDR_TOTAL_DURATION]);
+
+  const startTdrProgress = () => {
+    setTdrRunning(true);
+    setTdrProgress(0);
+  };
+
  // 📌 Referenz setzen (nutzt Slotnummer + 1 für die API)
  const handleSetReference = async () => {
    if (
@@ -94,15 +124,19 @@ const TDRChartActionBar: React.FC = () => {
    try {
      console.log("🚀 Starte TDR Messung für Slot:", selectedSlot);
      console.log("📡 CGI URL:", cgiUrl);
-
-      const response = await fetch(cgiUrl);
-
-      if (!response.ok) {
-        throw new Error(`CGI-Fehler: ${response.status}`);
+      const isDev = process.env.NEXT_PUBLIC_NODE_ENV === "development";
+      if (isDev) {
+        // Dev / Simulator: sofort starten & Progress anzeigen
+        await new Promise((r) => setTimeout(r, 150));
+        console.log("✅ [DEV] TDR Mock-Start ok für Slot", selectedSlot);
+        startTdrProgress();
+        return;
      }

+      const response = await fetch(cgiUrl);
+      if (!response.ok) throw new Error(`CGI-Fehler: ${response.status}`);
      console.log("✅ TDR Messung gestartet für Slot", selectedSlot);
-      //alert(`✅ TDR Messung für Slot ${selectedSlot + 1} gestartet`);
+      startTdrProgress();
    } catch (err) {
      console.error("❌ Fehler beim Starten der TDR Messung:", err);
      //alert("❌ Fehler beim Starten der TDR Messung.");
@@ -130,6 +164,7 @@ const TDRChartActionBar: React.FC = () => {
  }, [selectedSlot, dispatch]);

  return (
+    <>
      <div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-4">
        {/* 🧩 Slot-Anzeige (1-basiert für Benutzer) */}
        <div className="text-sm font-semibold">
@@ -150,9 +185,14 @@ const TDRChartActionBar: React.FC = () => {
        <button
          onClick={handleStartTDR}
          className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap "
-        disabled={selectedSlot === null}
+          disabled={selectedSlot === null || tdrRunning}
        >
-        TDR-Messung starten
+          {tdrRunning
+            ? `TDR läuft... (${Math.min(
+                100,
+                Math.round((tdrProgress / TDR_TOTAL_DURATION) * 100)
+              )}%)`
+            : "TDR-Messung starten"}
        </button>

        {/* 🔽 Dropdown für Messungen */}
@@ -233,6 +273,30 @@ const TDRChartActionBar: React.FC = () => {
          </Listbox>
        </div>
      </div>
+      {tdrRunning && (
+        <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">TDR Messung läuft</p>
+            <p className="text-sm text-gray-700">
+              Bitte warten…{" "}
+              {Math.min(
+                100,
+                Math.round((tdrProgress / TDR_TOTAL_DURATION) * 100)
+              )}
+              %
+            </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: `${(tdrProgress / TDR_TOTAL_DURATION) * 100}%`,
+              }}
+            />
+          </div>
+        </div>
+      )}
+    </>
  );
 };

--- a/mocks/device-cgi-simulator/SERVICE/kabelueberwachungMockData.js
+++ b/mocks/device-cgi-simulator/SERVICE/kabelueberwachungMockData.js
@@ -271,7 +271,7 @@ var tdrMeasurementEvent = [
 //Event Abgleich
 var comparisonEvent = [
  // renamed from alignmentEvent
-  1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0,
 ];
 // expose for browser simulation
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.867",
+  "version": "1.6.868",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "cpl-v4",
-      "version": "1.6.867",
+      "version": "1.6.868",
      "dependencies": {
        "@fontsource/roboto": "^5.1.0",
        "@headlessui/react": "^2.2.4",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.867",
+  "version": "1.6.868",
  "private": true,
  "scripts": {
    "dev": "next dev -p 3000",