diff --git a/components/modales/KueModal.jsx b/components/modales/KueModal.jsx
new file mode 100644
index 0000000..f4dc9ec
--- /dev/null
+++ b/components/modales/KueModal.jsx
@@ -0,0 +1,113 @@
+import ReactModal from "react-modal";
+
+function KueModal({ showModal, onClose }) {
+ return (
+
+ {/* Modal Header */}
+
+
KUE Einstellung
+
+
+
+ {/* Modal Body */}
+
+
+ {/* Modal Footer */}
+
+
+
+
+ );
+}
+
+export default KueModal;
diff --git a/components/modules/Kue705FO.jsx b/components/modules/Kue705FO.jsx
index 255db97..f91a8b2 100644
--- 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({
diff --git a/package-lock.json b/package-lock.json
index 67134e5..767d25e 100644
--- 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",
diff --git a/package.json b/package.json
index 66467f3..4f147e9 100644
--- 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",