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.
2025-03-23 11:14:38 +01:00
parent 0d549c4580
commit 8e482813f8
4 changed files with 81 additions and 38 deletions
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/DateRangePicker.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import DatePicker from "react-datepicker";
 import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "../../../../../../redux/store";
@@ -8,20 +8,17 @@ import {
 } from "../../../../../../redux/slices/kabelueberwachungChartSlice";
 import "react-datepicker/dist/react-datepicker.css";

-// ✅ Props definieren
 interface DateRangePickerProps {
-  setVonDatum: (date: Date) => void;
-  setBisDatum: (date: Date) => void;
  minDate: string;
  maxDate: string;
 }

 const DateRangePicker: React.FC<DateRangePickerProps> = ({
-  setVonDatum,
-  setBisDatum,
  minDate,
  maxDate,
 }) => {
+  const dispatch = useDispatch();
+
  const reduxVonDatum = useSelector(
    (state: RootState) => state.kabelueberwachungChart.vonDatum
  );
@@ -29,20 +26,39 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
    (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 (
    <div className="flex space-x-4 items-center">
      <div className="flex items-center space-x-2">
        <label className="block text-sm font-semibold">Von</label>
        <DatePicker
-          selected={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
+          selected={reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo}
          onChange={(date) => {
            if (date) {
-              setVonDatum(date);
+              dispatch(setVonDatum(date.toISOString().split("T")[0]));
            }
          }}
          selectsStart
-          startDate={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
-          endDate={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
+          startDate={
+            reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo
+          }
+          endDate={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
          minDate={new Date(minDate)}
          maxDate={new Date(maxDate)}
          dateFormat="dd.MM.yyyy"
@@ -53,15 +69,17 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
      <div className="flex items-center space-x-2">
        <label className="block text-sm font-semibold">Bis</label>
        <DatePicker
-          selected={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
+          selected={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
          onChange={(date) => {
            if (date) {
-              setBisDatum(date);
+              dispatch(setBisDatum(date.toISOString().split("T")[0]));
            }
          }}
          selectsEnd
-          startDate={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
-          endDate={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
+          startDate={
+            reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo
+          }
+          endDate={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
          minDate={new Date(minDate)}
          maxDate={new Date(maxDate)}
          dateFormat="dd.MM.yyyy"
--- a/public/CPL/SERVICE/de.js
+++ b/public/CPL/SERVICE/de.js
@@ -1,8 +1,31 @@
-var win_de=[<%=DES80%>,<%=DES81%>,<%=DES82%>,<%=DES83%>];//Zustand des digitalen Eingangs 1 = EIN, 0 = AUS 
-//DESxx xx =Nr Eingang 1-32 81-84 = BGT 1 bis 4
-var win_counter=[<%=DEC80%>,<%=DEC81%>,<%=DEC82%>,<%=DEC83%>];//Zählerstand
+// Zustand -> 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 
+
+// 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
-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
 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];
--- a/redux/slices/kabelueberwachungChartSlice.ts
+++ b/redux/slices/kabelueberwachungChartSlice.ts
@@ -17,23 +17,28 @@ interface KabelueberwachungChartState {
  selectedSlotType: "isolationswiderstand" | "schleifenwiderstand";
  isChartOpen: boolean;
  slotNumber: number | null;
-  tdrChartData: TDRData[]; // Hinzufügen des TDR-Datenzustands
+  tdrChartData: TDRData[];
  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
 const initialState: KabelueberwachungChartState = {
  loopMeasurementCurveChartData: [],
-  vonDatum: "2025-02-01",
-  bisDatum: new Date().toISOString().split("T")[0], // Heutiges Datum als Standardwert
+  vonDatum: thirtyDaysAgo.toISOString().split("T")[0], // 30 Tage zurück
+  bisDatum: today.toISOString().split("T")[0], // Heute
  selectedMode: "DIA0",
  selectedSlotType: "schleifenwiderstand",
  isChartOpen: false,
  slotNumber: null,
-  tdrChartData: [], // Initialisierung mit leerem Array
+  tdrChartData: [],
  isFullScreen: false,
-  unit: "kOhm", // Standard auf Schleifenwiderstand (kOhm)
+  unit: "kOhm",
 };

 // Erstellung des Slices
@@ -41,42 +46,34 @@ const kabelueberwachungChartSlice = createSlice({
  name: "kabelueberwachungChart",
  initialState,
  reducers: {
-    // Aktion zum Setzen der Slot-Nummer
    setSlotNumber: (state, action: PayloadAction<number | null>) => {
      state.slotNumber = action.payload;
    },
-    // Aktion zum Setzen der Schleifenmesskurven-Daten
    setLoopMeasurementCurveChartData: (state, action: PayloadAction<any[]>) => {
      state.loopMeasurementCurveChartData = action.payload;
    },
-    // Aktion zum Setzen des Startdatums
    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>) => {
-      state.bisDatum = action.payload; // **Kein replace mehr**
+      state.bisDatum = action.payload;
    },
-    // Aktion zum Setzen des ausgewählten Modus
    setSelectedMode: (
      state,
      action: PayloadAction<"DIA0" | "DIA1" | "DIA2">
    ) => {
      state.selectedMode = action.payload;
    },
-    // Aktion zum Setzen des ausgewählten Slot-Typs
    setSelectedSlotType: (
      state,
      action: PayloadAction<"isolationswiderstand" | "schleifenwiderstand">
    ) => {
      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>) => {
      state.isChartOpen = action.payload;
    },
-    // Aktion zum Setzen der TDR-Charts-Daten
    setTDRChartData: (
      state,
      action: PayloadAction<{ timestamp: string; tdr: number }[]>
@@ -84,7 +81,7 @@ const kabelueberwachungChartSlice = createSlice({
      state.tdrChartData = action.payload;
    },
    setFullScreen: (state, action: PayloadAction<boolean>) => {
-      state.isFullScreen = action.payload; // **⬅️ Neue Action für Fullscreen**
+      state.isFullScreen = action.payload;
    },
  },
 });
--- a/services/fetchLoopChartData.ts
+++ b/services/fetchLoopChartData.ts
@@ -13,9 +13,14 @@ const getApiUrl = (
    console.error("⚠️ Slot-Nummer nicht gesetzt!");
    return "";
  }
-
+  // type: 3 → Isolationswiderstand
+  // type: 4 → Schleifenwiderstand
  const typeFolder =
-    type === 3 ? "isolationswiderstand" : "schleifenwiderstand";
+    type === 3
+      ? "isolationswiderstand"
+      : type === 4
+      ? "schleifenwiderstand"
+      : "unbekannterTyp";

  return process.env.NODE_ENV === "development"
    ? `/CPLmockData/kuesChartData/slot${slotNumber}/${typeFolder}/${mode}.json`