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;
--- a/components/modules/Kue705FO.jsx
+++ b/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">
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,8 @@
        "bootstrap-icons": "^1.11.3",
        "next": "14.2.13",
        "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "react-modal": "^3.16.1"
      },
      "devDependencies": {
        "postcss": "^8.4.47",
@@ -680,6 +681,11 @@
        "node": ">=6"
      }
    },
+    "node_modules/exenv": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
+      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
+    },
    "node_modules/fast-glob": {
      "version": "3.3.2",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -1138,7 +1144,6 @@
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -1382,6 +1387,16 @@
      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
    "node_modules/queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1425,6 +1440,34 @@
        "react": "^18.3.1"
      }
    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "node_modules/react-modal": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
+      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
+      "dependencies": {
+        "exenv": "^1.2.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.0",
+        "warning": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -1821,6 +1864,14 @@
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
      "dev": true
    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -18,7 +18,8 @@
    "bootstrap-icons": "^1.11.3",
    "next": "14.2.13",
    "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-modal": "^3.16.1"
  },
  "devDependencies": {
    "postcss": "^8.4.47",