refactor: lade TDM-Liste nur im TDR-Modus über TDRChartActionBar
- fetchTDMDataBySlotThunk aus ChartSwitcher entfernt - TDM-Daten werden jetzt gezielt im TDR-Kontext geladen - Vermeidet Konflikte mit Schleifenmodus und spart Ressourcen
This commit is contained in:
@@ -18,7 +18,7 @@ import {
|
|||||||
setSelectedChartType,
|
setSelectedChartType,
|
||||||
} from "../../../../../redux/slices/tdrChartSlice";
|
} from "../../../../../redux/slices/tdrChartSlice";
|
||||||
import { resetBrushRange } from "../../../../../redux/slices/brushSlice";
|
import { resetBrushRange } from "../../../../../redux/slices/brushSlice";
|
||||||
import { fetchAllTDRChartData } from "../../../../../redux/thunks/fetchAllTDRChartThunk";
|
//import { fetchAllTDRChartData } from "../../../../../redux/thunks/fetchAllTDRChartThunk";
|
||||||
import { fetchTDMDataBySlotThunk } from "../../../../../redux/thunks/fetchTDMDataBySlotThunk";
|
import { fetchTDMDataBySlotThunk } from "../../../../../redux/thunks/fetchTDMDataBySlotThunk";
|
||||||
import { fetchTDRChartDataBySlotThunk } from "../../../../../redux/thunks/fetchTDRChartDataBySlotThunk";
|
import { fetchTDRChartDataBySlotThunk } from "../../../../../redux/thunks/fetchTDRChartDataBySlotThunk";
|
||||||
|
|
||||||
@@ -64,20 +64,15 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({
|
|||||||
//-------------------------------------
|
//-------------------------------------
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
dispatch(fetchAllTDRChartData()); // Erstes Laden
|
//dispatch(fetchAllTDRChartData()); // Erstes Laden
|
||||||
|
|
||||||
const interval = setInterval(() => {
|
const interval = setInterval(() => {
|
||||||
dispatch(fetchAllTDRChartData());
|
//dispatch(fetchAllTDRChartData());
|
||||||
}, 10000); // Alle 10 Sekunden neue Daten abrufen
|
}, 10000); // Alle 10 Sekunden neue Daten abrufen
|
||||||
|
|
||||||
return () => clearInterval(interval); // Cleanup, wenn Komponente entladen wird
|
return () => clearInterval(interval); // Cleanup, wenn Komponente entladen wird
|
||||||
}, [dispatch]);
|
}, [dispatch]);
|
||||||
//-------------------------------------
|
//-------------------------------------
|
||||||
useEffect(() => {
|
|
||||||
if (slotIndex !== null) {
|
|
||||||
dispatch(fetchTDMDataBySlotThunk(slotIndex));
|
|
||||||
}
|
|
||||||
}, [slotIndex]);
|
|
||||||
|
|
||||||
//-------------------------------------
|
//-------------------------------------
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
@@ -1,15 +1,18 @@
|
|||||||
// /components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
|
// /components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
|
||||||
import React, { useState } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { useDispatch, useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
import { useAppDispatch } from "../../../../../../redux/store";
|
||||||
|
|
||||||
import { RootState } from "../../../../../../redux/store";
|
import { RootState } from "../../../../../../redux/store";
|
||||||
import { fetchTDRChartDataById } from "../../../../../../services/fetchTDRChartDataById";
|
import { fetchTDRChartDataById } from "../../../../../../services/fetchTDRChartDataById";
|
||||||
import {
|
import {
|
||||||
setTDRChartDataById,
|
setTDRChartDataById,
|
||||||
setSelectedTDRId,
|
setSelectedTDRId,
|
||||||
} from "../../../../../../redux/slices/tdrDataByIdSlice";
|
} from "../../../../../../redux/slices/tdrDataByIdSlice";
|
||||||
|
import { fetchTDMDataBySlotThunk } from "../../../../../../redux/thunks/fetchTDMDataBySlotThunk";
|
||||||
|
|
||||||
const TDRChartActionBar: React.FC = () => {
|
const TDRChartActionBar: React.FC = () => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useAppDispatch();
|
||||||
|
|
||||||
const tdmChartData = useSelector((state: RootState) => state.tdmChart.data);
|
const tdmChartData = useSelector((state: RootState) => state.tdmChart.data);
|
||||||
const selectedSlot = useSelector(
|
const selectedSlot = useSelector(
|
||||||
@@ -54,7 +57,12 @@ const TDRChartActionBar: React.FC = () => {
|
|||||||
alert("❌ Referenzkurve konnte nicht gesetzt werden.");
|
alert("❌ Referenzkurve konnte nicht gesetzt werden.");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
//-------------------------------
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedSlot !== null) {
|
||||||
|
dispatch(fetchTDMDataBySlotThunk(selectedSlot));
|
||||||
|
}
|
||||||
|
}, [selectedSlot]);
|
||||||
//--------------------------------
|
//--------------------------------
|
||||||
return (
|
return (
|
||||||
<div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-4">
|
<div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-4">
|
||||||
|
|||||||
@@ -6,5 +6,5 @@
|
|||||||
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
|
||||||
|
|
||||||
*/
|
*/
|
||||||
const webVersion = "1.6.179";
|
const webVersion = "1.6.180";
|
||||||
export default webVersion;
|
export default webVersion;
|
||||||
|
|||||||
52
redux/slices/tdmSingleChartSlice.ts
Normal file
52
redux/slices/tdmSingleChartSlice.ts
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
// /redux/slices/tdmSingleChartSlice.ts
|
||||||
|
|
||||||
|
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
||||||
|
import { fetchTDMDataBySlotThunk } from "../thunks/fetchTDMDataBySlotThunk";
|
||||||
|
|
||||||
|
interface TDMChartEntry {
|
||||||
|
id: number;
|
||||||
|
t: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TDMChartState {
|
||||||
|
data: {
|
||||||
|
[slot: number]: TDMChartEntry[];
|
||||||
|
};
|
||||||
|
loading: boolean;
|
||||||
|
error: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const initialState: TDMChartState = {
|
||||||
|
data: {},
|
||||||
|
loading: false,
|
||||||
|
error: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
const tdmSingleChartSlice = createSlice({
|
||||||
|
name: "tdmSingleChart",
|
||||||
|
initialState,
|
||||||
|
reducers: {},
|
||||||
|
extraReducers: (builder) => {
|
||||||
|
builder
|
||||||
|
.addCase(fetchTDMDataBySlotThunk.pending, (state) => {
|
||||||
|
state.loading = true;
|
||||||
|
state.error = null;
|
||||||
|
})
|
||||||
|
.addCase(
|
||||||
|
fetchTDMDataBySlotThunk.fulfilled,
|
||||||
|
(
|
||||||
|
state,
|
||||||
|
action: PayloadAction<{ slot: number; data: TDMChartEntry[] }>
|
||||||
|
) => {
|
||||||
|
state.loading = false;
|
||||||
|
state.data[action.payload.slot] = action.payload.data;
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.addCase(fetchTDMDataBySlotThunk.rejected, (state, action) => {
|
||||||
|
state.loading = false;
|
||||||
|
state.error = action.error.message ?? "Unbekannter Fehler";
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default tdmSingleChartSlice.reducer;
|
||||||
@@ -20,6 +20,7 @@ import tdrDataByIdReducer from "./slices/tdrDataByIdSlice";
|
|||||||
import kueDataReducer from "./slices/kueDataSlice";
|
import kueDataReducer from "./slices/kueDataSlice";
|
||||||
import selectedChartDataReducer from "./slices/selectedChartDataSlice";
|
import selectedChartDataReducer from "./slices/selectedChartDataSlice";
|
||||||
import tdrSingleChartReducer from "./slices/tdrSingleChartSlice";
|
import tdrSingleChartReducer from "./slices/tdrSingleChartSlice";
|
||||||
|
import tdmSingleChartReducer from "./slices/tdmSingleChartSlice";
|
||||||
|
|
||||||
const store = configureStore({
|
const store = configureStore({
|
||||||
reducer: {
|
reducer: {
|
||||||
@@ -42,6 +43,7 @@ const store = configureStore({
|
|||||||
kueData: kueDataReducer,
|
kueData: kueDataReducer,
|
||||||
selectedChartData: selectedChartDataReducer,
|
selectedChartData: selectedChartDataReducer,
|
||||||
tdrSingleChart: tdrSingleChartReducer,
|
tdrSingleChart: tdrSingleChartReducer,
|
||||||
|
tdmSingleChart: tdmSingleChartReducer,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user