feat: Redux-Integration für Datumsauswahl und Chart-Zoom verbessert

- `DateRangePicker.tsx` angepasst, um `vonDatum` und `bisDatum` direkt in Redux zu aktualisieren
- `LoopMeasurementChart.tsx` verbessert, sodass `vonDatum` und `bisDatum` beim Zoomen mit Mausrad automatisch in Redux gespeichert werden
- Chart.js `onZoom` korrekt implementiert, um Änderungen in der X-Achse sofort zu übernehmen
- Redux-Updates optimiert, um unnötige `dispatch`-Aufrufe zu vermeiden

components/main/kabelueberwachung/kue705FO/Charts/DateRangePicker.tsx

@@ -1,19 +1,17 @@
 // /components/modules/kue705FO/charts/DateRangePicker.tsx
-import React, { useState } from "react";
+import React from "react";
 import DatePicker from "react-datepicker";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "../../../../../redux/store";
-import "react-datepicker/dist/react-datepicker.css";
-
-interface DateRangePickerProps {
-  setVonDatum: (date: Date) => void;
-  setBisDatum: (date: Date) => void;
-}
-
-const DateRangePicker: React.FC<DateRangePickerProps> = ({
+import {
   setVonDatum,
   setBisDatum,
-}) => {
+} from "../../../../../redux/slices/kabelueberwachungChartSlice";
+import "react-datepicker/dist/react-datepicker.css";
+
+const DateRangePicker: React.FC = () => {
+  const dispatch = useDispatch();
+
   // Redux-Werte abrufen
   const reduxVonDatum = useSelector(
     (state: RootState) => state.kabelueberwachungChart.vonDatum
@@ -22,29 +20,21 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
     (state: RootState) => state.kabelueberwachungChart.bisDatum
   );
 
-  // Direkt mit Redux-Werten initialisieren, falls vorhanden
-  const [startDate, setStartDate] = useState<Date>(
-    reduxVonDatum ? new Date(reduxVonDatum) : new Date()
-  );
-  const [endDate, setEndDate] = useState<Date>(
-    reduxBisDatum ? new Date(reduxBisDatum) : new Date()
-  );
-
   return (
     <div className="flex space-x-4">
       <div>
         <label className="block text-sm font-semibold">Von</label>
         <DatePicker
-          selected={startDate}
+          selected={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
           onChange={(date) => {
             if (date) {
-              setStartDate(date);
-              setVonDatum(date);
+              const isoDate = date.toISOString().split("T")[0];
+              dispatch(setVonDatum(isoDate));
             }
           }}
           selectsStart
-          startDate={startDate}
-          endDate={endDate}
+          startDate={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
+          endDate={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
           dateFormat="dd.MM.yyyy"
           className="border px-2 py-1 rounded"
         />
@@ -53,17 +43,17 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({
       <div>
         <label className="block text-sm font-semibold">Bis</label>
         <DatePicker
-          selected={endDate}
+          selected={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
           onChange={(date) => {
             if (date) {
-              setEndDate(date);
-              setBisDatum(date);
+              const isoDate = date.toISOString().split("T")[0];
+              dispatch(setBisDatum(isoDate));
             }
           }}
           selectsEnd
-          startDate={startDate}
-          endDate={endDate}
-          minDate={startDate}
+          startDate={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
+          endDate={reduxBisDatum ? new Date(reduxBisDatum) : new Date()}
+          minDate={reduxVonDatum ? new Date(reduxVonDatum) : new Date()}
           dateFormat="dd.MM.yyyy"
           className="border px-2 py-1 rounded"
         />