feat: handleSave Funktion ausgelagert und KueModal strukturiert

- handleSave in separate Datei handle-save.js ausgelagert, um KueModal-Komponente modularer und wartbarer zu gestalten
- handleSaveWrapper in KueModal hinzugefügt, um Parameter an handleSave zu übergeben
- KueModal umgestaltet, um Funktionen und Redux-Dispatch klarer zu organisieren
- Konsistente Verwendung von Parametern und State-Updates für sauberen Codefluss

components/Header.jsx

@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import "bootstrap-icons/font/bootstrap-icons.css";
-import SettingsModal from "./modales/SettingsModal";
+import SettingsModal from "./modales/settingsModal/SettingsModal";
 import { useSelector } from "react-redux";
 
 function Header() {

components/modales/kueModal/KueModal.jsx

@@ -2,8 +2,9 @@
 import ReactModal from "react-modal";
 import { useState, useEffect } from "react";
 import { useSelector, useDispatch } from "react-redux";
-import { updateValues } from "../../store/variablesSlice";
+import { updateValues } from "../../../store/variablesSlice";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
+import { handleSave } from "./handlers/handleSave";
 
 function KueModal({ showModal, onClose, slot, onModulNameChange }) {
   const dispatch = useDispatch();
@@ -69,78 +70,21 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
       return updated;
     });
   };
-
+  const handleSaveWrapper = () => {
-  const handleSave = () => {
+    handleSave({
-    const changes = {};
+      ids,
-
+      bezeichnungen,
-    // Überprüfen, ob Änderungen gegenüber den Originalwerten vorliegen
+      isolationsgrenzwerte,
-    if (ids[slot] !== originalValues.ids[slot]) {
+      verzoegerung,
-      changes.KID = ids[slot];
+      untereSchleifenGrenzwerte,
-    }
+      obereSchleifenGrenzwerte,
-    if (bezeichnungen[slot] !== originalValues.bezeichnungen[slot]) {
+      schleifenintervall,
-      changes.KIA = bezeichnungen[slot];
+      originalValues,
-    }
+      slot,
-    if (
+      dispatch,
-      isolationsgrenzwerte[slot] !== originalValues.isolationsgrenzwerte[slot]
+      onModulNameChange,
-    ) {
+      onClose,
-      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 = () => {
@@ -301,7 +245,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
           <span className="mr-2">📺</span> Display einschalten
         </button>
         <button
-          onClick={handleSave}
+          onClick={handleSaveWrapper}
           className="bg-littwin-blue text-white p-2 rounded flex items-center"
         >
           <span className="mr-2">💾</span> Speichern

components/modales/kueModal/handlers/handleSave.js

@@ -0,0 +1,86 @@
+import { updateValues } from "../../../../store/variablesSlice";
+const handleSave = ({
+  ids,
+  bezeichnungen,
+  isolationsgrenzwerte,
+  verzoegerung,
+  untereSchleifenGrenzwerte,
+  obereSchleifenGrenzwerte,
+  schleifenintervall,
+  originalValues,
+  slot,
+  dispatch,
+  onModulNameChange,
+  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();
+};

components/modales/settingsModal/SettingsModal.jsx

@@ -301,18 +301,6 @@ function SettingModal({ showModal, onClose }) {
               </div>
             </div>
 
-            {/* Datenbank leeren und Neustart CPL */}
-            {/* 
-            <div className="flex flex-col items-start justify-between mt-4 space-y-2">
-              <button
-                className="bg-littwin-blue text-white px-4 py-2 rounded"
-                onClick={() => handleReboot()}
-              >
-                Neustart CPL
-              </button>
-            </div>
-            */}
-
             {/* Modal Footer */}
             <div className="flex justify-between mt-4">
               <button

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({