feat: handleSave Funktion ausgelagert und KueModal strukturiert
- handleSave in separate Datei handle-save.js ausgelagert, um KueModal-Komponente modularer und wartbarer zu gestalten - handleSaveWrapper in KueModal hinzugefügt, um Parameter an handleSave zu übergeben - KueModal umgestaltet, um Funktionen und Redux-Dispatch klarer zu organisieren - Konsistente Verwendung von Parametern und State-Updates für sauberen Codefluss
This commit is contained in:
ISA
258
components/modales/kueModal/KueModal.jsx
Normal file
258
components/modales/kueModal/KueModal.jsx
Normal file
@@ -0,0 +1,258 @@
|
||||
"use client"; // components/modales/KueModal.jsx
|
||||
import ReactModal from "react-modal";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { updateValues } from "../../../store/variablesSlice";
|
||||
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
|
||||
import { handleSave } from "./handlers/handleSave";
|
||||
|
||||
function KueModal({ showModal, onClose, slot, onModulNameChange }) {
|
||||
const dispatch = useDispatch();
|
||||
const [ids, setIds] = useState(Array(32).fill("---"));
|
||||
const [bezeichnungen, setBezeichnungen] = useState(Array(32).fill("---"));
|
||||
const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState(
|
||||
Array(32).fill(10.0)
|
||||
);
|
||||
const [verzoegerung, setVerzoegerung] = useState(Array(32).fill(1.0));
|
||||
const [untereSchleifenGrenzwerte, setUntereSchleifenGrenzwerte] = useState(
|
||||
Array(32).fill(0.1)
|
||||
);
|
||||
const [obereSchleifenGrenzwerte, setObereSchleifenGrenzwerte] = useState(
|
||||
Array(32).fill(1.0)
|
||||
);
|
||||
const [schleifenintervall, setSchleifenintervall] = useState(
|
||||
Array(32).fill(24)
|
||||
);
|
||||
|
||||
const [originalValues, setOriginalValues] = useState({});
|
||||
|
||||
// Werte aus dem Redux-Store abrufen
|
||||
const {
|
||||
kueID,
|
||||
kueLimit1,
|
||||
kueDelay1,
|
||||
kueLimit2Low,
|
||||
kueLimit2High,
|
||||
kueLoopInterval,
|
||||
} = useSelector((state) => state.variables);
|
||||
|
||||
// Initiale Werte festlegen, nur einmal beim Öffnen des Modals
|
||||
useEffect(() => {
|
||||
if (showModal) {
|
||||
setIds(kueID ? kueID.map((id) => id.trim() || "---") : ids);
|
||||
setBezeichnungen(
|
||||
kueID ? kueID.map((name) => name.trim() || "---") : bezeichnungen
|
||||
);
|
||||
setIsolationsgrenzwerte(kueLimit1 || isolationsgrenzwerte);
|
||||
setVerzoegerung(kueDelay1 || verzoegerung);
|
||||
setUntereSchleifenGrenzwerte(kueLimit2Low || untereSchleifenGrenzwerte);
|
||||
setObereSchleifenGrenzwerte(kueLimit2High || obereSchleifenGrenzwerte);
|
||||
setSchleifenintervall(kueLoopInterval || schleifenintervall);
|
||||
|
||||
setOriginalValues({
|
||||
ids: [...ids],
|
||||
bezeichnungen: [...bezeichnungen],
|
||||
isolationsgrenzwerte: [...isolationsgrenzwerte],
|
||||
verzoegerung: [...verzoegerung],
|
||||
untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
|
||||
obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
|
||||
schleifenintervall: [...schleifenintervall],
|
||||
});
|
||||
}
|
||||
}, [showModal]); // nur von showModal abhängig ansonsten wird alle 10 Sekunden die Werte zurückgesetzt in Modal
|
||||
|
||||
// Funktionen zur Änderung der Werte
|
||||
const handleChange = (setter, e, slot) => {
|
||||
const value = e.target.value;
|
||||
setter((prev) => {
|
||||
const updated = [...prev];
|
||||
updated[slot] = value;
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
const handleSaveWrapper = () => {
|
||||
handleSave({
|
||||
ids,
|
||||
bezeichnungen,
|
||||
isolationsgrenzwerte,
|
||||
verzoegerung,
|
||||
untereSchleifenGrenzwerte,
|
||||
obereSchleifenGrenzwerte,
|
||||
schleifenintervall,
|
||||
originalValues,
|
||||
slot,
|
||||
dispatch,
|
||||
onModulNameChange,
|
||||
onClose,
|
||||
});
|
||||
};
|
||||
|
||||
const handleDisplayEinschalten = () => {
|
||||
const url = `/CPL?/kabelueberwachung.html&KSD${slot}=1`;
|
||||
fetch(url, { method: "GET" })
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
alert(`Display für Slot ${slot + 1} erfolgreich eingeschaltet!`);
|
||||
} else {
|
||||
alert("Fehler beim Einschalten des Displays!");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler:", error);
|
||||
alert("Fehler beim Einschalten des Displays!");
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<ReactModal
|
||||
isOpen={showModal}
|
||||
onRequestClose={onClose}
|
||||
ariaHideApp={false}
|
||||
style={{
|
||||
overlay: {
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
zIndex: 100,
|
||||
text: "black",
|
||||
},
|
||||
content: {
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
right: "auto",
|
||||
bottom: "auto",
|
||||
marginRight: "-50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
width: "90%",
|
||||
maxWidth: "800px",
|
||||
padding: "10px",
|
||||
borderRadius: "8px",
|
||||
border: "none",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between bg-littwin-blue text-white p-1 rounded-t-lg">
|
||||
<h2 className="text-sm font-bold">KUE Einstellung - Slot {slot + 1}</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "10px",
|
||||
right: "20px",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
fontSize: "24px",
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-x-circle-fill"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="p-2 mb-4 text-black">
|
||||
<div className="mb-2 ">
|
||||
<label className="font-bold ">Kabelbezeichnung:</label>
|
||||
<input
|
||||
type="text"
|
||||
className="border rounded p-1 w-full text-sm"
|
||||
value={ids[slot]}
|
||||
onChange={(e) => handleChange(setIds, e, slot)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-2 text-black">
|
||||
<h3 className="font-bold text-center mb-4">Isolationsmessung</h3>
|
||||
<table className="w-full text-left border-collapse mb-4">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th className="p-2 border text-sm text-center">
|
||||
Grenzwert (MOhm)
|
||||
</th>
|
||||
<th className="p-2 border text-sm text-center">
|
||||
Verzögerung (sek)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="p-2 border text-center">
|
||||
<input
|
||||
type="number"
|
||||
className="w-[6rem] border rounded p-1 text-sm"
|
||||
value={isolationsgrenzwerte[slot]}
|
||||
step="0.1"
|
||||
onChange={(e) =>
|
||||
handleChange(setIsolationsgrenzwerte, e, slot)
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
<td className="p-2 border text-center">
|
||||
<input
|
||||
type="number"
|
||||
className="w-[6rem] border rounded p-1 text-sm"
|
||||
value={verzoegerung[slot]}
|
||||
step="0.1"
|
||||
onChange={(e) => handleChange(setVerzoegerung, e, slot)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 className="font-bold text-center mb-4">Schleifenmessung</h3>
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead className="bg-gray-100">
|
||||
<tr>
|
||||
<th className="p-2 border text-sm text-center">
|
||||
Grenzwert (kOhm)
|
||||
</th>
|
||||
<th className="p-2 border text-sm text-center">
|
||||
Schleifenintervall (h)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td className="p-2 border text-center">
|
||||
<input
|
||||
type="number"
|
||||
className="w-[6rem] border rounded p-1 text-sm"
|
||||
value={untereSchleifenGrenzwerte[slot]}
|
||||
step="0.1"
|
||||
onChange={(e) =>
|
||||
handleChange(setUntereSchleifenGrenzwerte, e, slot)
|
||||
}
|
||||
/>
|
||||
</td>
|
||||
<td className="p-2 border text-center">
|
||||
<input
|
||||
type="number"
|
||||
className="w-[6rem] border rounded p-1 text-sm"
|
||||
value={schleifenintervall[slot]}
|
||||
step="1"
|
||||
onChange={(e) => handleChange(setSchleifenintervall, e, slot)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
|
||||
<button
|
||||
onClick={handleDisplayEinschalten}
|
||||
className="bg-littwin-blue text-white p-2 rounded flex items-center mr-2"
|
||||
>
|
||||
<span className="mr-2">📺</span> Display einschalten
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSaveWrapper}
|
||||
className="bg-littwin-blue text-white p-2 rounded flex items-center"
|
||||
>
|
||||
<span className="mr-2">💾</span> Speichern
|
||||
</button>
|
||||
</div>
|
||||
</ReactModal>
|
||||
);
|
||||
}
|
||||
|
||||
export default KueModal;
|
||||
86
components/modales/kueModal/handlers/handleSave.js
Normal file
86
components/modales/kueModal/handlers/handleSave.js
Normal file
@@ -0,0 +1,86 @@
|
||||
import { updateValues } from "../../../../store/variablesSlice";
|
||||
const handleSave = ({
|
||||
ids,
|
||||
bezeichnungen,
|
||||
isolationsgrenzwerte,
|
||||
verzoegerung,
|
||||
untereSchleifenGrenzwerte,
|
||||
obereSchleifenGrenzwerte,
|
||||
schleifenintervall,
|
||||
originalValues,
|
||||
slot,
|
||||
dispatch,
|
||||
onModulNameChange,
|
||||
onClose,
|
||||
}) => {
|
||||
const changes = {};
|
||||
|
||||
// Überprüfen, ob Änderungen gegenüber den Originalwerten vorliegen
|
||||
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];
|
||||
}
|
||||
|
||||
if (Object.keys(changes).length > 0) {
|
||||
let url = `/cpl?/kabelueberwachung.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(ids[slot]);
|
||||
|
||||
// Aktualisiere Redux-Store mit neuen Werten
|
||||
dispatch(
|
||||
updateValues({
|
||||
ids: [...ids],
|
||||
bezeichnungen: [...bezeichnungen],
|
||||
isolationsgrenzwerte: [...isolationsgrenzwerte],
|
||||
verzoegerung: [...verzoegerung],
|
||||
untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
|
||||
obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
|
||||
schleifenintervall: [...schleifenintervall],
|
||||
})
|
||||
);
|
||||
} else {
|
||||
alert("Fehler beim Speichern der Daten!");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler:", error);
|
||||
//alert("Fehler beim Senden der Daten!");
|
||||
});
|
||||
} else {
|
||||
alert("Keine Änderungen vorgenommen.");
|
||||
}
|
||||
|
||||
onClose();
|
||||
};
|
||||
Reference in New Issue
Block a user