From 1e92e5b7914852daeefa4310a97b1d8938bb4d6b Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 10 Feb 2025 13:59:55 +0100 Subject: [PATCH] refactor: loadTDRChartData und loadLoopChartData in separate Utils-Dateien ausgelagert MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - `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 | 191 +++++--------------------------- utils/alarmUtils.ts | 31 ++++++ utils/goLoop.ts | 36 ++++++ utils/goTDR.ts | 32 ++++++ utils/loadLoopChartData.ts | 22 ++++ utils/loadTDRChartData.ts | 27 +++++ 6 files changed, 176 insertions(+), 163 deletions(-) create mode 100644 utils/alarmUtils.ts create mode 100644 utils/goLoop.ts create mode 100644 utils/goTDR.ts create mode 100644 utils/loadLoopChartData.ts create mode 100644 utils/loadTDRChartData.ts diff --git a/components/modules/Kue705FO.tsx b/components/modules/Kue705FO.tsx index ff579ec..37bb3d4 100644 --- a/components/modules/Kue705FO.tsx +++ b/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 = ({ isolationswert, @@ -84,11 +89,12 @@ const Kue705FO: React.FC = ({ 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 = ({ } }; - // Funktion für die Schleifenmessung - 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 + // Funktion aufrufen in handleRefreshClick 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 = ({ (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 = ({ // 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; - - // Funktion zum Blinken des Textes oder Icons - const setBlinkingText = (text: string | JSX.Element) => { - // Setze den Text direkt beim ersten Aufruf, ohne auf das Intervall zu warten - setIsoDisplayValue(text); - - // Starte dann das Intervall - intervalId = setInterval(() => { - setIsoDisplayValue((prevValue) => - prevValue === text ? ( - - ) : ( - 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); + setIsoDisplayValue( + getAlarmDisplayText( + slotIndex, + kuePSTmMinus96V, + kueCableBreak, + kueGroundFault, + kueAlarm1, + kueAlarm2, + kueOverflow, + isolationswert, + isoDisplayText, + groundFaultDisplayText, + isoFaultDisplayText, + loopFaultDisplayText, + isoGreaterThan200 + ) + ); }, [ slotIndex, isolationswert, @@ -345,7 +211,6 @@ const Kue705FO: React.FC = ({ kueAlarm2, kueOverflow, ]); - //--------------------------------------------------- // Effekt, um Modulnamen zu aktualisieren, wenn sich der Prop ändert diff --git a/utils/alarmUtils.ts b/utils/alarmUtils.ts new file mode 100644 index 0000000..276f5b6 --- /dev/null +++ b/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(); + } +}; diff --git a/utils/goLoop.ts b/utils/goLoop.ts new file mode 100644 index 0000000..5580b32 --- /dev/null +++ b/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)); +}; diff --git a/utils/goTDR.ts b/utils/goTDR.ts new file mode 100644 index 0000000..dbf8f28 --- /dev/null +++ b/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)); +}; diff --git a/utils/loadLoopChartData.ts b/utils/loadLoopChartData.ts new file mode 100644 index 0000000..57b5e93 --- /dev/null +++ b/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) + ); +}; diff --git a/utils/loadTDRChartData.ts b/utils/loadTDRChartData.ts new file mode 100644 index 0000000..3d6d6f7 --- /dev/null +++ b/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)); +};