feat: Modularize KueModal component by extracting handler functions

- Moved `handleSave`, `handleChange`, `handleDisplayEinschalten`, `handleSetDateTime`, `handleClearDatabase`, and `handleReboot` to separate handler files for better modularity and code organization.
- Updated imports in `KueModal.jsx` and `SettingsModal.jsx` to use new handler files.
- Improved code readability and maintainability by organizing functions into dedicated handler modules.

components/modales/kueModal/KueModal.jsx

@@ -5,6 +5,8 @@ import { useSelector, useDispatch } from "react-redux";
 import { updateValues } from "../../../store/variablesSlice";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
 import { handleSave } from "./handlers/handleSave";
+import { handleDisplayEinschalten } from "./handlers/handleDisplayEinschalten";
+import { handleChange } from "./handlers/handleChange";
 
 function KueModal({ showModal, onClose, slot, onModulNameChange }) {
   const dispatch = useDispatch();
@@ -36,6 +38,27 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
     kueLoopInterval,
   } = useSelector((state) => state.variables);
 
+  const handleSaveWrapper = () => {
+    handleSave({
+      ids,
+      bezeichnungen,
+      isolationsgrenzwerte,
+      verzoegerung,
+      untereSchleifenGrenzwerte,
+      obereSchleifenGrenzwerte,
+      schleifenintervall,
+      originalValues,
+      slot,
+      dispatch,
+      onModulNameChange,
+      onClose,
+    });
+  };
+
+  const handleDisplayEinschaltenWrapper = () => {
+    handleDisplayEinschalten(slot); // Übergebe den Slot als Parameter
+  };
+  //------------------------------------------------------------------------------------------------------------
   // Initiale Werte festlegen, nur einmal beim Öffnen des Modals
   useEffect(() => {
     if (showModal) {
@@ -60,49 +83,7 @@ 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 handleSaveWrapper = () => {
-    handleSave({
-      ids,
-      bezeichnungen,
-      isolationsgrenzwerte,
-      verzoegerung,
-      untereSchleifenGrenzwerte,
-      obereSchleifenGrenzwerte,
-      schleifenintervall,
-      originalValues,
-      slot,
-      dispatch,
-      onModulNameChange,
-      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}
@@ -239,7 +220,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
 
       <div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
         <button
-          onClick={handleDisplayEinschalten}
+          onClick={handleDisplayEinschaltenWrapper}
           className="bg-littwin-blue text-white p-2 rounded flex items-center mr-2"
         >
           <span className="mr-2">📺</span> Display einschalten

components/modales/kueModal/handlers/handleChange.js

@@ -0,0 +1,10 @@
+// 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,16 @@
+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

@@ -84,3 +84,5 @@ const handleSave = ({
 
   onClose();
 };
+
+export default handleSave;

components/modales/settingsModal/handlers/handleClearDatabase.js

@@ -30,3 +30,5 @@ const handleClearDatabase = async () => {
     alert("Fehler beim Leeren der Datenbank!");
   }
 };
+
+export default handleClearDatabase;

components/modales/settingsModal/handlers/handleSetDateTime.js

@@ -41,3 +41,5 @@ const handleSetDateTime = () => {
       alert("Fehler beim Setzen von Datum und Uhrzeit!");
     });
 };
+
+export default handleSetDateTime;

components/modales/settingsModal/handlers/handleSubmit.js

@@ -66,3 +66,5 @@ const handleSubmit = (originalValues, currentValues) => {
     alert("Keine Änderungen vorgenommen.");
   }
 };
+
+export default handleSubmit;