334 lines
11 KiB
JavaScript
334 lines
11 KiB
JavaScript
"use client"; // components/modales/KueModal.jsx
|
|
import ReactModal from "react-modal";
|
|
import { useState, useEffect } from "react";
|
|
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 [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 [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]);
|
|
|
|
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 (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.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.kueLoopInterval && Array.isArray(window.kueLoopInterval)) {
|
|
setSchleifenintervall(window.kueLoopInterval);
|
|
}
|
|
}, []);
|
|
|
|
// 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 handleSave = () => {
|
|
const changes = {};
|
|
|
|
// 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];
|
|
}
|
|
|
|
// Falls Änderungen vorhanden sind, die fetch-Requests auslösen
|
|
if (Object.keys(changes).length > 0) {
|
|
let url = `https://${window.ip}:443/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(ids[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();
|
|
};
|
|
|
|
const handleDisplayEinschalten = () => {
|
|
const url = `https://${window.ip}:443/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 (
|
|
<ReactModal
|
|
isOpen={showModal}
|
|
onRequestClose={onClose}
|
|
ariaHideApp={false}
|
|
style={{
|
|
overlay: {
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
zIndex: 100,
|
|
},
|
|
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",
|
|
},
|
|
}}
|
|
>
|
|
{/* 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
|
|
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>
|
|
|
|
{/* ID und Modulname anzeigen */}
|
|
<div className="p-2 mb-4">
|
|
{/*
|
|
<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
|
|
type="text"
|
|
className="border rounded p-1 w-full text-sm"
|
|
value={ids[slot]}
|
|
onChange={(e) => handleChange(setIds, e, slot)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Modal Body */}
|
|
<div className="p-2">
|
|
<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" // Schrittgröße für Nachkommastellen
|
|
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" // Schrittgröße für Nachkommastellen
|
|
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">
|
|
Unterer Grenzwert (kOhm)
|
|
</th>
|
|
<th className="p-2 border text-sm text-center">
|
|
Oberer 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" // Schrittgröße für Nachkommastellen
|
|
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={obereSchleifenGrenzwerte[slot]}
|
|
step="0.1" // Schrittgröße für Nachkommastellen
|
|
onChange={(e) =>
|
|
handleChange(setObereSchleifenGrenzwerte, 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)
|
|
onChange={(e) => handleChange(setSchleifenintervall, e, slot)}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Display Einschalten Button */}
|
|
<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={handleSave}
|
|
className="bg-littwin-blue text-white p-2 rounded flex items-center"
|
|
>
|
|
<span className="mr-2">💾</span> Speichern
|
|
</button>
|
|
</div>
|
|
</ReactModal>
|
|
);
|
|
}
|
|
|
|
export default KueModal;
|