feat: Chart-Status zurücksetzen, wenn das Modal geschlossen wird

- Redux-Slice `kabelueberwachungChartSlice.ts` erweitert, um `isChartOpen` beim Schließen zurückzusetzen
- `ChartSwitcher.tsx` so angepasst, dass `setChartOpen(false)` beim Schließen des Modals (`onClose`) aufgerufen wird
- `handleClose` als zentrale Schließen-Funktion eingeführt, um sowohl das Modal zu schließen als auch den Redux-Status zu aktualisieren
- Sicherstellt, dass `vonDatum` und `bisDatum` beim erneuten Öffnen korrekt aktualisiert werden

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

@@ -5,8 +5,9 @@ import LoopChartActionBar from "./LoopMeasurementChart/LoopChartActionBar";
 import TDRChartActionBar from "./TDRChart/TDRChartActionBar";
 import LoopMeasurementChart from "./LoopMeasurementChart/LoopMeasurementChart";
 import TDRChart from "./TDRChart/TDRChart";
-import { useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "../../../../../redux/store";
+import { setChartOpen } from "../../../../../redux/slices/kabelueberwachungChartSlice";
 
 interface ChartSwitcherProps {
   isOpen: boolean;
@@ -14,21 +15,27 @@ interface ChartSwitcherProps {
 }
 
 const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
+  const dispatch = useDispatch();
   const activeMode = useSelector(
     (state: RootState) => state.chartData.activeMode
   );
 
+  // **Neue Funktion: Modal schließen + Redux-Status zurücksetzen**
+  const handleClose = () => {
+    dispatch(setChartOpen(false)); // Schalter zurücksetzen
+    onClose(); // Originale Schließen-Funktion aufrufen
+  };
+
   return (
     <ReactModal
       isOpen={isOpen}
-      onRequestClose={onClose}
+      onRequestClose={handleClose} // Hier `handleClose` statt `onClose`
       ariaHideApp={false}
       style={{
         overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
         content: {
           top: "50%",
           left: "50%",
-
           bottom: "auto",
           marginRight: "-50%",
           transform: "translate(-50%, -50%)",
@@ -40,7 +47,7 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
       }}
     >
       <button
-        onClick={onClose}
+        onClick={handleClose} // Hier `handleClose` statt `onClose`
         style={{
           position: "absolute",
           top: "0.625rem",
@@ -59,13 +66,13 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
         <>
           <h3 className="text-lg font-semibold">Schleifenmessung</h3>
           <LoopChartActionBar />
-          <LoopMeasurementChart /> {/* 🎯 Hier wird das Chart gerendert */}
+          <LoopMeasurementChart />
         </>
       ) : (
         <>
           <h3 className="text-lg font-semibold">TDR-Messung</h3>
           <TDRChartActionBar />
-          <TDRChart /> {/* 🎯 Hier wird das Chart gerendert */}
+          <TDRChart />
         </>
       )}
     </ReactModal>

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

@@ -9,15 +9,15 @@ import {
   setChartData,
   setSelectedMode,
   setSelectedSlotType,
+  setChartOpen,
 } from "../../../../../../redux/slices/kabelueberwachungChartSlice";
 
 const LoopChartActionBar: React.FC = () => {
   const dispatch = useDispatch();
 
   // Redux-Status abrufen
-  const { vonDatum, bisDatum, selectedMode, selectedSlotType } = useSelector(
-    (state: RootState) => state.kabelueberwachungChart
-  );
+  const { vonDatum, bisDatum, selectedMode, selectedSlotType, isChartOpen } =
+    useSelector((state: RootState) => state.kabelueberwachungChart);
 
   /**
    * API-URL-Erstellung für Entwicklung und Produktion
@@ -46,6 +46,15 @@ const LoopChartActionBar: React.FC = () => {
 
       if (Array.isArray(jsonData)) {
         dispatch(setChartData(jsonData));
+
+        // Falls das Chart zum ersten Mal geöffnet wird, setze vonDatum & bisDatum
+        if (!isChartOpen && jsonData.length > 0) {
+          const firstDate = new Date(jsonData[jsonData.length - 1].t);
+          const lastDate = new Date(jsonData[0].t);
+          dispatch(setVonDatum(firstDate.toISOString().split("T")[0]));
+          dispatch(setBisDatum(lastDate.toISOString().split("T")[0]));
+          dispatch(setChartOpen(true)); // Setze den Schalter auf "geöffnet"
+        }
       } else {
         console.error("Erwartetes Array, aber erhalten:", jsonData);
       }
@@ -95,14 +104,6 @@ const LoopChartActionBar: React.FC = () => {
         <option value="schleifenwiderstand">Schleifenwiderstand</option>
         <option value="isolationswiderstand">Isolationswiderstand</option>
       </select>
-
-      {/* Daten abrufen */}
-      <button
-        onClick={handleFetchData}
-        className="px-3 py-1 bg-green-500 text-white rounded text-sm"
-      >
-        Daten Laden
-      </button>
     </div>
   );
 };