KueModal bis Isolationsgrenwert gemacht

components/modales/KueModal.jsx

@@ -1,10 +1,62 @@
 import ReactModal from "react-modal";
+import { useState, useEffect } from "react";
+
+function KueModal({ showModal, onClose, slot }) {
+  // Verwende ein Array von Bezeichnungen und Isolationsgrenzwerten für 32 Slots
+  const [bezeichnungen, setBezeichnungen] = useState(Array(32).fill("---"));
+  const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState(
+    Array(32).fill(0)
+  ); // Default 10.0 MOhm
+
+  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;
+      });
+    }
+
+    // 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;
+      });
+    }
+  }, []);
+
+  // 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;
+    });
+  };
+
+  // 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;
+    });
+  };
 
-function KueModal({ showModal, onClose }) {
   return (
     <ReactModal
       isOpen={showModal}
       onRequestClose={onClose}
+      ariaHideApp={false}
       style={{
         overlay: {
           backgroundColor: "rgba(0, 0, 0, 0.5)",
@@ -54,19 +106,21 @@ function KueModal({ showModal, onClose }) {
           </thead>
           <tbody>
             <tr>
-              <td className="p-2 border text-center">1</td>
+              <td className="p-2 border text-center">{slot + 1}</td>
               <td className="p-2 border">
                 <input
                   type="text"
-                  className="w-12 border rounded p-1 text-sm"
-                  defaultValue="Test1"
+                  className="w-[6rem] border rounded p-1 text-sm"
+                  value={bezeichnungen[slot] || "---"} // Setze den Wert oder "---"
+                  onChange={(e) => handleBezeichnungChange(e, slot)} // Update Bezeichnung bei Änderung
                 />
               </td>
-              <td className="p-2 border text-center  text-sm">
+              <td className="p-2 border text-center text-sm">
                 <input
                   type="number"
                   className="w-16 border rounded p-1 text-sm"
-                  defaultValue="10.0"
+                  value={isolationsgrenzwerte[slot]} // Setze den Isolationsgrenzwert
+                  onChange={(e) => handleIsolationsgrenzwertChange(e, slot)} // Update Isolationsgrenzwert bei Änderung
                 />{" "}
                 MOhm
               </td>

components/modules/Kue705FO.jsx

@@ -133,7 +133,11 @@ function Kue705FO({
               </button>
             </div>
             {/* Modal */}
-            <KueModal showModal={showModal} onClose={handleCloseModal}>
+            <KueModal
+              showModal={showModal}
+              onClose={handleCloseModal}
+              slot={slotIndex}
+            >
               <h2>Modul Einstellungen</h2>
               <p>Hier kannst du Einstellungen für {modulName} vornehmen.</p>
             </KueModal>