Redux Slice merkt vonDatum und bisDatum

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx

@@ -1,26 +1,35 @@
 // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
-import React, { useState } from "react";
+import React from "react";
 import DateRangePicker from "../DateRangePicker";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../../../../../redux/store";
+import {
+  setVonDatum,
+  setBisDatum,
+} from "../../../../../../redux/slices/dateRangeKueChartSlice";
 import { setChartData } from "../../../../../../redux/slices/chartDataSlice";
 
 const LoopChartActionBar: React.FC = () => {
   const dispatch = useDispatch();
 
-  // Zustand für das Dropdown-Menü zur Auswahl von DIA-Modus (Alle, Stunden, Tage)
+  // Datum aus Redux abrufen
-  const [selectedMode, setSelectedMode] = useState<"DIA0" | "DIA1" | "DIA2">(
+  const vonDatum = useSelector(
-    "DIA0"
+    (state: RootState) => state.dateRangeKueChart.vonDatum
+  );
+  const bisDatum = useSelector(
+    (state: RootState) => state.dateRangeKueChart.bisDatum
   );
 
+  // Zustand für das Dropdown-Menü zur Auswahl von DIA-Modus (Alle, Stunden, Tage)
+  const [selectedMode, setSelectedMode] = React.useState<
+    "DIA0" | "DIA1" | "DIA2"
+  >("DIA0");
+
   // Zustand für das Dropdown-Menü zur Auswahl des Slot-Typs (Isolations- oder Schleifenwiderstand)
-  const [selectedSlotType, setSelectedSlotType] = useState<
+  const [selectedSlotType, setSelectedSlotType] = React.useState<
     "isolationswiderstand" | "schleifenwiderstand"
   >("schleifenwiderstand");
 
-  // Zustand für das Datum
-  const [vonDatum, setVonDatum] = useState("2025;01;01");
-  const [bisDatum, setBisDatum] = useState("2025;07;31");
-
   // Slot-Werte
   const isolationswiderstand = 3;
   const schleifenwiderstand = 4;
@@ -28,7 +37,7 @@ const LoopChartActionBar: React.FC = () => {
   /**
    * Dynamische API-URL-Erstellung für Entwicklung und Produktion
    * @param mode - DIA0, DIA1 oder DIA2
-   * @param slotIndex - Slot für die Abfrage
+   * @param type - Slot für die Abfrage (3 = Isolationswiderstand, 4 = Schleifenwiderstand)
    */
   const getApiUrl = (mode: "DIA0" | "DIA1" | "DIA2", type: number) => {
     return process.env.NODE_ENV === "development"
@@ -65,7 +74,10 @@ const LoopChartActionBar: React.FC = () => {
   return (
     <div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
       {/* Datumsauswahl */}
-      <DateRangePicker setVonDatum={setVonDatum} setBisDatum={setBisDatum} />
+      <DateRangePicker
+        setVonDatum={(date) => dispatch(setVonDatum(date))}
+        setBisDatum={(date) => dispatch(setBisDatum(date))}
+      />
 
       {/* Dropdown für DIA-Modus */}
       <select

config/webVersion.ts

@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.75";
+const webVersion = "1.6.76";
 export default webVersion;

redux/slices/dateRangeKueChartSlice.ts

@@ -10,15 +10,22 @@ const initialState: DateRangeState = {
   bisDatum: "2025;07;31",
 };
 
+const formatDate = (isoDate: string) => {
+  const date = new Date(isoDate);
+  return `${date.getFullYear()};${(date.getMonth() + 1)
+    .toString()
+    .padStart(2, "0")};${date.getDate().toString().padStart(2, "0")}`;
+};
+
 const dateRangeKueChartSlice = createSlice({
   name: "dateRangeKueChart",
   initialState,
   reducers: {
     setVonDatum: (state, action: PayloadAction<string>) => {
-      state.vonDatum = action.payload;
+      state.vonDatum = formatDate(action.payload);
     },
     setBisDatum: (state, action: PayloadAction<string>) => {
-      state.bisDatum = action.payload;
+      state.bisDatum = formatDate(action.payload);
     },
   },
 });