refactor: modularize handleSave, handleChange, and handleDisplayEinschalten in KueModal

components/modales/kueModal/KueModal.jsx

@@ -2,8 +2,10 @@
 import ReactModal from "react-modal";
 import { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { updateValues } from "../../store/variablesSlice";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
+import handleChange from "./handlers/handleChange";
+import handleDisplayEinschalten from "./handlers/handleDisplayEinschalten";
+import handleSave from "./handlers/handleSave";
 
 function KueModal({ showModal, onClose, slot, onModulNameChange }) {
   const dispatch = useDispatch();
@@ -60,105 +62,6 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
     }
   }, [showModal]); // nur von showModal abhängig ansonsten wird alle 10 Sekunden die Werte zurückgesetzt in Modal
 
-  // 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;
-    });
-  };
-
-  const handleSave = () => {
-    const changes = {};
-
-    // Überprüfen, ob Änderungen gegenüber den Originalwerten vorliegen
-    if (ids[slot] !== originalValues.ids[slot]) {
-      changes.KID = ids[slot];
-    }
-    if (bezeichnungen[slot] !== originalValues.bezeichnungen[slot]) {
-      changes.KIA = bezeichnungen[slot];
-    }
-    if (
-      isolationsgrenzwerte[slot] !== originalValues.isolationsgrenzwerte[slot]
-    ) {
-      changes.KL_ = isolationsgrenzwerte[slot];
-    }
-    if (verzoegerung[slot] !== originalValues.verzoegerung[slot]) {
-      changes.KD_ = verzoegerung[slot];
-    }
-    if (
-      untereSchleifenGrenzwerte[slot] !==
-      originalValues.untereSchleifenGrenzwerte[slot]
-    ) {
-      changes.KR_ = untereSchleifenGrenzwerte[slot];
-    }
-    if (
-      obereSchleifenGrenzwerte[slot] !==
-      originalValues.obereSchleifenGrenzwerte[slot]
-    ) {
-      changes.KRO_ = obereSchleifenGrenzwerte[slot];
-    }
-    if (schleifenintervall[slot] !== originalValues.schleifenintervall[slot]) {
-      changes.KRI = schleifenintervall[slot];
-    }
-
-    if (Object.keys(changes).length > 0) {
-      let url = `/cpl?/kabelueberwachung.html&slot=${slot}`;
-      Object.keys(changes).forEach((paramKey) => {
-        url += `&${paramKey}${slot}=${encodeURIComponent(changes[paramKey])}`;
-      });
-
-      fetch(url, { method: "GET" })
-        .then((response) => {
-          if (response.ok) {
-            alert("Daten erfolgreich gespeichert!");
-            onModulNameChange(ids[slot]);
-
-            // Aktualisiere Redux-Store mit neuen Werten
-            dispatch(
-              updateValues({
-                ids: [...ids],
-                bezeichnungen: [...bezeichnungen],
-                isolationsgrenzwerte: [...isolationsgrenzwerte],
-                verzoegerung: [...verzoegerung],
-                untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
-                obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
-                schleifenintervall: [...schleifenintervall],
-              })
-            );
-          } else {
-            alert("Fehler beim Speichern der Daten!");
-          }
-        })
-        .catch((error) => {
-          console.error("Fehler:", error);
-          //alert("Fehler beim Senden der Daten!");
-        });
-    } else {
-      alert("Keine Änderungen vorgenommen.");
-    }
-
-    onClose();
-  };
-
-  const handleDisplayEinschalten = () => {
-    const url = `/CPL?/kabelueberwachung.html&KSD${slot}=1`;
-    fetch(url, { method: "GET" })
-      .then((response) => {
-        if (response.ok) {
-          alert(`Display für Slot ${slot + 1} erfolgreich eingeschaltet!`);
-        } else {
-          alert("Fehler beim Einschalten des Displays!");
-        }
-      })
-      .catch((error) => {
-        console.error("Fehler:", error);
-        alert("Fehler beim Einschalten des Displays!");
-      });
-  };
-
   return (
     <ReactModal
       isOpen={showModal}
@@ -295,13 +198,28 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
 
       <div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
         <button
-          onClick={handleDisplayEinschalten}
+          onClick={() => handleDisplayEinschalten(slot)}
           className="bg-littwin-blue text-white p-2 rounded flex items-center mr-2"
         >
           <span className="mr-2">📺</span> Display einschalten
         </button>
         <button
-          onClick={handleSave}
+          onClick={() =>
+            handleSave({
+              slot,
+              ids,
+              bezeichnungen,
+              isolationsgrenzwerte,
+              verzoegerung,
+              untereSchleifenGrenzwerte,
+              obereSchleifenGrenzwerte,
+              schleifenintervall,
+              originalValues,
+              onModulNameChange,
+              dispatch,
+              onClose,
+            })
+          }
           className="bg-littwin-blue text-white p-2 rounded flex items-center"
         >
           <span className="mr-2">💾</span> Speichern

components/modales/kueModal/handlers/handleChange.js

@@ -0,0 +1,11 @@
+// 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/handleDisplayEinschalten.js

@@ -0,0 +1,18 @@
+// components/modals/kueModal/handlers/handleDisplayEinschalten.js
+const handleDisplayEinschalten = (slot) => {
+  const url = `/CPL?/kabelueberwachung.html&KSD${slot}=1`;
+  fetch(url, { method: "GET" })
+    .then((response) => {
+      if (response.ok) {
+        alert(`Display für Slot ${slot + 1} erfolgreich eingeschaltet!`);
+      } else {
+        alert("Fehler beim Einschalten des Displays!");
+      }
+    })
+    .catch((error) => {
+      console.error("Fehler:", error);
+      alert("Fehler beim Einschalten des Displays!");
+    });
+};
+
+export default handleDisplayEinschalten;

components/modales/kueModal/handlers/handleSave.js

@@ -0,0 +1,89 @@
+import { updateValues } from "../../../../store/variablesSlice";
+
+const handleSave = ({
+  originalValues,
+  slot,
+  ids,
+  bezeichnungen,
+  isolationsgrenzwerte,
+  verzoegerung,
+  untereSchleifenGrenzwerte,
+  obereSchleifenGrenzwerte,
+  schleifenintervall,
+  onModulNameChange,
+  dispatch,
+  onClose,
+}) => {
+  const changes = {};
+
+  // Überprüfen, ob Änderungen gegenüber den Originalwerten vorliegen
+  if (ids[slot] !== originalValues.ids[slot]) {
+    changes.KID = ids[slot];
+  }
+  if (bezeichnungen[slot] !== originalValues.bezeichnungen[slot]) {
+    changes.KIA = bezeichnungen[slot];
+  }
+  if (
+    isolationsgrenzwerte[slot] !== originalValues.isolationsgrenzwerte[slot]
+  ) {
+    changes.KL_ = isolationsgrenzwerte[slot];
+  }
+  if (verzoegerung[slot] !== originalValues.verzoegerung[slot]) {
+    changes.KD_ = verzoegerung[slot];
+  }
+  if (
+    untereSchleifenGrenzwerte[slot] !==
+    originalValues.untereSchleifenGrenzwerte[slot]
+  ) {
+    changes.KR_ = untereSchleifenGrenzwerte[slot];
+  }
+  if (
+    obereSchleifenGrenzwerte[slot] !==
+    originalValues.obereSchleifenGrenzwerte[slot]
+  ) {
+    changes.KRO_ = obereSchleifenGrenzwerte[slot];
+  }
+  if (schleifenintervall[slot] !== originalValues.schleifenintervall[slot]) {
+    changes.KRI = schleifenintervall[slot];
+  }
+
+  if (Object.keys(changes).length > 0) {
+    let url = `/cpl?/kabelueberwachung.html&slot=${slot}`;
+    Object.keys(changes).forEach((paramKey) => {
+      url += `&${paramKey}${slot}=${encodeURIComponent(changes[paramKey])}`;
+    });
+
+    fetch(url, { method: "GET" })
+      .then((response) => {
+        if (response.ok) {
+          alert("Daten erfolgreich gespeichert!");
+          onModulNameChange(ids[slot]);
+
+          // Aktualisiere Redux-Store mit neuen Werten
+          dispatch(
+            updateValues({
+              ids: [...ids],
+              bezeichnungen: [...bezeichnungen],
+              isolationsgrenzwerte: [...isolationsgrenzwerte],
+              verzoegerung: [...verzoegerung],
+              untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
+              obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
+              schleifenintervall: [...schleifenintervall],
+            })
+          );
+        } else {
+          alert("Fehler beim Speichern der Daten!");
+        }
+      })
+      .catch((error) => {
+        console.error("Fehler:", error);
+        //alert("Fehler beim Senden der Daten!");
+      });
+  } else {
+    alert("Keine Änderungen vorgenommen.");
+  }
+
+  onClose();
+};
+
+export default handleSave;

components/modules/Kue705FO.jsx

@@ -3,7 +3,7 @@ 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";
+import KueModal from "../modales/KueModal/KueModal";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
 
 function Kue705FO({