From 1414c58f19f73be59458c70a68b6b53eb158ba61 Mon Sep 17 00:00:00 2001 From: ISA Date: Thu, 17 Oct 2024 14:46:41 +0200 Subject: [PATCH] =?UTF-8?q?K=C3=BC=20Einstelung=20Modal,=20ID=20und=20Name?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/modales/KueModal.jsx | 281 ++++++++++++++++++-------------- 1 file changed, 163 insertions(+), 118 deletions(-) diff --git a/components/modales/KueModal.jsx b/components/modales/KueModal.jsx index e1a11e1..a67ae4e 100644 --- a/components/modales/KueModal.jsx +++ b/components/modales/KueModal.jsx @@ -2,92 +2,112 @@ import ReactModal from "react-modal"; import { useState, useEffect } from "react"; function KueModal({ showModal, onClose, slot, onModulNameChange }) { - // Verwende ein Array von Bezeichnungen und Isolationsgrenzwerten für 32 Slots + const [ids, setIds] = useState(Array(32).fill("---")); // IDs für jedes Modul const [bezeichnungen, setBezeichnungen] = useState(Array(32).fill("---")); const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState( - Array(32).fill(0) + Array(32).fill(10.0) ); // Default 10.0 MOhm - const handleVerzögerungChange = (e) => { - let value = e.target.value; - - // Wertebereich von 1 bis 999 überprüfen - if (value < 1) value = 1; - if (value > 999) value = 999; - - e.target.value = value; // Setze den korrigierten Wert zurück in das Inputfeld - }; + const [verzoegerung, setVerzoegerung] = useState(Array(32).fill(1.0)); // Default Verzögerung 1 Sekunde + 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 useEffect(() => { - // Initialisiere die Bezeichnungen basierend auf window.kueName - if (window.kueName && Array.isArray(window.kueName)) { - setBezeichnungen((prevBezeichnungen) => { - const updatedBezeichnungen = [...prevBezeichnungen]; - for (let i = 0; i < 32; i++) { - updatedBezeichnungen[i] = window.kueName[i]?.trim() || "---"; // Leerzeichen entfernen - } - return updatedBezeichnungen; - }); + // Initialisierung mit Werten aus dem globalen `window`-Objekt + if (window.kueID && Array.isArray(window.kueID)) { + setIds(window.kueID.map((id) => id.trim() || "---")); + } + if (window.kueName && Array.isArray(window.kueName)) { + setBezeichnungen(window.kueName.map((name) => name.trim() || "---")); } - - // Initialisiere die Isolationsgrenzwerte basierend auf window.kueLimit1 if (window.kueLimit1 && Array.isArray(window.kueLimit1)) { - setIsolationsgrenzwerte((prevIsolationsgrenzwerte) => { - const updatedGrenzwerte = [...prevIsolationsgrenzwerte]; - for (let i = 0; i < 32; i++) { - updatedGrenzwerte[i] = window.kueLimit1[i] || 10.0; // Default zu 10.0 - } - return updatedGrenzwerte; - }); + setIsolationsgrenzwerte(window.kueLimit1); + } + if (window.kueDelay && Array.isArray(window.kueDelay)) { + setVerzoegerung(window.kueDelay); + } + if (window.kueLowerLimit && Array.isArray(window.kueLowerLimit)) { + setUntereSchleifenGrenzwerte(window.kueLowerLimit); + } + if (window.kueUpperLimit && Array.isArray(window.kueUpperLimit)) { + setObereSchleifenGrenzwerte(window.kueUpperLimit); + } + if ( + window.kueSchleifenintervall && + Array.isArray(window.kueSchleifenintervall) + ) { + setSchleifenintervall(window.kueSchleifenintervall); } }, []); - // Funktion zum Ändern der Bezeichnung für den aktuellen Slot - const handleBezeichnungChange = (e, slot) => { - const newBezeichnung = e.target.value; - setBezeichnungen((prevBezeichnungen) => { - const updatedBezeichnungen = [...prevBezeichnungen]; - updatedBezeichnungen[slot] = newBezeichnung; - return updatedBezeichnungen; + // 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; }); }; - // Funktion zum Ändern des Isolationsgrenzwerts für den aktuellen Slot - const handleIsolationsgrenzwertChange = (e, slot) => { - const newGrenzwert = e.target.value; - setIsolationsgrenzwerte((prevGrenzwerte) => { - const updatedGrenzwerte = [...prevGrenzwerte]; - updatedGrenzwerte[slot] = newGrenzwert; - return updatedGrenzwerte; - }); - }; const handleSave = () => { + const newId = ids[slot]; const newBezeichnung = bezeichnungen[slot]; - // Angepasstes URL-Format gemäß deinem funktionierenden Test + const newIsolationsGrenzwert = isolationsgrenzwerte[slot]; + const newVerzoegerung = verzoegerung[slot]; + const newUntererSchleifenGrenzwert = untereSchleifenGrenzwerte[slot]; + const newObererSchleifenGrenzwert = obereSchleifenGrenzwerte[slot]; + const newSchleifenintervall = schleifenintervall[slot]; + const url = `${ process.env.NEXT_PUBLIC_API_BASE_URL - }/cpl?Service/kueDetail.HTML&slot=${slot}&KIA${slot}=${encodeURIComponent( + }/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}`; - // Fetch-Aufruf, um den neuen Modulnamen zu senden + // Fetch-Aufruf, um die neuen Werte zu senden fetch(url, { method: "GET" }) .then((response) => { if (response.ok) { - alert("Modulname erfolgreich gespeichert!"); - onModulNameChange(newBezeichnung); // Hier wird die Änderung weitergegeben + alert("Daten erfolgreich gespeichert!"); + onModulNameChange(newBezeichnung); // Weitergabe der Änderung } else { - alert("Fehler beim Speichern des Modulnamens!"); + alert("Fehler beim Speichern der Daten!"); } }) .catch((error) => { console.error("Fehler:", error); - alert("Fehler beim Senden des Modulnamens!"); + alert("Fehler beim Senden der Daten!"); }); // Schließe das Modal nach dem Speichern onClose(); }; + const handleDisplayEinschalten = () => { + const url = `${process.env.NEXT_PUBLIC_API_BASE_URL}/cpl?Service/kueDetail.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 ( {/* Modal Header */}
-

KUE Einstellung

+

KUE Einstellung - Slot {slot + 1}

+ {/* ID und Modulname anzeigen */} +
+
+ + handleChange(setIds, e, slot)} + /> +
+
+ + handleChange(setBezeichnungen, e, slot)} + /> +
+
+ {/* Modal Body */}
- +

