Struktur in components verbessert

components/main/kabelueberwachung/kue705FO/Charts/ChartSwitcher.tsx

@@ -0,0 +1,76 @@
+// /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;