Modal für Messkurve auslagern

components/modales/kueModal/ChartModal.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import ReactModal from "react-modal";
+import TDRPopup from "./TDRPopup";
+
+interface ChartModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  chartRef: React.RefObject<HTMLCanvasElement>;
+}
+
+const ChartModal: React.FC<ChartModalProps> = ({
+  isOpen,
+  onClose,
+  chartRef,
+}) => {
+  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: "30rem",
+          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>
+
+      <div style={{ maxHeight: "100%", overflow: "auto" }}>
+        <TDRPopup />
+      </div>
+
+      <canvas
+        id="myChart"
+        ref={chartRef}
+        style={{ width: "100%", height: "20rem" }}
+      ></canvas>
+    </ReactModal>
+  );
+};
+
+export default ChartModal;

components/modules/Kue705FO.tsx

@@ -19,6 +19,8 @@ import { goLoop } from "../../utils/goLoop";
 import { goTDR } from "../../utils/goTDR";
 import { loadTDRChartData } from "../../utils/loadTDRChartData";
 import { loadLoopChartData } from "../../utils/loadLoopChartData";
+import { Kue705FOProps } from "../../types/components/Kue705FOProps";
+import ChartModal from "../modales/kueModal/ChartModal";
 
 const Kue705FO: React.FC<Kue705FOProps> = ({
   isolationswert,
@@ -187,7 +189,7 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
         kueGroundFault,
         kueAlarm1,
         kueAlarm2,
-        kueOverflow,
+        kueOverflow ?? undefined,
         isolationswert,
         isoDisplayText,
         groundFaultDisplayText,
@@ -425,60 +427,11 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
 
           {/* Modal für Messkurve */}
           {showChartModal && (
-            <ReactModal
+            <ChartModal
               isOpen={showChartModal}
-              onRequestClose={handleCloseChartModal}
-              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%", // Breite reduzieren
-                  maxWidth: "50rem", // Maximale Breite
-                  height: "30rem", // Höhe anpassen
-                  padding: "1rem", // Weniger Padding
-                  overflow: "hidden", // Scrollen vermeiden
-                },
-              }}
-            >
-              <button
-                onClick={handleCloseChartModal}
-                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>{" "}
-                {/* Bootstrap Icon "X" */}
-              </button>
-
-              {/* Verwenden Sie die separate TDRPopup-Komponente */}
-              <div
-                style={{
-                  maxHeight: "100%", // Inhalte anpassen
-                  overflow: "auto", // Nur bei Bedarf Scrollen aktivieren
-                }}
-              >
-                <TDRPopup />
-              </div>
-
-              {/* Canvas für die Chart.js-Grafik */}
-              <canvas
-                id="myChart"
-                ref={chartRef}
-                style={{ width: "100%", height: "20rem" }} // Grafikhöhe reduzieren
-              ></canvas>
-            </ReactModal>
+              onClose={handleCloseChartModal}
+              chartRef={chartRef}
+            />
           )}
         </>
       ) : (
@@ -491,13 +444,3 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
 };
 
 export default Kue705FO;
-
-interface Kue705FOProps {
-  isolationswert: number | string | JSX.Element;
-  schleifenwiderstand: number | string;
-  modulName: string;
-  kueOnline: number;
-  slotIndex: number;
-  tdrLocation: number[];
-  alarmStatus?: boolean;
-}