feat: Modularisierung und Optimierung der SettingsModal-Komponente

- Handler-Funktionen (handleClearDatabase, handleReboot, handleSetDateTime, handleSubmit) in separate Dateien ausgelagert, um die Übersichtlichkeit zu verbessern und Wartbarkeit zu erleichtern
- `use client`-Anweisung am Anfang von SettingsModal.jsx hinzugefügt, um clientseitige Funktionen wie `window`-basierte Aufrufe korrekt zu verwenden
- Redux- und lokale State-Werte optimiert und an handleSubmit als Parameter übergeben
- Konsolen-Logs für URL-Bildung und Debugging-Zwecke in den Handlern hinzugefügt

components/modales/SettingsModal.jsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from "react"; // omponents/modales/settingsModal.jsx
+"use client"; // components/modales/settingsModal.jsx
+import React, { useState, useEffect } from "react";
 import ReactModal from "react-modal";
 import { ClipLoader } from "react-spinners";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
@@ -6,6 +7,8 @@ import { useSelector } from "react-redux";
 import { current } from "@reduxjs/toolkit";
 import handleReboot from "./handlers/handleReboot";
 import handleClearDatabase from "./handlers/handleClearDatabase";
+import handleSetDateTime from "./handlers/handleSetDateTime";
+import handleSubmit from "./handlers/handleSubmit";
 
 // Definiere das App-Element für ReactModal
 ReactModal.setAppElement("#__next");
