diff --git a/components/pois/AddPoiModalWindow.js b/components/pois/AddPoiModalWindow.js index 56677bf79..f0e90efb6 100644 --- a/components/pois/AddPoiModalWindow.js +++ b/components/pois/AddPoiModalWindow.js @@ -1,22 +1,20 @@ // components/pois/AddPoiModalWindow.js -import React, { useState, useEffect, use } from "react"; -import ReactDOM from "react-dom"; -import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil"; +import React, { useState, useEffect } from "react"; +import Select from "react-select"; // Import react-select +import { useSetRecoilState } from "recoil"; import { readPoiMarkersStore } from "../../store/selectors/readPoiMarkersStore"; import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTriggerAtom"; const AddPoiModalWindow = ({ onClose, map, latlng }) => { - const [poiTypData, setpoiTypData] = useState(); // Recoil State verwenden + const [poiTypData, setpoiTypData] = useState([]); const [name, setName] = useState(""); - const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string - const [poiTypeName, setPoiTypeName] = useState(""); // Initialize as string + const [poiTypeId, setPoiTypeId] = useState(""); const [latitude] = useState(latlng.lat.toFixed(5)); const [longitude] = useState(latlng.lng.toFixed(5)); - const setLoadData = useSetRecoilState(readPoiMarkersStore); const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom); const [locationDeviceData, setLocationDeviceData] = useState([]); - const [deviceName, setDeviceName] = useState(""); - //------------------------------------------------------------------------------------------ + const [deviceName, setDeviceName] = useState(null); // Initialize as null + useEffect(() => { const fetchInitialData = async () => { try { @@ -25,13 +23,6 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => { const poiTypData = await poiTypResponse.json(); setpoiTypData(poiTypData); - if (poiTypData.length > 0) { - setPoiTypeId(poiTypData[0].idPoiTyp); // Set initial poiTypeId to the id of the first poiType - if (poiTypData[1]) { - setPoiTypeName(poiTypData[1].name); - } - } - const locationDeviceData = await locationDeviceResponse.json(); setLocationDeviceData(locationDeviceData); @@ -46,8 +37,6 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => { fetchInitialData(); }, []); - //------------------------------------------------------------------------------------------ - //-----------------handleSubmit------------------- const handleSubmit = async (event) => { event.preventDefault(); const formData = { @@ -55,7 +44,7 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => { poiTypeId, latitude, longitude, - idLD: locationDeviceData.find((device) => device.name === deviceName).idLD, + idLD: locationDeviceData.find((device) => device.name === deviceName?.value).idLD, }; const response = await fetch("/api/talas_v5_DB/pois/addLocation", { @@ -65,16 +54,8 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => { }); if (response.ok) { - setTrigger((trigger) => { - //console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert - const newTrigger = trigger + 1; - //console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert - onClose(); - return newTrigger; - }); - - // Browser aktualisieren - window.location.reload(); + setTrigger((trigger) => trigger + 1); + onClose(); } else { console.error("Fehler beim Hinzufügen des POI"); } @@ -84,10 +65,29 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => { } }; - //-----------------handleSubmit------------------- + // Erstelle Optionen für react-select + const deviceOptions = locationDeviceData.map((device) => ({ + value: device.name, + label: device.name, + })); + + // Custom styles for react-select + const customStyles = { + control: (provided) => ({ + ...provided, + width: "100%", + minWidth: "300px", // Minimum width for the dropdown + maxWidth: "100%", // Maximum width (you can adjust this if needed) + }), + menu: (provided) => ({ + ...provided, + width: "100%", + minWidth: "300px", // Ensure the dropdown menu stays at the minimum width + }), + }; return ( -
+
- {/* {locationDeviceData.----------------------------------------------*/} + {/* React Select for Devices */}
- + setPoiTypeId(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"> - {poiTypData && - poiTypData.map((poiTyp, index) => ( - - ))} + {poiTypData.map((poiTyp, index) => ( + + ))}
diff --git a/package-lock.json b/package-lock.json index 65982e38b..7c64886c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "09.09.2024 NodeMap", + "name": "16.09.2024 NodeMap", "lockfileVersion": 3, "requires": true, "packages": { @@ -25,6 +25,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-redux": "^9.1.2", + "react-select": "^5.8.0", "react-toastify": "^10.0.5", "recoil": "^0.7.7", "redux": "^5.0.1", @@ -2087,6 +2088,28 @@ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz", "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==" }, + "node_modules/@floating-ui/core": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", + "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "dependencies": { + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.11", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.11.tgz", + "integrity": "sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==", + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", + "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==" + }, "node_modules/@heroicons/react": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.5.tgz", @@ -3810,14 +3833,12 @@ "node_modules/@types/prop-types": { "version": "15.7.12", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", - "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", - "peer": true + "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==" }, "node_modules/@types/react": { "version": "18.3.5", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz", "integrity": "sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==", - "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -3827,7 +3848,6 @@ "version": "4.4.11", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz", "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==", - "peer": true, "dependencies": { "@types/react": "*" } @@ -5732,7 +5752,6 @@ "version": "5.2.1", "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", - "peer": true, "dependencies": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" @@ -9573,6 +9592,11 @@ "tmpl": "1.0.5" } }, + "node_modules/memoize-one": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", + "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==" + }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -10462,7 +10486,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "peer": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -10472,8 +10495,7 @@ "node_modules/prop-types/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==", - "peer": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/proxy-from-env": { "version": "1.0.0", @@ -10644,6 +10666,26 @@ } } }, + "node_modules/react-select": { + "version": "5.8.0", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.0.tgz", + "integrity": "sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==", + "dependencies": { + "@babel/runtime": "^7.12.0", + "@emotion/cache": "^11.4.0", + "@emotion/react": "^11.8.1", + "@floating-ui/dom": "^1.0.1", + "@types/react-transition-group": "^4.4.0", + "memoize-one": "^6.0.0", + "prop-types": "^15.6.0", + "react-transition-group": "^4.3.0", + "use-isomorphic-layout-effect": "^1.1.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-toastify": { "version": "10.0.5", "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz", @@ -10660,7 +10702,6 @@ "version": "4.4.5", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", - "peer": true, "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", @@ -11900,6 +11941,19 @@ "requires-port": "^1.0.0" } }, + "node_modules/use-isomorphic-layout-effect": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz", + "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/use-sync-external-store": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", diff --git a/package.json b/package.json index 5083e77ca..18b4262b8 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-redux": "^9.1.2", + "react-select": "^5.8.0", "react-toastify": "^10.0.5", "recoil": "^0.7.7", "redux": "^5.0.1",