From 4c55e9e9fa37809bf6a3476ecb4720416170857e Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Tue, 25 Feb 2025 10:00:24 +0100
Subject: [PATCH] feat: Fullscreen-Zustand mit Redux verwaltet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- `isFullScreen` zum Redux-Slice hinzugefügt
- `ChartSwitcher.tsx` angepasst, um Redux zu nutzen
- `LoopMeasurementChart.tsx` & `TDRChart.tsx` auf Redux umgestellt
- Fullscreen-Zustand bleibt jetzt persistent
---
 .../kue705FO/Charts/ChartSwitcher.tsx            | 16 +++++++++++-----
 .../LoopMeasurementChart.tsx                     |  6 +++++-
 .../kue705FO/Charts/TDRChart/TDRChart.tsx        |  7 ++++++-
 config/webVersion.ts                             |  2 +-
 redux/slices/kabelueberwachungChartSlice.ts      |  6 ++++++
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx b/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx
index 35f0687..4195b81 100644
--- a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx
@@ -7,7 +7,10 @@ import LoopMeasurementChart from "./LoopMeasurementChart/LoopMeasurementChart";
 import TDRChart from "./TDRChart/TDRChart";
 import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "../../../../../redux/store";
-import { setChartOpen } from "../../../../../redux/slices/kabelueberwachungChartSlice";
+import {
+  setChartOpen,
+  setFullScreen,
+} from "../../../../../redux/slices/kabelueberwachungChartSlice";
 
 interface ChartSwitcherProps {
   isOpen: boolean;
@@ -19,17 +22,20 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
   const activeMode = useSelector(
     (state: RootState) => state.kueChartMode.activeMode
   );
-  const [isFullScreen, setIsFullScreen] = useState(false);
+  const isFullScreen = useSelector(
+    (state: RootState) => state.kabelueberwachungChart.isFullScreen
+  );
 
   // **Modal schließen + Redux-Status zurücksetzen**
   const handleClose = () => {
     dispatch(setChartOpen(false));
+    dispatch(setFullScreen(false));
     onClose();
   };
 
   // **Vollbildmodus umschalten**
   const toggleFullScreen = () => {
-    setIsFullScreen(!isFullScreen);
+    dispatch(setFullScreen(!isFullScreen));
   };
 
   return (
@@ -108,7 +114,7 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
           <>
             <h3 className="text-lg font-semibold">Schleifenmessung</h3>
             <LoopChartActionBar />
-            <div style={{ flex: 1, height: "100%" }}>
+            <div style={{ flex: 1, height: "90%" }}>
               <LoopMeasurementChart isFullScreen={isFullScreen} />
             </div>
           </>
@@ -116,7 +122,7 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
           <>
             <h3 className="text-lg font-semibold">TDR-Messung</h3>
             <TDRChartActionBar />
-            <div style={{ flex: 1, height: "100%" }}>
+            <div style={{ flex: 1, height: "90%" }}>
               <TDRChart isFullScreen={isFullScreen} />
             </div>
           </>
diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
index 1040af5..c5755d7 100644
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
@@ -6,7 +6,11 @@ import { RootState } from "../../../../../../redux/store";
 import Chart from "chart.js/auto";
 import "chartjs-adapter-moment";
 
-const LoopMeasurementChart = ({ isFullScreen }: { isFullScreen: boolean }) => {
+const LoopMeasurementChart = () => {
+  const isFullScreen = useSelector(
+    (state: RootState) => state.kabelueberwachungChart.isFullScreen
+  );
+
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
   const [zoomPlugin, setZoomPlugin] = useState<any>(null);
diff --git a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
index 8e0bfc4..99d3e36 100644
--- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
@@ -1,10 +1,15 @@
 // components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
 import React, { useEffect, useRef } from "react";
+import { RootState } from "../../../../../../redux/store";
 import { useSelector } from "react-redux";
 import { Chart, registerables } from "chart.js";
 import "chartjs-adapter-date-fns";
 
-const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
+const TDRChart: React.FC = () => {
+  const isFullScreen = useSelector(
+    (state: RootState) => state.kabelueberwachungChart.isFullScreen
+  );
+
   const chartRef = useRef<HTMLCanvasElement>(null);
   const chartInstance = useRef<Chart | null>(null);
 
diff --git a/config/webVersion.ts b/config/webVersion.ts
index 8a7d8e2..7fcb02c 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.108";
+const webVersion = "1.6.109";
 export default webVersion;
diff --git a/redux/slices/kabelueberwachungChartSlice.ts b/redux/slices/kabelueberwachungChartSlice.ts
index a84a222..86a100f 100644
--- a/redux/slices/kabelueberwachungChartSlice.ts
+++ b/redux/slices/kabelueberwachungChartSlice.ts
@@ -18,6 +18,7 @@ interface KabelueberwachungChartState {
   isChartOpen: boolean;
   slotNumber: number | null;
   tdrChartData: TDRData[]; // Hinzufügen des TDR-Datenzustands
+  isFullScreen: boolean;
 }
 
 // Initialer Zustand des Slices
@@ -30,6 +31,7 @@ const initialState: KabelueberwachungChartState = {
   isChartOpen: false,
   slotNumber: null,
   tdrChartData: [], // Initialisierung mit leerem Array
+  isFullScreen: false,
 };
 
 // Erstellung des Slices
@@ -78,6 +80,9 @@ const kabelueberwachungChartSlice = createSlice({
     ) => {
       state.tdrChartData = action.payload;
     },
+    setFullScreen: (state, action: PayloadAction<boolean>) => {
+      state.isFullScreen = action.payload; // **⬅️ Neue Action für Fullscreen**
+    },
   },
 });
 
@@ -91,6 +96,7 @@ export const {
   setSelectedSlotType,
   setChartOpen,
   setTDRChartData,
+  setFullScreen,
 } = kabelueberwachungChartSlice.actions;
 
 // Export des Reducers