feat: Implementiere bedingtes Speichern der geänderten KUE-Parameter

- Nur geänderte Werte werden beim Klick auf den "Speichern"-Button gesendet.
- Verwendet handleChange, um die lokalen Werte zu aktualisieren, ohne sofortige API-Anfragen.
- Verbesserte Logik zur Erkennung von Änderungen gegenüber den Originalwerten.
- Sicherstellung, dass keine unnötigen API-Aufrufe gesendet werden, wenn keine Änderungen vorliegen.

components/modales/KueModal.jsx

@@ -18,6 +18,20 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
   const [schleifenintervall, setSchleifenintervall] = useState(
     Array(32).fill(24)
   ); // Default 24 Stunden
+  // Originalwerte speichern
+  const [originalValues, setOriginalValues] = useState({});
+  useEffect(() => {
+    const initialValues = {
+      ids: [...ids],
+      bezeichnungen: [...bezeichnungen],
+      isolationsgrenzwerte: [...isolationsgrenzwerte],
+      verzoegerung: [...verzoegerung],
+      untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
+      obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
+      schleifenintervall: [...schleifenintervall],
+    };
+    setOriginalValues(initialValues);
+  }, [showModal]);
 
   useEffect(() => {
     // Initialisierung mit Werten aus dem globalen `window`-Objekt
@@ -58,37 +72,64 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
   };
 
   const handleSave = () => {
-    const newId = ids[slot];
-    const newBezeichnung = bezeichnungen[slot];
-    const newIsolationsGrenzwert = isolationsgrenzwerte[slot];
-    const newVerzoegerung = verzoegerung[slot];
-    const newUntererSchleifenGrenzwert = untereSchleifenGrenzwerte[slot];
-    const newObererSchleifenGrenzwert = obereSchleifenGrenzwerte[slot];
-    const newSchleifenintervall = schleifenintervall[slot];
+    const changes = {};
 
-    const url = `${
-      process.env.NEXT_PUBLIC_API_BASE_URL
-    }/cpl?Service/kueDetail.HTML&slot=${slot}&KID${slot}=${encodeURIComponent(
-      newId
-    )}&KIA${slot}=${encodeURIComponent(
-      newBezeichnung
-    )}&KL_${slot}=${newIsolationsGrenzwert}&KD_${slot}=1&KR_${slot}=${newUntererSchleifenGrenzwert}&KRI${slot}=${newSchleifenintervall}`;
+    // Vergleich mit den Originalwerten, um Änderungen zu erkennen
+    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];
+    }
 
-    // Fetch-Aufruf, um die neuen Werte zu senden
-    fetch(url, { method: "GET" })
-      .then((response) => {
-        if (response.ok) {
-          alert("Daten erfolgreich gespeichert!");
-          onModulNameChange(newBezeichnung); // Weitergabe der Änderung
-        } else {
-          alert("Fehler beim Speichern der Daten!");
-        }
-      })
-      .catch((error) => {
-        console.error("Fehler:", error);
-        alert("Fehler beim Senden der Daten!");
+    // Falls Änderungen vorhanden sind, die fetch-Requests auslösen
+    if (Object.keys(changes).length > 0) {
+      let url = `${process.env.NEXT_PUBLIC_API_BASE_URL}/cpl?Service/kueDetail.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(bezeichnungen[slot]); // Weitergabe der Änderung
+          } else {
+            alert("Fehler beim Speichern der Daten!");
+          }
+        })
+        .catch((error) => {
+          console.error("Fehler:", error);
+          alert("Fehler beim Senden der Daten!");
+        });
+    } else {
+      alert("Keine Änderungen vorgenommen.");
+    }
+
     // Schließe das Modal nach dem Speichern
     onClose();
   };