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/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,109 +164,139 @@ 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">
-        {selectedSlot !== null ? `KÜ ${selectedSlot + 1}` : "Kein KÜ gewählt"}
-      </div>
+    <>
+      <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">
+          {selectedSlot !== null ? `KÜ ${selectedSlot + 1}` : "Kein KÜ gewählt"}
+        </div>

-      {/* ✅ Referenz setzen */}
-      {selectedId !== null && (
+        {/* ✅ Referenz setzen */}
+        {selectedId !== null && (
+          <button
+            onClick={handleSetReference}
+            className="border border-littwin-blue text-littwin-blue bg-white rounded px-3 py-1 text-sm hover:bg-gray-200"
+          >
+            TDR-Kurve als Referenz speichern
+          </button>
+        )}
+
+        {/* 🚀 TDR starten */}
        <button
-          onClick={handleSetReference}
-          className="border border-littwin-blue text-littwin-blue bg-white rounded px-3 py-1 text-sm hover:bg-gray-200"
+          onClick={handleStartTDR}
+          className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap "
+          disabled={selectedSlot === null || tdrRunning}
        >
-          TDR-Kurve als Referenz speichern
+          {tdrRunning
+            ? `TDR läuft... (${Math.min(
+                100,
+                Math.round((tdrProgress / TDR_TOTAL_DURATION) * 100)
+              )}%)`
+            : "TDR-Messung starten"}
        </button>
-      )}

-      {/* 🚀 TDR starten */}
-      <button
-        onClick={handleStartTDR}
-        className="px-4 py-1 bg-littwin-blue text-white rounded text-sm whitespace-nowrap "
-        disabled={selectedSlot === null}
-      >
-        TDR-Messung starten
-      </button>
-
-      {/* 🔽 Dropdown für Messungen */}
-      <div className="flex items-center space-x-2">
-        <Listbox
-          value={selectedId}
-          onChange={(id) => {
-            setSelectedId(id);
-            if (id !== null) {
-              dispatch(getTDRChartDataByIdThunk(id));
-            }
-          }}
-          disabled={idsForSlot.length === 0}
-        >
-          <div className="relative w-96">
-            <Listbox.Button className="w-full border px-2 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
-              <span className="whitespace-nowrap overflow-hidden text-ellipsis">
-                {selectedId
-                  ? (() => {
-                      const selected = idsForSlot.find(
-                        (e) => e.id === selectedId
-                      );
-                      return selected
-                        ? `${new Date(selected.t).toLocaleString("de-DE", {
-                            day: "2-digit",
-                            month: "2-digit",
-                            year: "numeric",
-                            hour: "2-digit",
-                            minute: "2-digit",
-                            second: "2-digit",
-                          })} – Fehlerstelle: ${selected.d} m`
-                        : "Wähle Messung";
-                    })()
-                  : "Wähle Messung"}
-              </span>
-              <svg
-                className="w-5 h-5 text-gray-400"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </Listbox.Button>
-            <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
-              {idsForSlot.map((entry) => (
-                <Listbox.Option
-                  key={entry.id}
-                  value={entry.id}
-                  className={({ selected, active }) =>
-                    `px-4 py-1 cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis ${
-                      selected
-                        ? "bg-littwin-blue text-white"
-                        : active
-                        ? "bg-gray-200"
-                        : ""
-                    }`
-                  }
+        {/* 🔽 Dropdown für Messungen */}
+        <div className="flex items-center space-x-2">
+          <Listbox
+            value={selectedId}
+            onChange={(id) => {
+              setSelectedId(id);
+              if (id !== null) {
+                dispatch(getTDRChartDataByIdThunk(id));
+              }
+            }}
+            disabled={idsForSlot.length === 0}
+          >
+            <div className="relative w-96">
+              <Listbox.Button className="w-full border px-2 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
+                <span className="whitespace-nowrap overflow-hidden text-ellipsis">
+                  {selectedId
+                    ? (() => {
+                        const selected = idsForSlot.find(
+                          (e) => e.id === selectedId
+                        );
+                        return selected
+                          ? `${new Date(selected.t).toLocaleString("de-DE", {
+                              day: "2-digit",
+                              month: "2-digit",
+                              year: "numeric",
+                              hour: "2-digit",
+                              minute: "2-digit",
+                              second: "2-digit",
+                            })} – Fehlerstelle: ${selected.d} m`
+                          : "Wähle Messung";
+                      })()
+                    : "Wähle Messung"}
+                </span>
+                <svg
+                  className="w-5 h-5 text-gray-400"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  aria-hidden="true"
                >
-                  {new Date(entry.t).toLocaleString("de-DE", {
-                    day: "2-digit",
-                    month: "2-digit",
-                    year: "numeric",
-                    hour: "2-digit",
-                    minute: "2-digit",
-                    second: "2-digit",
-                  })}{" "}
-                  – Fehlerstelle: {entry.d} m
-                </Listbox.Option>
-              ))}
-            </Listbox.Options>
-          </div>
-        </Listbox>
+                  <path
+                    fillRule="evenodd"
+                    d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </Listbox.Button>
+              <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
+                {idsForSlot.map((entry) => (
+                  <Listbox.Option
+                    key={entry.id}
+                    value={entry.id}
+                    className={({ selected, active }) =>
+                      `px-4 py-1 cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis ${
+                        selected
+                          ? "bg-littwin-blue text-white"
+                          : active
+                          ? "bg-gray-200"
+                          : ""
+                      }`
+                    }
+                  >
+                    {new Date(entry.t).toLocaleString("de-DE", {
+                      day: "2-digit",
+                      month: "2-digit",
+                      year: "numeric",
+                      hour: "2-digit",
+                      minute: "2-digit",
+                      second: "2-digit",
+                    })}{" "}
+                    – Fehlerstelle: {entry.d} m
+                  </Listbox.Option>
+                ))}
+              </Listbox.Options>
+            </div>
+          </Listbox>
+        </div>
      </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>
+      )}
+    </>
  );
 };