@@ -50,75 +53,19 @@ function SettingModal({ showModal, onClose }) {
   if (!currentPath.endsWith(".html")) {
     currentPath += ".html";
   }
-
+  const handleSubmitWrapper = () => {
-  const handleSubmit = () => {
+    handleSubmit(originalValues, {
-    const changes = {};
+      name,
-
+      ip,
-    // Überprüfe, welche Werte sich geändert haben
+      subnet,
-    if (name !== originalValues.name) {
+      gateway,
-      changes.SNNA = name;
+      ntp1,
-    }
+      ntp2,
-    if (ip !== originalValues.ip) {
+      ntp3,
-      changes.SEI01 = ip;
+      ntpTimezone,
-    }
+      active,
-    if (subnet !== originalValues.subnet) {
+    });
-      changes.SEI02 = subnet;
-    }
-    if (gateway !== originalValues.gateway) {
-      changes.SEI03 = gateway;
-    }
-    if (ntp1 !== originalValues.ntp1) {
-      changes.SNIP1 = ntp1;
-    }
-    if (ntp2 !== originalValues.ntp2) {
-      changes.SNIP2 = ntp2;
-    }
-    if (ntp3 !== originalValues.ntp3) {
-      changes.SNIP3 = ntp3;
-    }
-    if (ntpTimezone !== originalValues.ntpTimezone) {
-      changes.SNTZ = ntpTimezone;
-    }
-    if (active !== originalValues.active) {
-      changes.SNAC = active;
-    }
-
-    // Falls Änderungen vorhanden sind, sende die neuen Daten
-    if (Object.keys(changes).length > 0) {
-      // Get the current path and ensure it ends with ".html"
-      let currentPath = window.location.pathname;
-      if (!currentPath.endsWith(".html")) {
-        currentPath += ".html";
-      }
-
-      // Full URL with host, current path, and all change parameters
-      let url = `${window.location.origin}/CPL?${currentPath}`;
-
-      Object.keys(changes).forEach((paramKey) => {
-        url += `&${paramKey}=${encodeURIComponent(changes[paramKey])}`;
-      });
-
-      // Log the full URL to the console for debugging
-      console.log(url);
-
-      // Send the URL with changes to the server
-      fetch(url, { method: "GET" })
-        .then((response) => {
-          if (response.ok) {
-            alert("Daten erfolgreich gesendet!");
-          } else {
-            alert("Fehler beim Senden der Daten!");
-          }
-        })
-        .catch((error) => {
-          console.error("Fehler:", error);
-          alert("Fehler beim Senden der Daten!");
-        });
-    } else {
-      alert("Keine Änderungen vorgenommen.");
-    }
   };
-
   //---------------------------------------------------
   // Setze initiale Werte nur beim Öffnen des Modals
   useEffect(() => {
@@ -381,7 +328,7 @@ function SettingModal({ showModal, onClose }) {
                 Datenbank leeren
               </button>
               <button
-                onClick={() => handleSubmit()}
+                onClick={handleSubmitWrapper}
                 className="bg-littwin-blue text-white px-4 py-2 rounded"
               >
                 Übernehmen

components/modales/handlers/handleClearDatabase.js

@@ -1,3 +1,4 @@
+// components/modales/handlers/handleClearDatabase.js
 const handleClearDatabase = async () => {
   const confirmClear = window.confirm(
     "Sind Sie sicher, dass Sie die Datenbank leeren möchten?"

components/modales/handlers/handleReboot.js

@@ -1,4 +1,4 @@
-// handlers/handleReboot.js
+// components/modales/handlers/handleReboot.js
 const handleReboot = () => {
   if (
     window.confirm("Sind Sie sicher, dass Sie den CPL neu starten möchten?")

components/modales/handlers/handleSetDateTime.js

@@ -1,3 +1,4 @@
+//components/modales/handlers/handleSetDateTime.js
 const handleSetDateTime = () => {
   const currentDate = new Date();
 

components/modales/handlers/handleSubmit.js

@@ -0,0 +1,68 @@
+// components/modales/handlers/handleSubmit.js
+const handleSubmit = (originalValues, currentValues) => {
+  const changes = {};
+
+  // Überprüfe, welche Werte sich geändert haben
+  if (name !== originalValues.name) {
+    changes.SNNA = name;
+  }
+  if (ip !== originalValues.ip) {
+    changes.SEI01 = ip;
+  }
+  if (subnet !== originalValues.subnet) {
+    changes.SEI02 = subnet;
+  }
+  if (gateway !== originalValues.gateway) {
+    changes.SEI03 = gateway;
+  }
+  if (ntp1 !== originalValues.ntp1) {
+    changes.SNIP1 = ntp1;
+  }
+  if (ntp2 !== originalValues.ntp2) {
+    changes.SNIP2 = ntp2;
+  }
+  if (ntp3 !== originalValues.ntp3) {
+    changes.SNIP3 = ntp3;
+  }
+  if (ntpTimezone !== originalValues.ntpTimezone) {
+    changes.SNTZ = ntpTimezone;
+  }
+  if (active !== originalValues.active) {
+    changes.SNAC = active;
+  }
+
+  // Falls Änderungen vorhanden sind, sende die neuen Daten
+  if (Object.keys(changes).length > 0) {
+    // Get the current path and ensure it ends with ".html"
+    let currentPath = window.location.pathname;
+    if (!currentPath.endsWith(".html")) {
+      currentPath += ".html";
+    }
+
+    // Full URL with host, current path, and all change parameters
+    let url = `${window.location.origin}/CPL?${currentPath}`;
+
+    Object.keys(changes).forEach((paramKey) => {
+      url += `&${paramKey}=${encodeURIComponent(changes[paramKey])}`;
+    });
+
+    // Log the full URL to the console for debugging
+    console.log(url);
+
+    // Send the URL with changes to the server
+    fetch(url, { method: "GET" })
+      .then((response) => {
+        if (response.ok) {
+          alert("Daten erfolgreich gesendet!");
+        } else {
+          alert("Fehler beim Senden der Daten!");
+        }
+      })
+      .catch((error) => {
+        console.error("Fehler:", error);
+        alert("Fehler beim Senden der Daten!");
+      });
+  } else {
+    alert("Keine Änderungen vorgenommen.");
+  }
+};