feat: Implementiere bedingtes Speichern der geänderten KUE-Parameter
- Nur geänderte Werte werden beim Klick auf den "Speichern"-Button gesendet. - Verwendet handleChange, um die lokalen Werte zu aktualisieren, ohne sofortige API-Anfragen. - Verbesserte Logik zur Erkennung von Änderungen gegenüber den Originalwerten. - Sicherstellung, dass keine unnötigen API-Aufrufe gesendet werden, wenn keine Änderungen vorliegen.
This commit is contained in:
ISA
@@ -18,6 +18,20 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
|
||||
const [schleifenintervall, setSchleifenintervall] = useState(
|
||||
Array(32).fill(24)
|
||||
); // Default 24 Stunden
|
||||
// Originalwerte speichern
|
||||
const [originalValues, setOriginalValues] = useState({});
|
||||
useEffect(() => {
|
||||
const initialValues = {
|
||||
ids: [...ids],
|
||||
bezeichnungen: [...bezeichnungen],
|
||||
isolationsgrenzwerte: [...isolationsgrenzwerte],
|
||||
verzoegerung: [...verzoegerung],
|
||||
untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
|
||||
obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
|
||||
schleifenintervall: [...schleifenintervall],
|
||||
};
|
||||
setOriginalValues(initialValues);
|
||||
}, [showModal]);
|
||||
|
||||
useEffect(() => {
|
||||
// Initialisierung mit Werten aus dem globalen `window`-Objekt
|
||||
@@ -58,37 +72,64 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
const newId = ids[slot];
|
||||
const newBezeichnung = bezeichnungen[slot];
|
||||
const newIsolationsGrenzwert = isolationsgrenzwerte[slot];
|
||||
const newVerzoegerung = verzoegerung[slot];
|
||||
const newUntererSchleifenGrenzwert = untereSchleifenGrenzwerte[slot];
|
||||
const newObererSchleifenGrenzwert = obereSchleifenGrenzwerte[slot];
|
||||
const newSchleifenintervall = schleifenintervall[slot];
|
||||
const changes = {};
|
||||
|
||||
const url = `${
|
||||
process.env.NEXT_PUBLIC_API_BASE_URL
|
||||
}/cpl?Service/kueDetail.HTML&slot=${slot}&KID${slot}=${encodeURIComponent(
|
||||
newId
|
||||
)}&KIA${slot}=${encodeURIComponent(
|
||||
newBezeichnung
|
||||
)}&KL_${slot}=${newIsolationsGrenzwert}&KD_${slot}=1&KR_${slot}=${newUntererSchleifenGrenzwert}&KRI${slot}=${newSchleifenintervall}`;
|
||||
// Vergleich mit den Originalwerten, um Änderungen zu erkennen
|
||||
if (ids[slot] !== originalValues.ids[slot]) {
|
||||
changes.KID = ids[slot];
|
||||
}
|
||||
if (bezeichnungen[slot] !== originalValues.bezeichnungen[slot]) {
|
||||
changes.KIA = bezeichnungen[slot];
|
||||
}
|
||||
if (
|
||||
isolationsgrenzwerte[slot] !== originalValues.isolationsgrenzwerte[slot]
|
||||
) {
|
||||
changes.KL_ = isolationsgrenzwerte[slot];
|
||||
}
|
||||
if (verzoegerung[slot] !== originalValues.verzoegerung[slot]) {
|
||||
changes.KD_ = verzoegerung[slot];
|
||||
}
|
||||
if (
|
||||
untereSchleifenGrenzwerte[slot] !==
|
||||
originalValues.untereSchleifenGrenzwerte[slot]
|
||||
) {
|
||||
changes.KR_ = untereSchleifenGrenzwerte[slot];
|
||||
}
|
||||
if (
|
||||
obereSchleifenGrenzwerte[slot] !==
|
||||
originalValues.obereSchleifenGrenzwerte[slot]
|
||||
) {
|
||||
changes.KRO_ = obereSchleifenGrenzwerte[slot];
|
||||
}
|
||||
if (schleifenintervall[slot] !== originalValues.schleifenintervall[slot]) {
|
||||
changes.KRI = schleifenintervall[slot];
|
||||
}
|
||||
|
||||
// Fetch-Aufruf, um die neuen Werte zu senden
|
||||
fetch(url, { method: "GET" })
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
alert("Daten erfolgreich gespeichert!");
|
||||
onModulNameChange(newBezeichnung); // Weitergabe der Änderung
|
||||
} else {
|
||||
alert("Fehler beim Speichern der Daten!");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler:", error);
|
||||
alert("Fehler beim Senden der Daten!");
|
||||
// Falls Änderungen vorhanden sind, die fetch-Requests auslösen
|
||||
if (Object.keys(changes).length > 0) {
|
||||
let url = `${process.env.NEXT_PUBLIC_API_BASE_URL}/cpl?Service/kueDetail.HTML&slot=${slot}`;
|
||||
|
||||
Object.keys(changes).forEach((paramKey) => {
|
||||
url += `&${paramKey}${slot}=${encodeURIComponent(changes[paramKey])}`;
|
||||
});
|
||||
|
||||
fetch(url, { method: "GET" })
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
alert("Daten erfolgreich gespeichert!");
|
||||
onModulNameChange(bezeichnungen[slot]); // Weitergabe der Änderung
|
||||
} else {
|
||||
alert("Fehler beim Speichern der Daten!");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler:", error);
|
||||
alert("Fehler beim Senden der Daten!");
|
||||
});
|
||||
} else {
|
||||
alert("Keine Änderungen vorgenommen.");
|
||||
}
|
||||
|
||||
// Schließe das Modal nach dem Speichern
|
||||
onClose();
|
||||
};
|
||||
|
||||
@@ -15,7 +15,7 @@ function SettingModal({ showModal, onClose }) {
|
||||
const [ntp2, setNtp2] = useState("0.0.0.0");
|
||||
const [ntp3, setNtp3] = useState("0.0.0.0");
|
||||
const [zeitzone, setZeitzone] = useState("2");
|
||||
const [activ, setActiv] = useState("1");
|
||||
const [active, setActive] = useState("1");
|
||||
const [showRebootModal, setShowRebootModal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -30,7 +30,7 @@ function SettingModal({ showModal, onClose }) {
|
||||
if (window.ntpServer2Ip) setNtp2(window.ntpServer2Ip);
|
||||
if (window.ntpServer3Ip) setNtp3(window.ntpServer3Ip);
|
||||
if (window.ntpTimezone) setZeitzone(window.ntpTimezone);
|
||||
if (window.ntpActive) setActiv(window.ntpActive);
|
||||
if (window.ntpActive) setActive(window.ntpActive);
|
||||
}, []);
|
||||
|
||||
const handleReboot = () => {
|
||||
@@ -66,7 +66,7 @@ function SettingModal({ showModal, onClose }) {
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (window.confirm("Möchten Sie die Änderungen wirklich übernehmen?")) {
|
||||
const url = `CPL?KUEdetail.ACP&SNNA=${name}&SEI01=${ip}&SEI02=${subnet}&SEI03=${gateway}&SNIP1=${ntp1}&SNIP2=${ntp2}&SNIP3=${ntp3}&SNTZ=${zeitzone}&SNAC=${activ}`;
|
||||
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)
|
||||
.then((response) => {
|
||||
@@ -149,6 +149,7 @@ function SettingModal({ showModal, onClose }) {
|
||||
className="border border-gray-300 rounded p-2 w-full"
|
||||
value={mac1}
|
||||
onChange={(e) => setMac1(e.target.value)}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@@ -160,6 +161,7 @@ function SettingModal({ showModal, onClose }) {
|
||||
className="border border-gray-300 rounded p-2 w-full"
|
||||
value={mac2}
|
||||
onChange={(e) => setMac2(e.target.value)}
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -203,6 +205,15 @@ function SettingModal({ showModal, onClose }) {
|
||||
value={systemUhr}
|
||||
disabled
|
||||
/>
|
||||
{/* Button für Systemzeit übernehmen */}
|
||||
<div className="flex w-full mt-1 justify-end">
|
||||
<button
|
||||
className="bg-green-500 text-white px-4 py-2 rounded"
|
||||
onClick={() => console.log("Systemzeit übernehmen")}
|
||||
>
|
||||
Systemzeit übernehmen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -252,12 +263,12 @@ function SettingModal({ showModal, onClose }) {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium">Activ:</label>
|
||||
<label className="block text-sm font-medium">NTP Active:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border border-gray-300 rounded p-2 w-full"
|
||||
value={activ}
|
||||
onChange={(e) => setActiv(e.target.value)}
|
||||
value={active}
|
||||
onChange={(e) => setActive(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user