From 9a9614ffd8c8472763a6f056d447611f16b4959f Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Tue, 25 Feb 2025 07:46:50 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20Fullscreen-Toggle=20f=C3=BCr=20Chart-Mo?=
 =?UTF-8?q?dal=20hinzugef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Neuer Fullscreen-Button oben rechts hinzugefügt
- State `isFullScreen` eingeführt zur Steuerung der Modal-Größe
- Dynamische Anpassung der Modal-Stile für Vollbildmodus
- Smooth-Transition für ein weiches Umschalten zwischen Normal- und Fullscreen-Modus
---
 .../kue705FO/Charts/ChartSwitcher.tsx         | 43 +++++++++++++++----
 1 file changed, 35 insertions(+), 8 deletions(-)

diff --git a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx b/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx
index 0fc6415..7bbd988 100644
--- a/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx
@@ -1,5 +1,5 @@
-"useClient"; // /components/modules/kue705FO/charts/ChartSwitcher.tsx
-import React, { useEffect } from "react";
+"use client"; // /components/modules/kue705FO/charts/ChartSwitcher.tsx
+import React, { useState } from "react";
 import ReactModal from "react-modal";
 import LoopChartActionBar from "./LoopMeasurementChart/LoopChartActionBar";
 import TDRChartActionBar from "./TDRChart/TDRChartActionBar";
@@ -19,13 +19,19 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
   const activeMode = useSelector(
     (state: RootState) => state.kueChartMode.activeMode
   );
+  const [isFullScreen, setIsFullScreen] = useState(false);
 
-  // **Neue Funktion: Modal schließen + Redux-Status zurücksetzen**
+  // **Modal schließen + Redux-Status zurücksetzen**
   const handleClose = () => {
     dispatch(setChartOpen(false)); // Schalter zurücksetzen
     onClose(); // Originale Schließen-Funktion aufrufen
   };
 
+  // **Vollbildmodus umschalten**
+  const toggleFullScreen = () => {
+    setIsFullScreen(!isFullScreen);
+  };
+
   return (
     <ReactModal
       isOpen={isOpen}
@@ -39,15 +45,32 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
           bottom: "auto",
           marginRight: "-50%",
           transform: "translate(-50%, -50%)",
-          width: "100%",
-          maxWidth: "70rem",
-          height: "35rem",
+          width: isFullScreen ? "100vw" : "70rem",
+          height: isFullScreen ? "100vh" : "35rem",
           padding: "1rem",
+          transition: "all 0.3s ease-in-out",
         },
       }}
     >
+      {/* Schließen-Button */}
       <button
-        onClick={handleClose} // Hier `handleClose` statt `onClose`
+        onClick={handleClose}
+        style={{
+          position: "absolute",
+          top: "0.625rem",
+          right: "3rem",
+          background: "transparent",
+          border: "none",
+          fontSize: "1.5rem",
+          cursor: "pointer",
+        }}
+      >
+        <i className="bi bi-x-circle-fill"></i>
+      </button>
+
+      {/* Fullscreen-Button */}
+      <button
+        onClick={toggleFullScreen}
         style={{
           position: "absolute",
           top: "0.625rem",
@@ -58,7 +81,11 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
           cursor: "pointer",
         }}
       >
-        <i className="bi bi-x-circle-fill"></i>
+        <i
+          className={
+            isFullScreen ? "bi bi-fullscreen-exit" : "bi bi-arrows-fullscreen"
+          }
+        ></i>
       </button>
 
       {/* Nur die richtige ActionBar und das richtige Chart basierend auf dem Modus anzeigen */}