- Add chartTitle state management to kabelueberwachungChartSlice with "Messkurve"/"Meldungen" options - Update IsoChartActionBar dropdown to show current chartTitle value with proper binding - Implement conditional rendering in IsoChartView between IsoMeasurementChart and Report components - Create Report.tsx component using same data structure as MeldungenView (Meldung type) - Add slot-based message filtering for specific cable monitoring units (KÜ) - Integrate getMessagesThunk for consistent data loading across components - Style Report component with consistent table layout, German date formatting, and Littwin branding - Enable seamless switching between measurement chart and filtered messages in modal
125 lines
3.6 KiB
TypeScript
125 lines
3.6 KiB
TypeScript
// redux/slices/kabelueberwachungChartSlice.ts
|
|
|
|
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
|
|
|
|
// Definition des Interface für den Zustand des TDR-Charts
|
|
interface TDRData {
|
|
timestamp: string;
|
|
tdr: number;
|
|
}
|
|
|
|
// Definition des Interface für den gesamten Zustand der Kabelüberwachung
|
|
interface KabelueberwachungChartState {
|
|
loopMeasurementCurveChartData: any[];
|
|
isoMeasurementCurveChartData: any[];
|
|
vonDatum: string;
|
|
bisDatum: string;
|
|
selectedMode: "DIA0" | "DIA1" | "DIA2";
|
|
selectedSlotType: "isolationswiderstand" | "schleifenwiderstand";
|
|
isChartOpen: boolean;
|
|
slotNumber: number | null;
|
|
tdrChartData: TDRData[];
|
|
isFullScreen: boolean;
|
|
unit: "kOhm" | "MOhm";
|
|
isLoading: boolean;
|
|
chartTitle: "Messkurve" | "Meldungen";
|
|
}
|
|
|
|
// Dynamische Initialisierung der Datumswerte
|
|
const today = new Date();
|
|
const thirtyDaysAgo = new Date();
|
|
thirtyDaysAgo.setDate(today.getDate() - 30);
|
|
|
|
// Initialer Zustand des Slices
|
|
const initialState: KabelueberwachungChartState = {
|
|
isLoading: false,
|
|
loopMeasurementCurveChartData: [],
|
|
isoMeasurementCurveChartData: [],
|
|
vonDatum: thirtyDaysAgo.toISOString().split("T")[0], // 30 Tage zurück
|
|
bisDatum: today.toISOString().split("T")[0], // Heute
|
|
selectedMode: "DIA0",
|
|
selectedSlotType: "isolationswiderstand",
|
|
isChartOpen: false,
|
|
slotNumber: null,
|
|
tdrChartData: [],
|
|
isFullScreen: false,
|
|
unit: "MOhm",
|
|
chartTitle: "Messkurve", // Standard: Messkurve ausgewählt
|
|
};
|
|
|
|
// Erstellung des Slices
|
|
const kabelueberwachungChartSlice = createSlice({
|
|
name: "kabelueberwachungChartSlice",
|
|
initialState,
|
|
reducers: {
|
|
setSlotNumber: (state, action: PayloadAction<number | null>) => {
|
|
state.slotNumber = action.payload;
|
|
},
|
|
setLoopMeasurementCurveChartData: (state, action: PayloadAction<any[]>) => {
|
|
state.loopMeasurementCurveChartData = action.payload;
|
|
},
|
|
setIsoMeasurementCurveChartData: (state, action: PayloadAction<any[]>) => {
|
|
state.isoMeasurementCurveChartData = action.payload;
|
|
},
|
|
setVonDatum: (state, action: PayloadAction<string>) => {
|
|
state.vonDatum = action.payload;
|
|
},
|
|
setBisDatum: (state, action: PayloadAction<string>) => {
|
|
state.bisDatum = action.payload;
|
|
},
|
|
setSelectedMode: (
|
|
state,
|
|
action: PayloadAction<"DIA0" | "DIA1" | "DIA2">
|
|
) => {
|
|
state.selectedMode = action.payload;
|
|
},
|
|
setSelectedSlotType: (
|
|
state,
|
|
action: PayloadAction<"isolationswiderstand" | "schleifenwiderstand">
|
|
) => {
|
|
state.selectedSlotType = action.payload;
|
|
state.unit = action.payload === "schleifenwiderstand" ? "kOhm" : "MOhm";
|
|
},
|
|
setChartOpen: (state, action: PayloadAction<boolean>) => {
|
|
state.isChartOpen = action.payload;
|
|
},
|
|
setTDRChartData: (
|
|
state,
|
|
action: PayloadAction<{ timestamp: string; tdr: number }[]>
|
|
) => {
|
|
state.tdrChartData = action.payload;
|
|
},
|
|
setFullScreen: (state, action: PayloadAction<boolean>) => {
|
|
state.isFullScreen = action.payload;
|
|
},
|
|
setLoading: (state, action: PayloadAction<boolean>) => {
|
|
state.isLoading = action.payload;
|
|
},
|
|
setChartTitle: (
|
|
state,
|
|
action: PayloadAction<"Messkurve" | "Meldungen">
|
|
) => {
|
|
state.chartTitle = action.payload;
|
|
},
|
|
},
|
|
});
|
|
|
|
// Export der Aktionen
|
|
export const {
|
|
setSlotNumber,
|
|
setLoopMeasurementCurveChartData,
|
|
setIsoMeasurementCurveChartData,
|
|
setVonDatum,
|
|
setBisDatum,
|
|
setSelectedMode,
|
|
setSelectedSlotType,
|
|
setChartOpen,
|
|
setTDRChartData,
|
|
setFullScreen,
|
|
setLoading,
|
|
setChartTitle,
|
|
} = kabelueberwachungChartSlice.actions;
|
|
|
|
// Export des Reducers
|
|
export default kabelueberwachungChartSlice.reducer;
|