Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Messkurve für Schleife und TDR auf 90% maximieren

Browse Source
This commit is contained in:
ISA
2025-02-25 09:40:15 +01:00
parent 9a9614ffd8
commit 47120c4dea
4 changed files with 82 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx
View File

@@ -23,8 +23,8 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
// **Modal schließen + Redux-Status zurücksetzen**
const handleClose = () => {
dispatch(setChartOpen(false)); // Schalter zurücksetzen
onClose(); // Originale Schließen-Funktion aufrufen
dispatch(setChartOpen(false));
onClose();
};
// **Vollbildmodus umschalten**
@@ -35,7 +35,7 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
return (
<ReactModal
isOpen={isOpen}
onRequestClose={handleClose} // Hier `handleClose` statt `onClose`
onRequestClose={handleClose}
ariaHideApp={false}
style={{
overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
@@ -45,63 +45,83 @@ const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
bottom: "auto",
marginRight: "-50%",
transform: "translate(-50%, -50%)",
width: isFullScreen ? "100vw" : "70rem",
height: isFullScreen ? "100vh" : "35rem",
width: isFullScreen ? "90vw" : "70rem",
height: isFullScreen ? "90vh" : "35rem",
padding: "1rem",
transition: "all 0.3s ease-in-out",
display: "flex",
flexDirection: "column",
},
}}
>
{/* Schließen-Button */}
<button
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}
{/* Action-Buttons */}
<div
style={{
position: "absolute",
top: "0.625rem",
right: "0.625rem",
background: "transparent",
border: "none",
fontSize: "1.5rem",
cursor: "pointer",
display: "flex",
gap: "0.75rem",
}}
>
<i
className={
isFullScreen ? "bi bi-fullscreen-exit" : "bi bi-arrows-fullscreen"
}
></i>
</button>
{/* Fullscreen-Button */}
<button
onClick={toggleFullScreen}
style={{
background: "transparent",
border: "none",
fontSize: "1.5rem",
cursor: "pointer",
}}
>
<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 */}
{activeMode === "Schleife" ? (
<>
<h3 className="text-lg font-semibold">Schleifenmessung</h3>
<LoopChartActionBar />
<LoopMeasurementChart />
</>
) : (
<>
<h3 className="text-lg font-semibold">TDR-Messung</h3>
<TDRChartActionBar />
<TDRChart />
</>
)}
{/* Schließen-Button */}
<button
onClick={handleClose}
style={{
background: "transparent",
border: "none",
fontSize: "1.5rem",
cursor: "pointer",
}}
>
<i className="bi bi-x-circle-fill"></i>
</button>
</div>
{/* Chart-Container */}
<div
style={{
flex: 1,
display: "flex",
flexDirection: "column",
height: "100%",
}}
>
{activeMode === "Schleife" ? (
<>
<h3 className="text-lg font-semibold">Schleifenmessung</h3>
<LoopChartActionBar />
<div style={{ flex: 1, height: "100%" }}>
<LoopMeasurementChart isFullScreen={isFullScreen} />
</div>
</>
) : (
<>
<h3 className="text-lg font-semibold">TDR-Messung</h3>
<TDRChartActionBar />
<div style={{ flex: 1, height: "100%" }}>
<TDRChart isFullScreen={isFullScreen} />
</div>
</>
)}
</div>
</ReactModal>
);
};