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 */} +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
BezeichnungIsolationsgrenzwertSchleifengrenzwertFilterzeitTDR AktivKVZ AktivDatenlogger
1 + + + {" "} + MOhm + + {" "} + kOhm + + {" "} + sek. + + + + + + +
+
+ + {/* 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({

KÜ705-FO

+ {/* Modal */} + +

Modul Einstellungen

+

Hier kannst du Einstellungen für {modulName} vornehmen.

+
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",