fix: Dynamische Initialisierung von "vonDatum" und "bisDatum" im Redux-Store
- vonDatum auf „heute minus 30 Tage“ gesetzt (statt festem Datum). - bisDatum auf heutiges Datum gesetzt. - Behebt Initialisierungsproblem im DateRangePicker.
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import React from "react";
|
import React, { useEffect } from "react";
|
||||||
import DatePicker from "react-datepicker";
|
import DatePicker from "react-datepicker";
|
||||||
import { useSelector, useDispatch } from "react-redux";
|
import { useSelector, useDispatch } from "react-redux";
|
||||||
import { RootState } from "../../../../../../redux/store";
|
import { RootState } from "../../../../../../redux/store";
|
||||||
@@ -8,20 +8,17 @@ import {
|
|||||||
} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
|
} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
|
||||||
import "react-datepicker/dist/react-datepicker.css";
|
import "react-datepicker/dist/react-datepicker.css";
|
||||||
|
|
||||||
// ✅ Props definieren
|
|
||||||
interface DateRangePickerProps {
|
interface DateRangePickerProps {
|
||||||
setVonDatum: (date: Date) => void;
|
|
||||||
setBisDatum: (date: Date) => void;
|
|
||||||
minDate: string;
|
minDate: string;
|
||||||
maxDate: string;
|
maxDate: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const DateRangePicker: React.FC<DateRangePickerProps> = ({
|
const DateRangePicker: React.FC<DateRangePickerProps> = ({
|
||||||
setVonDatum,
|
|
||||||
setBisDatum,
|
|
||||||
minDate,
|
minDate,
|
||||||
maxDate,
|
maxDate,
|
||||||
}) => {
|
}) => {
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
const reduxVonDatum = useSelector(
|
const reduxVonDatum = useSelector(
|
||||||
(state: RootState) => state.kabelueberwachungChart.vonDatum
|
(state: RootState) => state.kabelueberwachungChart.vonDatum
|
||||||
);
|
);
|
||||||
@@ -29,20 +26,39 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
|
|||||||
(state: RootState) => state.kabelueberwachungChart.bisDatum
|
(state: RootState) => state.kabelueberwachungChart.bisDatum
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const today = new Date();
|
||||||
|
const thirtyDaysAgo = new Date();
|
||||||
|
thirtyDaysAgo.setDate(today.getDate() - 30);
|
||||||
|
|
||||||
|
// Redux speichert ISO ("YYYY-MM-DD") => Für DatePicker geeignet
|
||||||
|
const parseISODate = (isoDate: string) => {
|
||||||
|
const [year, month, day] = isoDate.split("-").map(Number);
|
||||||
|
return new Date(year, month - 1, day);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!reduxVonDatum)
|
||||||
|
dispatch(setVonDatum(thirtyDaysAgo.toISOString().split("T")[0]));
|
||||||
|
if (!reduxBisDatum)
|
||||||
|
dispatch(setBisDatum(today.toISOString().split("T")[0]));
|
||||||
|
}, [dispatch, reduxVonDatum, reduxBisDatum]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex space-x-4 items-center">
|
<div className="flex space-x-4 items-center">
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<label className="block text-sm font-semibold">Von</label>
|
<label className="block text-sm font-semibold">Von</label>
|
||||||
<DatePicker
|
<DatePicker
|
||||||
selected={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
|
selected={reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo}
|
||||||
onChange={(date) => {
|
onChange={(date) => {
|
||||||
if (date) {
|
if (date) {
|
||||||
setVonDatum(date);
|
dispatch(setVonDatum(date.toISOString().split("T")[0]));
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
selectsStart
|
selectsStart
|
||||||
startDate={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
|
startDate={
|
||||||
endDate={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
|
reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo
|
||||||
|
}
|
||||||
|
endDate={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
|
||||||
minDate={new Date(minDate)}
|
minDate={new Date(minDate)}
|
||||||
maxDate={new Date(maxDate)}
|
maxDate={new Date(maxDate)}
|
||||||
dateFormat="dd.MM.yyyy"
|
dateFormat="dd.MM.yyyy"
|
||||||
@@ -53,15 +69,17 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
|
|||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<label className="block text-sm font-semibold">Bis</label>
|
<label className="block text-sm font-semibold">Bis</label>
|
||||||
<DatePicker
|
<DatePicker
|
||||||
selected={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
|
selected={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
|
||||||
onChange={(date) => {
|
onChange={(date) => {
|
||||||
if (date) {
|
if (date) {
|
||||||
setBisDatum(date);
|
dispatch(setBisDatum(date.toISOString().split("T")[0]));
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
selectsEnd
|
selectsEnd
|
||||||
startDate={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
|
startDate={
|
||||||
endDate={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
|
reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo
|
||||||
|
}
|
||||||
|
endDate={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
|
||||||
minDate={new Date(minDate)}
|
minDate={new Date(minDate)}
|
||||||
maxDate={new Date(maxDate)}
|
maxDate={new Date(maxDate)}
|
||||||
dateFormat="dd.MM.yyyy"
|
dateFormat="dd.MM.yyyy"
|
||||||
|
|||||||
@@ -1,8 +1,31 @@
|
|||||||
var win_de=[<%=DES80%>,<%=DES81%>,<%=DES82%>,<%=DES83%>];//Zustand des digitalen Eingangs 1 = EIN, 0 = AUS
|
// Zustand -> DESxx xx =Nr Eingang 1-32 81-84 = BGT 1 bis 4
|
||||||
//DESxx xx =Nr Eingang 1-32 81-84 = BGT 1 bis 4
|
var win_de_state=[<%=DES81%>,<%=DES82%>,<%=DES83%>,<%=DES84%>];//Zustand des digitalen Eingangs 1 = EIN, 0 = AUS
|
||||||
var win_counter=[<%=DEC80%>,<%=DEC81%>,<%=DEC82%>,<%=DEC83%>];//Zählerstand
|
|
||||||
|
// Name -> DENxx xx =Nr Eingang 1-32 81-84 = BGT 1 bis 4
|
||||||
|
var win_de_label =[<%=DEN81%>,<%=DEN82%>,<%=DEN83%>,<%=DEN84%>];
|
||||||
|
|
||||||
|
//Zählerstand -> DESxx xx =Nr Eingang 1-32 81-84 = BGT 1 bis 4
|
||||||
|
var win_de_counter=[<%=DEC81%>,<%=DEC82%>,<%=DEC83%>,<%=DEC84%>];//Zählerstand
|
||||||
|
|
||||||
|
//Filterzeit -> DEFxx xx =Nr Eingang 1-32 81-84 = BGT 1 bis 4
|
||||||
|
var win_de_time_filter=[<%=DEF81%>,<%=DEF82%>,<%=DEF83%>,<%=DEF84%>];//Filterzeit
|
||||||
|
|
||||||
|
// Gewichtung -> DEGxx xx = Nr Eingang 1-32 81-84 = BGT 1 bis 4
|
||||||
|
var win_de_weighting=[<%=DEG81%>,<%=DEG82%>,<%=DEG83%>,<%=DEG84%>];//Gewichtung
|
||||||
|
|
||||||
|
// Invertierung -> DEIxx xx = Nr Eingang 1-32 81-84 = BGT 1 bis 4
|
||||||
|
var win_de_invert=[<%=DEI81%>,<%=DEI82%>,<%=DEI83%>,<%=DEI84%>];//Invertierung
|
||||||
|
|
||||||
|
// Zähler aktiv -> DEZxx xx = Nr Eingang 1-32 81-84 = BGT 1 bis 4
|
||||||
|
var win_de_counter_active=[<%=DEZ81%>,<%=DEZ82%>,<%=DEZ83%>,<%=DEZ84%>];//Zähler aktiv
|
||||||
|
|
||||||
|
// Eingang offline -> DEAxx xx = Nr Eingang 1-32 81-84 = BGT 1 bis 4
|
||||||
|
var win_de_offline=[<%=DEA81%>,<%=DEA82%>,<%=DEA83%>,<%=DEA84%>];//Eingang offline
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//DECxx xx =Nr Eingang 1-32 81-84 = BGT 1 bis 4
|
//DECxx xx =Nr Eingang 1-32 81-84 = BGT 1 bis 4
|
||||||
var win_flutter=[<%=DEF80%>,<%=DEF81%>,<%=DEF82%>,<%=DEF83%>];// noch nicht verwendet in Lastheft Oktober 2024
|
//var win_flutter=[<%=DEF80%>,<%=DEF81%>,<%=DEF82%>,<%=DEF83%>];// noch nicht verwendet in Lastheft Oktober 2024
|
||||||
|
|
||||||
/* von https://10.10.0.222/CPL?Service/de.ACP
|
/* von https://10.10.0.222/CPL?Service/de.ACP
|
||||||
var de=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
|
var de=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
|
||||||
|
|||||||
@@ -17,23 +17,28 @@ interface KabelueberwachungChartState {
|
|||||||
selectedSlotType: "isolationswiderstand" | "schleifenwiderstand";
|
selectedSlotType: "isolationswiderstand" | "schleifenwiderstand";
|
||||||
isChartOpen: boolean;
|
isChartOpen: boolean;
|
||||||
slotNumber: number | null;
|
slotNumber: number | null;
|
||||||
tdrChartData: TDRData[]; // Hinzufügen des TDR-Datenzustands
|
tdrChartData: TDRData[];
|
||||||
isFullScreen: boolean;
|
isFullScreen: boolean;
|
||||||
unit: "kOhm" | "MOhm"; // 🆕 Einheit für Messwerte
|
unit: "kOhm" | "MOhm";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Dynamische Initialisierung der Datumswerte
|
||||||
|
const today = new Date();
|
||||||
|
const thirtyDaysAgo = new Date();
|
||||||
|
thirtyDaysAgo.setDate(today.getDate() - 30);
|
||||||
|
|
||||||
// Initialer Zustand des Slices
|
// Initialer Zustand des Slices
|
||||||
const initialState: KabelueberwachungChartState = {
|
const initialState: KabelueberwachungChartState = {
|
||||||
loopMeasurementCurveChartData: [],
|
loopMeasurementCurveChartData: [],
|
||||||
vonDatum: "2025-02-01",
|
vonDatum: thirtyDaysAgo.toISOString().split("T")[0], // 30 Tage zurück
|
||||||
bisDatum: new Date().toISOString().split("T")[0], // Heutiges Datum als Standardwert
|
bisDatum: today.toISOString().split("T")[0], // Heute
|
||||||
selectedMode: "DIA0",
|
selectedMode: "DIA0",
|
||||||
selectedSlotType: "schleifenwiderstand",
|
selectedSlotType: "schleifenwiderstand",
|
||||||
isChartOpen: false,
|
isChartOpen: false,
|
||||||
slotNumber: null,
|
slotNumber: null,
|
||||||
tdrChartData: [], // Initialisierung mit leerem Array
|
tdrChartData: [],
|
||||||
isFullScreen: false,
|
isFullScreen: false,
|
||||||
unit: "kOhm", // Standard auf Schleifenwiderstand (kOhm)
|
unit: "kOhm",
|
||||||
};
|
};
|
||||||
|
|
||||||
// Erstellung des Slices
|
// Erstellung des Slices
|
||||||
@@ -41,42 +46,34 @@ const kabelueberwachungChartSlice = createSlice({
|
|||||||
name: "kabelueberwachungChart",
|
name: "kabelueberwachungChart",
|
||||||
initialState,
|
initialState,
|
||||||
reducers: {
|
reducers: {
|
||||||
// Aktion zum Setzen der Slot-Nummer
|
|
||||||
setSlotNumber: (state, action: PayloadAction<number | null>) => {
|
setSlotNumber: (state, action: PayloadAction<number | null>) => {
|
||||||
state.slotNumber = action.payload;
|
state.slotNumber = action.payload;
|
||||||
},
|
},
|
||||||
// Aktion zum Setzen der Schleifenmesskurven-Daten
|
|
||||||
setLoopMeasurementCurveChartData: (state, action: PayloadAction<any[]>) => {
|
setLoopMeasurementCurveChartData: (state, action: PayloadAction<any[]>) => {
|
||||||
state.loopMeasurementCurveChartData = action.payload;
|
state.loopMeasurementCurveChartData = action.payload;
|
||||||
},
|
},
|
||||||
// Aktion zum Setzen des Startdatums
|
|
||||||
setVonDatum: (state, action: PayloadAction<string>) => {
|
setVonDatum: (state, action: PayloadAction<string>) => {
|
||||||
state.vonDatum = action.payload; // **Kein replace mehr**
|
state.vonDatum = action.payload;
|
||||||
},
|
},
|
||||||
// Aktion zum Setzen des Enddatums
|
|
||||||
setBisDatum: (state, action: PayloadAction<string>) => {
|
setBisDatum: (state, action: PayloadAction<string>) => {
|
||||||
state.bisDatum = action.payload; // **Kein replace mehr**
|
state.bisDatum = action.payload;
|
||||||
},
|
},
|
||||||
// Aktion zum Setzen des ausgewählten Modus
|
|
||||||
setSelectedMode: (
|
setSelectedMode: (
|
||||||
state,
|
state,
|
||||||
action: PayloadAction<"DIA0" | "DIA1" | "DIA2">
|
action: PayloadAction<"DIA0" | "DIA1" | "DIA2">
|
||||||
) => {
|
) => {
|
||||||
state.selectedMode = action.payload;
|
state.selectedMode = action.payload;
|
||||||
},
|
},
|
||||||
// Aktion zum Setzen des ausgewählten Slot-Typs
|
|
||||||
setSelectedSlotType: (
|
setSelectedSlotType: (
|
||||||
state,
|
state,
|
||||||
action: PayloadAction<"isolationswiderstand" | "schleifenwiderstand">
|
action: PayloadAction<"isolationswiderstand" | "schleifenwiderstand">
|
||||||
) => {
|
) => {
|
||||||
state.selectedSlotType = action.payload;
|
state.selectedSlotType = action.payload;
|
||||||
state.unit = action.payload === "schleifenwiderstand" ? "kOhm" : "MOhm"; // 🆕 Einheit setzen
|
state.unit = action.payload === "schleifenwiderstand" ? "kOhm" : "MOhm";
|
||||||
},
|
},
|
||||||
// Aktion zum Öffnen oder Schließen des Charts
|
|
||||||
setChartOpen: (state, action: PayloadAction<boolean>) => {
|
setChartOpen: (state, action: PayloadAction<boolean>) => {
|
||||||
state.isChartOpen = action.payload;
|
state.isChartOpen = action.payload;
|
||||||
},
|
},
|
||||||
// Aktion zum Setzen der TDR-Charts-Daten
|
|
||||||
setTDRChartData: (
|
setTDRChartData: (
|
||||||
state,
|
state,
|
||||||
action: PayloadAction<{ timestamp: string; tdr: number }[]>
|
action: PayloadAction<{ timestamp: string; tdr: number }[]>
|
||||||
@@ -84,7 +81,7 @@ const kabelueberwachungChartSlice = createSlice({
|
|||||||
state.tdrChartData = action.payload;
|
state.tdrChartData = action.payload;
|
||||||
},
|
},
|
||||||
setFullScreen: (state, action: PayloadAction<boolean>) => {
|
setFullScreen: (state, action: PayloadAction<boolean>) => {
|
||||||
state.isFullScreen = action.payload; // **⬅️ Neue Action für Fullscreen**
|
state.isFullScreen = action.payload;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -13,9 +13,14 @@ const getApiUrl = (
|
|||||||
console.error("⚠️ Slot-Nummer nicht gesetzt!");
|
console.error("⚠️ Slot-Nummer nicht gesetzt!");
|
||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
|
// type: 3 → Isolationswiderstand
|
||||||
|
// type: 4 → Schleifenwiderstand
|
||||||
const typeFolder =
|
const typeFolder =
|
||||||
type === 3 ? "isolationswiderstand" : "schleifenwiderstand";
|
type === 3
|
||||||
|
? "isolationswiderstand"
|
||||||
|
: type === 4
|
||||||
|
? "schleifenwiderstand"
|
||||||
|
: "unbekannterTyp";
|
||||||
|
|
||||||
return process.env.NODE_ENV === "development"
|
return process.env.NODE_ENV === "development"
|
||||||
? `/CPLmockData/kuesChartData/slot${slotNumber}/${typeFolder}/${mode}.json`
|
? `/CPLmockData/kuesChartData/slot${slotNumber}/${typeFolder}/${mode}.json`
|
||||||
|
|||||||
Reference in New Issue
Block a user