Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

esLint

Browse Source
This commit is contained in:
Ismail Ali
2025-06-26 22:56:20 +02:00
parent 137839da98
commit b9651a53a9
82 changed files with 7476 additions and 4171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx
View File

@@ -1,24 +1,19 @@
"use client"; // /components/modules/kue705FO/charts/ChartSwitcher.tsx
import React, { useState, useEffect } from "react";
import React, { useEffect } from "react";
import ReactModal from "react-modal";
import LoopChartActionBar from "./LoopMeasurementChart/LoopChartActionBar";
import TDRChartActionBar from "./TDRChart/TDRChartActionBar";
import LoopMeasurementChart from "./LoopMeasurementChart/LoopMeasurementChart";
import TDRChart from "./TDRChart/TDRChart";
import { useSelector, useDispatch } from "react-redux";
import { AppDispatch } from "../../../../../redux/store";
import { RootState } from "../../../../../redux/store";
import { AppDispatch } from "@/redux/store";
import { RootState } from "@/redux/store";
import {
setChartOpen,
setFullScreen,
} from "../../../../../redux/slices/kabelueberwachungChartSlice";
import {
setSelectedSlot,
setSelectedChartType,
} from "../../../../../redux/slices/tdrChartSlice";
import { resetBrushRange } from "../../../../../redux/slices/brushSlice";
import { fetchTDMDataBySlotThunk } from "../../../../../redux/thunks/getTDMListBySlotThunk";
} from "@/redux/slices/kabelueberwachungChartSlice";
import { resetBrushRange } from "@/redux/slices/brushSlice";
import { useLoopChartLoader } from "./LoopMeasurementChart/LoopChartActionBar";
import {
@@ -26,7 +21,7 @@ import {
setBisDatum,
setSelectedMode,
setSelectedSlotType,
} from "../../../../../redux/slices/kabelueberwachungChartSlice";
} from "@/redux/slices/kabelueberwachungChartSlice";
interface ChartSwitcherProps {
isOpen: boolean;
@@ -34,11 +29,7 @@ interface ChartSwitcherProps {
slotIndex: number;
}
const ChartSwitcher: React.FC<ChartSwitcherProps> = ({
isOpen,
onClose,
slotIndex,
}) => {
const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
const dispatch = useDispatch<AppDispatch>();
const chartTitle = useSelector(
(state: RootState) => state.loopChartType.chartTitle
@@ -82,24 +73,20 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({
};
// **Slot und Messkurve setzen**
const setChartType = (chartType: "TDR" | "Schleife") => {
dispatch(setSelectedSlot(slotIndex));
dispatch(setSelectedChartType(chartType));
};
//-------------------------------------
// const setChartType = (chartType: "TDR" | "Schleife") => {
// dispatch(setSelectedSlot(slotIndex));
// dispatch(setSelectedChartType(chartType));
// };
const { loadLoopChartData } = useLoopChartLoader();
useEffect(() => {
if (isOpen && activeMode === "Schleife") {
loadLoopChartData();
}
}, [isOpen, activeMode]);
//-------------------------------------
// useLoopChartLoader hook
const loadLoopChartData = useLoopChartLoader();
// Slot number from Redux
const slotNumber = useSelector(
(state: RootState) => state.kabelueberwachungChartSlice.slotNumber
);
// immmer beim öffnen das Modal die letzte 30 Tage anzeigen
// immer beim Öffnen das Modal die letzten 30 Tage anzeigen
useEffect(() => {
if (isOpen && activeMode === "Schleife" && slotNumber !== null) {
const today = new Date();
@@ -113,12 +100,11 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({
// Warten, bis Redux gesetzt ist → dann Daten laden
setTimeout(() => {
loadLoopChartData();
loadLoopChartData.loadLoopChartData();
}, 10); // kleiner Delay, damit Redux-State sicher aktualisiert ist
}
}, [isOpen, activeMode, slotNumber]);
}, [isOpen, activeMode, slotNumber, dispatch, loadLoopChartData]);
//-----------------------------------------
return (
<ReactModal
isOpen={isOpen}

9
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/CustomTooltip.tsx
View File

@@ -4,7 +4,14 @@ import React from "react";
interface CustomTooltipProps {
active?: boolean;
payload?: any[];
payload?: Array<{
dataKey: string;
value: number;
name?: string;
color?: string;
unit?: string;
// Add other known properties here as needed
}>;
label?: string;
unit?: string;
}

5
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx
View File

@@ -2,11 +2,11 @@
import React, { useEffect } from "react";
import DatePicker from "react-datepicker";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import { RootState } from "@/redux/store";
import {
setVonDatum,
setBisDatum,
} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
} from "@/redux/slices/kabelueberwachungChartSlice";
import "react-datepicker/dist/react-datepicker.css";
const DateRangePicker: React.FC = () => {
@@ -38,6 +38,7 @@ const DateRangePicker: React.FC = () => {
useEffect(() => {
if (!reduxVonDatum) dispatch(setVonDatum(formatISO(thirtyDaysAgo)));
if (!reduxBisDatum) dispatch(setBisDatum(formatISO(today)));
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dispatch, reduxVonDatum, reduxBisDatum]);
return (

21
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
View File

@@ -3,24 +3,22 @@
import React from "react";
import DateRangePicker from "./DateRangePicker";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import { RootState } from "@/redux/store";
import {
setVonDatum,
setBisDatum,
setLoopMeasurementCurveChartData,
setSelectedMode,
setSelectedSlotType,
setChartOpen,
setFullScreen,
setLoading,
} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
import { setBrushRange } from "../../../../../../redux/slices/brushSlice";
import { setChartTitle } from "../../../../../../redux/slices/loopChartTypeSlice";
} from "@/redux/slices/kabelueberwachungChartSlice";
import { setBrushRange } from "@/redux/slices/brushSlice";
import { setChartTitle } from "@/redux/slices/loopChartTypeSlice";
//-----------------------------------------------------------------------------------useLoopChartLoader
export const useLoopChartLoader = () => {
const dispatch = useDispatch();
const { vonDatum, bisDatum, selectedMode, selectedSlotType, slotNumber } =
useSelector((state: RootState) => state.kabelueberwachungChartSlice);
const hasShownNoDataAlert = React.useRef(false);
const formatDate = (dateString: string) => {
const [year, month, day] = dateString.split("-");
@@ -77,7 +75,10 @@ export const useLoopChartLoader = () => {
} else {
dispatch(setLoopMeasurementCurveChartData([]));
dispatch(setChartOpen(false));
alert("⚠️ Keine Daten im gewählten Zeitraum.");
if (!hasShownNoDataAlert.current) {
alert("⚠️ Keine Messdaten im gewählten Zeitraum gefunden.");
hasShownNoDataAlert.current = true; // ⬅️ Nur einmal zeigen
}
}
} catch (err) {
console.error("❌ Fehler beim Laden:", err);
@@ -99,9 +100,9 @@ const LoopChartActionBar: React.FC = () => {
bisDatum,
selectedMode,
selectedSlotType,
isChartOpen,
slotNumber,
loopMeasurementCurveChartData,
isLoading,
} = useSelector((state: RootState) => state.kabelueberwachungChartSlice);

22
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
View File

@@ -1,8 +1,8 @@
"use client";
"use client"; // /components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
import React, { useEffect, useRef } from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import { RootState } from "@/redux/store";
import {
Chart as ChartJS,
LineElement,
@@ -32,8 +32,16 @@ ChartJS.register(
import { getColor } from "../../../../../../utils/colors";
import { PulseLoader } from "react-spinners";
const usePreviousData = (data: any[]) => {
const ref = useRef<any[]>([]);
type LoopMeasurementEntry = {
t: string;
i: number;
m: number;
g: number;
a: number;
};
const usePreviousData = (data: LoopMeasurementEntry[]) => {
const ref = useRef<LoopMeasurementEntry[]>([]);
useEffect(() => {
ref.current = data;
}, [data]);
@@ -57,7 +65,10 @@ const LoopMeasurementChart = () => {
const previousData = usePreviousData(loopMeasurementCurveChartData);
// Vergleichsfunktion
const isEqual = (a: any[], b: any[]): boolean => {
const isEqual = (
a: LoopMeasurementEntry[],
b: LoopMeasurementEntry[]
): boolean => {
if (a.length !== b.length) return false;
for (let i = 0; i < a.length; i++) {
if (
@@ -196,6 +207,7 @@ const LoopMeasurementChart = () => {
options,
});
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [loopMeasurementCurveChartData, selectedMode, vonDatum, bisDatum]);
return (

13
components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
View File

@@ -1,7 +1,6 @@
// components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
"use client";
"use client"; // /components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
import React, { useEffect, useRef, useMemo } from "react";
import React, { useEffect, useRef } from "react";
import { RootState } from "../../../../../../redux/store";
import { useSelector, useDispatch } from "react-redux";
import { AppDispatch } from "../../../../../../redux/store";
@@ -32,10 +31,6 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
(state: RootState) => state.tdrDataByIdSlice.dataById
);
//--------------------------------
const tdrInitialData =
selectedId !== null && tdrDataById[selectedId]
? tdrDataById[selectedId]
: [];
//--------------------------------
// Kombinierte Logik: ID hat Vorrang, sonst Initial-Daten für Slot
@@ -206,8 +201,10 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
}
}
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
JSON.stringify(tdrChartData),
// eslint-disable-next-line react-hooks/exhaustive-deps
JSON.stringify(tdrChartData), // eslint-disable-next-line react-hooks/exhaustive-deps
JSON.stringify(referenceChartData),
selectedSlot,
selectedChartType,

24
components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
View File

@@ -2,11 +2,11 @@
import React, { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import { useAppDispatch } from "../../../../../../redux/store";
import { RootState } from "../../../../../../redux/store";
import { fetchTDMDataBySlotThunk } from "../../../../../../redux/thunks/getTDMListBySlotThunk";
import { getTDRChartDataByIdThunk } from "../../../../../../redux/thunks/getTDRChartDataByIdThunk";
import { getReferenceCurveBySlotThunk } from "../../../../../../redux/thunks/getReferenceCurveBySlotThunk"; // ⬅ import ergänzen
import { useAppDispatch } from "@/redux/store";
import { RootState } from "@/redux/store";
import { fetchTDMDataBySlotThunk } from "@/redux/thunks/getTDMListBySlotThunk";
import { getTDRChartDataByIdThunk } from "@/redux/thunks/getTDRChartDataByIdThunk";
import { getReferenceCurveBySlotThunk } from "@/redux/thunks/getReferenceCurveBySlotThunk"; // ⬅ import ergänzen
const TDRChartActionBar: React.FC = () => {
const dispatch = useAppDispatch();
@@ -91,10 +91,16 @@ const TDRChartActionBar: React.FC = () => {
// 📥 Beim Slot-Wechsel TDM-Liste + letzte ID laden
useEffect(() => {
if (selectedSlot !== null) {
dispatch(fetchTDMDataBySlotThunk(selectedSlot)).then((action: any) => {
const slotData = action.payload?.data;
if (slotData?.length > 0) {
const lastId = slotData[0].id;
dispatch(fetchTDMDataBySlotThunk(selectedSlot)).then((action) => {
// action can be a PayloadAction with payload or a rejected action
const payload = (
action as {
payload?: { data?: { id: number; t: string; d: number }[] };
}
).payload;
const slotData = payload?.data;
if ((slotData ?? []).length > 0) {
const lastId = (slotData ?? [])[0].id;
setSelectedId(lastId);
dispatch(getTDRChartDataByIdThunk(lastId));
}

61
components/main/kabelueberwachung/kue705FO/Kue705FO.tsx
View File

@@ -1,5 +1,5 @@
"use client"; // components/modules/kue705FO/Kue705FO.tsx
import React, { useState, useEffect, useRef, useMemo } from "react";
import React, { useState, useRef, useMemo } from "react";
import { useSelector } from "react-redux";
import KueModal from "./modals/SettingsModalWrapper";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
@@ -9,14 +9,15 @@ import ChartSwitcher from "./Charts/ChartSwitcher";
import { RootState } from "../../../../redux/store";
import { useDispatch } from "react-redux";
//-------hooks----------------
import useChartPlugin from "./hooks/useChartPlugin";
import useAlarmStatus from "./hooks/useAlarmStatus";
import useKueVersion from "./hooks/useKueVersion";
import useIsoDisplay from "./hooks/useIsoDisplay";
import useLoopDisplay from "./hooks/useLoopDisplay";
import useModulName from "./hooks/useModulName";
import useChartData from "./hooks/useChartData";
import useTDRChart from "./hooks/useTDRChart";
import type { Chart } from "chart.js";
//--------handlers----------------
import handleButtonClick from "./kue705FO-Funktionen/handleButtonClick";
import handleOpenModal from "./handlers/handleOpenModal";
@@ -36,15 +37,10 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
/* console.log(
`Rendering Kue705FO - SlotIndex: ${slotIndex}, ModulName: ${modulName}`
); */
const selectedChartData = useSelector(
(state: RootState) => state.selectedChartDataSlice.selectedChartData
);
const dispatch = useDispatch();
const { kueName } = useSelector((state: RootState) => state.kueDataSlice);
const chartRef = useRef(null);
const [activeButton, setActiveButton] = useState<"Schleife" | "TDR">(
"Schleife"
);
@@ -52,21 +48,17 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
const [loopTitleText, setloopTitleText] = useState(
"Schleifenwiderstand [kOhm]"
);
const [isoDisplayText, setIsoDisplayText] = useState("Aderbruch");
const [groundFaultDisplayText, setGroundFaultDisplayText] =
useState("Erdschluss");
const [loopFaultDisplayText, setLoopFaultDisplayText] =
useState("Schleifenfehler");
const [isoFaultDisplayText, setIsoFaultDisplayText] =
useState("Isolationsfehler");
const [isoGreaterThan200, setIsoGreaterThan200] = useState(">200 MOhm");
const [isoDisplayText] = useState("Aderbruch");
const [groundFaultDisplayText] = useState("Erdschluss");
const [loopFaultDisplayText] = useState("Schleifenfehler");
const [isoFaultDisplayText] = useState("Isolationsfehler");
const [isoGreaterThan200] = useState(">200 MOhm");
const [loading, setLoading] = useState(false);
const [showModal, setShowModal] = useState(false);
const [showChartModal, setShowChartModal] = useState(false);
const [loopMeasurementCurveChartData, setLoopMeasurementCurveChartData] =
useState(null);
// Removed unused loopMeasurementCurveChartData state
//------- Redux-Variablen abrufen--------------------------------
const {
@@ -108,6 +100,9 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
handleOpenChartModal(setShowChartModal, dispatch, slotIndex, activeButton);
const refreshClick = () =>
handleRefreshClick(activeButton, slotIndex, setLoading);
// Create a ref for the chart instance to pass as the second argument
const chartInstance = useRef<Chart | null>(null);
const closeChartModal = () =>
handleCloseChartModal(setShowChartModal, chartInstance);
//----------------------------------
@@ -122,23 +117,20 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
);
const isoDisplayValue = useIsoDisplay(
slotIndex,
kuePSTmMinus96V,
kueCableBreak,
kueGroundFault,
kueAlarm1,
kueAlarm2,
kueOverflow,
isolationswert,
!!kuePSTmMinus96V?.[slotIndex],
!!kueCableBreak?.[slotIndex],
!!kueGroundFault?.[slotIndex],
!!kueAlarm1?.[slotIndex],
!!kueAlarm2?.[slotIndex],
!!kueOverflow?.[slotIndex],
Number(isolationswert),
isoDisplayText,
groundFaultDisplayText,
isoFaultDisplayText,
loopFaultDisplayText,
isoGreaterThan200
);
const { currentModulName, setCurrentModulName } = useModulName(
slotIndex,
modulName
);
const { setCurrentModulName } = useModulName(slotIndex, modulName);
//---------------------------------
//---------------------------------
const tdmChartData = useSelector(
@@ -167,9 +159,8 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
loopValue,
activeButton
);
const zoomPlugin = useChartPlugin();
useChartData(loopMeasurementCurveChartData);
const { chartInstance } = useTDRChart(selectedChartData);
// Removed useChartData(loopMeasurementCurveChartData) as the state was unused
//---------------------------------
@@ -283,8 +274,8 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
), // Hier sicherstellen, dass nur number übergeben wird
Number(schleifenwiderstand), // <- Stelle sicher, dass es eine Zahl ist
tdrLocation,
slotIndex,
dispatch
dispatch,
slotIndex
)
}
className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${

4
components/main/kabelueberwachung/kue705FO/handlers/handleChange.ts
View File

@@ -2,12 +2,12 @@ import { Dispatch, SetStateAction } from "react";
// Funktion zur Änderung der Werte
const handleChange = (
setter: Dispatch<SetStateAction<any[]>>, // Typ für den Setter
setter: Dispatch<SetStateAction<string[]>>, // Typ für den Setter (z.B. string[])
e: React.ChangeEvent<HTMLInputElement>, // Typ für das Event
slot: number // Typ für den Slot
) => {
const value = e.target.value;
setter((prev: any[]) => {
setter((prev: string[]) => {
// Typ für den vorherigen Zustand
const updated = [...prev];
updated[slot] = value;

4
components/main/kabelueberwachung/kue705FO/handlers/handleCloseChartModal.ts
View File

@@ -1,7 +1,9 @@
// components/main/kabelueberwachung/kue705FO/handlers/handleCloseChartModal.ts
import { Chart } from "chart.js";
const handleCloseChartModal = (
setShowChartModal: (value: boolean) => void,
chartInstance: any
chartInstance: React.MutableRefObject<Chart | null>
) => {
if (chartInstance.current) {
console.log("Chart wird beim Schließen des Modals zerstört.");

4
components/main/kabelueberwachung/kue705FO/handlers/handleRefreshClick.ts
View File

@@ -1,7 +1,7 @@
// components/main/kabelueberwachung/kue705FO/handlers/handleRefreshClick.ts
import { Dispatch, SetStateAction } from "react";
import { goLoop } from "../../../../../utils/goLoop";
import { goTDR } from "../../../../../utils/goTDR";
import { goLoop } from "@/utils/goLoop";
import { goTDR } from "@/utils/goTDR";
const handleRefreshClick = (
activeButton: "Schleife" | "TDR",

8
components/main/kabelueberwachung/kue705FO/handlers/handleSave.ts
View File

@@ -32,13 +32,13 @@ export interface HandleSaveParams {
speicherintervall: number[];
};
slot: number;
dispatch: any;
dispatch: import("redux").Dispatch;
onModulNameChange: (id: string) => void;
onClose: () => void;
onFormUpdate?: (updated: any) => void; // Added this property
onFormUpdate?: (updated: Record<string, unknown>) => void; // Specify a more precise type instead of 'any'
}
const isDifferent = (a: any, b: any): boolean => {
const isDifferent = (a: unknown, b: unknown): boolean => {
const aNum = Number(a);
const bNum = Number(b);
if (!isNaN(aNum) && !isNaN(bNum)) {
@@ -62,7 +62,7 @@ const handleSave = async ({
onModulNameChange,
onClose,
}: HandleSaveParams): Promise<void> => {
const changesForFile: Record<string, any> = {};
const changesForFile: Record<string, string | number> = {};
if (isDifferent(ids[slot], originalValues.kueID[slot])) {
changesForFile.KID = ids[slot];

2
components/main/kabelueberwachung/kue705FO/hooks/useChartData.ts
View File

@@ -2,7 +2,7 @@ import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { setSelectedChartData } from "../../../../../redux/slices/selectedChartDataSlice";
const useChartData = (loopMeasurementCurveChartData: any) => {
const useChartData = (loopMeasurementCurveChartData: unknown) => {
const dispatch = useDispatch();
useEffect(() => {

3
components/main/kabelueberwachung/kue705FO/hooks/useChartPlugin.ts
View File

@@ -1,9 +1,10 @@
// components/main/kabelueberwachung/kue705FO/hooks/useChartPlugin.ts
import { useState, useEffect } from "react";
import { Plugin } from "chart.js";
import Chart from "chart.js/auto";
const useChartPlugin = () => {
const [zoomPlugin, setZoomPlugin] = useState<any>(null);
const [zoomPlugin, setZoomPlugin] = useState<Plugin | null>(null);
useEffect(() => {
if (typeof window !== "undefined") {

26
components/main/kabelueberwachung/kue705FO/hooks/useIsoDisplay.ts
View File

@@ -4,13 +4,13 @@ import { getAlarmDisplayText } from "../../../../../utils/alarmUtils";
const useIsoDisplay = (
slotIndex: number,
kuePSTmMinus96V: any,
kueCableBreak: any,
kueGroundFault: any,
kueAlarm1: any,
kueAlarm2: any,
kueOverflow: any,
isolationswert: any,
kuePSTmMinus96V: boolean,
kueCableBreak: boolean,
kueGroundFault: boolean,
kueAlarm1: boolean,
kueAlarm2: boolean,
kueOverflow: boolean,
isolationswert: number,
isoDisplayText: string,
groundFaultDisplayText: string,
isoFaultDisplayText: string,
@@ -25,12 +25,12 @@ const useIsoDisplay = (
setIsoDisplayValue(
getAlarmDisplayText(
slotIndex,
kuePSTmMinus96V,
kueCableBreak,
kueGroundFault,
kueAlarm1,
kueAlarm2,
kueOverflow ?? undefined,
[kuePSTmMinus96V ? 1 : 0],
[kueCableBreak ? 1 : 0],
[kueGroundFault ? 1 : 0],
[kueAlarm1 ? 1 : 0],
[kueAlarm2 ? 1 : 0],
[kueOverflow ? 1 : 0],
isolationswert,
isoDisplayText,
groundFaultDisplayText,

2
components/main/kabelueberwachung/kue705FO/hooks/useKueVersion.ts
View File

@@ -1,7 +1,7 @@
// components/main/kabelueberwachung/kue705FO/hooks/useKueVersion.ts
import { useEffect, useState } from "react";
const useKueVersion = (slotIndex: number, reduxKueVersion: any) => {
const useKueVersion = (slotIndex: number, reduxKueVersion: number[]) => {
const [kueVersion, setKueVersion] = useState("V4.19");
useEffect(() => {

31
components/main/kabelueberwachung/kue705FO/hooks/useTDRChart.ts
View File

@@ -1,27 +1,22 @@
// components/main/kabelueberwachung/kue705FO/hooks/useTDRChart.ts
import { useEffect, useRef } from "react";
import { useState, useEffect } from "react";
import Chart from "chart.js/auto";
import { createTDRChart } from "../../../../../utils/chartUtils";
const useTDRChart = (selectedChartData: any) => {
const chartInstance = useRef<Chart | null>(null);
type ZoomPluginType = { id: string } | null;
const useChartPlugin = () => {
const [zoomPlugin, setZoomPlugin] = useState<ZoomPluginType>(null);
useEffect(() => {
if (selectedChartData) {
createTDRChart(selectedChartData); // Neues Chart erstellen
if (typeof window !== "undefined") {
import("chartjs-plugin-zoom").then((mod) => {
setZoomPlugin(mod.default);
Chart.register(mod.default);
});
}
}, []);
return () => {
// Cleanup beim Komponentenwechsel
if (chartInstance.current) {
console.log("Chart wird beim Komponentenwechsel zerstört.");
chartInstance.current.destroy();
chartInstance.current = null;
}
};
}, [selectedChartData]);
return { chartInstance };
return zoomPlugin;
};
export default useTDRChart;
export default useChartPlugin;

7
components/main/kabelueberwachung/kue705FO/kue705FO-Funktionen/handleButtonClick.ts
View File

@@ -1,9 +1,10 @@
// components/main/kabelueberwachung/kue705FO/kue705FO-Funktionen/handleButtonClick.ts
import { Dispatch } from "react";
import { AppDispatch } from "@/redux/store";
import {
setActiveMode,
setSelectedSlot,
} from "../../../../../redux/slices/kueChartModeSlice";
} from "@/redux/slices/kueChartModeSlice";
const handleButtonClick = (
button: "Schleife" | "TDR",
@@ -12,8 +13,8 @@ const handleButtonClick = (
setLoopDisplayValue: Dispatch<React.SetStateAction<number | string>>,
schleifenwiderstand: number,
tdrLocation: number[] | undefined,
slotIndex: number,
dispatch: Dispatch<any>
dispatch: AppDispatch,
slotIndex: number
) => {
// 🔥 Speichert den gewählten Slot im Redux-Store
dispatch(setSelectedSlot(slotIndex));

2
components/main/kabelueberwachung/kue705FO/modals/Knotenpunkte.tsx
View File

@@ -16,7 +16,7 @@ interface Props {
onClose?: () => void;
}
export default function Knotenpunkte({ slot, onClose }: Props) {
export default function Knotenpunkte({ slot }: Props) {
const [knotenNamen, setKnotenNamen] = useState<string[]>(Array(10).fill(""));
const [linienNamen, setLinienNamen] = useState<string[]>(Array(10).fill(""));
const [linienLaenge, setLinienLaenge] = useState<number[]>(Array(10).fill(0));

4
components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useState, useEffect } from "react";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import type { RootState } from "../../../../../redux/store";
import handleSave from "../handlers/handleSave";
@@ -29,7 +29,7 @@ const memoryIntervalOptions = [
export default function KueEinstellung({
slot,
showModal,
onClose = () => {},
onModulNameChange,
}: Props) {

21
components/main/kabelueberwachung/kue705FO/modals/SettingsModalWrapper.tsx
View File

@@ -12,17 +12,24 @@ interface KueModalProps {
onModulNameChange: (id: string) => void;
}
declare global {
interface Window {
__lastKueTab?: "kue" | "tdr" | "knoten";
kabelModalOpen?: boolean;
}
}
export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
const [activeTab, setActiveTab] = useState<"kue" | "tdr" | "knoten">(() => {
if (typeof window !== "undefined" && (window as any).__lastKueTab) {
return (window as any).__lastKueTab;
if (typeof window !== "undefined" && window.__lastKueTab) {
return window.__lastKueTab;
}
return "kue";
});
useEffect(() => {
if (typeof window !== "undefined") {
(window as any).__lastKueTab = activeTab;
window.__lastKueTab = activeTab;
}
}, [activeTab]);
@@ -68,13 +75,13 @@ export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
<div className="flex justify-start bg-gray-100 space-x-2 p-2">
{[
{ label: "Allgemein", key: "kue" },
{ label: "TDR ", key: "tdr" },
{ label: "Knotenpunkte", key: "knoten" },
{ label: "Allgemein", key: "kue" as const },
{ label: "TDR ", key: "tdr" as const },
{ label: "Knotenpunkte", key: "knoten" as const },
].map(({ label, key }) => (
<button
key={key}
onClick={() => setActiveTab(key as any)}
onClick={() => setActiveTab(key)}
className={`px-4 py-1 rounded-t font-bold text-sm ${
activeTab === key
? "bg-white text-littwin-blue"

10
components/main/kabelueberwachung/kue705FO/modals/TdrEinstellung.tsx
View File

@@ -1,11 +1,17 @@
"use client";
type TdrData = {
daempfung: string;
geschwindigkeit: string;
trigger: string;
};
declare global {
interface Window {
__tdrCache?: Record<string, { data: any; tdrActive: boolean }>;
__tdrCache?: Record<string, { data: TdrData; tdrActive: boolean }>;
}
}
import React, { useState, useEffect } from "react";
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../../../redux/store";