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

KueModal.jsx lesen von Redux store

Browse Source
This commit is contained in:
ISA
2024-11-05 09:33:23 +01:00
parent ac1b32f353
commit 157267b799
1 changed files with 55 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
components/modales/KueModal.jsx
View File

@@ -1,64 +1,70 @@
"use client"; // components/modales/KueModal.jsx
import ReactModal from "react-modal";
import { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
function KueModal({ showModal, onClose, slot, onModulNameChange }) {
const [ids, setIds] = useState(Array(32).fill("---")); // IDs für jedes Modul
const [ids, setIds] = useState(Array(32).fill("---"));
const [bezeichnungen, setBezeichnungen] = useState(Array(32).fill("---"));
const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState(
Array(32).fill(10.0)
); // Default 10.0 MOhm
const [verzoegerung, setVerzoegerung] = useState(Array(32).fill(1.0)); // Default Verzögerung 1 Sekunde
);
const [verzoegerung, setVerzoegerung] = useState(Array(32).fill(1.0));
const [untereSchleifenGrenzwerte, setUntereSchleifenGrenzwerte] = useState(
Array(32).fill(0.1)
); // kOhm
);
const [obereSchleifenGrenzwerte, setObereSchleifenGrenzwerte] = useState(
Array(32).fill(1.0)
); // kOhm
);
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]);
);
const [originalValues, setOriginalValues] = useState({});
// Werte aus dem Redux-Store abrufen
const {
kueID,
kueLimit1,
kueDelay1,
kueLimit2Low,
kueLimit2High,
kueLoopInterval,
} = useSelector((state) => state.variables);
// Initiale Werte festlegen, wenn das Modal geöffnet wird
useEffect(() => {
// Initialisierung mit Werten aus dem globalen `window`-Objekt
//ID statt Name
if (window.kueID && Array.isArray(window.kueID)) {
setIds(window.kueID.map((id) => id.trim() || "---"));
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],
});
}
if (window.kueID && Array.isArray(window.kueID)) {
setBezeichnungen(window.kueID.map((name) => name.trim() || "---"));
}
if (window.kueLimit1 && Array.isArray(window.kueLimit1)) {
setIsolationsgrenzwerte(window.kueLimit1);
}
if (window.kueDelay1 && Array.isArray(window.kueDelay1)) {
setVerzoegerung(window.kueDelay1);
}
if (window.kueLimit2Low && Array.isArray(window.kueLimit2Low)) {
setUntereSchleifenGrenzwerte(window.kueLimit2Low);
}
if (window.kueLimit2High && Array.isArray(window.kueLimit2High)) {
setObereSchleifenGrenzwerte(window.kueLimit2High);
}
if (window.kueLoopInterval && Array.isArray(window.kueLoopInterval)) {
setSchleifenintervall(window.kueLoopInterval);
}
}, []);
}, [
showModal,
kueID,
kueLimit1,
kueDelay1,
kueLimit2Low,
kueLimit2High,
kueLoopInterval,
]);
// Funktionen zur Änderung der Werte
const handleChange = (setter, e, slot) => {
@@ -71,17 +77,9 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
};
const handleSave = () => {
// Validierung: Der obere Grenzwert darf nicht kleiner als der untere sein
/* if (obereSchleifenGrenzwerte[slot] < untereSchleifenGrenzwerte[slot]) { wird nicht mehr benötigt
alert(
`Der obere Schleifengrenzwert (${obereSchleifenGrenzwerte[slot]} kOhm) darf nicht kleiner als der untere Grenzwert (${untereSchleifenGrenzwerte[slot]} kOhm) sein!`
);
return; // Speichern verhindern
}
*/
const changes = {};
// Vergleich mit den Originalwerten, um Änderungen zu erkennen
// Überprüfen, ob Änderungen gegenüber den Originalwerten vorliegen
if (ids[slot] !== originalValues.ids[slot]) {
changes.KID = ids[slot];
}
@@ -112,10 +110,8 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
changes.KRI = schleifenintervall[slot];
}
// Falls Änderungen vorhanden sind, die fetch-Requests auslösen
if (Object.keys(changes).length > 0) {
let url = `/cpl?/CPL/SERVICE/kueDetail.HTML&slot=${slot}`;
Object.keys(changes).forEach((paramKey) => {
url += `&${paramKey}${slot}=${encodeURIComponent(changes[paramKey])}`;
});
@@ -124,7 +120,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
.then((response) => {
if (response.ok) {
alert("Daten erfolgreich gespeichert!");
onModulNameChange(ids[slot]); // Weitergabe der Änderung
onModulNameChange(ids[slot]);
} else {
alert("Fehler beim Speichern der Daten!");
}
@@ -137,7 +133,6 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
alert("Keine Änderungen vorgenommen.");
}
// Schließe das Modal nach dem Speichern
onClose();
};
@@ -183,7 +178,6 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
},
}}
>
{/* Modal Header */}
<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
@@ -202,20 +196,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
</button>
</div>
{/* ID und Modulname anzeigen */}
<div className="p-2 mb-4 text-black">
{/*
<div className="mb-2">
<label className="font-bold">ID:</label>
<input
type="text"
className="border rounded p-1 w-full text-sm"
value={ids[slot]}
onChange={(e) => handleChange(setIds, e, slot)}
/>
</div>
*/}
<div className="mb-2 ">
<label className="font-bold ">Kabelbezeichnung:</label>
<input
@@ -227,7 +208,6 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
</div>
</div>
{/* Modal Body */}
<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">
@@ -248,7 +228,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
type="number"
className="w-[6rem] border rounded p-1 text-sm"
value={isolationsgrenzwerte[slot]}
step="0.1" // Schrittgröße für Nachkommastellen
step="0.1"
onChange={(e) =>
handleChange(setIsolationsgrenzwerte, e, slot)
}
@@ -259,7 +239,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
type="number"
className="w-[6rem] border rounded p-1 text-sm"
value={verzoegerung[slot]}
step="0.1" // Schrittgröße für Nachkommastellen
step="0.1"
onChange={(e) => handleChange(setVerzoegerung, e, slot)}
/>
</td>
@@ -274,7 +254,6 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
<th className="p-2 border text-sm text-center">
Grenzwert (kOhm)
</th>
<th className="p-2 border text-sm text-center">
Schleifenintervall (h)
</th>
@@ -287,19 +266,18 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
type="number"
className="w-[6rem] border rounded p-1 text-sm"
value={untereSchleifenGrenzwerte[slot]}
step="0.1" // Schrittgröße für Nachkommastellen
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" // Schrittgröße für ganze Stunden (kein Nachkomma)
step="1"
onChange={(e) => handleChange(setSchleifenintervall, e, slot)}
/>
</td>
@@ -308,7 +286,6 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
</table>
</div>
{/* Display Einschalten Button */}
<div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
<button
onClick={handleDisplayEinschalten}