feat: Projekt von JavaScript zu TypeScript migriert

components/modules/Kue705FO.tsx

@@ -0,0 +1,685 @@
+"use client"; // components/modules/Kue705FO.tsx
+import React, { useState, useEffect, useRef } from "react";
+import ReactModal from "react-modal";
+import Chart from "chart.js/auto";
+import { useSelector } from "react-redux";
+import KueModal from "../modales/kueModal/KueModal";
+import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
+import { RootState } from "../../store/store";
+
+interface DataTDR {
+  t: number; // Oder Date, falls t ein Datum ist
+  m: number; // Der Wert für den Pegel
+}
+
+const Kue705FO: React.FC<Kue705FOProps> = ({
+  isolationswert,
+  schleifenwiderstand,
+  modulName,
+  kueOnline,
+  slotIndex,
+  tdrLocation,
+  alarmStatus,
+}) => {
+  /*   console.log(
+    `Rendering Kue705FO - SlotIndex: ${slotIndex}, ModulName: ${modulName}`
+  ); */
+
+  const chartRef = useRef(null);
+  const [zoomPlugin, setZoomPlugin] = useState<any>(null); // Plugin-Status für Chart.js
+  const [kueVersion, setKueVersion] = useState("V4.19");
+  const [currentAlarmStatus, setCurrentAlarmStatus] = useState(false);
+  const [currentModulName, setCurrentModulName] = useState(modulName);
+  const [activeButton, setActiveButton] = useState("Schleife");
+  const [loopTitleText, setloopTitleText] = useState(
+    "Schleifenwiderstand [kOhm]"
+  );
+  const [loopDisplayValue, setLoopDisplayValue] = useState(schleifenwiderstand); // Initialisiere den loopDisplayValue mit schleifenwiderstand
+
+  const [isoDisplayText, setIsoDisplayText] = useState("Aderbruch");
+  const [groundFaultDisplayText, setGroundFaultDisplayText] =
+    useState("Erdschluss");
+  const [loopFaultDisplayText, setLoopFaultDisplayText] =
+    useState("Schleifenfehler");
+  const [isoFaultDisplayText, setIsoFaultDisplayText] =
+    useState("Isolationsfehler");
+  const [isoGreaterThan200, setIsoGreaterThan200] = useState(">200 MOhm");
+
+  const [loading, setLoading] = useState(false);
+  const [isoDisplayValue, setIsoDisplayValue] = useState<
+    string | JSX.Element
+  >(); //Test erstmal leer ohne isolationswert
+  const [showModal, setShowModal] = useState(false);
+  const [showChartModal, setShowChartModal] = useState(false);
+  const [chartData, setChartData] = useState(null);
+
+  // Redux-Variablen abrufen
+  const {
+    kuePSTmMinus96V,
+    kueCableBreak,
+    kueGroundFault,
+    kueAlarm1,
+    kueAlarm2,
+    kueOverflow,
+    kueVersion: reduxKueVersion,
+    tdrActive,
+  } = useSelector((state: RootState) => state.variables);
+
+  const handleOpenModal = () => setShowModal(true);
+  const handleCloseModal = () => setShowModal(false);
+
+  const handleOpenChartModal = () => {
+    setShowChartModal(true);
+    if (activeButton === "TDR") {
+      loadTDRChartData();
+    } else {
+      loadLoopChartData();
+    }
+  };
+  const handleButtonClick = (button: "Schleife" | "TDR") => {
+    if (button === "Schleife") {
+      setActiveButton("Schleife");
+      setloopTitleText("Schleifenwiderstand [kOhm]");
+      setLoopDisplayValue(schleifenwiderstand); // Setze den Wert auf schleifenwiderstand
+    } else if (button === "TDR") {
+      setActiveButton("TDR");
+      setloopTitleText("Entfernung [Km]");
+      setLoopDisplayValue(
+        tdrLocation && tdrLocation[slotIndex] !== undefined
+          ? tdrLocation[slotIndex]
+          : "0"
+      ); // Setze den Wert auf tdrLocation oder "0" als Fallback
+    }
+  };
+
+  // Funktion für die Schleifenmessung
+  const goLoop = () => {
+    let slot: number = slotIndex;
+
+    if (slot >= 32) {
+      return;
+    }
+
+    // Entfernt führende Nullen, falls vorhanden
+    let slotFormat = slot < 10 ? `${slot}` : `${slot}`;
+
+    setLoading(true); // Setze den Ladezustand auf true
+    alert(`Schleifenmessung wird für Slot ${slot + 1} gestartet...`);
+
+    fetch(`/CPL?kabelueberwachung.html&KS_${slotFormat}=1&slot=${slot}`, {
+      method: "GET",
+    })
+      .then((response) => {
+        if (response.ok) {
+          alert(`Schleifenmessung erfolgreich gestartet für Slot ${slot + 1}`);
+          console.log("Schleifenmessung erfolgreich gestartet für Slot", slot);
+        } else {
+          alert("Fehler beim Starten der Schleifenmessung.");
+          console.error("Fehler beim Senden der Schleifen-Anfrage");
+        }
+      })
+      .catch((error) => {
+        alert("Ein Fehler ist aufgetreten.");
+        console.error("Fehler:", error);
+      })
+      .finally(() => setLoading(false)); // Ladezustand zurücksetzen
+  };
+
+  // Funktion für die TDR-Messung
+  const goTDR = () => {
+    //-------------------------------------------------
+    let slot: number = slotIndex;
+
+    if (slot >= 32) {
+      return;
+    }
+
+    // Entfernt führende Nullen, falls vorhanden
+    let slotFormat = slot < 10 ? `${slot}` : `${slot}`;
+
+    setLoading(true);
+    alert(`TDR wird für Slot ${slot + 1} gestartet...`);
+    fetch(
+      `/CPL?Service/Kabelueberwachung.html&KTT${slotFormat}=1&slot=${slot}`,
+      {
+        method: "GET",
+      }
+    )
+      .then((response) => {
+        if (response.ok) {
+          alert(`TDR erfolgreich gestartet für Slot ${slot + 1}`);
+          console.log("TDR erfolgreich gestartet für Slot", slot + 1);
+        } else {
+          console.error("Fehler beim Senden der TDR-Anfrage");
+        }
+      })
+      .catch((error) => {
+        console.error("Fehler:", error);
+      })
+      .finally(() => setLoading(false));
+  };
+  // Bestimme, welche Funktion ausgeführt wird, basierend auf dem aktiven Button
+  const handleRefreshClick = () => {
+    if (activeButton === "Schleife") {
+      goLoop(); // Wenn Schleife aktiv ist, starte goLoop
+    } else if (activeButton === "TDR") {
+      goTDR(); // Wenn TDR aktiv ist, starte goTDR
+    }
+  };
+
+  const handleCloseChartModal = () => setShowChartModal(false);
+  // Funktion zum Erstellen des TDR-Charts
+
+  const createTDRChart = (dataTDR: DataTDR[]) => {
+    const canvas = document.getElementById("myChart") as HTMLCanvasElement;
+    const ctx = canvas?.getContext("2d");
+    if (!ctx) {
+      console.error("Canvas context konnte nicht gefunden werden");
+      return;
+    }
+
+    new Chart(ctx, {
+      type: "line",
+      data: {
+        labels: dataTDR.map((row) => row.t),
+        datasets: [
+          {
+            label: "Pegel",
+            data: dataTDR.map((row) => row.m),
+            borderColor: "#00AEEF",
+            borderWidth: 1,
+            pointBorderWidth: 0,
+            pointStyle: false,
+            fill: false,
+            yAxisID: "y",
+          },
+        ],
+      },
+      options: {
+        scales: {
+          x: {
+            type: "linear",
+            position: "left",
+            title: { display: true, text: "Meter" },
+          },
+        },
+        plugins: {
+          zoom: {
+            pan: {
+              enabled: true,
+              mode: "xy",
+            },
+            zoom: {
+              wheel: {
+                enabled: true, // Zoom mit Mausrad
+              },
+              pinch: {
+                enabled: true, // Pinch-Zoom für Touchgeräte
+              },
+              mode: "xy", // x und y Achsen zoomen
+            },
+          },
+        },
+      },
+    });
+  };
+
+  const loadTDRChartData = () => {
+    const slot = slotIndex;
+    const environment = process.env.NODE_ENV || "production";
+    const fileData =
+      environment === "production"
+        ? `/CPL?/CPL/lastTDR/slot${slot}.json`
+        : `/CPLmockData/lastTDR/slot${slot}.json`;
+
+    fetch(fileData)
+      .then((response) => response.json())
+      .then((data) => {
+        setChartData(data);
+        createTDRChart(data);
+      })
+      .catch((error) =>
+        console.error("Fehler beim Laden der TDR-Messkurvendaten:", error)
+      );
+  };
+
+  const loadLoopChartData = () => {
+    const slot = slotIndex;
+    const environment = process.env.NODE_ENV || "production";
+    const fileData =
+      environment === "production"
+        ? `/CPL?/CPL/4000values/slot${slot}.json`
+        : `/CPLmockData/4000values/slot${slot}.json`;
+
+    fetch(fileData)
+      .then((response) => response.json())
+      .then((data) => {
+        setChartData(data);
+        createLoopChart(data, "Schleifenmesskurve");
+      })
+      .catch((error) =>
+        console.error("Fehler beim Laden der Schleifenmesskurvendaten:", error)
+      );
+  };
+
+  // Füge das Plugin zu Chart.js hinzu
+  useEffect(() => {
+    // Lade das Plugin nur, wenn `window` verfügbar ist
+    if (typeof window !== "undefined") {
+      import("chartjs-plugin-zoom").then((mod) => {
+        setZoomPlugin(mod.default); // Setze das Plugin
+        Chart.register(mod.default); // Plugin zur Chart.js-Instanz registrieren
+      });
+    }
+  }, []);
+
+  interface DataLoop {
+    t: number; // Zeit oder Index
+    m: number; // Isolationswiderstand
+    n: number; // Schleifenwiderstand
+  }
+
+  const createLoopChart = (data: DataLoop[], title: string) => {
+    const canvas = document.getElementById("myChart") as HTMLCanvasElement;
+    const ctx = canvas?.getContext("2d");
+    if (!ctx) {
+      console.error("Canvas context konnte nicht gefunden werden");
+      return;
+    }
+
+    const createLoopChart = (data: DataLoop[], title: string) => {
+      const canvas = document.getElementById("myChart") as HTMLCanvasElement;
+      const ctx = canvas?.getContext("2d");
+      if (!ctx) {
+        console.error("Canvas context konnte nicht gefunden werden");
+        return;
+      }
+
+      new Chart(ctx, {
+        type: "line",
+        data: {
+          labels: data.map((row) => new Date(row.t).toLocaleString("de-DE")),
+          datasets: [
+            {
+              label: "Isolationswiderstand (MOhm)",
+              data: data.map((row) => row.m),
+              borderColor: "#00AEEF",
+              borderWidth: 1,
+              tension: 0.1, // Ersatz für lineTension
+              pointRadius: 0.3,
+              pointHoverRadius: 5,
+              fill: false,
+              yAxisID: "y",
+            },
+            {
+              label: "Schleifenwiderstand (kOhm)",
+              data: data.map((row) => row.n),
+              borderColor: "black",
+              borderWidth: 1,
+              tension: 0.1, // Ersatz für lineTension
+              pointRadius: 0.3,
+              pointHoverRadius: 5,
+              fill: false,
+              yAxisID: "y1",
+            },
+          ],
+        },
+        options: {
+          scales: {
+            y: {
+              type: "linear",
+              position: "left",
+              title: { display: true, text: "MOhm" },
+            },
+            y1: {
+              type: "linear",
+              position: "right",
+              title: { display: true, text: "kOhm" },
+            },
+          },
+          plugins: {
+            zoom: {
+              pan: {
+                enabled: true,
+                mode: "xy",
+              },
+              zoom: {
+                wheel: {
+                  enabled: true,
+                },
+                pinch: {
+                  enabled: true,
+                },
+                mode: "xy",
+              },
+            },
+          },
+        },
+      });
+    };
+  };
+
+  useEffect(() => {
+    const updateAlarmStatus = () => {
+      const alarmStatus =
+        (kueAlarm1 && kueAlarm1[slotIndex]) ||
+        (kueAlarm2 && kueAlarm2[slotIndex]) ||
+        (kueCableBreak && kueCableBreak[slotIndex]) ||
+        (kueGroundFault && kueGroundFault[slotIndex]);
+
+      setCurrentAlarmStatus(!!alarmStatus); // Wandelt string oder undefined in boolean um
+    };
+
+    updateAlarmStatus();
+    const interval = setInterval(updateAlarmStatus, 10000);
+    return () => clearInterval(interval);
+  }, [slotIndex, kueAlarm1, kueAlarm2, kueCableBreak, kueGroundFault]);
+
+  useEffect(() => {
+    if (reduxKueVersion?.[slotIndex]) {
+      setKueVersion("V" + reduxKueVersion[slotIndex] / 100);
+    }
+  }, [slotIndex, reduxKueVersion]);
+  //---------------------------------------------------
+  // Funktion zum Aktualisieren der Anzeige basierend auf dem Alarmstatus mit Icon und Blinken
+  // Funktion zum Aktualisieren der Anzeige basierend auf dem Alarmstatus mit Icon und Blinken
+  useEffect(() => {
+    let intervalId: NodeJS.Timeout | undefined;
+
+    // Funktion zum Blinken des Textes oder Icons
+    const setBlinkingText = (text: string | JSX.Element) => {
+      // Setze den Text direkt beim ersten Aufruf, ohne auf das Intervall zu warten
+      setIsoDisplayValue(text);
+
+      // Starte dann das Intervall
+      intervalId = setInterval(() => {
+        setIsoDisplayValue((prevValue) =>
+          prevValue === text ? (
+            <i
+              className="bi bi-exclamation-triangle"
+              style={{ fontSize: "24px", color: "red" }}
+            ></i>
+          ) : (
+            text
+          )
+        );
+      }, 5000); // Intervall für das Blinken
+    };
+
+    // Priorisierte Alarmanzeige
+    if (Number(kuePSTmMinus96V?.[slotIndex]) === 1) {
+      clearInterval(intervalId); // Stoppt das vorherige Intervall, falls aktiv
+      setBlinkingText("PST-M prüfen");
+    } else if (Number(kueCableBreak?.[slotIndex]) === 1) {
+      clearInterval(intervalId);
+      setBlinkingText(isoDisplayText);
+    } else if (Number(kueGroundFault?.[slotIndex]) === 1) {
+      clearInterval(intervalId);
+      setBlinkingText(groundFaultDisplayText);
+    } else if (Number(kueAlarm1?.[slotIndex]) === 1) {
+      clearInterval(intervalId);
+      setBlinkingText(isoFaultDisplayText);
+    } else if (Number(kueAlarm2?.[slotIndex]) === 1) {
+      clearInterval(intervalId);
+      setBlinkingText(loopFaultDisplayText);
+    } else if (Number(kueOverflow?.[slotIndex]) === 1) {
+      clearInterval(intervalId);
+      setIsoDisplayValue(isoGreaterThan200);
+    } else {
+      clearInterval(intervalId);
+      setIsoDisplayValue(isolationswert.toString()); // Standardanzeige ohne Alarm
+    }
+
+    // Cleanup bei Änderungen des Status oder Schließen des Effekts
+    return () => clearInterval(intervalId);
+  }, [
+    slotIndex,
+    isolationswert,
+    isoDisplayText,
+    groundFaultDisplayText,
+    isoFaultDisplayText,
+    loopFaultDisplayText,
+    isoGreaterThan200,
+    kuePSTmMinus96V,
+    kueCableBreak,
+    kueGroundFault,
+    kueAlarm1,
+    kueAlarm2,
+    kueOverflow,
+  ]);
+
+  //---------------------------------------------------
+
+  // Effekt, um Modulnamen zu aktualisieren, wenn sich der Prop ändert
+  useEffect(() => {
+    setCurrentModulName(modulName);
+    //console.log(`Modulname aktualisiert für Slot ${slotIndex}:`, modulName);
+  }, [modulName, slotIndex]);
+  //---------------------------------------------------
+  // Aktualisiert den Schleifenwiderstand, wenn sich der `schleifenwiderstand`-Prop ändert
+  useEffect(() => {
+    if (activeButton === "Schleife") {
+      setLoopDisplayValue(schleifenwiderstand);
+    }
+  }, [schleifenwiderstand, activeButton]);
+  //---------------------------------------------------
+  return (
+    <div
+      className="relative bg-gray-300 w-[7.25rem] h-[24.375rem] border border-gray-400 transform laptop:-translate-y-12 2xl:-translate-y-0
+             scale-100 sm:scale-95 md:scale-100 lg:scale-105 xl:scale-90 2xl:scale-125 top-3
+             "
+    >
+      {kueOnline === 1 ? (
+        <>
+          <div className="relative w-[7.075rem] h-[15.156rem] bg-littwin-blue border-[0.094rem] border-gray-400 z-0">
+            <div className="flex items-start justify-between h-[1.875rem]">
+              <div className="relative w-[1.25rem] h-[1.25rem] bg-gray-800 flex items-center justify-center">
+                <span className="text-white text-[0.625rem]">
+                  {slotIndex + 1}
+                </span>
+              </div>
+
+              <h3 className="text-white font-bold text-[0.563rem] mr-[1rem]">
+                KÜ705-FO
+              </h3>
+
+              <button
+                onClick={handleOpenModal}
+                className="w-[0.938rem] h-[0.938rem] bg-gray-400 flex items-center justify-center"
+              >
+                <span className="text-white text-[1.25rem]">⚙</span>
+              </button>
+            </div>
+            {}
+            <KueModal
+              showModal={showModal}
+              onClose={handleCloseModal}
+              slot={slotIndex}
+              onModulNameChange={setCurrentModulName}
+            />
+            <div className="flex flex-col mt-[0.625rem] ml-[0.625rem]">
+              <div className="flex items-center space-x-[0.25rem] mt-[0.625rem]">
+                <div className="flex flex-col items-start space-y-[0.063rem] mr-[0.063rem]">
+                  <span className="text-white text-[0.625rem]">Betrieb</span>
+                  <span className="text-white text-[0.625rem]">Alarm</span>
+                </div>
+                <div className="flex flex-col items-center space-y-[0.188rem]">
+                  <div className="w-[0.625rem] h-[0.625rem] bg-green-500 rounded-full"></div>
+                  <div
+                    className={`w-[0.625rem] h-[0.625rem] rounded-full ${
+                      currentAlarmStatus ? "bg-red-500" : "bg-gray-300"
+                    }`}
+                  ></div>
+                </div>
+              </div>
+            </div>
+
+            {/* Anzeige des Isolation */}
+            <div className="relative mt-[3.125rem] mx-auto bg-black text-white w-[6.25rem] h-[2.5rem] flex items-center justify-center text-[1.125rem] z-10">
+              <div className="text-center">
+                <span
+                  className={
+                    Number(kuePSTmMinus96V?.[slotIndex]) === 1 ||
+                    Number(kueCableBreak?.[slotIndex]) === 1 ||
+                    Number(kueGroundFault?.[slotIndex]) === 1 ||
+                    Number(kueAlarm1?.[slotIndex]) === 1 ||
+                    Number(kueAlarm2?.[slotIndex]) === 1
+                      ? "text-red-500 text-[0.875rem]"
+                      : Number(kueOverflow?.[slotIndex]) === 1
+                      ? "text-white text-[0.875rem]"
+                      : ""
+                  }
+                >
+                  {isoDisplayValue}
+                </span>
+
+                {Number(kuePSTmMinus96V?.[slotIndex]) !== 1 &&
+                  Number(kueCableBreak?.[slotIndex]) !== 1 &&
+                  Number(kueGroundFault?.[slotIndex]) !== 1 &&
+                  Number(kueAlarm1?.[slotIndex]) !== 1 &&
+                  Number(kueAlarm2?.[slotIndex]) !== 1 &&
+                  Number(kueOverflow?.[slotIndex]) !== 1 && (
+                    <div className="text-[0.5rem]">ISO MOhm</div>
+                  )}
+              </div>
+            </div>
+
+            <div className="absolute top-0 left-[4.688rem] w-[0.188rem] h-full bg-white z-0"></div>
+            <div className="absolute top-[2.5rem] left-[4.688rem] w-[2.5rem] h-[0.188rem] bg-white z-0"></div>
+
+            <div className="absolute bottom-[1.25rem] left-0 right-0 text-black text-[0.625rem] bg-gray-300 p-[0.063rem] text-center">
+              {currentModulName || `Modul ${slotIndex + 1}`}
+            </div>
+
+            <div className="absolute bottom-[0.063rem] right-[0.063rem] text-black text-[0.5rem]">
+              {kueVersion}
+            </div>
+          </div>
+
+          {/* loopDisplay: Zeigt Schleifenwiderstand oder TDR-Distanz an, je nach Modus */}
+          <div className="absolute bottom-[0.063rem] left-[0.068rem] w-[7.074rem] h-[8.125rem] bg-gray-300 border-[0.094rem] border-gray-400 p-[0.063rem]">
+            <span className="text-black text-[0.438rem] absolute top-[0.125rem] left-[0.063rem] mt-[0.063rem]">
+              {loopTitleText}
+            </span>
+
+            <div className="relative w-full h-[2.813rem] bg-gray-100 border border-gray-400 flex items-center justify-center mt-[0.188rem]">
+              <button
+                onClick={handleRefreshClick} // Dynamische Funktion basierend auf aktivem Button
+                className="absolute -top-[0.063rem] -right-[0.063rem] w-[1.25rem] h-[1.25rem] bg-gray-400 flex items-center justify-center"
+                disabled={loading} // Disable button while loading
+              >
+                <span className="text-white text-[1.125rem]">⟳</span>
+              </button>
+
+              <div className="absolute bottom-[0.313rem] left-1/2 transform -translate-x-1/2 w-[6.25rem] flex justify-center items-center">
+                <div className="text-center text-black text-[0.625rem]">
+                  <p>
+                    {loopDisplayValue +
+                      (activeButton === "Schleife" ? " KOhm" : " Km")}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex mt-[0.125rem] space-x-[0.063rem]">
+              <button
+                onClick={() => handleButtonClick("Schleife")}
+                className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${
+                  activeButton === "Schleife"
+                    ? "bg-littwin-blue"
+                    : "bg-gray-400"
+                }`}
+              >
+                Schleife
+              </button>
+              <button
+                onClick={() => handleButtonClick("TDR")}
+                className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${
+                  Array.isArray(tdrActive) && tdrActive[slotIndex] === 0
+                    ? "bg-gray-200 cursor-not-allowed" // Deaktiviert: Hellgrau
+                    : activeButton === "TDR"
+                    ? "bg-littwin-blue" // Aktiviert: Littwin Blau
+                    : "bg-gray-400" // Nicht geklickt: Dunkelgrau
+                }`}
+                disabled={
+                  Array.isArray(tdrActive) && tdrActive[slotIndex] === 0
+                } // Button deaktiviert, wenn TDR für diesen Slot nicht aktiv ist
+              >
+                TDR
+              </button>
+            </div>
+
+            <button
+              onClick={handleOpenChartModal} // Öffnet das Chart-Modal
+              className="w-full h-[1.563rem] bg-littwin-blue text-white text-[0.625rem] flex items-center justify-center mt-[0.063rem]"
+            >
+              Messkurve
+            </button>
+          </div>
+
+          {/* Modal für Messkurve */}
+          {showChartModal && (
+            <ReactModal
+              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: "95%",
+                  maxWidth: "75rem",
+                  height: "40.625rem",
+                  padding: "0.625rem",
+                },
+              }}
+            >
+              <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>
+              <h2>Messkurve Slot {slotIndex + 1}</h2>
+              <canvas
+                id="myChart"
+                ref={chartRef}
+                style={{ width: "100%", height: "37.5rem" }}
+              ></canvas>
+            </ReactModal>
+          )}
+        </>
+      ) : (
+        <div className="flex items-center justify-center h-full text-gray-500">
+          <p>Kein Modul im Slot {slotIndex + 1}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Kue705FO;
+
+interface Kue705FOProps {
+  isolationswert: number | string | JSX.Element;
+  schleifenwiderstand: number | string;
+  modulName: string;
+  kueOnline: number;
+  slotIndex: number;
+  tdrLocation: number[];
+  alarmStatus?: boolean;
+}