feat: Send only updated system settings on submit
- Implemented logic to compare current input values with original values. - Only changed fields are now sent to the server on form submission. - Improved efficiency by avoiding unnecessary API calls. - Updated the "Systemzeit übernehmen" button to update the system time correctly. - Added reboot and clear database functionalities with confirmation dialogs.
This commit is contained in:
@@ -17,7 +17,26 @@ function SettingModal({ showModal, onClose }) {
|
|||||||
const [zeitzone, setZeitzone] = useState("2");
|
const [zeitzone, setZeitzone] = useState("2");
|
||||||
const [active, setActive] = useState("1");
|
const [active, setActive] = useState("1");
|
||||||
const [showRebootModal, setShowRebootModal] = useState(false);
|
const [showRebootModal, setShowRebootModal] = useState(false);
|
||||||
|
// Originalwerte speichern
|
||||||
|
const [originalValues, setOriginalValues] = useState({});
|
||||||
|
useEffect(() => {
|
||||||
|
// Initialisiere die Originalwerte beim ersten Laden des Modals
|
||||||
|
const initialValues = {
|
||||||
|
name,
|
||||||
|
mac1,
|
||||||
|
mac2,
|
||||||
|
ip,
|
||||||
|
subnet,
|
||||||
|
gateway,
|
||||||
|
systemUhr,
|
||||||
|
ntp1,
|
||||||
|
ntp2,
|
||||||
|
ntp3,
|
||||||
|
zeitzone,
|
||||||
|
active,
|
||||||
|
};
|
||||||
|
setOriginalValues(initialValues);
|
||||||
|
}, [showModal]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (window.deviceName) setName(window.deviceName);
|
if (window.deviceName) setName(window.deviceName);
|
||||||
if (window.mac1) setMac1(window.mac1);
|
if (window.mac1) setMac1(window.mac1);
|
||||||
@@ -65,10 +84,46 @@ function SettingModal({ showModal, onClose }) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleSubmit = () => {
|
const handleSubmit = () => {
|
||||||
if (window.confirm("Möchten Sie die Änderungen wirklich übernehmen?")) {
|
const changes = {};
|
||||||
const url = `CPL?KUEdetail.ACP&SNNA=${name}&SEI01=${ip}&SEI02=${subnet}&SEI03=${gateway}&SNIP1=${ntp1}&SNIP2=${ntp2}&SNIP3=${ntp3}&SNTZ=${zeitzone}&SNAC=${active}`;
|
|
||||||
|
|
||||||
fetch(url)
|
// Ü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 (zeitzone !== originalValues.zeitzone) {
|
||||||
|
changes.SNTZ = zeitzone;
|
||||||
|
}
|
||||||
|
if (active !== originalValues.active) {
|
||||||
|
changes.SNAC = active;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Falls Änderungen vorhanden sind, sende die neuen Daten
|
||||||
|
if (Object.keys(changes).length > 0) {
|
||||||
|
let url = `CPL?KUEdetail.ACP`;
|
||||||
|
|
||||||
|
Object.keys(changes).forEach((paramKey) => {
|
||||||
|
url += `&${paramKey}=${encodeURIComponent(changes[paramKey])}`;
|
||||||
|
});
|
||||||
|
|
||||||
|
fetch(url, { method: "GET" })
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
alert("Daten erfolgreich gesendet!");
|
alert("Daten erfolgreich gesendet!");
|
||||||
@@ -80,6 +135,8 @@ function SettingModal({ showModal, onClose }) {
|
|||||||
console.error("Fehler:", error);
|
console.error("Fehler:", error);
|
||||||
alert("Fehler beim Senden der Daten!");
|
alert("Fehler beim Senden der Daten!");
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
|
alert("Keine Änderungen vorgenommen.");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -208,7 +265,7 @@ function SettingModal({ showModal, onClose }) {
|
|||||||
{/* Button für Systemzeit übernehmen */}
|
{/* Button für Systemzeit übernehmen */}
|
||||||
<div className="flex w-full mt-1 justify-end">
|
<div className="flex w-full mt-1 justify-end">
|
||||||
<button
|
<button
|
||||||
className="bg-green-500 text-white px-4 py-2 rounded"
|
className="bg-blue-500 text-white px-4 py-2 rounded"
|
||||||
onClick={() => console.log("Systemzeit übernehmen")}
|
onClick={() => console.log("Systemzeit übernehmen")}
|
||||||
>
|
>
|
||||||
Systemzeit übernehmen
|
Systemzeit übernehmen
|
||||||
|
|||||||
Reference in New Issue
Block a user