feat: Projekt von JavaScript zu TypeScript migriert

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%",

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,
-}) => {
-  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.");

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;

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.");
   }