diff --git a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx b/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx index 8e54cd7..3382f4d 100644 --- a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx +++ b/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx @@ -123,7 +123,10 @@ const ChartSwitcher: React.FC = ({ isOpen, onClose }) => { ) : ( <>

TDR-Messung

- + {/* TDR-Chart-Action-Bar */} + {/* */} + + {/* TDR-Chart */}
diff --git a/pages/kabelueberwachung.tsx b/pages/kabelueberwachung.tsx index d53378b..374dfb4 100644 --- a/pages/kabelueberwachung.tsx +++ b/pages/kabelueberwachung.tsx @@ -3,6 +3,7 @@ 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 { fetchAllTDRChartData } from "../redux/thunks/fetchAllTDRChartThunk"; function Kabelueberwachung() { const router = useRouter(); @@ -25,6 +26,21 @@ function Kabelueberwachung() { kueGroundFault, } = useSelector((state) => state.variables); + //---------------------------------------------------------------- + // 🚀 **TDR-Daten bereits in Redux abrufen** + // Redux-Variablen abrufen + const tdrData = useSelector((state) => state.tdrChart.data); + const loading = useSelector((state) => state.tdrChart.loading); + const error = useSelector((state) => state.tdrChart.error); + + // Beim Laden der Seite TDR-Daten abrufen + useEffect(() => { + if (!tdrData || tdrData.length === 0) { + console.log("TDR-Daten abrufen..."); + dispatch(fetchAllTDRChartData()); + } + }, [dispatch, tdrData]); + //---------------------------------------------------------------- // Alarmstatus basierend auf Redux-Variablen berechnen const updateAlarmStatus = () => { const updatedAlarmStatus = kueIso.map((_, index) => { diff --git a/redux/slices/tdrChartSlice.ts b/redux/slices/tdrChartSlice.ts index 2f1ec59..c9b70db 100644 --- a/redux/slices/tdrChartSlice.ts +++ b/redux/slices/tdrChartSlice.ts @@ -1,40 +1,41 @@ +// /redux/slices/tdrChartSlice.ts import { createSlice, PayloadAction } from "@reduxjs/toolkit"; +import { fetchAllTDRChartData } from "../thunks/fetchAllTDRChartThunk"; -// 🔹 State-Interface interface TDRChartState { - dateiListe: string[]; - sortAscending: boolean; - tdrChartData: { t: number; m: number }[]; + data: any[]; + loading: boolean; + error: string | null; } -// 🔹 Anfangsstate const initialState: TDRChartState = { - dateiListe: [], - sortAscending: true, - tdrChartData: [], + data: [], + loading: false, + error: null, }; -// 🔹 Redux Slice const tdrChartSlice = createSlice({ name: "tdrChart", initialState, - reducers: { - setDateiListe: (state, action: PayloadAction) => { - state.dateiListe = action.payload; - }, - toggleSortOrder: (state) => { - state.sortAscending = !state.sortAscending; - state.dateiListe.reverse(); // 🔄 Reihenfolge umkehren - }, - setTDRChartData: ( - state, - action: PayloadAction<{ t: number; m: number }[]> - ) => { - state.tdrChartData = action.payload; - }, + reducers: {}, + extraReducers: (builder) => { + builder + .addCase(fetchAllTDRChartData.pending, (state) => { + state.loading = true; + state.error = null; + }) + .addCase( + fetchAllTDRChartData.fulfilled, + (state, action: PayloadAction) => { + state.loading = false; + state.data = action.payload; // Speichere die neuen Daten in Redux + } + ) + .addCase(fetchAllTDRChartData.rejected, (state, action) => { + state.loading = false; + state.error = action.payload as string | null; + }); }, }); -export const { setDateiListe, toggleSortOrder, setTDRChartData } = - tdrChartSlice.actions; export default tdrChartSlice.reducer; diff --git a/redux/thunks/fetchAllTDRChartThunk.ts b/redux/thunks/fetchAllTDRChartThunk.ts new file mode 100644 index 0000000..59155ad --- /dev/null +++ b/redux/thunks/fetchAllTDRChartThunk.ts @@ -0,0 +1,45 @@ +// /redux/thunks/fetchAllTDRChartThunk.ts +import { createAsyncThunk } from "@reduxjs/toolkit"; +import { RootState } from "../store"; + +const BASE_PATH = "/CPLmockData/LastTDR/jsonDatei"; + +export const fetchAllTDRChartData = createAsyncThunk( + "tdrChart/fetchAllTDRChartData", + async (_, { getState, rejectWithValue }) => { + const state: RootState = getState() as RootState; + const currentData = state.tdrChart.data; // Aktuelle Redux-Daten + + const fileNames = Array.from({ length: 32 }, (_, i) => `slot${i}.json`); + const fetchPromises = fileNames.map(async (fileName) => { + try { + const response = await fetch(`${BASE_PATH}/${fileName}`); + if (!response.ok) + throw new Error(`Fehler bei ${fileName}: ${response.statusText}`); + return await response.json(); + } catch (error) { + console.error(`Fehler beim Laden von ${fileName}:`, error); + return null; + } + }); + + const newData = await Promise.all(fetchPromises); + + console.log("Geladene Daten:", newData); + + // Falls die Daten leer oder identisch sind, aber initial leer waren, trotzdem speichern + if (newData.every((d) => d === null || d === undefined)) { + console.warn("⚠ Keine gültigen Daten empfangen."); + return rejectWithValue("Keine gültigen Daten empfangen."); + } + + if ( + JSON.stringify(currentData) !== JSON.stringify(newData) || + currentData.length === 0 + ) { + return newData; + } else { + return rejectWithValue("Keine Änderungen in den Daten."); + } + } +); diff --git a/services/fetchAllTDRChartData.ts b/services/fetchAllTDRChartData.ts new file mode 100644 index 0000000..153f6a8 --- /dev/null +++ b/services/fetchAllTDRChartData.ts @@ -0,0 +1,34 @@ +// /services/fetchAllTDRChartData.ts +import { Dispatch } from "@reduxjs/toolkit"; +import { setTDRData, selectTDRData } from "../redux/slices/tdrChartSlice"; +import { RootState } from "../redux/store"; + +const BASE_PATH = "/CPLmockData/LastTDR/jsonDatei"; + +export const fetchAllTDRChartData = async ( + dispatch: Dispatch, + getState: () => RootState +) => { + const state = getState(); + const currentData = selectTDRData(state); + + const fileNames = Array.from({ length: 32 }, (_, i) => `json${i}`); + const fetchPromises = fileNames.map(async (fileName) => { + try { + const response = await fetch(`${BASE_PATH}/${fileName}.json`); + if (!response.ok) + throw new Error(`Fehler bei ${fileName}: ${response.statusText}`); + return await response.json(); + } catch (error) { + console.error(`Fehler beim Laden von ${fileName}:`, error); + return null; + } + }); + + const newData = await Promise.all(fetchPromises); + + // Nur aktualisieren, wenn sich die Daten geändert haben + if (JSON.stringify(currentData) !== JSON.stringify(newData)) { + dispatch(setTDRData(newData)); + } +}; diff --git a/services/fetchTDRChartData.ts b/services/fetchTDRChartData.ts new file mode 100644 index 0000000..8e98413 --- /dev/null +++ b/services/fetchTDRChartData.ts @@ -0,0 +1,33 @@ +// /services/fetchTDRChartData.ts + +export const fetchTDRChartData = async ( + selectedFileName: string | null +): Promise => { + if (!selectedFileName) { + console.error("Kein Dateiname in Redux gespeichert."); + return null; + } + + const yearFolder = `Year_${new Date().getFullYear().toString().slice(-2)}`; + const monthFolder = `Month_${(new Date().getMonth() + 1) + .toString() + .padStart(2, "0")}`; + + // const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${selectedFileName}`; + const filePath = `/CPLmockData/LastTDR/jsonDatei/${selectedFileName}`; + + try { + const response = await fetch(filePath); + if (!response.ok) { + throw new Error( + `Fehler beim Laden der TDR-Daten: ${response.statusText}` + ); + } + const data = await response.json(); + console.log("Geladene TDR-Daten:", data); + return data; + } catch (error) { + console.error("Fehler beim Laden der TDR-Daten:", error); + return null; + } +}; diff --git a/utils/loadTDRChartData.ts b/utils/loadTDRChartData.ts index e171d22..9039215 100644 --- a/utils/loadTDRChartData.ts +++ b/utils/loadTDRChartData.ts @@ -1,3 +1,4 @@ +// /utils/loadTDRChartData.ts import { createTDRChart } from "./chartUtils"; export const loadTDRChartData = ( @@ -14,7 +15,8 @@ export const loadTDRChartData = ( .toString() .padStart(2, "0")}`; - const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${selectedFileName}`; + //const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${selectedFileName}`; + const filePath = `/CPLmockData/LastTDR/jsonDatei/${selectedFileName}`; fetch(filePath) .then((response) => response.json())