Isolationsmessung

+
- - - - - {/* - - - - */} - - - - - + + +
KÜBezeichnung - Isolationsgrenzwert + Grenzwert (MOhm) Verzögerung - Schleifengrenzwert + Verzögerung (sek) TDR AktivKVZ AktivDatenlogger
{slot + 1} + handleBezeichnungChange(e, slot)} // Update Bezeichnung bei Änderung + value={isolationsgrenzwerte[slot]} + onChange={(e) => + handleChange(setIsolationsgrenzwerte, e, slot) + } /> + handleIsolationsgrenzwertChange(e, slot)} // Update Isolationsgrenzwert bei Änderung - />{" "} - MOhm - - {/* Flexbox für Verzögerung */} -
- - sek. -
- 		- {" "} - kOhm + className="w-[6rem] border rounded p-1 text-sm" + value={verzoegerung[slot]} + onChange={(e) => handleChange(setVerzoegerung, e, slot)} + />
- {/* - - +

Schleifenmessung

+ + + + + + + + + + + - - */}
+ Unterer Grenzwert (kOhm) + + Oberer Grenzwert (kOhm) + + Schleifenintervall (h) +
+ + handleChange(setUntereSchleifenGrenzwerte, e, slot) + } + /> - + + handleChange(setObereSchleifenGrenzwerte, e, slot) + } + /> - + + handleChange(setSchleifenintervall, e, slot)} + />
- {/* Modal Footer */} + {/* Display Einschalten Button */}
+