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 = ({ 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 ( = ({ 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 */} + + {/* Fullscreen-Button */} + {/* Nur die richtige ActionBar und das richtige Chart basierend auf dem Modus anzeigen */}