Setup handleSubmit, handleSetDateTime, and handleReboot modularization with SettingsModal updates

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/setttingsModal/SettingsModal";
 import { useSelector } from "react-redux";
 
 function Header() {

components/modales/setttingsModal/SettingsModal.jsx

@@ -4,6 +4,10 @@ import { ClipLoader } from "react-spinners";
 import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
 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");
@@ -48,174 +52,22 @@ function SettingModal({ showModal, onClose }) {
   if (!currentPath.endsWith(".html")) {
     currentPath += ".html";
   }
-  const handleReboot = () => {
-    if (
-      window.confirm("Sind Sie sicher, dass Sie den CPL neu starten möchten?")
-    ) {
-      // 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 reboot command
-      const url = `${window.location.origin}/CPL?${currentPath}&BOOT=1`;
-
-      // Log the full URL to the console for debugging
-      console.log(url);
-
-      // Send the reboot command to the server using fetch and GET method
-      fetch(url, { method: "GET" }).finally(() => {
-        window.location.href = `/wait`; // Redirect to wait page on client side
-      });
-    }
+  //---------------------------------------------------
+  const onSubmit = () => {
+    handleSubmit({
+      name,
+      originalValues,
+      ip,
+      subnet,
+      gateway,
+      ntp1,
+      ntp2,
+      ntp3,
+      ntpTimezone,
+      active,
+      handleReboot,
+    });
   };
-
-  const handleClearDatabase = async () => {
-    const confirmClear = window.confirm(
-      "Sind Sie sicher, dass Sie die Datenbank leeren möchten?"
-    );
-    if (!confirmClear) return;
-
-    // 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 clear database command
-    const url = `${window.location.origin}/CPL?${currentPath}&DEDB=1`;
-
-    // Log the full URL to the console for debugging
-    console.log(url);
-
-    // Send the clear database command to the server using fetch and GET method
-    try {
-      const response = await fetch(url, { method: "GET" });
-      if (response.ok) {
-        alert("Datenbank erfolgreich geleert!");
-      } else {
-        alert("Fehler beim Leeren der Datenbank!");
-      }
-    } catch (error) {
-      console.error("Fehler:", error);
-      alert("Fehler beim Leeren der Datenbank!");
-    }
-  };
-
-  const handleSubmit = () => {
-    const changes = {};
-    let networkChanges = false;
-
-    // Überprüfe, welche Werte sich geändert haben //reboot Bei Netzwerk und Name ja, Bei NTP nicht
-    if (name !== originalValues.name) {
-      changes.SNNA = name;
-      networkChanges = true;
-    }
-    if (ip !== originalValues.ip) {
-      changes.SEI01 = ip;
-      networkChanges = true;
-    }
-    if (subnet !== originalValues.subnet) {
-      changes.SEI02 = subnet;
-      networkChanges = true;
-    }
-    if (gateway !== originalValues.gateway) {
-      changes.SEI03 = gateway;
-      networkChanges = true;
-    }
-    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) {
-      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])}`;
-      });
-
-      // Send the URL with changes to the server
-      fetch(url, { method: "GET" }).catch((error) => {
-        console.error("Fehler beim Senden der Daten:", error);
-      });
-
-      alert("Daten erfolgreich gesendet!");
-
-      // Zeige Hinweis unabhängig von der fetch-Antwort
-      if (networkChanges) {
-        alert(
-          "Hinweis: Die Änderungen in CPL-Name und den Netzwerkeinstellungen werden erst nach einem Neustart des CPL wirksam."
-        );
-        handleReboot(); //confirm ist schon in handleReboot
-      }
-    } else {
-      alert("Keine Änderungen vorgenommen.");
-    }
-  };
-
-  const handleSetDateTime = () => {
-    const currentDate = new Date();
-
-    // Format date and time as required by the system without leading zeros:
-    const year = currentDate.getFullYear().toString().slice(-2); // Last two digits of the year
-    const month = Number(currentDate.getMonth() + 1); // Convert to Number to remove leading zero
-    const day = Number(currentDate.getDate()); // Convert to Number to remove leading zero
-
-    const hours = Number(currentDate.getHours()); // Convert to Number to remove leading zero
-    const minutes = Number(currentDate.getMinutes()); // Convert to Number to remove leading zero
-    const seconds = Number(currentDate.getSeconds()); // Convert to Number to remove leading zero
-
-    // Date and Time commands
-    const dateCommand = `CLK00=${year}-${month}-${day}`;
-    const timeCommand = `CLK01=${hours}-${minutes}-${seconds}`;
-
-    // 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, date, and time commands
-    const url = `${window.location.origin}/CPL?${currentPath}&${dateCommand}&${timeCommand}`;
-
-    // Log the full URL to the console
-    console.log(url);
-
-    // Send the commands to the server using fetch and GET method
-    fetch(url, { method: "GET" })
-      .then((response) => {
-        if (response.ok) {
-          alert("Datum und Uhrzeit erfolgreich gesetzt!");
-        } else {
-          //alert("Fehler beim Setzen von Datum und Uhrzeit!"); //es wird ausgeführt aber kein Antwort deswegen auskommentiert
-        }
-      })
-      .catch((error) => {
-        console.error("Fehler:", error);
-        //alert("Fehler beim Setzen von Datum und Uhrzeit!"); //es wird ausgeführt aber kein Antwort deswegen auskommentiert
-      });
-  };
-
   //---------------------------------------------------
   // Setze initiale Werte nur beim Öffnen des Modals
   useEffect(() => {
@@ -381,13 +233,7 @@ function SettingModal({ showModal, onClose }) {
                   <button
                     className="bg-littwin-blue text-white px-4 py-2 rounded"
                     onClick={() => {
-                      if (
-                        window.confirm(
-                          "Möchten Sie wirklich die Systemzeit übernehmen?"
-                        )
-                      ) {
-                        handleSetDateTime();
-                      }
+                      handleSetDateTime();
                     }}
                   >
                     Systemzeit übernehmen
@@ -467,7 +313,7 @@ function SettingModal({ showModal, onClose }) {
                 Datenbank leeren
               </button>
               <button
-                onClick={() => handleSubmit()}
+                onClick={onSubmit}
                 className="bg-littwin-blue text-white px-4 py-2 rounded"
               >
                 Übernehmen

components/modales/setttingsModal/handlers/handleClearDatabase.js

@@ -0,0 +1,33 @@
+const handleClearDatabase = async () => {
+  const confirmClear = window.confirm(
+    "Sind Sie sicher, dass Sie die Datenbank leeren möchten?"
+  );
+  if (!confirmClear) return;
+
+  // 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 clear database command
+  const url = `${window.location.origin}/CPL?${currentPath}&DEDB=1`;
+
+  // Log the full URL to the console for debugging
+  console.log(url);
+
+  // Send the clear database command to the server using fetch and GET method
+  try {
+    const response = await fetch(url, { method: "GET" });
+    if (response.ok) {
+      alert("Datenbank erfolgreich geleert!");
+    } else {
+      alert("Fehler beim Leeren der Datenbank!");
+    }
+  } catch (error) {
+    console.error("Fehler:", error);
+    alert("Fehler beim Leeren der Datenbank!");
+  }
+};
+
+export default handleClearDatabase;

components/modales/setttingsModal/handlers/handleReboot.js

@@ -0,0 +1,24 @@
+const handleReboot = () => {
+  if (
+    window.confirm("Sind Sie sicher, dass Sie den CPL neu starten möchten?")
+  ) {
+    // 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 reboot command
+    const url = `${window.location.origin}/CPL?${currentPath}&BOOT=1`;
+
+    // Log the full URL to the console for debugging
+    console.log(url);
+
+    // Send the reboot command to the server using fetch and GET method
+    fetch(url, { method: "GET" }).finally(() => {
+      window.location.href = `/wait`; // Redirect to wait page on client side
+    });
+  }
+};
+
+export default handleReboot;

components/modales/setttingsModal/handlers/handleSetDateTime.js

@@ -0,0 +1,48 @@
+const handleSetDateTime = () => {
+  // Confirm action before proceeding
+  if (!window.confirm("Möchten Sie wirklich die Systemzeit übernehmen?")) {
+    return; // Exit if the user cancels
+  }
+  const currentDate = new Date();
+
+  // Format date and time as required by the system without leading zeros:
+  const year = currentDate.getFullYear().toString().slice(-2); // Last two digits of the year
+  const month = Number(currentDate.getMonth() + 1); // Convert to Number to remove leading zero
+  const day = Number(currentDate.getDate()); // Convert to Number to remove leading zero
+
+  const hours = Number(currentDate.getHours()); // Convert to Number to remove leading zero
+  const minutes = Number(currentDate.getMinutes()); // Convert to Number to remove leading zero
+  const seconds = Number(currentDate.getSeconds()); // Convert to Number to remove leading zero
+
+  // Date and Time commands
+  const dateCommand = `CLK00=${year}-${month}-${day}`;
+  const timeCommand = `CLK01=${hours}-${minutes}-${seconds}`;
+
+  // 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, date, and time commands
+  const url = `${window.location.origin}/CPL?${currentPath}&${dateCommand}&${timeCommand}`;
+
+  // Log the full URL to the console
+  console.log(url);
+
+  // Send the commands to the server using fetch and GET method
+  fetch(url, { method: "GET" })
+    .then((response) => {
+      if (response.ok) {
+        alert("Datum und Uhrzeit erfolgreich gesetzt!");
+      } else {
+        //alert("Fehler beim Setzen von Datum und Uhrzeit!"); //es wird ausgeführt aber kein Antwort deswegen auskommentiert
+      }
+    })
+    .catch((error) => {
+      console.error("Fehler:", error);
+      //alert("Fehler beim Setzen von Datum und Uhrzeit!"); //es wird ausgeführt aber kein Antwort deswegen auskommentiert
+    });
+};
+
+export default handleSetDateTime;

components/modales/setttingsModal/handlers/handleSubmit.js

@@ -0,0 +1,80 @@
+// handleSubmit.js
+const handleSubmit = ({
+  name,
+  originalValues,
+  ip,
+  subnet,
+  gateway,
+  ntp1,
+  ntp2,
+  ntp3,
+  ntpTimezone,
+  active,
+  handleReboot,
+}) => {
+  const changes = {};
+  let networkChanges = false;
+
+  // Überprüfe, welche Werte sich geändert haben
+  if (name !== originalValues.name) {
+    changes.SNNA = name;
+    networkChanges = true;
+  }
+  if (ip !== originalValues.ip) {
+    changes.SEI01 = ip;
+    networkChanges = true;
+  }
+  if (subnet !== originalValues.subnet) {
+    changes.SEI02 = subnet;
+    networkChanges = true;
+  }
+  if (gateway !== originalValues.gateway) {
+    changes.SEI03 = gateway;
+    networkChanges = true;
+  }
+  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) {
+    let currentPath = window.location.pathname;
+    if (!currentPath.endsWith(".html")) {
+      currentPath += ".html";
+    }
+
+    let url = `${window.location.origin}/CPL?${currentPath}`;
+    Object.keys(changes).forEach((paramKey) => {
+      url += `&${paramKey}=${encodeURIComponent(changes[paramKey])}`;
+    });
+
+    fetch(url, { method: "GET" }).catch((error) => {
+      console.error("Fehler beim Senden der Daten:", error);
+    });
+
+    alert("Daten erfolgreich gesendet!");
+
+    if (networkChanges) {
+      alert(
+        "Hinweis: Die Änderungen in CPL-Name und den Netzwerkeinstellungen werden erst nach einem Neustart des CPL wirksam."
+      );
+      handleReboot();
+    }
+  } else {
+    alert("Keine Änderungen vorgenommen.");
+  }
+};
+
+export default handleSubmit;