From 44db20a8714383be505a109ed061d06f01a663b0 Mon Sep 17 00:00:00 2001 From: Ismail Ali Date: Sun, 23 Mar 2025 18:07:00 +0100 Subject: [PATCH] =?UTF-8?q?feat:=20Redux-Struktur=20f=C3=BCr=20LoopChart?= =?UTF-8?q?=20vereinheitlicht=20(DIA0=E2=80=932=20+=20Typ=203/4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Alle Schleifen- und Isolationswiderstandsdaten werden zentral in loopChart.data gespeichert - Redux State unterstützt nun strukturierte Speicherung nach mode (DIA0–DIA2) und type (3/4) - Bestehender Thunk fetchLoopChartDataThunk wurde angepasst zur Wiederverwendung - Zugriff aus Komponente via loopData["DIAx"][type] möglich --- config/webVersion.ts | 2 +- pages/kabelueberwachung.tsx | 36 +++++++++++++++++-- redux/slices/loopChartSlice.ts | 48 +++++++++++++++++++++++++ redux/store.ts | 2 ++ redux/thunks/fetchLoopChartDataThunk.ts | 35 ++++++++++++++++++ services/fetchAnalogeEingaenge.ts | 2 +- services/fetchDigitaleEingaenge.ts | 2 +- 7 files changed, 122 insertions(+), 5 deletions(-) create mode 100644 redux/slices/loopChartSlice.ts create mode 100644 redux/thunks/fetchLoopChartDataThunk.ts diff --git a/config/webVersion.ts b/config/webVersion.ts index 5dd4ce6..268bf7d 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.148"; +const webVersion = "1.6.149"; export default webVersion; diff --git a/pages/kabelueberwachung.tsx b/pages/kabelueberwachung.tsx index 7262c6d..58d0739 100644 --- a/pages/kabelueberwachung.tsx +++ b/pages/kabelueberwachung.tsx @@ -3,12 +3,14 @@ import React, { useState, useEffect } from "react"; import { useRouter, useSearchParams } from "next/navigation"; import Kue705FO from "../components/main/kabelueberwachung/kue705FO/Kue705FO"; import { useDispatch, useSelector } from "react-redux"; +import { AppDispatch } from "../redux/store"; // Adjust the path to your Redux store file +import { RootState } from "../redux/store"; // Adjust the path to your Redux store file import { fetchAllTDRChartData } from "../redux/thunks/fetchAllTDRChartThunk"; import { fetchAllTDRReferenceChartThunk } from "../redux/thunks/fetchAllTDRReferenceChartThunk"; +import { fetchLoopChartDataThunk } from "../redux/thunks/fetchLoopChartDataThunk"; function Kabelueberwachung() { - const router = useRouter(); - const dispatch = useDispatch(); + const dispatch: AppDispatch = useDispatch(); const searchParams = useSearchParams(); // URL-Parameter holen const initialRack = parseInt(searchParams.get("rack")) || 1; // Rack-Nummer aus URL oder 1 @@ -112,6 +114,36 @@ function Kabelueberwachung() { ); */ }, [activeRack, racks]); + //----------------------------------------------------------- + const { + data: loopData, + loading: loopLoading, + error: loopError, + } = useSelector((state: RootState) => state.loopChart); + + // Daten für alle Kombinationen laden (z. B. Slot 1 als Beispiel) + useEffect(() => { + ["DIA0", "DIA1", "DIA2"].forEach((mode) => { + [3, 4].forEach((type) => { + dispatch( + fetchLoopChartDataThunk({ + mode: mode as "DIA0" | "DIA1" | "DIA2", + type, + slotNumber: 1, + vonDatum: "2025-03-20", + bisDatum: "2025-03-23", + }) + ); + }); + }); + }, [dispatch]); + + // Zugriff z. B. auf Schleifenwiderstand von DIA1 + const dia1Schleifen = loopData["DIA1"]?.[4]; + const dia0Iso = loopData["DIA0"]?.[3]; + + //------------------------------------------------------------ + return (

Kabelüberwachung

diff --git a/redux/slices/loopChartSlice.ts b/redux/slices/loopChartSlice.ts new file mode 100644 index 0000000..671810f --- /dev/null +++ b/redux/slices/loopChartSlice.ts @@ -0,0 +1,48 @@ +// /redux/slices/loopChartSlice.ts +import { createSlice } from "@reduxjs/toolkit"; +import { fetchLoopChartDataThunk } from "../thunks/fetchLoopChartDataThunk"; + +interface ChartData { + [mode: string]: { + [type: number]: any; + }; +} + +interface LoopChartState { + data: ChartData; + loading: boolean; + error: string | null; +} + +const initialState: LoopChartState = { + data: {}, + loading: false, + error: null, +}; + +const loopChartSlice = createSlice({ + name: "loopChart", + initialState, + reducers: {}, + extraReducers: (builder) => { + builder + .addCase(fetchLoopChartDataThunk.pending, (state) => { + state.loading = true; + state.error = null; + }) + .addCase(fetchLoopChartDataThunk.fulfilled, (state, action) => { + state.loading = false; + const { mode, type } = action.meta.arg; + if (!state.data[mode]) { + state.data[mode] = {}; + } + state.data[mode][type] = action.payload; + }) + .addCase(fetchLoopChartDataThunk.rejected, (state, action) => { + state.loading = false; + state.error = action.payload as string; + }); + }, +}); + +export default loopChartSlice.reducer; diff --git a/redux/store.ts b/redux/store.ts index 3787a49..5e85bef 100644 --- a/redux/store.ts +++ b/redux/store.ts @@ -15,6 +15,7 @@ import tdrChartReducer from "./slices/tdrChartSlice"; import analogeEingaengeReducer from "./slices/analogeEingaengeSlice"; import digitalInputsReducer from "./slices/digitalInputsSlice"; import tdrReferenceChartReducer from "./slices/tdrReferenceChartSlice"; +import loopChartReducer from "./slices/loopChartSlice"; const store = configureStore({ reducer: { @@ -32,6 +33,7 @@ const store = configureStore({ brush: brushReducer, tdrChart: tdrChartReducer, tdrReferenceChart: tdrReferenceChartReducer, + loopChart: loopChartReducer, }, }); diff --git a/redux/thunks/fetchLoopChartDataThunk.ts b/redux/thunks/fetchLoopChartDataThunk.ts new file mode 100644 index 0000000..fbf5d68 --- /dev/null +++ b/redux/thunks/fetchLoopChartDataThunk.ts @@ -0,0 +1,35 @@ +// /redux/thunks/fetchLoopChartDataThunk.ts +import { createAsyncThunk } from "@reduxjs/toolkit"; +import { fetchLoopChartData } from "../../services/fetchLoopChartData"; + +interface FetchLoopChartDataParams { + mode: "DIA0" | "DIA1" | "DIA2"; + type: number; + slotNumber: number; + vonDatum: string; + bisDatum: string; +} + +export const fetchLoopChartDataThunk = createAsyncThunk( + "loopChart/fetchLoopChartData", + async (params: FetchLoopChartDataParams, { rejectWithValue }) => { + try { + const data = await fetchLoopChartData( + params.mode, + params.type, + params.slotNumber, + params.vonDatum, + params.bisDatum + ); + + if (!data) { + return rejectWithValue("Keine Daten erhalten"); + } + + return data; + } catch (error: any) { + console.error("❌ Fehler in fetchLoopChartDataThunk:", error); + return rejectWithValue(error.message || "Unbekannter Fehler"); + } + } +); diff --git a/services/fetchAnalogeEingaenge.ts b/services/fetchAnalogeEingaenge.ts index 4a116bc..ae93f37 100644 --- a/services/fetchAnalogeEingaenge.ts +++ b/services/fetchAnalogeEingaenge.ts @@ -10,7 +10,7 @@ const getApiUrl = () => { return process.env.NODE_ENV === "development" ? `${window.location.origin}/CPLmockData/SERVICE/ae.js` - : `${window.location.origin}/CPL/SERVICE/ae.js`; + : `${window.location.origin}/CPL?/CPL/SERVICE/ae.js`; }; /** diff --git a/services/fetchDigitaleEingaenge.ts b/services/fetchDigitaleEingaenge.ts index 2a736ec..7768723 100644 --- a/services/fetchDigitaleEingaenge.ts +++ b/services/fetchDigitaleEingaenge.ts @@ -9,7 +9,7 @@ const getApiUrl = () => { return process.env.NODE_ENV === "development" ? `${window.location.origin}/CPLmockData/SERVICE/de.js` - : `${window.location.origin}/CPL/SERVICE/de.js`; + : `${window.location.origin}/CPL?/CPL/SERVICE/de.js`; }; /**