feat: useEffect-Hooks ausgelagert in separate Hook-Dateien
- useEffect-Logik aus Kue705FO.tsx in eigene Hooks ausgelagert: - useKueVersion.ts für die KUE-Version - useAlarmStatus.ts für den Alarmstatus - useIsoDisplay.ts für die Anzeige der Isolationswerte - useLoopDisplay.ts für den Schleifenwiderstand - useChartPlugin.ts für Chart.js Plugin-Handling - useChartData.ts für Redux-Chart-Datenverwaltung - useModulName.ts für den Modulnamen mit Setter-Funktion - Code in Kue705FO.tsx optimiert und modularisiert - Fehler mit `setCurrentModulName` behoben durch Rückgabe der Setter-Funktion in useModulName.ts
This commit is contained in:
@@ -0,0 +1,32 @@
|
||||
// components/main/kabelueberwachung/kue705FO/hooks/useAlarmStatus.ts
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const useAlarmStatus = (
|
||||
slotIndex: number,
|
||||
kueAlarm1: any,
|
||||
kueAlarm2: any,
|
||||
kueCableBreak: any,
|
||||
kueGroundFault: any
|
||||
) => {
|
||||
const [currentAlarmStatus, setCurrentAlarmStatus] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const updateAlarmStatus = () => {
|
||||
const alarmStatus =
|
||||
(kueAlarm1 && Number(kueAlarm1[slotIndex])) ||
|
||||
(kueAlarm2 && Number(kueAlarm2[slotIndex])) ||
|
||||
(kueCableBreak && Number(kueCableBreak[slotIndex])) ||
|
||||
(kueGroundFault && Number(kueGroundFault[slotIndex]));
|
||||
|
||||
setCurrentAlarmStatus(!!alarmStatus);
|
||||
};
|
||||
|
||||
updateAlarmStatus();
|
||||
const interval = setInterval(updateAlarmStatus, 10000);
|
||||
return () => clearInterval(interval);
|
||||
}, [slotIndex, kueAlarm1, kueAlarm2, kueCableBreak, kueGroundFault]);
|
||||
|
||||
return currentAlarmStatus;
|
||||
};
|
||||
|
||||
export default useAlarmStatus;
|
||||
@@ -0,0 +1,15 @@
|
||||
import { useEffect } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { setSelectedChartData } from "../../../../../redux/slices/variablesSlice";
|
||||
|
||||
const useChartData = (loopMeasurementCurveChartData: any) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
if (loopMeasurementCurveChartData) {
|
||||
dispatch(setSelectedChartData(loopMeasurementCurveChartData));
|
||||
}
|
||||
}, [loopMeasurementCurveChartData, dispatch]);
|
||||
};
|
||||
|
||||
export default useChartData;
|
||||
@@ -0,0 +1,20 @@
|
||||
// components/main/kabelueberwachung/kue705FO/hooks/useChartPlugin.ts
|
||||
import { useState, useEffect } from "react";
|
||||
import Chart from "chart.js/auto";
|
||||
|
||||
const useChartPlugin = () => {
|
||||
const [zoomPlugin, setZoomPlugin] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
import("chartjs-plugin-zoom").then((mod) => {
|
||||
setZoomPlugin(mod.default);
|
||||
Chart.register(mod.default);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
return zoomPlugin;
|
||||
};
|
||||
|
||||
export default useChartPlugin;
|
||||
@@ -0,0 +1,61 @@
|
||||
// compoenents/main/kabelueberwachung/kue705FO/hooks/useIsoDisplay.ts
|
||||
import { useEffect, useState } from "react";
|
||||
import { getAlarmDisplayText } from "../../../../../utils/alarmUtils";
|
||||
|
||||
const useIsoDisplay = (
|
||||
slotIndex: number,
|
||||
kuePSTmMinus96V: any,
|
||||
kueCableBreak: any,
|
||||
kueGroundFault: any,
|
||||
kueAlarm1: any,
|
||||
kueAlarm2: any,
|
||||
kueOverflow: any,
|
||||
isolationswert: any,
|
||||
isoDisplayText: string,
|
||||
groundFaultDisplayText: string,
|
||||
isoFaultDisplayText: string,
|
||||
loopFaultDisplayText: string,
|
||||
isoGreaterThan200: string
|
||||
) => {
|
||||
const [isoDisplayValue, setIsoDisplayValue] = useState<
|
||||
string | JSX.Element
|
||||
>();
|
||||
|
||||
useEffect(() => {
|
||||
setIsoDisplayValue(
|
||||
getAlarmDisplayText(
|
||||
slotIndex,
|
||||
kuePSTmMinus96V,
|
||||
kueCableBreak,
|
||||
kueGroundFault,
|
||||
kueAlarm1,
|
||||
kueAlarm2,
|
||||
kueOverflow ?? undefined,
|
||||
isolationswert,
|
||||
isoDisplayText,
|
||||
groundFaultDisplayText,
|
||||
isoFaultDisplayText,
|
||||
loopFaultDisplayText,
|
||||
isoGreaterThan200
|
||||
)
|
||||
);
|
||||
}, [
|
||||
slotIndex,
|
||||
isolationswert,
|
||||
isoDisplayText,
|
||||
groundFaultDisplayText,
|
||||
isoFaultDisplayText,
|
||||
loopFaultDisplayText,
|
||||
isoGreaterThan200,
|
||||
kuePSTmMinus96V,
|
||||
kueCableBreak,
|
||||
kueGroundFault,
|
||||
kueAlarm1,
|
||||
kueAlarm2,
|
||||
kueOverflow,
|
||||
]);
|
||||
|
||||
return isoDisplayValue;
|
||||
};
|
||||
|
||||
export default useIsoDisplay;
|
||||
@@ -0,0 +1,16 @@
|
||||
// components/main/kabelueberwachung/kue705FO/hooks/useKueVersion.ts
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const useKueVersion = (slotIndex: number, reduxKueVersion: any) => {
|
||||
const [kueVersion, setKueVersion] = useState("V4.19");
|
||||
|
||||
useEffect(() => {
|
||||
if (reduxKueVersion?.[slotIndex]) {
|
||||
setKueVersion("V" + Number(reduxKueVersion[slotIndex]) / 100);
|
||||
}
|
||||
}, [slotIndex, reduxKueVersion]);
|
||||
|
||||
return kueVersion;
|
||||
};
|
||||
|
||||
export default useKueVersion;
|
||||
@@ -0,0 +1,19 @@
|
||||
// components/main/kabelueberwachung/kue705FO/hooks/useLoopDisplay.ts
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const useLoopDisplay = (
|
||||
schleifenwiderstand: number,
|
||||
activeButton: "Schleife" | "TDR"
|
||||
) => {
|
||||
const [loopDisplayValue, setLoopDisplayValue] = useState(schleifenwiderstand);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeButton === "Schleife") {
|
||||
setLoopDisplayValue(schleifenwiderstand);
|
||||
}
|
||||
}, [schleifenwiderstand, activeButton]);
|
||||
|
||||
return loopDisplayValue;
|
||||
};
|
||||
|
||||
export default useLoopDisplay;
|
||||
@@ -0,0 +1,14 @@
|
||||
// components/main/kabelueberwachung/kue705FO/hooks/useModulName.ts
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
const useModulName = (slotIndex: number, modulName: string) => {
|
||||
const [currentModulName, setCurrentModulName] = useState(modulName);
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentModulName(modulName);
|
||||
}, [modulName, slotIndex]);
|
||||
|
||||
return { currentModulName, setCurrentModulName }; // Hier wird die Setter-Funktion zurückgegeben
|
||||
};
|
||||
|
||||
export default useModulName;
|
||||
Reference in New Issue
Block a user