feat: Redux-Integration für TDR-Daten verbessert
- TDR-Daten werden jetzt beim Laden der Kabelüberwachungsseite automatisch abgerufen. - Fehler im Thunk behoben: Initial leere `tdrChart.data` wird nun korrekt aktualisiert. - Überprüfung, ob neue Daten vorhanden sind, verbessert (keine unnötige Ablehnung bei Erstabruf). - Korrekte JSON-Datei-Pfade (`slot0.json` bis `slot31.json`) in Fetch-Requests implementiert. - Redux-Error-Handling optimiert: Falls keine gültigen Daten geladen werden, wird eine Meldung angezeigt. - Logging für geladene Daten hinzugefügt, um die Debugging-Möglichkeiten zu verbessern. - `fetchAllTDRChartData.ts` als überflüssige Datei entfernt (Thunks übernehmen jetzt den Abruf). - `kabelueberwachung.tsx` so angepasst, dass der Chart sofort mit geladenen Daten arbeitet.
This commit is contained in:
@@ -123,7 +123,10 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
|
||||
) : (
|
||||
<>
|
||||
<h3 className="text-lg font-semibold">TDR-Messung</h3>
|
||||
<TDRChartActionBar />
|
||||
{/* TDR-Chart-Action-Bar */}
|
||||
{/* <TDRChartActionBar /> */}
|
||||
|
||||
{/* TDR-Chart */}
|
||||
<div style={{ flex: 1, height: "90%" }}>
|
||||
<TDRChart />
|
||||
</div>
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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<string[]>) => {
|
||||
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<any[]>) => {
|
||||
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;
|
||||
|
||||
45
redux/thunks/fetchAllTDRChartThunk.ts
Normal file
45
redux/thunks/fetchAllTDRChartThunk.ts
Normal file
@@ -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.");
|
||||
}
|
||||
}
|
||||
);
|
||||
34
services/fetchAllTDRChartData.ts
Normal file
34
services/fetchAllTDRChartData.ts
Normal file
@@ -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));
|
||||
}
|
||||
};
|
||||
33
services/fetchTDRChartData.ts
Normal file
33
services/fetchTDRChartData.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
// /services/fetchTDRChartData.ts
|
||||
|
||||
export const fetchTDRChartData = async (
|
||||
selectedFileName: string | null
|
||||
): Promise<any | null> => {
|
||||
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;
|
||||
}
|
||||
};
|
||||
@@ -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())
|
||||
|
||||
Reference in New Issue
Block a user