From 4e459a7f36baa45ee39f9ac30d263f20b9e37bc2 Mon Sep 17 00:00:00 2001 From: ISA Date: Thu, 27 Mar 2025 14:55:06 +0100 Subject: [PATCH] refactor: TDR-Daten in neuen tdrSingleChartSlice ausgelagert und nur pro Slot geladen - Globalen fetchAllTDRChartData entfernt - Neuen Slice und Thunk pro Slot erstellt - TDRChart liest initiale Daten aus neuem Slice --- .../kue705FO/Charts/ChartSwitcher.tsx | 15 ++++++ .../kue705FO/Charts/TDRChart/TDRChart.tsx | 16 +++--- config/webVersion.ts | 2 +- redux/slices/tdrSingleChartSlice.ts | 53 +++++++++++++++++++ redux/store.ts | 2 + redux/thunks/fetchTDMDataBySlotThunk.ts | 15 ++++++ redux/thunks/fetchTDRChartDataBySlotThunk.ts | 13 +++++ services/fetchSingleTDMData.ts | 20 +++++++ services/fetchSingleTDRChartData.ts | 20 +++++++ 9 files changed, 146 insertions(+), 10 deletions(-) create mode 100644 redux/slices/tdrSingleChartSlice.ts create mode 100644 redux/thunks/fetchTDMDataBySlotThunk.ts create mode 100644 redux/thunks/fetchTDRChartDataBySlotThunk.ts create mode 100644 services/fetchSingleTDMData.ts create mode 100644 services/fetchSingleTDRChartData.ts diff --git a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx b/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx index a020a71..117a854 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx @@ -19,6 +19,8 @@ import { } from "../../../../../redux/slices/tdrChartSlice"; import { resetBrushRange } from "../../../../../redux/slices/brushSlice"; import { fetchAllTDRChartData } from "../../../../../redux/thunks/fetchAllTDRChartThunk"; +import { fetchTDMDataBySlotThunk } from "../../../../../redux/thunks/fetchTDMDataBySlotThunk"; +import { fetchTDRChartDataBySlotThunk } from "../../../../../redux/thunks/fetchTDRChartDataBySlotThunk"; interface ChartSwitcherProps { isOpen: boolean; @@ -71,6 +73,19 @@ const ChartSwitcher: React.FC = ({ return () => clearInterval(interval); // Cleanup, wenn Komponente entladen wird }, [dispatch]); //------------------------------------- + useEffect(() => { + if (slotIndex !== null) { + dispatch(fetchTDMDataBySlotThunk(slotIndex)); + } + }, [slotIndex]); + + //------------------------------------- + useEffect(() => { + if (slotIndex !== null) { + dispatch(fetchTDRChartDataBySlotThunk(slotIndex)); + } + }, [slotIndex]); + //------------------------------------- return ( = ({ isFullScreen }) => { const dispatch = useDispatch(); - useEffect(() => { - dispatch(fetchAllTDRChartData()); - dispatch(fetchAllTDRReferenceChartThunk()); - }, [dispatch]); //--------------------------------- const chartRef = useRef(null); const chartInstance = useRef(null); @@ -36,10 +32,13 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => { const tdrDataById = useSelector( (state: RootState) => state.tdrDataById.dataById ); - const tdrInitialData = useSelector((state: RootState) => - selectedSlot !== null ? state.tdrChart.data[selectedSlot] || [] : [] + //-------------------------------- + const tdrDataBySlot = useSelector( + (state: RootState) => state.tdrSingleChart.data ); - + const tdrInitialData = + selectedSlot !== null ? tdrDataBySlot[selectedSlot] ?? [] : []; + //-------------------------------- // Kombinierte Logik: ID hat Vorrang, sonst Initial-Daten für Slot const tdrChartData = useMemo(() => { if (selectedId !== null && tdrDataById[selectedId]) { @@ -190,7 +189,6 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => { }); }, [JSON.stringify(tdrChartData), selectedSlot, selectedChartType]); - return (
diff --git a/config/webVersion.ts b/config/webVersion.ts index 82ce4a3..1fe5477 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.178"; +const webVersion = "1.6.179"; export default webVersion; diff --git a/redux/slices/tdrSingleChartSlice.ts b/redux/slices/tdrSingleChartSlice.ts new file mode 100644 index 0000000..d7922da --- /dev/null +++ b/redux/slices/tdrSingleChartSlice.ts @@ -0,0 +1,53 @@ +// redux/slices/tdrSingleChartSlice.ts + +import { createSlice, PayloadAction } from "@reduxjs/toolkit"; +import { fetchTDRChartDataBySlotThunk } from "../thunks/fetchTDRChartDataBySlotThunk"; + +interface TDRSlotData { + [slot: number]: { d: number; p: number }[]; +} + +interface TdrSingleChartState { + data: TDRSlotData; + loading: boolean; + error: string | null; +} + +const initialState: TdrSingleChartState = { + data: {}, + loading: false, + error: null, +}; + +const tdrSingleChartSlice = createSlice({ + name: "tdrSingleChart", + initialState, + reducers: {}, + extraReducers: (builder) => { + builder + .addCase(fetchTDRChartDataBySlotThunk.pending, (state) => { + state.loading = true; + state.error = null; + }) + .addCase( + fetchTDRChartDataBySlotThunk.fulfilled, + ( + state, + action: PayloadAction<{ + slot: number; + data: { d: number; p: number }[]; + }> + ) => { + const { slot, data } = action.payload; + state.data[slot] = data; + state.loading = false; + } + ) + .addCase(fetchTDRChartDataBySlotThunk.rejected, (state, action) => { + state.loading = false; + state.error = action.error.message ?? "Fehler beim Laden"; + }); + }, +}); + +export default tdrSingleChartSlice.reducer; diff --git a/redux/store.ts b/redux/store.ts index 6d3c18a..5664277 100644 --- a/redux/store.ts +++ b/redux/store.ts @@ -19,6 +19,7 @@ import tdmChartReducer from "./slices/tdmChartSlice"; import tdrDataByIdReducer from "./slices/tdrDataByIdSlice"; import kueDataReducer from "./slices/kueDataSlice"; import selectedChartDataReducer from "./slices/selectedChartDataSlice"; +import tdrSingleChartReducer from "./slices/tdrSingleChartSlice"; const store = configureStore({ reducer: { @@ -40,6 +41,7 @@ const store = configureStore({ tdrDataById: tdrDataByIdReducer, kueData: kueDataReducer, selectedChartData: selectedChartDataReducer, + tdrSingleChart: tdrSingleChartReducer, }, }); diff --git a/redux/thunks/fetchTDMDataBySlotThunk.ts b/redux/thunks/fetchTDMDataBySlotThunk.ts new file mode 100644 index 0000000..0e28c63 --- /dev/null +++ b/redux/thunks/fetchTDMDataBySlotThunk.ts @@ -0,0 +1,15 @@ +// /redux/thunks/fetchTDMDataBySlotThunk.ts + +import { createAsyncThunk } from "@reduxjs/toolkit"; +import { fetchTDMDataBySlot } from "../../services/fetchSingleTDMData"; +import { setLoopMeasurementCurveChartData } from "../slices/kabelueberwachungChartSlice"; + +export const fetchTDMDataBySlotThunk = createAsyncThunk( + "tdmChart/fetchSlotData", + async (slot: number, { dispatch }) => { + const data = await fetchTDMDataBySlot(slot); + if (data) { + dispatch(setLoopMeasurementCurveChartData(data)); + } + } +); diff --git a/redux/thunks/fetchTDRChartDataBySlotThunk.ts b/redux/thunks/fetchTDRChartDataBySlotThunk.ts new file mode 100644 index 0000000..cce0db0 --- /dev/null +++ b/redux/thunks/fetchTDRChartDataBySlotThunk.ts @@ -0,0 +1,13 @@ +// /redux/thunks/fetchTDRChartDataBySlotThunk.ts + +import { createAsyncThunk } from "@reduxjs/toolkit"; +import { fetchTDRChartDataBySlot } from "../../services/fetchSingleTDRChartData"; + +export const fetchTDRChartDataBySlotThunk = createAsyncThunk( + "tdrChart/fetchSlotData", + async (slot: number) => { + const data = await fetchTDRChartDataBySlot(slot); + if (!data) throw new Error(`Daten für Slot ${slot} nicht gefunden`); + return { slot, data }; + } +); diff --git a/services/fetchSingleTDMData.ts b/services/fetchSingleTDMData.ts new file mode 100644 index 0000000..77fbad9 --- /dev/null +++ b/services/fetchSingleTDMData.ts @@ -0,0 +1,20 @@ +// /services/fetchSingleTDMData.ts + +export const fetchTDMDataBySlot = async (slot: number): Promise => { + if (typeof window === "undefined") return null; + + const isDev = process.env.NEXT_PUBLIC_NODE_ENV === "development"; + + const url = isDev + ? `/CPLmockData/TDM/slot${slot}.json` + : `${window.location.origin}/CPL?Service/empty.acp&TDM=${slot}`; + + try { + const res = await fetch(url); + if (!res.ok) throw new Error(`HTTP ${res.status}`); + return await res.json(); + } catch (error) { + console.error(`❌ Fehler beim Laden von Slot ${slot}:`, error); + return null; + } +}; diff --git a/services/fetchSingleTDRChartData.ts b/services/fetchSingleTDRChartData.ts new file mode 100644 index 0000000..f5ebe2e --- /dev/null +++ b/services/fetchSingleTDRChartData.ts @@ -0,0 +1,20 @@ +// /services/fetchSingleTDRChartData.ts + +export const fetchTDRChartDataBySlot = async ( + slot: number +): Promise => { + const isDev = process.env.NEXT_PUBLIC_NODE_ENV === "development"; + + const url = isDev + ? `/CPLmockData/LastTDR/jsonDatei/slot${slot}.json` + : `${window.location.origin}/CPL?/CPL/LastTDR/slot${slot}.json`; + + try { + const response = await fetch(url); + if (!response.ok) throw new Error(`HTTP ${response.status}`); + return await response.json(); + } catch (error) { + console.error(`❌ Fehler beim Laden von slot${slot}:`, error); + return null; + } +};