Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Modularisierung und Optimierung der SettingsModal-Komponente

Browse Source 
- 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
This commit is contained in:
ISA
2024-11-09 16:23:56 +01:00
parent 44e8323e3c
commit 0f938953db
5 changed files with 88 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
components/modales/SettingsModal.jsx
View File

@@ -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 handleSubmit = () => {
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.");
}
const handleSubmitWrapper = () => {
handleSubmit(originalValues, {
name,
ip,
subnet,
gateway,
ntp1,
ntp2,
ntp3,
ntpTimezone,
active,
});
};
//---------------------------------------------------
// 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

1
components/modales/handlers/handleClearDatabase.js
View File

@@ -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?"

2
components/modales/handlers/handleReboot.js
View File

@@ -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?")

1
components/modales/handlers/handleSetDateTime.js
View File

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

68
components/modales/handlers/handleSubmit.js Normal file
View File

@@ -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.");
}
};