From 0faf50676361702e82f23a102b385e30c4f677a3 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Fri, 21 Feb 2025 11:18:05 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Chart-Status=20zur=C3=BCcksetzen,=20wen?=
 =?UTF-8?q?n=20das=20Modal=20geschlossen=20wird?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 .../kue705FO/Charts/ChartSwitcher.tsx         | 19 ++++++++++-----
 .../LoopChartActionBar.tsx                    | 23 ++++++++++---------
 config/webVersion.ts                          |  2 +-
 redux/slices/kabelueberwachungChartSlice.ts   | 16 +++++++++++++
 4 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx b/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx
index 8d585c9..b557e87 100644
--- a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx
+++ b/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>
diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
index 0abc836..345824f 100644
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
+++ b/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>
   );
 };
diff --git a/config/webVersion.ts b/config/webVersion.ts
index bcba7c5..e296a5f 100644
--- a/config/webVersion.ts
+++ b/config/webVersion.ts
@@ -6,5 +6,5 @@
 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
 
 */
-const webVersion = "1.6.77";
+const webVersion = "1.6.78";
 export default webVersion;
diff --git a/redux/slices/kabelueberwachungChartSlice.ts b/redux/slices/kabelueberwachungChartSlice.ts
index b073390..4c11615 100644
--- a/redux/slices/kabelueberwachungChartSlice.ts
+++ b/redux/slices/kabelueberwachungChartSlice.ts
@@ -6,6 +6,7 @@ interface KabelueberwachungChartState {
   bisDatum: string;
   selectedMode: "DIA0" | "DIA1" | "DIA2";
   selectedSlotType: "isolationswiderstand" | "schleifenwiderstand";
+  isChartOpen: boolean; // NEU: Schalter für das erste Öffnen des Charts
 }
 
 const initialState: KabelueberwachungChartState = {
@@ -14,6 +15,7 @@ const initialState: KabelueberwachungChartState = {
   bisDatum: "2025-02-28",
   selectedMode: "DIA0",
   selectedSlotType: "schleifenwiderstand",
+  isChartOpen: false, // Standard: Chart ist beim ersten Laden geschlossen
 };
 
 const kabelueberwachungChartSlice = createSlice({
@@ -22,6 +24,16 @@ const kabelueberwachungChartSlice = createSlice({
   reducers: {
     setChartData: (state, action: PayloadAction<any[]>) => {
       state.chartData = action.payload;
+
+      // Falls das Chart das erste Mal geöffnet wird, setze vonDatum & bisDatum
+      if (!state.isChartOpen && action.payload.length > 0) {
+        const firstDate = new Date(action.payload[action.payload.length - 1].t);
+        const lastDate = new Date(action.payload[0].t);
+        state.vonDatum = firstDate.toISOString().split("T")[0];
+        state.bisDatum = lastDate.toISOString().split("T")[0];
+
+        state.isChartOpen = true; // Schalter setzen, damit es nicht erneut passiert
+      }
     },
     setVonDatum: (state, action: PayloadAction<string>) => {
       state.vonDatum = action.payload;
@@ -41,6 +53,9 @@ const kabelueberwachungChartSlice = createSlice({
     ) => {
       state.selectedSlotType = action.payload;
     },
+    setChartOpen: (state, action: PayloadAction<boolean>) => {
+      state.isChartOpen = action.payload;
+    },
   },
 });
 
@@ -50,6 +65,7 @@ export const {
   setBisDatum,
   setSelectedMode,
   setSelectedSlotType,
+  setChartOpen,
 } = kabelueberwachungChartSlice.actions;
 
 export default kabelueberwachungChartSlice.reducer;