77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
// /components/modules/kue705FO/charts/ChartSwitcher.tsx
|
|
import React from "react";
|
|
import ReactModal from "react-modal";
|
|
import LoopChartActionBar from "./LoopMeasurementChart/LoopChartActionBar";
|
|
import TDRChartActionBar from "./TDRChart/TDRChartActionBar";
|
|
import LoopMeasurementChart from "./LoopMeasurementChart/LoopMeasurementChart";
|
|
import TDRChart from "./TDRChart/TDRChart";
|
|
import { useSelector } from "react-redux";
|
|
import { RootState } from "../../../../redux/store";
|
|
|
|
interface ChartSwitcherProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const ChartSwitcher: React.FC<ChartSwitcherProps> = ({ isOpen, onClose }) => {
|
|
const activeMode = useSelector(
|
|
(state: RootState) => state.chartData.activeMode
|
|
);
|
|
|
|
return (
|
|
<ReactModal
|
|
isOpen={isOpen}
|
|
onRequestClose={onClose}
|
|
ariaHideApp={false}
|
|
style={{
|
|
overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
|
|
content: {
|
|
top: "50%",
|
|
left: "50%",
|
|
right: "auto",
|
|
bottom: "auto",
|
|
marginRight: "-50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: "80%",
|
|
maxWidth: "50rem",
|
|
height: "35rem",
|
|
padding: "1rem",
|
|
overflow: "hidden",
|
|
},
|
|
}}
|
|
>
|
|
<button
|
|
onClick={onClose}
|
|
style={{
|
|
position: "absolute",
|
|
top: "0.625rem",
|
|
right: "0.625rem",
|
|
background: "transparent",
|
|
border: "none",
|
|
fontSize: "1.5rem",
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
<i className="bi bi-x-circle-fill"></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 /> {/* 🎯 Hier wird das Chart gerendert */}
|
|
</>
|
|
) : (
|
|
<>
|
|
<h3 className="text-lg font-semibold">TDR-Messung</h3>
|
|
<TDRChartActionBar />
|
|
<TDRChart /> {/* 🎯 Hier wird das Chart gerendert */}
|
|
</>
|
|
)}
|
|
</ReactModal>
|
|
);
|
|
};
|
|
|
|
export default ChartSwitcher;
|