refactor: loadTDRChartData und loadLoopChartData in separate Utils-Dateien ausgelagert

- `loadTDRChartData.ts` in `utils` für die TDR-Datenverarbeitung erstellt
- `loadLoopChartData.ts` in `utils` für die Schleifenmesskurvendaten erstellt
- `Kue705FO.tsx` angepasst, um die Funktionen auszulagern und Code sauberer zu halten

components/modules/Kue705FO.tsx

@@ -14,6 +14,11 @@ import {
 } from "../../redux/slices/variablesSlice";
 import TDRPopup from "../modales/kueModal/TDRPopup";
 import { createLoopChart, createTDRChart } from "../../utils/chartUtils";
+import { getAlarmDisplayText } from "../../utils/alarmUtils";
+import { goLoop } from "../../utils/goLoop";
+import { goTDR } from "../../utils/goTDR";
+import { loadTDRChartData } from "../../utils/loadTDRChartData";
+import { loadLoopChartData } from "../../utils/loadLoopChartData";
 
 const Kue705FO: React.FC<Kue705FOProps> = ({
   isolationswert,
@@ -84,11 +89,12 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   const handleOpenChartModal = () => {
     setShowChartModal(true);
     if (activeButton === "TDR") {
-      loadTDRChartData();
+      loadTDRChartData(selectedFileName, setChartData);
     } else {
-      loadLoopChartData();
+      loadLoopChartData(slotIndex, setChartData);
     }
   };
+
   const handleButtonClick = (button: "Schleife" | "TDR") => {
     if (button === "Schleife") {
       setActiveButton("Schleife");
@@ -105,78 +111,12 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
     }
   };
 
-  // Funktion für die Schleifenmessung
+  // Funktion aufrufen in handleRefreshClick
-  const goLoop = () => {
-    let slot: number = slotIndex;
-
-    if (slot >= 32) {
-      return;
-    }
-
-    // Entfernt führende Nullen, falls vorhanden
-    let slotFormat = slot < 10 ? `${slot}` : `${slot}`;
-
-    setLoading(true); // Setze den Ladezustand auf true
-    alert(`Schleifenmessung wird für Slot ${slot + 1} gestartet...`);
-
-    fetch(`/CPL?kabelueberwachung.html&KS_${slotFormat}=1&slot=${slot}`, {
-      method: "GET",
-    })
-      .then((response) => {
-        if (response.ok) {
-          alert(`Schleifenmessung erfolgreich gestartet für Slot ${slot + 1}`);
-          console.log("Schleifenmessung erfolgreich gestartet für Slot", slot);
-        } else {
-          alert("Fehler beim Starten der Schleifenmessung.");
-          console.error("Fehler beim Senden der Schleifen-Anfrage");
-        }
-      })
-      .catch((error) => {
-        alert("Ein Fehler ist aufgetreten.");
-        console.error("Fehler:", error);
-      })
-      .finally(() => setLoading(false)); // Ladezustand zurücksetzen
-  };
-
-  // Funktion für die TDR-Messung
-  const goTDR = () => {
-    //-------------------------------------------------
-    let slot: number = slotIndex;
-
-    if (slot >= 32) {
-      return;
-    }
-
-    // Entfernt führende Nullen, falls vorhanden
-    let slotFormat = slot < 10 ? `${slot}` : `${slot}`;
-
-    setLoading(true);
-    alert(`TDR wird für Slot ${slot + 1} gestartet...`);
-    fetch(
-      `/CPL?Service/Kabelueberwachung.html&KTT${slotFormat}=1&slot=${slot}`,
-      {
-        method: "GET",
-      }
-    )
-      .then((response) => {
-        if (response.ok) {
-          alert(`TDR erfolgreich gestartet für Slot ${slot + 1}`);
-          console.log("TDR erfolgreich gestartet für Slot", slot + 1);
-        } else {
-          console.error("Fehler beim Senden der TDR-Anfrage");
-        }
-      })
-      .catch((error) => {
-        console.error("Fehler:", error);
-      })
-      .finally(() => setLoading(false));
-  };
-  // Bestimme, welche Funktion ausgeführt wird, basierend auf dem aktiven Button
   const handleRefreshClick = () => {
     if (activeButton === "Schleife") {
-      goLoop(); // Wenn Schleife aktiv ist, starte goLoop
+      goLoop(slotIndex, setLoading);
     } else if (activeButton === "TDR") {
-      goTDR(); // Wenn TDR aktiv ist, starte goTDR
+      goTDR(slotIndex, setLoading);
     }
   };
 
@@ -197,49 +137,6 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
     (state: RootState) => state.variables.selectedFileName
   );
 
-  const loadTDRChartData = () => {
-    if (!selectedFileName) {
-      console.error("Kein Dateiname in Redux gespeichert.");
-      return;
-    }
-
-    const yearFolder = `Year_${jahr.toString().slice(-2)}`;
-    const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
-
-    //const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${selectedFileName}`;
-    const filePath = `/CPLmockData/LastTDR/kue_01/Year_24/Month_01/02-1911.json`;
-
-    fetch(filePath)
-      .then((response) => response.json())
-      .then((data) => {
-        console.log("Geladene Daten:", data);
-        setChartData(data);
-        createTDRChart(data);
-      })
-      .catch((error) =>
-        console.error("Fehler beim Laden der TDR-Daten:", error)
-      );
-  };
-
-  const loadLoopChartData = () => {
-    const slot = slotIndex;
-    const environment = process.env.NODE_ENV || "production";
-    const fileData =
-      environment === "production"
-        ? `/CPL?/CPL/4000values/slot${slot}.json`
-        : `/CPLmockData/4000values/slot${slot}.json`;
-
-    fetch(fileData)
-      .then((response) => response.json())
-      .then((data) => {
-        setChartData(data);
-        createLoopChart(data, "Schleifenmesskurve");
-      })
-      .catch((error) =>
-        console.error("Fehler beim Laden der Schleifenmesskurvendaten:", error)
-      );
-  };
-
   // Füge das Plugin zu Chart.js hinzu
   useEffect(() => {
     // Lade das Plugin nur, wenn `window` verfügbar ist
@@ -282,54 +179,23 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
   // Funktion zum Aktualisieren der Anzeige basierend auf dem Alarmstatus mit Icon und Blinken
   // Funktion zum Aktualisieren der Anzeige basierend auf dem Alarmstatus mit Icon und Blinken
   useEffect(() => {
-    let intervalId: NodeJS.Timeout | undefined;
+    setIsoDisplayValue(
-
+      getAlarmDisplayText(
-    // Funktion zum Blinken des Textes oder Icons
+        slotIndex,
-    const setBlinkingText = (text: string | JSX.Element) => {
+        kuePSTmMinus96V,
-      // Setze den Text direkt beim ersten Aufruf, ohne auf das Intervall zu warten
+        kueCableBreak,
-      setIsoDisplayValue(text);
+        kueGroundFault,
-
+        kueAlarm1,
-      // Starte dann das Intervall
+        kueAlarm2,
-      intervalId = setInterval(() => {
+        kueOverflow,
-        setIsoDisplayValue((prevValue) =>
+        isolationswert,
-          prevValue === text ? (
+        isoDisplayText,
-            <i
+        groundFaultDisplayText,
-              className="bi bi-exclamation-triangle"
+        isoFaultDisplayText,
-              style={{ fontSize: "24px", color: "red" }}
+        loopFaultDisplayText,
-            ></i>
+        isoGreaterThan200
-          ) : (
+      )
-            text
+    );
-          )
-        );
-      }, 5000); // Intervall für das Blinken
-    };
-
-    // Priorisierte Alarmanzeige
-    if (Number(kuePSTmMinus96V?.[slotIndex]) === 1) {
-      clearInterval(intervalId); // Stoppt das vorherige Intervall, falls aktiv
-      setBlinkingText("PST-M prüfen");
-    } else if (Number(kueCableBreak?.[slotIndex]) === 1) {
-      clearInterval(intervalId);
-      setBlinkingText(isoDisplayText);
-    } else if (Number(kueGroundFault?.[slotIndex]) === 1) {
-      clearInterval(intervalId);
-      setBlinkingText(groundFaultDisplayText);
-    } else if (Number(kueAlarm1?.[slotIndex]) === 1) {
-      clearInterval(intervalId);
-      setBlinkingText(isoFaultDisplayText);
-    } else if (Number(kueAlarm2?.[slotIndex]) === 1) {
-      clearInterval(intervalId);
-      setBlinkingText(loopFaultDisplayText);
-    } else if (Number(kueOverflow?.[slotIndex]) === 1) {
-      clearInterval(intervalId);
-      setIsoDisplayValue(isoGreaterThan200);
-    } else {
-      clearInterval(intervalId);
-      setIsoDisplayValue(isolationswert.toString()); // Standardanzeige ohne Alarm
-    }
-
-    // Cleanup bei Änderungen des Status oder Schließen des Effekts
-    return () => clearInterval(intervalId);
   }, [
     slotIndex,
     isolationswert,
@@ -345,7 +211,6 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
     kueAlarm2,
     kueOverflow,
   ]);
-
   //---------------------------------------------------
 
   // Effekt, um Modulnamen zu aktualisieren, wenn sich der Prop ändert

utils/alarmUtils.ts

@@ -0,0 +1,31 @@
+export const getAlarmDisplayText = (
+  slotIndex: number,
+  kuePSTmMinus96V: number[] | undefined,
+  kueCableBreak: number[] | undefined,
+  kueGroundFault: number[] | undefined,
+  kueAlarm1: number[] | undefined,
+  kueAlarm2: number[] | undefined,
+  kueOverflow: number[] | undefined,
+  isolationswert: string | number,
+  isoDisplayText: string,
+  groundFaultDisplayText: string,
+  isoFaultDisplayText: string,
+  loopFaultDisplayText: string,
+  isoGreaterThan200: string
+) => {
+  if (Number(kuePSTmMinus96V?.[slotIndex]) === 1) {
+    return "PST-M prüfen";
+  } else if (Number(kueCableBreak?.[slotIndex]) === 1) {
+    return isoDisplayText;
+  } else if (Number(kueGroundFault?.[slotIndex]) === 1) {
+    return groundFaultDisplayText;
+  } else if (Number(kueAlarm1?.[slotIndex]) === 1) {
+    return isoFaultDisplayText;
+  } else if (Number(kueAlarm2?.[slotIndex]) === 1) {
+    return loopFaultDisplayText;
+  } else if (Number(kueOverflow?.[slotIndex]) === 1) {
+    return isoGreaterThan200;
+  } else {
+    return isolationswert.toString();
+  }
+};

utils/goLoop.ts

@@ -0,0 +1,36 @@
+export const goLoop = (
+  slotIndex: number,
+  setLoading: (loading: boolean) => void
+) => {
+  if (slotIndex >= 32) {
+    return;
+  }
+
+  const slotFormat = slotIndex < 10 ? `${slotIndex}` : `${slotIndex}`;
+
+  setLoading(true);
+  alert(`Schleifenmessung wird für Slot ${slotIndex + 1} gestartet...`);
+
+  fetch(`/CPL?kabelueberwachung.html&KS_${slotFormat}=1&slot=${slotIndex}`, {
+    method: "GET",
+  })
+    .then((response) => {
+      if (response.ok) {
+        alert(
+          `Schleifenmessung erfolgreich gestartet für Slot ${slotIndex + 1}`
+        );
+        console.log(
+          "Schleifenmessung erfolgreich gestartet für Slot",
+          slotIndex
+        );
+      } else {
+        alert("Fehler beim Starten der Schleifenmessung.");
+        console.error("Fehler beim Senden der Schleifen-Anfrage");
+      }
+    })
+    .catch((error) => {
+      alert("Ein Fehler ist aufgetreten.");
+      console.error("Fehler:", error);
+    })
+    .finally(() => setLoading(false));
+};

utils/goTDR.ts

@@ -0,0 +1,32 @@
+export const goTDR = (
+  slotIndex: number,
+  setLoading: (loading: boolean) => void
+) => {
+  if (slotIndex >= 32) {
+    return;
+  }
+
+  const slotFormat = slotIndex < 10 ? `${slotIndex}` : `${slotIndex}`;
+
+  setLoading(true);
+  alert(`TDR wird für Slot ${slotIndex + 1} gestartet...`);
+
+  fetch(
+    `/CPL?Service/Kabelueberwachung.html&KTT${slotFormat}=1&slot=${slotIndex}`,
+    {
+      method: "GET",
+    }
+  )
+    .then((response) => {
+      if (response.ok) {
+        alert(`TDR erfolgreich gestartet für Slot ${slotIndex + 1}`);
+        console.log("TDR erfolgreich gestartet für Slot", slotIndex + 1);
+      } else {
+        console.error("Fehler beim Senden der TDR-Anfrage");
+      }
+    })
+    .catch((error) => {
+      console.error("Fehler:", error);
+    })
+    .finally(() => setLoading(false));
+};

utils/loadLoopChartData.ts

@@ -0,0 +1,22 @@
+import { createLoopChart } from "./chartUtils";
+
+export const loadLoopChartData = (
+  slotIndex: number,
+  setChartData: (data: any) => void
+) => {
+  const environment = process.env.NODE_ENV || "production";
+  const fileData =
+    environment === "production"
+      ? `/CPL?/CPL/4000values/slot${slotIndex}.json`
+      : `/CPLmockData/4000values/slot${slotIndex}.json`;
+
+  fetch(fileData)
+    .then((response) => response.json())
+    .then((data) => {
+      setChartData(data);
+      createLoopChart(data, "Schleifenmesskurve");
+    })
+    .catch((error) =>
+      console.error("Fehler beim Laden der Schleifenmesskurvendaten:", error)
+    );
+};

utils/loadTDRChartData.ts

@@ -0,0 +1,27 @@
+import { createTDRChart } from "./chartUtils";
+
+export const loadTDRChartData = (
+  selectedFileName: string | null,
+  setChartData: (data: any) => void
+) => {
+  if (!selectedFileName) {
+    console.error("Kein Dateiname in Redux gespeichert.");
+    return;
+  }
+
+  const yearFolder = `Year_${new Date().getFullYear().toString().slice(-2)}`;
+  const monthFolder = `Month_${(new Date().getMonth() + 1)
+    .toString()
+    .padStart(2, "0")}`;
+
+  const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${selectedFileName}`;
+
+  fetch(filePath)
+    .then((response) => response.json())
+    .then((data) => {
+      console.log("Geladene TDR-Daten:", data);
+      setChartData(data);
+      createTDRChart(data);
+    })
+    .catch((error) => console.error("Fehler beim Laden der TDR-Daten:", error));
+};