Modal für KÜ

components/modales/KueModal.jsx

@@ -0,0 +1,113 @@
+import ReactModal from "react-modal";
+
+function KueModal({ showModal, onClose }) {
+  return (
+    <ReactModal
+      isOpen={showModal}
+      onRequestClose={onClose}
+      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: "0",
+        },
+      }}
+    >
+      {/* Modal Header */}
+      <div className="flex items-center justify-between bg-blue-500 text-white p-4 rounded-t">
+        <h2 className="text-lg font-bold">KUE Einstellung</h2>
+        <button onClick={onClose} className="text-white text-lg font-bold">
+          &times;
+        </button>
+      </div>
+
+      {/* Modal Body */}
+      <div className="p-6">
+        <table className="w-full text-left border-collapse">
+          <thead className="bg-gray-100">
+            <tr>
+              <th className="p-2 border">KÜ</th>
+              <th className="p-2 border">Bezeichnung</th>
+              <th className="p-2 border">Isolationsgrenzwert</th>
+              <th className="p-2 border">Schleifengrenzwert</th>
+              <th className="p-2 border">Filterzeit</th>
+              <th className="p-2 border">TDR Aktiv</th>
+              <th className="p-2 border">KVZ Aktiv</th>
+              <th className="p-2 border">Datenlogger</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="p-2 border">1</td>
+              <td className="p-2 border">
+                <input
+                  type="text"
+                  className="w-full border rounded p-1"
+                  defaultValue="Test1"
+                />
+              </td>
+              <td className="p-2 border">
+                <input
+                  type="number"
+                  className="w-16 border rounded p-1"
+                  defaultValue="10.0"
+                />{" "}
+                MOhm
+              </td>
+              <td className="p-2 border">
+                <input
+                  type="number"
+                  className="w-16 border rounded p-1"
+                  defaultValue="0.10"
+                />{" "}
+                kOhm
+              </td>
+              <td className="p-2 border">
+                <input
+                  type="number"
+                  className="w-16 border rounded p-1"
+                  defaultValue="420"
+                />{" "}
+                sek.
+              </td>
+              <td className="p-2 border text-center">
+                <input type="checkbox" defaultChecked />
+              </td>
+              <td className="p-2 border text-center">
+                <input type="checkbox" defaultChecked />
+              </td>
+              <td className="p-2 border">
+                <select className="border rounded p-1">
+                  <option value="aus">aus</option>
+                  <option value="ein">ein</option>
+                </select>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      {/* Modal Footer */}
+      <div className="flex justify-end bg-gray-100 p-4 rounded-b">
+        <button
+          onClick={onClose}
+          className="bg-blue-500 text-white p-2 rounded flex items-center"
+        >
+          <span className="mr-2">💾</span> Speichern
+        </button>
+      </div>
+    </ReactModal>
+  );
+}
+
+export default KueModal;

components/modules/Kue705FO.jsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import KueModal from "../modales/KueModal";
 
 function Kue705FO({
   isolationswert, // Übergabeparameter für den Isolationswert
@@ -15,7 +16,16 @@ function Kue705FO({
   const [currentDisplayValue, setCurrentDisplayValue] = useState(
     schleifenwiderstand || "0"
   ); // Wert, der im unteren Display angezeigt wird
+  //--Modales Fenster
+  const [showModal, setShowModal] = useState(false);
+  const handleOpenModal = () => {
+    setShowModal(true);
+  };
 
+  const handleCloseModal = () => {
+    setShowModal(false);
+  };
+  //----
   // Funktion zum Wechseln der Buttons und Anpassen des Anzeigewerts
   const handleButtonClick = (button) => {
     if (button === "Schleife") {
@@ -116,12 +126,17 @@ function Kue705FO({
               <h3 className="text-white font-bold text-[9px] mr-4">KÜ705-FO</h3>
 
               <button
-                onClick={() => console.log("Settings clicked")}
+                onClick={handleOpenModal}
                 className="w-[15px] h-[15px] bg-gray-400 flex items-center justify-center"
               >
                 <span className="text-white text-[20px]">⚙</span>
               </button>
             </div>
+            {/* Modal */}
+            <KueModal showModal={showModal} onClose={handleCloseModal}>
+              <h2>Modul Einstellungen</h2>
+              <p>Hier kannst du Einstellungen für {modulName} vornehmen.</p>
+            </KueModal>
 
             <div className="flex flex-col mt-[10px] ml-[10px]">
               <div className="flex items-center">