From 9b5a502ab68e362f0a51a66340d95c787bafebe0 Mon Sep 17 00:00:00 2001 From: Ismail Ali Date: Sat, 22 Feb 2025 16:57:40 +0100 Subject: [PATCH] =?UTF-8?q?tdrChartData=20und=20loopMeasurementCurveChartD?= =?UTF-8?q?ata=20in=20einem=20Redux=20Slice=20kabelueberwachung=20f=C3=BCr?= =?UTF-8?q?=20bessere=20Struktur?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../kue705FO/Charts/TDRChart/TDRChart.tsx | 10 ++--- .../Charts/TDRChart/TDRChartActionBar.tsx | 13 +++--- config/webVersion.ts | 2 +- redux/slices/kabelueberwachungChartSlice.ts | 41 ++++++++++++++++--- redux/slices/tdrChartDataSlice.ts | 26 ------------ redux/store.ts | 2 - 6 files changed, 46 insertions(+), 48 deletions(-) delete mode 100644 redux/slices/tdrChartDataSlice.ts diff --git a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx index ab88f1d..0af1c2a 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx @@ -9,8 +9,8 @@ const TDRChart: React.FC = () => { const chartInstance = useRef(null); // TDR-Daten aus dem Redux Store selektieren - const loopMeasurementCurveChartData = useSelector( - (state: any) => state.tdrChartData.data + const tdrChartData = useSelector( + (state: any) => state.kabelueberwachungChart.tdrChartData ); useEffect(() => { @@ -18,7 +18,7 @@ const TDRChart: React.FC = () => { import("chartjs-plugin-zoom").then((zoomPlugin) => { Chart.register(...registerables, zoomPlugin.default); - if (chartRef.current && loopMeasurementCurveChartData.length > 0) { + if (chartRef.current && tdrChartData.length > 0) { if (chartInstance.current) { chartInstance.current.destroy(); } @@ -31,7 +31,7 @@ const TDRChart: React.FC = () => { datasets: [ { label: "TDR Entfernung (km)", - data: loopMeasurementCurveChartData, + data: tdrChartData, borderColor: "rgba(255, 99, 132, 1)", backgroundColor: "rgba(255, 99, 132, 0.2)", tension: 0.1, @@ -82,7 +82,7 @@ const TDRChart: React.FC = () => { } } }); - }, [loopMeasurementCurveChartData]); + }, [tdrChartData]); return (
diff --git a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx index 5f7216f..67e4d6a 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx @@ -1,11 +1,7 @@ // /components/modules/kue705FO/charts/TDRChart/TDRChartActionBar.tsx import React, { useState, useEffect, useRef } from "react"; -import DateRangePicker from "../DateRangePicker"; -import TDRChart from "../../../../kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart"; -import { setLoopMeasurementCurveChartData } from "../../../../../../redux/slices/chartDataSlice"; -import { parseISO } from "date-fns"; import { useDispatch } from "react-redux"; -import { setTDRChartData } from "../../../../../../redux/slices/tdrChartDataSlice"; +import { setTDRChartData } from "../../../../../../redux/slices/kabelueberwachungChartSlice"; const TDRChartActionBar: React.FC = () => { const dispatch = useDispatch(); @@ -101,8 +97,9 @@ const TDRChartActionBar: React.FC = () => { const chartRef = useRef(null); // Zustand für die Chart-Daten - const [loopMeasurementCurveChartData, setLoopMeasurementCurveChartData] = - useState<{ timestamp: string; tdr: number }[]>([]); + const [tdrChartData, settdrChartData] = useState< + { timestamp: string; tdr: number }[] + >([]); useEffect(() => { // Aktuelles Jahr und Monat ermitteln @@ -126,7 +123,7 @@ const TDRChartActionBar: React.FC = () => { }) .then((data) => { // Annahme: data ist ein Array von Objekten mit den Eigenschaften 'timestamp' und 'tdr' - setLoopMeasurementCurveChartData(data); + settdrChartData(data); }) .catch((error) => { console.error("Fehler beim Abrufen der Daten:", error); diff --git a/config/webVersion.ts b/config/webVersion.ts index 57c4e08..034a385 100644 --- a/config/webVersion.ts +++ b/config/webVersion.ts @@ -6,5 +6,5 @@ 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen). */ -const webVersion = "1.6.88"; +const webVersion = "1.6.89"; export default webVersion; diff --git a/redux/slices/kabelueberwachungChartSlice.ts b/redux/slices/kabelueberwachungChartSlice.ts index 6a05b90..a84a222 100644 --- a/redux/slices/kabelueberwachungChartSlice.ts +++ b/redux/slices/kabelueberwachungChartSlice.ts @@ -1,5 +1,14 @@ +// redux/slices/kabelueberwachungChartSlice.ts + import { createSlice, PayloadAction } from "@reduxjs/toolkit"; +// Definition des Interface für den Zustand des TDR-Charts +interface TDRData { + timestamp: string; + tdr: number; +} + +// Definition des Interface für den gesamten Zustand der Kabelüberwachung interface KabelueberwachungChartState { loopMeasurementCurveChartData: any[]; vonDatum: string; @@ -7,9 +16,11 @@ interface KabelueberwachungChartState { selectedMode: "DIA0" | "DIA1" | "DIA2"; selectedSlotType: "isolationswiderstand" | "schleifenwiderstand"; isChartOpen: boolean; - slotNumber: number | null; // NEU: Slot-Nummer speichern + slotNumber: number | null; + tdrChartData: TDRData[]; // Hinzufügen des TDR-Datenzustands } +// Initialer Zustand des Slices const initialState: KabelueberwachungChartState = { loopMeasurementCurveChartData: [], vonDatum: "2025-02-01", @@ -17,52 +28,70 @@ const initialState: KabelueberwachungChartState = { selectedMode: "DIA0", selectedSlotType: "schleifenwiderstand", isChartOpen: false, - slotNumber: null, // Standard: Kein Slot gewählt + slotNumber: null, + tdrChartData: [], // Initialisierung mit leerem Array }; +// Erstellung des Slices const kabelueberwachungChartSlice = createSlice({ name: "kabelueberwachungChart", initialState, reducers: { + // Aktion zum Setzen der Slot-Nummer setSlotNumber: (state, action: PayloadAction) => { state.slotNumber = action.payload; }, + // Aktion zum Setzen der Schleifenmesskurven-Daten setLoopMeasurementCurveChartData: (state, action: PayloadAction) => { state.loopMeasurementCurveChartData = action.payload; }, + // Aktion zum Setzen des Startdatums setVonDatum: (state, action: PayloadAction) => { - state.vonDatum = action.payload.replace(/-/g, ";"); // Speichert als "YYYY;MM;DD" + state.vonDatum = action.payload.replace(/-/g, ";"); }, + // Aktion zum Setzen des Enddatums setBisDatum: (state, action: PayloadAction) => { - state.bisDatum = action.payload.replace(/-/g, ";"); // Speichert als "YYYY;MM;DD" + state.bisDatum = action.payload.replace(/-/g, ";"); }, - + // Aktion zum Setzen des ausgewählten Modus setSelectedMode: ( state, action: PayloadAction<"DIA0" | "DIA1" | "DIA2"> ) => { state.selectedMode = action.payload; }, + // Aktion zum Setzen des ausgewählten Slot-Typs setSelectedSlotType: ( state, action: PayloadAction<"isolationswiderstand" | "schleifenwiderstand"> ) => { state.selectedSlotType = action.payload; }, + // Aktion zum Öffnen oder Schließen des Charts setChartOpen: (state, action: PayloadAction) => { state.isChartOpen = action.payload; }, + // Aktion zum Setzen der TDR-Charts-Daten + setTDRChartData: ( + state, + action: PayloadAction<{ timestamp: string; tdr: number }[]> + ) => { + state.tdrChartData = action.payload; + }, }, }); +// Export der Aktionen export const { + setSlotNumber, setLoopMeasurementCurveChartData, setVonDatum, setBisDatum, setSelectedMode, setSelectedSlotType, setChartOpen, - setSlotNumber, // NEU: Action für Slot-Nummer exportieren + setTDRChartData, } = kabelueberwachungChartSlice.actions; +// Export des Reducers export default kabelueberwachungChartSlice.reducer; diff --git a/redux/slices/tdrChartDataSlice.ts b/redux/slices/tdrChartDataSlice.ts deleted file mode 100644 index 210bdb5..0000000 --- a/redux/slices/tdrChartDataSlice.ts +++ /dev/null @@ -1,26 +0,0 @@ -// redux/slices/tdrChartDataSlice.ts -import { createSlice, PayloadAction } from "@reduxjs/toolkit"; - -interface TDRChartDataState { - data: { timestamp: string; tdr: number }[]; -} - -const initialState: TDRChartDataState = { - data: [], -}; - -const tdrChartDataSlice = createSlice({ - name: "tdrChartData", - initialState, - reducers: { - setTDRChartData( - state, - action: PayloadAction<{ timestamp: string; tdr: number }[]> - ) { - state.data = action.payload; - }, - }, -}); - -export const { setTDRChartData } = tdrChartDataSlice.actions; -export default tdrChartDataSlice.reducer; diff --git a/redux/store.ts b/redux/store.ts index a8ab442..c242a15 100644 --- a/redux/store.ts +++ b/redux/store.ts @@ -6,7 +6,6 @@ import chartDataReducer from "./slices/chartDataSlice"; import webVersionReducer from "./slices/webVersionSlice"; import digitalInputsReducer from "./slices/digitalInputsSlice"; import kabelueberwachungChartReducer from "./slices/kabelueberwachungChartSlice"; -import tdrChartDataReducer from "./slices/tdrChartDataSlice"; const store = configureStore({ reducer: { @@ -16,7 +15,6 @@ const store = configureStore({ webVersion: webVersionReducer, digitalInputs: digitalInputsReducer, kabelueberwachungChart: kabelueberwachungChartReducer, - tdrChartData: tdrChartDataReducer, }, });