Modal für KÜ

2024-10-16 13:58:52 +02:00
parent b3b94b5762
commit b55fe0fa2b
4 changed files with 184 additions and 4 deletions
--- a/components/modales/KueModal.jsx
+++ b/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;