feat: Projekt von JavaScript zu TypeScript migriert

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) {
+    function handleClickOutside(event: MouseEvent) {
-      if (sliderRef.current && !sliderRef.current.contains(event.target)) {
+      if (
+        sliderRef.current &&
+        !sliderRef.current.contains(event.target as Node)
+      ) {
         setShowSlider(false);
       }
     }

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;

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 }) {
+function KueModal({
-  const isAdminLoggedIn = useSelector((state) => state.auth.isAdminLoggedIn);
+  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],
+        kueID: [...ids],
-        bezeichnungen: [...bezeichnungen],
+        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%",

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) => {

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;

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;

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) => {

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,
-}) => {
+}: HandleSaveParams): void => {
-  const changes = {};
+  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.kueID[slot]) {
-  if (ids[slot] !== originalValues.ids[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) => {
+    Object.entries(changes).forEach(([paramKey, paramValue]) => {
-      url += `&${paramKey}${slot}=${encodeURIComponent(changes[paramKey])}`;
+      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({
+            setVariables({
-              ids: [...ids],
+              kueID: [...ids],
-              bezeichnungen: [...bezeichnungen],
+              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.");

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(() => {
+    if (progressBar) {
-      progress += 1;
+      const interval = setInterval(() => {
-      progressBar.style.width = progress + "%";
+        progress += 1;
-      if (progress >= 100) {
+        progressBar.style.width = progress + "%";
-        clearInterval(interval);
+        if (progress >= 100) {
-      }
+          clearInterval(interval);
-    }, 300); // 300ms x 100 = 30 Sekunden
+        }
+      }, 300);
+    } else {
+      console.error("Progress-Bar-Element nicht gefunden.");
+    }
   };
 
-  if (
+  if (window.confirm("Sind Sie sicher, dass Sie den CPL neu starten möchten?")) {
-    window.confirm("Sind Sie sicher, dass Sie den CPL neu starten möchten?")
-  ) {
     showWaitPage();
 
     const baseRedirectURL = newIp ? `https://${newIp}` : window.location.origin;

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) => {
+interface OriginalValues {
-  const changes = {};
+  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" });
+    fetch(url, { method: "GET" })
-
+      .then(() => {
-    alert("Daten erfolgreich gesendet!");
+        alert("Daten erfolgreich gesendet!");
-
+        if (networkChanges) {
-    if (networkChanges) {
+          alert(
-      alert(
+            "Hinweis: Die Änderungen in CPL-Name und den Netzwerkeinstellungen werden erst nach einem Neustart des CPL wirksam."
-        "Hinweis: Die Änderungen in CPL-Name und den Netzwerkeinstellungen werden erst nach einem Neustart des CPL wirksam."
+          );
-      );
+          handleReboot(newIp); // handleReboot mit neuer IP aufrufen
-      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.");
   }

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 createTDRChart = (dataTDR: DataTDR[]) => {
-    const ctx = document.getElementById("myChart").getContext("2d");
+    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) => {
+  interface DataLoop {
-    const ctx = document.getElementById("myChart").getContext("2d");
+    t: number; // Zeit oder Index
-    new Chart(ctx, {
+    m: number; // Isolationswiderstand
-      type: "line",
+    n: number; // Schleifenwiderstand
-      data: {
+  }
-        labels: data
+
-          .map((row) => new Date(row.t).toLocaleString("de-DE"))
+  const createLoopChart = (data: DataLoop[], title: string) => {
-          .reverse(),
+    const canvas = document.getElementById("myChart") as HTMLCanvasElement;
-        datasets: [
+    const ctx = canvas?.getContext("2d");
-          {
+    if (!ctx) {
-            label: "Isolationswiderstand (MOhm)",
+      console.error("Canvas context konnte nicht gefunden werden");
-            data: data.map((row) => row.m).reverse(),
+      return;
-            borderColor: "#00AEEF",
+    }
-            borderWidth: 1,
+
-            lineTension: 0.1,
+    const createLoopChart = (data: DataLoop[], title: string) => {
-            pointRadius: 0.3,
+      const canvas = document.getElementById("myChart") as HTMLCanvasElement;
-            pointHoverRadius: 5,
+      const ctx = canvas?.getContext("2d");
-            fill: false,
+      if (!ctx) {
-            yAxisID: "y",
+        console.error("Canvas context konnte nicht gefunden werden");
-          },
+        return;
-          {
+      }
-            label: "Schleifenwiderstand (kOhm)",
+
-            data: data.map((row) => row.n).reverse(),
+      new Chart(ctx, {
-            borderColor: "black",
+        type: "line",
-            borderWidth: 1,
+        data: {
-            lineTension: 0.1,
+          labels: data.map((row) => new Date(row.t).toLocaleString("de-DE")),
-            pointRadius: 0.3,
+          datasets: [
-            pointHoverRadius: 5,
+            {
-            fill: false,
+              label: "Isolationswiderstand (MOhm)",
-            yAxisID: "y1",
+              data: data.map((row) => row.m),
-          },
+              borderColor: "#00AEEF",
-        ],
+              borderWidth: 1,
-      },
+              tension: 0.1, // Ersatz für lineTension
-      options: {
+              pointRadius: 0.3,
-        scales: {
+              pointHoverRadius: 5,
-          y: {
+              fill: false,
-            type: "linear",
+              yAxisID: "y",
-            position: "left",
-            title: { display: true, text: "MOhm" },
-          },
-          y1: {
-            type: "linear",
-            position: "right",
-            title: { display: true, text: "kOhm" },
-          },
-        },
-        plugins: {
-          zoom: {
-            pan: {
-              enabled: true,
-              mode: "xy",
             },
+            {
+              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: {
+              pan: {
-                enabled: true, // Zoom mit Mausrad
+                enabled: true,
+                mode: "xy",
               },
-              pinch: {
+              zoom: {
-                enabled: true, // Pinch-Zoom für Touchgeräte
+                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 ||
+                    Number(kuePSTmMinus96V?.[slotIndex]) === 1 ||
-                    kueCableBreak?.[slotIndex] === 1 ||
+                    Number(kueCableBreak?.[slotIndex]) === 1 ||
-                    kueGroundFault?.[slotIndex] === 1 ||
+                    Number(kueGroundFault?.[slotIndex]) === 1 ||
-                    kueAlarm1?.[slotIndex] === 1 ||
+                    Number(kueAlarm1?.[slotIndex]) === 1 ||
-                    kueAlarm2?.[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 &&
+                {Number(kuePSTmMinus96V?.[slotIndex]) !== 1 &&
-                  kueCableBreak?.[slotIndex] !== 1 &&
+                  Number(kueCableBreak?.[slotIndex]) !== 1 &&
-                  kueGroundFault?.[slotIndex] !== 1 &&
+                  Number(kueGroundFault?.[slotIndex]) !== 1 &&
-                  kueAlarm1?.[slotIndex] !== 1 &&
+                  Number(kueAlarm1?.[slotIndex]) !== 1 &&
-                  kueAlarm2?.[slotIndex] !== 1 &&
+                  Number(kueAlarm2?.[slotIndex]) !== 1 &&
-                  kueOverflow?.[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;
+}

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;
+}

package-lock.json

@@ -36,6 +36,7 @@
         "@types/node": "22.10.10",
         "@types/react": "^18.3.18",
         "@types/react-dom": "^18.3.5",
+        "@types/react-modal": "^3.16.3",
         "postcss": "^8.4.47",
         "rimraf": "^5.0.10",
         "tailwindcss": "^3.4.12",
@@ -426,6 +427,15 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/react-modal": {
+      "version": "3.16.3",
+      "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.16.3.tgz",
+      "integrity": "sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/use-sync-external-store": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",

package.json

@@ -39,6 +39,7 @@
     "@types/node": "22.10.10",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
+    "@types/react-modal": "^3.16.3",
     "postcss": "^8.4.47",
     "rimraf": "^5.0.10",
     "tailwindcss": "^3.4.12",

pages/_app.tsx

@@ -1,4 +1,4 @@
-// _app.js
+// pages/_app.tsx
 import { useEffect, useState } from "react";
 import { loadWindowVariables } from "../utils/loadWindowVariables";
 import Header from "../components/Header";
@@ -8,8 +8,9 @@ import "../styles/globals.css";
 import { Provider } from "react-redux";
 import { setVariables } from "../store/variablesSlice";
 import store from "../store/store";
+import { AppProps } from "next/app";
 
-function MyApp({ Component, pageProps }) {
+function MyApp({ Component, pageProps }: AppProps) {
   const [sessionExpired, setSessionExpired] = useState(false);
 
   useEffect(() => {

pages/_error.js

@@ -1,19 +0,0 @@
-// pages/_error.js
-import React from "react";
-
-function Error({ statusCode }) {
-  return (
-    <p>
-      {statusCode
-        ? `An error ${statusCode} occurred on server`
-        : "An error occurred on client"}
-    </p>
-  );
-}
-
-Error.getInitialProps = ({ res, err }) => {
-  const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
-  return { statusCode };
-};
-
-export default Error;

pages/_error.tsx

@@ -0,0 +1,24 @@
+// pages/_error.tsx
+import React from "react";
+import { NextPage, NextPageContext } from "next";
+
+interface ErrorProps {
+  statusCode?: number;
+}
+
+const Error: NextPage<ErrorProps> = ({ statusCode }) => {
+  return (
+    <p>
+      {statusCode
+        ? `An error ${statusCode} occurred on server`
+        : "An error occurred on client"}
+    </p>
+  );
+};
+
+Error.getInitialProps = ({ res, err }: NextPageContext): ErrorProps => {
+  const statusCode = res?.statusCode || err?.statusCode || 404;
+  return { statusCode };
+};
+
+export default Error;

pages/analogeEingaenge.tsx

@@ -4,7 +4,7 @@ import AnalogeEingaengeComponent from "../components/modules/AnalogeEingaengeCom
 import XioPM from "../components/modules/XioPM";
 
 function AnalogeEingaenge() {
-  const [activeConfig, setActiveConfig] = useState(null);
+  const [activeConfig, setActiveConfig] = useState<number | null>(null);
 
   // Mock-Daten für XIO-PM 1
   const xioPm1Inputs = [

store/authSlice.ts

@@ -1,4 +1,4 @@
-// redux/authSlice.js
+// redux/authSlice.ts
 import { createSlice } from "@reduxjs/toolkit";
 
 const authSlice = createSlice({

store/rootReducer.ts

@@ -0,0 +1,11 @@
+// store/rootReducer.ts
+import { combineReducers } from "redux";
+import variablesReducer from "./variablesSlice";
+import authReducer from "./authSlice";
+
+const rootReducer = combineReducers({
+  variables: variablesReducer,
+  auth: authReducer,
+});
+
+export default rootReducer;

store/store.js

@@ -1,14 +0,0 @@
-// store/store.js
-import { configureStore } from "@reduxjs/toolkit";
-import variablesReducer from "./variablesSlice";
-import authReducer from "./authSlice";
-
-const store = configureStore({
-  reducer: {
-    variables: variablesReducer,
-    auth: authReducer,
-  },
-  //devTools: process.env.NODE_ENV !== "production", // Aktiviert DevTools nur in der Entwicklung
-});
-
-export default store;

store/store.ts

@@ -0,0 +1,16 @@
+// store/store.ts
+import { configureStore } from "@reduxjs/toolkit";
+import rootReducer from "./rootReducer";
+
+const store = configureStore({
+  reducer: rootReducer,
+  //devTools: process.env.NODE_ENV !== "production",
+});
+
+// Exportiere den Typ RootState für den gesamten State
+export type RootState = ReturnType<typeof rootReducer>;
+export type AppDispatch = typeof store.dispatch;
+
+export default store;
+
+//devTools: process.env.NODE_ENV !== "production", // Aktiviert DevTools nur in der Entwicklung

store/variablesSlice.js

@@ -1,64 +0,0 @@
-// store/variablesSlice.js
-import { createSlice } from "@reduxjs/toolkit";
-
-const initialState = {
-  last20Messages: null,
-  deviceName: null,
-  mac1: null,
-  ip: null,
-  subnet: null,
-  gateway: null,
-  cplInternalTimestamp: null,
-  ntp1: null,
-  ntp2: null,
-  ntp3: null,
-  ntpTimezone: null,
-  ntpActive: null,
-  de: null,
-  counter: null,
-  flutter: null,
-  kueOnline: [],
-  kueID: [],
-  kueIso: [],
-  kuePSTmMinus96V: [],
-  kueAlarm1: [],
-  kueAlarm2: [],
-  kueResidence: [],
-  kueCableBreak: [],
-  kueGroundFault: [],
-  kueLimit1: null,
-  kueLimit2Low: null,
-  kueDelay1: null,
-  kueLoopInterval: null,
-  kueVersion: null,
-  tdrAtten: null,
-  tdrPulse: null,
-  tdrSpeed: null,
-  tdrAmp: null,
-  tdrTrigger: null,
-  tdrLocation: null,
-  tdrActive: null,
-  kueOverflow: null,
-  tdrLast: null,
-  appVersion: null,
-};
-
-const variablesSlice = createSlice({
-  name: "variables",
-  initialState,
-  reducers: {
-    setVariable(state, action) {
-      const { key, value } = action.payload;
-      state[key] = value;
-    },
-    setVariables(state, action) {
-      Object.entries(action.payload).forEach(([key, value]) => {
-        state[key] = value;
-      });
-    },
-  },
-});
-
-export const { setVariable, setVariables, updateValues } =
-  variablesSlice.actions;
-export default variablesSlice.reducer;

store/variablesSlice.ts

@@ -0,0 +1,148 @@
+// store/variablesSlice.ts
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+// Typ für den State
+export interface VariablesState {
+  //------------
+  kueBezeichnungen: string[];
+  isolationsgrenzwerte: number[];
+  verzoegerung: number[];
+  untereSchleifenGrenzwerte: number[];
+  obereSchleifenGrenzwerte: number[];
+  schleifenintervall: number[];
+  //---------------
+  last20Messages: string | null;
+  deviceName: string | null;
+  mac1: string | null;
+  ip: string | null;
+  subnet: string | null;
+  gateway: string | null;
+  cplInternalTimestamp: string | null;
+  ntp1: string | null;
+  ntp2: string | null;
+  ntp3: string | null;
+  ntpTimezone: string | null;
+  ntpActive: boolean | null;
+  de: string | null;
+  counter: number | null;
+  flutter: string | null;
+  kueOnline: string[];
+  kueID: string[];
+  kueIso: string[];
+  kuePSTmMinus96V: string[];
+  kueAlarm1: string[];
+  kueAlarm2: string[];
+  kueResidence: string[];
+  kueCableBreak: string[];
+  kueGroundFault: string[];
+  kueLimit1: number | null;
+  kueLimit2Low: number | null;
+  kueDelay1: number | null;
+  kueLoopInterval: number | null;
+  kueVersion: number[] | null;
+  tdrAtten: number | null;
+  tdrPulse: number | null;
+  tdrSpeed: number | null;
+  tdrAmp: number | null;
+  tdrTrigger: number | null;
+  tdrLocation: number | null;
+  tdrActive: boolean | null;
+  kueOverflow: string | null;
+  tdrLast: string | null;
+  appVersion: string | null;
+  win_analogeEingaenge1: string | null;
+  win_analogeEingaenge2: string | null;
+  win_analogeEingaenge3: string | null;
+  win_analogeEingaenge4: string | null;
+  win_analogeEingaenge5: string | null;
+  win_analogeEingaenge6: string | null;
+  win_analogeEingaenge7: string | null;
+  win_analogeEingaenge8: string | null;
+}
+
+// Initialer Zustand
+const initialState: VariablesState = {
+  //------------
+  kueBezeichnungen: [],
+  isolationsgrenzwerte: [],
+  verzoegerung: [],
+  untereSchleifenGrenzwerte: [],
+  obereSchleifenGrenzwerte: [],
+  schleifenintervall: [],
+  //---------------
+  last20Messages: null,
+  deviceName: null,
+  mac1: null,
+  ip: null,
+  subnet: null,
+  gateway: null,
+  cplInternalTimestamp: null,
+  ntp1: null,
+  ntp2: null,
+  ntp3: null,
+  ntpTimezone: null,
+  ntpActive: null,
+  de: null,
+  counter: null,
+  flutter: null,
+  kueOnline: [],
+  kueID: [],
+  kueIso: [],
+  kuePSTmMinus96V: [],
+  kueAlarm1: [],
+  kueAlarm2: [],
+  kueResidence: [],
+  kueCableBreak: [],
+  kueGroundFault: [],
+  kueLimit1: null,
+  kueLimit2Low: null,
+  kueDelay1: null,
+  kueLoopInterval: null,
+  kueVersion: null,
+  tdrAtten: null,
+  tdrPulse: null,
+  tdrSpeed: null,
+  tdrAmp: null,
+  tdrTrigger: null,
+  tdrLocation: null,
+  tdrActive: null,
+  kueOverflow: null,
+  tdrLast: null,
+  appVersion: null,
+  win_analogeEingaenge1: null,
+  win_analogeEingaenge2: null,
+  win_analogeEingaenge3: null,
+  win_analogeEingaenge4: null,
+  win_analogeEingaenge5: null,
+  win_analogeEingaenge6: null,
+  win_analogeEingaenge7: null,
+  win_analogeEingaenge8: null,
+};
+
+// Slice erstellen
+const variablesSlice = createSlice({
+  name: "variables",
+  initialState,
+  reducers: {
+    setVariable(
+      state,
+      action: PayloadAction<{
+        key: keyof VariablesState;
+        value: VariablesState[keyof VariablesState];
+      }>
+    ) {
+      const { key, value } = action.payload;
+      (state[key] as VariablesState[keyof VariablesState]) = value;
+    },
+    setVariables(state, action: PayloadAction<Partial<VariablesState>>) {
+      Object.entries(action.payload).forEach(([key, value]) => {
+        (state[
+          key as keyof VariablesState
+        ] as VariablesState[keyof VariablesState]) = value!;
+      });
+    },
+  },
+});
+
+export const { setVariable, setVariables } = variablesSlice.actions;
+export default variablesSlice.reducer;

tsconfig.json

@@ -24,7 +24,7 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx"
-  ],
+, "public/CPLmockData/SERVICE/System.js", "public/CPLmockData/SERVICE/Start.js", "public/CPLmockData/SERVICE/kueData.js", "public/CPLmockData/SERVICE/de.js", "public/CPLmockData/SERVICE/ae.js", "public/CPL/SERVICE/System.js", "public/CPL/SERVICE/Start.js", "public/CPL/SERVICE/kueData.js", "public/CPL/SERVICE/de.js", "public/CPL/SERVICE/ae.js"  ],
   "exclude": [
     "node_modules"
   ]

utils/decodeToken.ts

@@ -1,4 +1,4 @@
-function decodeToken(token) {
+function decodeToken(token: string) {
   try {
     const base64Payload = token.split(".")[1];
     const payload = JSON.parse(atob(base64Payload));

utils/loadWindowVariables.ts

@@ -1,7 +1,11 @@
-// utils/loadWindowVariables.js
+// utils/loadWindowVariables.ts
-export async function loadWindowVariables() {
+interface WindowVariables {
+  [key: string]: any; // Allgemeiner Typ für die Dynamik, kann spezifischer angepasst werden, falls bekannt
+}
+
+export async function loadWindowVariables(): Promise<WindowVariables> {
   return new Promise((resolve, reject) => {
-    const requiredVars = [
+    const requiredVars: string[] = [
       "win_last20Messages",
       "win_deviceName",
       "win_mac1",
@@ -52,7 +56,7 @@ export async function loadWindowVariables() {
       "win_analogeEingaenge8",
     ];
 
-    const loadScript = (src) => {
+    const loadScript = (src: string): Promise<void> => {
       return new Promise((resolve, reject) => {
         const script = document.createElement("script");
         const environment = process.env.NEXT_PUBLIC_NODE_ENV || "production";
@@ -61,13 +65,19 @@ export async function loadWindowVariables() {
             ? `/CPL?/CPL/SERVICE/${src}`
             : `/CPLmockData/SERVICE/${src}`;
         script.async = true;
-        script.onload = resolve;
+        script.onload = () => resolve();
-        script.onerror = reject;
+        script.onerror = () => reject(new Error(`Script load error: ${src}`));
         document.head.appendChild(script);
       });
     };
 
-    const scripts = ["de.js", "ae.js", "kueData.js", "Start.js", "System.js"];
+    const scripts: string[] = [
+      "de.js",
+      "ae.js",
+      "kueData.js",
+      "Start.js",
+      "System.js",
+    ];
 
     scripts
       .reduce(
@@ -75,19 +85,24 @@ export async function loadWindowVariables() {
         Promise.resolve()
       )
       .then(() => {
-        const variablesObj = requiredVars.reduce((acc, variable) => {
+        const variablesObj: WindowVariables = requiredVars.reduce(
-          if (window[variable] !== undefined) {
+          (acc: WindowVariables, variable: string) => {
-            // Wenn es sich um kueID handelt, ersetze %20 durch Leerzeichen
+            // Prüfe, ob die Variable auf dem window-Objekt existiert
-            if (variable === "win_kueID" && Array.isArray(window[variable])) {
+            const winVar = (window as any)[variable];
-              acc[variable.replace("win_", "")] = window[variable].map((id) =>
+            if (winVar !== undefined) {
-                id.replace(/%20/g, " ")
+              // Wenn es sich um kueID handelt, ersetze %20 durch Leerzeichen
-              );
+              if (variable === "win_kueID" && Array.isArray(winVar)) {
-            } else {
+                acc[variable.replace("win_", "")] = winVar.map((id: string) =>
-              acc[variable.replace("win_", "")] = window[variable];
+                  id.replace(/%20/g, " ")
+                );
+              } else {
+                acc[variable.replace("win_", "")] = winVar;
+              }
             }
-          }
+            return acc;
-          return acc;
+          },
-        }, {});
+          {}
+        );
         resolve(variablesObj);
       })
       .catch((error) => {