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>
);
};

13
components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
View File

@@ -1,11 +1,12 @@
"use client"; // components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
import React, { useEffect, useRef, useState } from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import Chart from "chart.js/auto";
import "chartjs-adapter-moment";
const LoopMeasurementChart = () => {
const LoopMeasurementChart = ({ isFullScreen }: { isFullScreen: boolean }) => {
const chartRef = useRef<HTMLCanvasElement>(null);
const chartInstance = useRef<Chart | null>(null);
const [zoomPlugin, setZoomPlugin] = useState<any>(null);
@@ -170,8 +171,14 @@ const LoopMeasurementChart = () => {
}, [loopMeasurementCurveChartData, vonDatum, bisDatum, selectedMode]);
return (
<div style={{ position: "relative", width: "100%", height: "400px" }}>
<canvas ref={chartRef} />
<div
style={{
position: "relative",
width: "100%",
height: isFullScreen ? "90%" : "400px",
}}
>
<canvas ref={chartRef} style={{ width: "100%", height: "100%" }} />
</div>
);
};

6
components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
View File

@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
import { Chart, registerables } from "chart.js";
import "chartjs-adapter-date-fns";
const TDRChart: React.FC = () => {
const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
const chartRef = useRef<HTMLCanvasElement>(null);
const chartInstance = useRef<Chart | null>(null);
@@ -85,8 +85,8 @@ const TDRChart: React.FC = () => {
}, [tdrChartData]);
return (
<div>
<canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />
<div style={{ width: "100%", height: isFullScreen ? "100%" : "20rem" }}>
<canvas ref={chartRef} style={{ width: "100%", height: "100%" }} />
</div>
);
};

2
config/webVersion.ts
View File

@@ -6,5 +6,5 @@
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
*/
const webVersion = "1.6.107";
const webVersion = "1.6.108";
export default webVersion;