From 589c8a0e9e5bba1627d304625333134475b65643 Mon Sep 17 00:00:00 2001
From: ISA <ismail.ali@littwin-systemtechnik.de>
Date: Sat, 9 Nov 2024 19:29:33 +0100
Subject: [PATCH] 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      | 69 +++++++------------
 .../modales/kueModal/handlers/handleChange.js | 10 +++
 .../handlers/handleDisplayEinschalten.js      | 16 +++++
 .../modales/kueModal/handlers/handleSave.js   |  2 +
 .../handlers/handleClearDatabase.js           |  2 +
 .../handlers/handleSetDateTime.js             |  2 +
 .../settingsModal/handlers/handleSubmit.js    |  2 +
 7 files changed, 59 insertions(+), 44 deletions(-)
 create mode 100644 components/modales/kueModal/handlers/handleChange.js
 create mode 100644 components/modales/kueModal/handlers/handleDisplayEinschalten.js

diff --git a/components/modales/kueModal/KueModal.jsx b/components/modales/kueModal/KueModal.jsx
index adffc08..8e280b1 100644
--- a/components/modales/kueModal/KueModal.jsx
+++ b/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
diff --git a/components/modales/kueModal/handlers/handleChange.js b/components/modales/kueModal/handlers/handleChange.js
new file mode 100644
index 0000000..215ce8f
--- /dev/null
+++ b/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;
diff --git a/components/modales/kueModal/handlers/handleDisplayEinschalten.js b/components/modales/kueModal/handlers/handleDisplayEinschalten.js
new file mode 100644
index 0000000..6f45537
--- /dev/null
+++ b/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;
diff --git a/components/modales/kueModal/handlers/handleSave.js b/components/modales/kueModal/handlers/handleSave.js
index b487d14..0da96d4 100644
--- a/components/modales/kueModal/handlers/handleSave.js
+++ b/components/modales/kueModal/handlers/handleSave.js
@@ -84,3 +84,5 @@ const handleSave = ({
 
   onClose();
 };
+
+export default handleSave;
diff --git a/components/modales/settingsModal/handlers/handleClearDatabase.js b/components/modales/settingsModal/handlers/handleClearDatabase.js
index 30e00cb..6c9588b 100644
--- a/components/modales/settingsModal/handlers/handleClearDatabase.js
+++ b/components/modales/settingsModal/handlers/handleClearDatabase.js
@@ -30,3 +30,5 @@ const handleClearDatabase = async () => {
     alert("Fehler beim Leeren der Datenbank!");
   }
 };
+
+export default handleClearDatabase;
diff --git a/components/modales/settingsModal/handlers/handleSetDateTime.js b/components/modales/settingsModal/handlers/handleSetDateTime.js
index 7e386b3..6a7a03d 100644
--- a/components/modales/settingsModal/handlers/handleSetDateTime.js
+++ b/components/modales/settingsModal/handlers/handleSetDateTime.js
@@ -41,3 +41,5 @@ const handleSetDateTime = () => {
       alert("Fehler beim Setzen von Datum und Uhrzeit!");
     });
 };
+
+export default handleSetDateTime;
diff --git a/components/modales/settingsModal/handlers/handleSubmit.js b/components/modales/settingsModal/handlers/handleSubmit.js
index 5aaff2f..eb95289 100644
--- a/components/modales/settingsModal/handlers/handleSubmit.js
+++ b/components/modales/settingsModal/handlers/handleSubmit.js
@@ -66,3 +66,5 @@ const handleSubmit = (originalValues, currentValues) => {
     alert("Keine Änderungen vorgenommen.");
   }
 };
+
+export default handleSubmit;