From 8e56e502c99eb485eeb58eedc586f14e17a9c819 Mon Sep 17 00:00:00 2001 From: ISA Date: Tue, 12 Nov 2024 07:21:07 +0100 Subject: [PATCH] Setup handleSubmit, handleSetDateTime, and handleReboot modularization with SettingsModal updates --- components/Header.jsx | 2 +- .../{ => setttingsModal}/SettingsModal.jsx | 196 ++---------------- .../handlers/handleClearDatabase.js | 33 +++ .../setttingsModal/handlers/handleReboot.js | 24 +++ .../handlers/handleSetDateTime.js | 48 +++++ .../setttingsModal/handlers/handleSubmit.js | 80 +++++++ 6 files changed, 207 insertions(+), 176 deletions(-) rename components/modales/{ => setttingsModal}/SettingsModal.jsx (65%) create mode 100644 components/modales/setttingsModal/handlers/handleClearDatabase.js create mode 100644 components/modales/setttingsModal/handlers/handleReboot.js create mode 100644 components/modales/setttingsModal/handlers/handleSetDateTime.js create mode 100644 components/modales/setttingsModal/handlers/handleSubmit.js diff --git a/components/Header.jsx b/components/Header.jsx index 2a5a885..d9d070c 100644 --- a/components/Header.jsx +++ b/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() { diff --git a/components/modales/SettingsModal.jsx b/components/modales/setttingsModal/SettingsModal.jsx similarity index 65% rename from components/modales/SettingsModal.jsx rename to components/modales/setttingsModal/SettingsModal.jsx index 460d75b..17dd709 100644 --- a/components/modales/SettingsModal.jsx +++ b/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 }) {