feat: Projekt von JavaScript zu TypeScript migriert

2025-01-25 00:20:19 +01:00
parent fde7cf33c4
commit 4f809877ea
45 changed files with 579 additions and 291 deletions
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -4,7 +4,7 @@ import { Icon } from "@iconify/react";

 function Footer() {
  const [showSlider, setShowSlider] = useState(false);
-  const sliderRef = useRef(null);
+  const sliderRef = useRef<HTMLDivElement>(null);

  const pdfFiles = [
    // "ACCESS.PDF",
@@ -26,7 +26,7 @@ function Footer() {
  ];

  // Funktion zum Laden der PDFs direkt aus dem öffentlichen Verzeichnis
-  const loadPDF = (fileName) => {
+  const loadPDF = (fileName: string) => {
    const pdfUrl = `/doku/${fileName}`; // Annahme: Die PDFs liegen im Ordner "public/doku"
    window.open(pdfUrl, "_blank"); // Öffnet die PDF in einem neuen Tab
    setShowSlider(false);
@@ -34,8 +34,11 @@ function Footer() {

  // Schließt den Slider, wenn außerhalb geklickt wird
  useEffect(() => {
-    function handleClickOutside(event) {
-      if (sliderRef.current && !sliderRef.current.contains(event.target)) {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        sliderRef.current &&
+        !sliderRef.current.contains(event.target as Node)
+      ) {
        setShowSlider(false);
      }
    }
--- a/components/Header.tsx
+++ b/components/Header.tsx
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -3,7 +3,11 @@ import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";

-function Navigation() {
+interface NavigationProps {
+  className?: string;
+}
+
+const Navigation: React.FC<NavigationProps> = ({ className }) => {
  const pathname = usePathname();
  const [activeLink, setActiveLink] = useState("");

@@ -13,7 +17,7 @@ function Navigation() {
    }
  }, [pathname]);

-  const formatPath = (path) => {
+  const formatPath = (path: string) => {
    return process.env.NODE_ENV === "production" ? `${path}.html` : path;
  };

@@ -44,6 +48,6 @@ function Navigation() {
      </nav>
    </aside>
  );
-}
+};

 export default Navigation;
--- a/components/modales/kueModal/KueModal.tsx
+++ b/components/modales/kueModal/KueModal.tsx
@@ -2,16 +2,28 @@
 import ReactModal from "react-modal";
 import { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { updateValues } from "../../../store/variablesSlice";
+import { setVariables  } from "../../../store/variablesSlice";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
-import handleSave from "./handlers/handleSave";
+import handleSave , { OriginalValues } from "./handlers/handleSave";
 import handleDisplayEinschalten from "./handlers/handleDisplayEinschalten";
 import handleChange from "./handlers/handleChange";
 import firmwareUpdate from "./handlers/firmwareUpdate";
 import decodeToken from "../../../utils/decodeToken";
+// Props-Typen definieren
+interface KueModalProps {
+  showModal: boolean;
+  onClose: () => void;
+  slot: number;
+  onModulNameChange: (id: string) => void;
+}

-function KueModal({ showModal, onClose, slot, onModulNameChange }) {
-  const isAdminLoggedIn = useSelector((state) => state.auth.isAdminLoggedIn);
+function KueModal({
+  showModal,
+  onClose,
+  slot,
+  onModulNameChange,
+}: KueModalProps): JSX.Element {
+  const isAdminLoggedIn = useSelector((state: any) => state.auth.isAdminLoggedIn);
  const [isAdmin, setIsAdmin] = useState(false);
  const dispatch = useDispatch();
  const [ids, setIds] = useState(Array(32).fill(""));
@@ -30,17 +42,26 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
    Array(32).fill(24)
  );

-  const [originalValues, setOriginalValues] = useState({});
+  const [originalValues, setOriginalValues] = useState<OriginalValues>({
+    kueID: Array(32).fill(""),
+    kueBezeichnungen: Array(32).fill(""),
+    isolationsgrenzwerte: Array(32).fill(10.0),
+    verzoegerung: Array(32).fill(1.0),
+    untereSchleifenGrenzwerte: Array(32).fill(0.1),
+    obereSchleifenGrenzwerte: Array(32).fill(1.0),
+    schleifenintervall: Array(32).fill(24),
+  });
+  

-  // Werte aus dem Redux-Store abrufen
-  const {
+   // Werte aus dem Redux-Store abrufen
+   const {
    kueID,
    kueLimit1,
    kueDelay1,
    kueLimit2Low,
    kueLimit2High,
    kueLoopInterval,
-  } = useSelector((state) => state.variables);
+  } = useSelector((state: any) => state.variables);

  const handleSaveWrapper = () => {
    handleSave({
@@ -66,9 +87,9 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
  // Initiale Werte festlegen, nur einmal beim Öffnen des Modals
  useEffect(() => {
    if (showModal) {
-      setIds(kueID ? kueID.map((id) => id.trim() || "---") : ids);
+      setIds(kueID ? kueID.map((id: string) => id.trim() || "---") : ids);
      setBezeichnungen(
-        kueID ? kueID.map((name) => name.trim() || "---") : bezeichnungen
+        kueID ? kueID.map((name: string) => name.trim() || "---") : bezeichnungen
      );
      setIsolationsgrenzwerte(kueLimit1 || isolationsgrenzwerte);
      setVerzoegerung(kueDelay1 || verzoegerung);
@@ -77,14 +98,15 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
      setSchleifenintervall(kueLoopInterval || schleifenintervall);

      setOriginalValues({
-        ids: [...ids],
-        bezeichnungen: [...bezeichnungen],
+        kueID: [...ids],
+        kueBezeichnungen: [...bezeichnungen],
        isolationsgrenzwerte: [...isolationsgrenzwerte],
        verzoegerung: [...verzoegerung],
        untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
        obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
        schleifenintervall: [...schleifenintervall],
      });
+      
    }
  }, [showModal]); // nur von showModal abhängig ansonsten wird alle 10 Sekunden die Werte zurückgesetzt in Modal
  //------------------------------------------------------------------------------------------------------------
@@ -110,7 +132,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
        overlay: {
          backgroundColor: "rgba(0, 0, 0, 0.5)",
          zIndex: 100,
-          text: "black",
+   
        },
        content: {
          top: "50%",
--- a/components/modales/kueModal/handlers/firmwareUpdate.ts
+++ b/components/modales/kueModal/handlers/firmwareUpdate.ts
@@ -1,4 +1,4 @@
-const firmwareUpdate = (slot) => {
+const firmwareUpdate = (slot: number) => {
  const url = `${window.location.origin}/CPL?/kabelueberwachung.html&KSU${slot}=1`;
  fetch(url, { method: "GET" })
    .then((response) => {
--- a/components/modales/kueModal/handlers/handleChange.js
+++ b/components/modales/kueModal/handlers/handleChange.js
@@ -1,10 +0,0 @@
-// Funktionen zur Änderung der Werte
-const handleChange = (setter, e, slot) => {
-  const value = e.target.value;
-  setter((prev) => {
-    const updated = [...prev];
-    updated[slot] = value;
-    return updated;
-  });
-};
-export default handleChange;
--- a/components/modales/kueModal/handlers/handleChange.ts
+++ b/components/modales/kueModal/handlers/handleChange.ts
@@ -0,0 +1,18 @@
+import { Dispatch, SetStateAction } from "react";
+
+// Funktion zur Änderung der Werte
+const handleChange = (
+  setter: Dispatch<SetStateAction<any[]>>, // Typ für den Setter
+  e: React.ChangeEvent<HTMLInputElement>, // Typ für das Event
+  slot: number // Typ für den Slot
+) => {
+  const value = e.target.value;
+  setter((prev: any[]) => {
+    // Typ für den vorherigen Zustand
+    const updated = [...prev];
+    updated[slot] = value;
+    return updated;
+  });
+};
+
+export default handleChange;
--- a/components/modales/kueModal/handlers/handleDisplayEinschalten.ts
+++ b/components/modales/kueModal/handlers/handleDisplayEinschalten.ts
@@ -1,4 +1,4 @@
-const handleDisplayEinschalten = (slot) => {
+const handleDisplayEinschalten = (slot: number) => {
  const url = `/CPL?/kabelueberwachung.html&KSD${slot}=1`;
  fetch(url, { method: "GET" })
    .then((response) => {
--- a/components/modales/kueModal/handlers/handleSave.ts
+++ b/components/modales/kueModal/handlers/handleSave.ts
@@ -1,4 +1,31 @@
-import { updateValues } from "../../../../store/variablesSlice";
+// components/modales/kueModal/handlers/handleSave.ts
+import { setVariables } from "../../../../store/variablesSlice";
+
+export  interface OriginalValues {
+  kueID: string[];
+  kueBezeichnungen: string[];
+  isolationsgrenzwerte: number[];
+  verzoegerung: number[];
+  untereSchleifenGrenzwerte: number[];
+  obereSchleifenGrenzwerte: number[];
+  schleifenintervall: number[];
+}
+
+interface HandleSaveParams {
+  ids: string[]; // kueID im Redux-Slice
+  bezeichnungen: string[]; // kueBezeichnungen im Redux-Slice
+  isolationsgrenzwerte: number[];
+  verzoegerung: number[];
+  untereSchleifenGrenzwerte: number[];
+  obereSchleifenGrenzwerte: number[];
+  schleifenintervall: number[];
+  originalValues: OriginalValues;
+  slot: number;
+  dispatch: (action: any) => void;
+  onModulNameChange: (id: string) => void;
+  onClose: () => void;
+}
+
 const handleSave = ({
  ids,
  bezeichnungen,
@@ -12,14 +39,21 @@ const handleSave = ({
  dispatch,
  onModulNameChange,
  onClose,
-}) => {
-  const changes = {};
+}: HandleSaveParams): void => {
+  const changes: Partial<{
+    KID: string;
+    KIA: string;
+    KL_: number;
+    KD_: number;
+    KR_: number;
+    KRO_: number;
+    KRI: number;
+  }> = {};

-  // Überprüfen, ob Änderungen gegenüber den Originalwerten vorliegen
-  if (ids[slot] !== originalValues.ids[slot]) {
+  if (ids[slot] !== originalValues.kueID[slot]) {
    changes.KID = ids[slot];
  }
-  if (bezeichnungen[slot] !== originalValues.bezeichnungen[slot]) {
+  if (bezeichnungen[slot] !== originalValues.kueBezeichnungen[slot]) {
    changes.KIA = bezeichnungen[slot];
  }
  if (
@@ -48,8 +82,10 @@ const handleSave = ({

  if (Object.keys(changes).length > 0) {
    let url = `/cpl?/kabelueberwachung.html&slot=${slot}`;
-    Object.keys(changes).forEach((paramKey) => {
-      url += `&${paramKey}${slot}=${encodeURIComponent(changes[paramKey])}`;
+    Object.entries(changes).forEach(([paramKey, paramValue]) => {
+      if (paramValue !== undefined) {
+        url += `&${paramKey}${slot}=${encodeURIComponent(paramValue)}`;
+      }
    });

    fetch(url, { method: "GET" })
@@ -58,11 +94,10 @@ const handleSave = ({
          alert("Daten erfolgreich gespeichert!");
          onModulNameChange(ids[slot]);

-          // Aktualisiere Redux-Store mit neuen Werten
          dispatch(
-            updateValues({
-              ids: [...ids],
-              bezeichnungen: [...bezeichnungen],
+            setVariables({
+              kueID: [...ids],
+              kueBezeichnungen: [...bezeichnungen],
              isolationsgrenzwerte: [...isolationsgrenzwerte],
              verzoegerung: [...verzoegerung],
              untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
@@ -76,7 +111,7 @@ const handleSave = ({
      })
      .catch((error) => {
        console.error("Fehler:", error);
-        //alert("Fehler beim Senden der Daten!");
+        alert("Fehler beim Senden der Daten!");
      });
  } else {
    alert("Keine Änderungen vorgenommen.");
--- a/components/modales/settingsModal/SettingsModal.tsx
+++ b/components/modales/settingsModal/SettingsModal.tsx
--- a/components/modales/settingsModal/handlers/handleClearDatabase.ts
+++ b/components/modales/settingsModal/handlers/handleClearDatabase.ts
--- a/components/modales/settingsModal/handlers/handleReboot.ts
+++ b/components/modales/settingsModal/handlers/handleReboot.ts
@@ -1,4 +1,5 @@
-const handleReboot = async (newIp = null) => {
+// components/modales/settingsModal/handlers/handleReboot.ts
+const handleReboot = async (newIp: string | null = null): Promise<void> => {
  const showWaitPage = () => {
    const waitHTML = `
      <!DOCTYPE html>
@@ -48,21 +49,22 @@ const handleReboot = async (newIp = null) => {
    `;
    document.documentElement.innerHTML = waitHTML;

-    // JavaScript für die Progress-Bar-Animation nach dem Hinzufügen der HTML-Struktur
    let progress = 0;
    const progressBar = document.getElementById("progress-bar");
-    const interval = setInterval(() => {
-      progress += 1;
-      progressBar.style.width = progress + "%";
-      if (progress >= 100) {
-        clearInterval(interval);
-      }
-    }, 300); // 300ms x 100 = 30 Sekunden
+    if (progressBar) {
+      const interval = setInterval(() => {
+        progress += 1;
+        progressBar.style.width = progress + "%";
+        if (progress >= 100) {
+          clearInterval(interval);
+        }
+      }, 300);
+    } else {
+      console.error("Progress-Bar-Element nicht gefunden.");
+    }
  };

-  if (
-    window.confirm("Sind Sie sicher, dass Sie den CPL neu starten möchten?")
-  ) {
+  if (window.confirm("Sind Sie sicher, dass Sie den CPL neu starten möchten?")) {
    showWaitPage();

    const baseRedirectURL = newIp ? `https://${newIp}` : window.location.origin;
--- a/components/modales/settingsModal/handlers/handleSetDateTime.ts
+++ b/components/modales/settingsModal/handlers/handleSetDateTime.ts
--- a/components/modales/settingsModal/handlers/handleSubmit.ts
+++ b/components/modales/settingsModal/handlers/handleSubmit.ts
@@ -1,10 +1,37 @@
-// components/modales/handlers/handleSubmit.js
+// components/modales/handlers/handleSubmit.ts
 import handleReboot from "./handleReboot";

-const handleSubmit = (originalValues, currentValues) => {
-  const changes = {};
+interface OriginalValues {
+  name: string;
+  ip: string;
+  subnet: string;
+  gateway: string;
+  ntp1: string;
+  ntp2: string;
+  ntp3: string;
+  ntpTimezone: string;
+  active: boolean;
+}
+
+interface CurrentValues {
+  name: string;
+  ip: string;
+  subnet: string;
+  gateway: string;
+  ntp1: string;
+  ntp2: string;
+  ntp3: string;
+  ntpTimezone: string;
+  active: boolean;
+}
+
+const handleSubmit = (
+  originalValues: OriginalValues,
+  currentValues: CurrentValues
+): void => {
+  const changes: { [key: string]: string | boolean } = {};
  let networkChanges = false;
-  let newIp = null;
+  let newIp: string | null = null;

  // Überprüfe, welche Werte sich geändert haben
  if (currentValues.name !== originalValues.name) {
@@ -44,21 +71,25 @@ const handleSubmit = (originalValues, currentValues) => {
    // URL für die Änderungen erstellen
    let url = `${window.location.origin}/CPL?${window.location.pathname}`;
    Object.keys(changes).forEach((paramKey) => {
-      url += `&${paramKey}=${encodeURIComponent(changes[paramKey])}`;
+      url += `&${paramKey}=${encodeURIComponent(String(changes[paramKey]))}`;
    });

    console.log(url);

-    fetch(url, { method: "GET" });
-
-    alert("Daten erfolgreich gesendet!");
-
-    if (networkChanges) {
-      alert(
-        "Hinweis: Die Änderungen in CPL-Name und den Netzwerkeinstellungen werden erst nach einem Neustart des CPL wirksam."
-      );
-      handleReboot(newIp); // handleReboot mit neuer IP aufrufen
-    }
+    fetch(url, { method: "GET" })
+      .then(() => {
+        alert("Daten erfolgreich gesendet!");
+        if (networkChanges) {
+          alert(
+            "Hinweis: Die Änderungen in CPL-Name und den Netzwerkeinstellungen werden erst nach einem Neustart des CPL wirksam."
+          );
+          handleReboot(newIp); // handleReboot mit neuer IP aufrufen
+        }
+      })
+      .catch((error) => {
+        console.error("Fehler beim Senden der Daten:", error);
+        alert("Fehler beim Senden der Daten.");
+      });
  } else {
    alert("Keine Änderungen vorgenommen.");
  }
--- a/components/modules/Kue705FO.tsx
+++ b/components/modules/Kue705FO.tsx
@@ -1,12 +1,18 @@
-"use client"; // components/modules/Kue705FO.jsx
+"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";

-function Kue705FO({
+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,
@@ -14,13 +20,13 @@ function Kue705FO({
  slotIndex,
  tdrLocation,
  alarmStatus,
-}) {
+}) => {
  /*   console.log(
    `Rendering Kue705FO - SlotIndex: ${slotIndex}, ModulName: ${modulName}`
  ); */

  const chartRef = useRef(null);
-  const [zoomPlugin, setZoomPlugin] = useState(null); // Plugin-Status für Chart.js
+  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);
@@ -40,7 +46,9 @@ function Kue705FO({
  const [isoGreaterThan200, setIsoGreaterThan200] = useState(">200 MOhm");

  const [loading, setLoading] = useState(false);
-  const [isoDisplayValue, setIsoDisplayValue] = useState(); //Test erstmal leer ohne isolationswert
+  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);
@@ -55,7 +63,7 @@ function Kue705FO({
    kueOverflow,
    kueVersion: reduxKueVersion,
    tdrActive,
-  } = useSelector((state) => state.variables);
+  } = useSelector((state: RootState) => state.variables);

  const handleOpenModal = () => setShowModal(true);
  const handleCloseModal = () => setShowModal(false);
@@ -68,7 +76,7 @@ function Kue705FO({
      loadLoopChartData();
    }
  };
-  const handleButtonClick = (button) => {
+  const handleButtonClick = (button: "Schleife" | "TDR") => {
    if (button === "Schleife") {
      setActiveButton("Schleife");
      setloopTitleText("Schleifenwiderstand [kOhm]");
@@ -86,14 +94,14 @@ function Kue705FO({

  // Funktion für die Schleifenmessung
  const goLoop = () => {
-    let slot = slotIndex;
+    let slot: number = slotIndex;

    if (slot >= 32) {
      return;
    }

    // Entfernt führende Nullen, falls vorhanden
-    let slotFormat = slot < 10 ? `${parseInt(slot, 10)}` : `${slot}`;
+    let slotFormat = slot < 10 ? `${slot}` : `${slot}`;

    setLoading(true); // Setze den Ladezustand auf true
    alert(`Schleifenmessung wird für Slot ${slot + 1} gestartet...`);
@@ -120,14 +128,14 @@ function Kue705FO({
  // Funktion für die TDR-Messung
  const goTDR = () => {
    //-------------------------------------------------
-    let slot = slotIndex;
+    let slot: number = slotIndex;

    if (slot >= 32) {
      return;
    }

    // Entfernt führende Nullen, falls vorhanden
-    let slotFormat = slot < 10 ? `${parseInt(slot, 10)}` : `${slot}`;
+    let slotFormat = slot < 10 ? `${slot}` : `${slot}`;

    setLoading(true);
    alert(`TDR wird für Slot ${slot + 1} gestartet...`);
@@ -162,8 +170,13 @@ function Kue705FO({
  const handleCloseChartModal = () => setShowChartModal(false);
  // Funktion zum Erstellen des TDR-Charts

-  const createTDRChart = (dataTDR) => {
-    const ctx = document.getElementById("myChart").getContext("2d");
+  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",
@@ -260,71 +273,90 @@ function Kue705FO({
    }
  }, []);

-  const createLoopChart = (data) => {
-    const ctx = document.getElementById("myChart").getContext("2d");
-    new Chart(ctx, {
-      type: "line",
-      data: {
-        labels: data
-          .map((row) => new Date(row.t).toLocaleString("de-DE"))
-          .reverse(),
-        datasets: [
-          {
-            label: "Isolationswiderstand (MOhm)",
-            data: data.map((row) => row.m).reverse(),
-            borderColor: "#00AEEF",
-            borderWidth: 1,
-            lineTension: 0.1,
-            pointRadius: 0.3,
-            pointHoverRadius: 5,
-            fill: false,
-            yAxisID: "y",
-          },
-          {
-            label: "Schleifenwiderstand (kOhm)",
-            data: data.map((row) => row.n).reverse(),
-            borderColor: "black",
-            borderWidth: 1,
-            lineTension: 0.1,
-            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",
+  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: {
-              wheel: {
-                enabled: true, // Zoom mit Mausrad
+              pan: {
+                enabled: true,
+                mode: "xy",
              },
-              pinch: {
-                enabled: true, // Pinch-Zoom für Touchgeräte
+              zoom: {
+                wheel: {
+                  enabled: true,
+                },
+                pinch: {
+                  enabled: true,
+                },
+                mode: "xy",
              },
-              mode: "xy", // x und y Achsen zoomen
            },
          },
        },
-      },
-    });
+      });
+    };
  };

  useEffect(() => {
@@ -335,7 +367,7 @@ function Kue705FO({
        (kueCableBreak && kueCableBreak[slotIndex]) ||
        (kueGroundFault && kueGroundFault[slotIndex]);

-      setCurrentAlarmStatus(alarmStatus);
+      setCurrentAlarmStatus(!!alarmStatus); // Wandelt string oder undefined in boolean um
    };

    updateAlarmStatus();
@@ -352,10 +384,10 @@ function Kue705FO({
  // 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;
+    let intervalId: NodeJS.Timeout | undefined;

    // Funktion zum Blinken des Textes oder Icons
-    const setBlinkingText = (text) => {
+    const setBlinkingText = (text: string | JSX.Element) => {
      // Setze den Text direkt beim ersten Aufruf, ohne auf das Intervall zu warten
      setIsoDisplayValue(text);

@@ -375,27 +407,27 @@ function Kue705FO({
    };

    // Priorisierte Alarmanzeige
-    if (kuePSTmMinus96V?.[slotIndex] === 1) {
+    if (Number(kuePSTmMinus96V?.[slotIndex]) === 1) {
      clearInterval(intervalId); // Stoppt das vorherige Intervall, falls aktiv
      setBlinkingText("PST-M prüfen");
-    } else if (kueCableBreak?.[slotIndex] === 1) {
+    } else if (Number(kueCableBreak?.[slotIndex]) === 1) {
      clearInterval(intervalId);
      setBlinkingText(isoDisplayText);
-    } else if (kueGroundFault?.[slotIndex] === 1) {
+    } else if (Number(kueGroundFault?.[slotIndex]) === 1) {
      clearInterval(intervalId);
      setBlinkingText(groundFaultDisplayText);
-    } else if (kueAlarm1?.[slotIndex] === 1) {
+    } else if (Number(kueAlarm1?.[slotIndex]) === 1) {
      clearInterval(intervalId);
      setBlinkingText(isoFaultDisplayText);
-    } else if (kueAlarm2?.[slotIndex] === 1) {
+    } else if (Number(kueAlarm2?.[slotIndex]) === 1) {
      clearInterval(intervalId);
      setBlinkingText(loopFaultDisplayText);
-    } else if (kueOverflow?.[slotIndex] === 1) {
+    } else if (Number(kueOverflow?.[slotIndex]) === 1) {
      clearInterval(intervalId);
      setIsoDisplayValue(isoGreaterThan200);
    } else {
      clearInterval(intervalId);
-      setIsoDisplayValue(isolationswert); // Standardanzeige ohne Alarm
+      setIsoDisplayValue(isolationswert.toString()); // Standardanzeige ohne Alarm
    }

    // Cleanup bei Änderungen des Status oder Schließen des Effekts
@@ -487,13 +519,13 @@ function Kue705FO({
              <div className="text-center">
                <span
                  className={
-                    kuePSTmMinus96V?.[slotIndex] === 1 ||
-                    kueCableBreak?.[slotIndex] === 1 ||
-                    kueGroundFault?.[slotIndex] === 1 ||
-                    kueAlarm1?.[slotIndex] === 1 ||
-                    kueAlarm2?.[slotIndex] === 1
+                    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]"
-                      : kueOverflow?.[slotIndex] === 1
+                      : Number(kueOverflow?.[slotIndex]) === 1
                      ? "text-white text-[0.875rem]"
                      : ""
                  }
@@ -501,12 +533,12 @@ function Kue705FO({
                  {isoDisplayValue}
                </span>

-                {kuePSTmMinus96V?.[slotIndex] !== 1 &&
-                  kueCableBreak?.[slotIndex] !== 1 &&
-                  kueGroundFault?.[slotIndex] !== 1 &&
-                  kueAlarm1?.[slotIndex] !== 1 &&
-                  kueAlarm2?.[slotIndex] !== 1 &&
-                  kueOverflow?.[slotIndex] !== 1 && (
+                {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>
@@ -563,13 +595,15 @@ function Kue705FO({
              <button
                onClick={() => handleButtonClick("TDR")}
                className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${
-                  tdrActive[slotIndex] === 0
+                  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={tdrActive[slotIndex] === 0} // Button deaktiviert, wenn TDR für diesen Slot nicht aktiv ist
+                disabled={
+                  Array.isArray(tdrActive) && tdrActive[slotIndex] === 0
+                } // Button deaktiviert, wenn TDR für diesen Slot nicht aktiv ist
              >
                TDR
              </button>
@@ -636,6 +670,16 @@ function Kue705FO({
      )}
    </div>
  );
-}
+};

 export default Kue705FO;
+
+interface Kue705FOProps {
+  isolationswert: number | string | JSX.Element;
+  schleifenwiderstand: number | string;
+  modulName: string;
+  kueOnline: number;
+  slotIndex: number;
+  tdrLocation: number[];
+  alarmStatus?: boolean;
+}
--- a/components/modulesStatus/Access1Status.tsx
+++ b/components/modulesStatus/Access1Status.tsx
--- a/components/modulesStatus/Access2Status.tsx
+++ b/components/modulesStatus/Access2Status.tsx
--- a/components/modulesStatus/CPLStatus.tsx
+++ b/components/modulesStatus/CPLStatus.tsx
--- a/components/modulesStatus/KabelModulStatus.tsx
+++ b/components/modulesStatus/KabelModulStatus.tsx
@@ -1,4 +1,4 @@
-const KabelModulStatus = ({
+const KabelModulStatus: React.FC<KabelModulStatusProps> = ({
  slot,
  kueCableBreak,
  kueAlarm1,
@@ -56,3 +56,13 @@ const KabelModulStatus = ({
 };

 export default KabelModulStatus;
+
+interface KabelModulStatusProps {
+  slot: number;
+  kueCableBreak: number[];
+  kueAlarm1: number[];
+  kueAlarm2: number[];
+  kueGroundFault: number[];
+  isOnline: boolean;
+  moduleVersion: number;
+}
--- a/components/modulesStatus/XioPM1Status.tsx
+++ b/components/modulesStatus/XioPM1Status.tsx
--- a/components/modulesStatus/XioPM2Status.tsx
+++ b/components/modulesStatus/XioPM2Status.tsx