Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

git commit -m "Implement react-select as a Combobox Dropdown Menu with consistent width for device selection"

Browse Source
This commit is contained in:
ISA
2024-09-16 10:51:04 +02:00
parent 8c85b2dbf3
commit 1d6b3d6385
3 changed files with 111 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
components/pois/AddPoiModalWindow.js
View File

@@ -1,22 +1,20 @@
// components/pois/AddPoiModalWindow.js // components/pois/AddPoiModalWindow.js
import React, { useState, useEffect, use } from "react"; import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom"; import Select from "react-select"; // Import react-select
import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil"; import { useSetRecoilState } from "recoil";
import { readPoiMarkersStore } from "../../store/selectors/readPoiMarkersStore"; import { readPoiMarkersStore } from "../../store/selectors/readPoiMarkersStore";
import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTriggerAtom"; import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTriggerAtom";
const AddPoiModalWindow = ({ onClose, map, latlng }) => { const AddPoiModalWindow = ({ onClose, map, latlng }) => {
const [poiTypData, setpoiTypData] = useState(); // Recoil State verwenden const [poiTypData, setpoiTypData] = useState([]);
const [name, setName] = useState(""); const [name, setName] = useState("");
const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string const [poiTypeId, setPoiTypeId] = useState("");
const [poiTypeName, setPoiTypeName] = useState(""); // Initialize as string
const [latitude] = useState(latlng.lat.toFixed(5)); const [latitude] = useState(latlng.lat.toFixed(5));
const [longitude] = useState(latlng.lng.toFixed(5)); const [longitude] = useState(latlng.lng.toFixed(5));
const setLoadData = useSetRecoilState(readPoiMarkersStore);
const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom); const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom);
const [locationDeviceData, setLocationDeviceData] = useState([]); const [locationDeviceData, setLocationDeviceData] = useState([]);
const [deviceName, setDeviceName] = useState(""); const [deviceName, setDeviceName] = useState(null); // Initialize as null
//------------------------------------------------------------------------------------------
useEffect(() => { useEffect(() => {
const fetchInitialData = async () => { const fetchInitialData = async () => {
try { try {
@@ -25,13 +23,6 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
const poiTypData = await poiTypResponse.json(); const poiTypData = await poiTypResponse.json();
setpoiTypData(poiTypData); 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(); const locationDeviceData = await locationDeviceResponse.json();
setLocationDeviceData(locationDeviceData); setLocationDeviceData(locationDeviceData);
@@ -46,8 +37,6 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
fetchInitialData(); fetchInitialData();
}, []); }, []);
//------------------------------------------------------------------------------------------
//-----------------handleSubmit-------------------
const handleSubmit = async (event) => { const handleSubmit = async (event) => {
event.preventDefault(); event.preventDefault();
const formData = { const formData = {
@@ -55,7 +44,7 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
poiTypeId, poiTypeId,
latitude, latitude,
longitude, 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", { const response = await fetch("/api/talas_v5_DB/pois/addLocation", {
@@ -65,16 +54,8 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
}); });
if (response.ok) { if (response.ok) {
setTrigger((trigger) => { setTrigger((trigger) => trigger + 1);
//console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert onClose();
const newTrigger = trigger + 1;
//console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert
onClose();
return newTrigger;
});
// Browser aktualisieren
window.location.reload();
} else { } else {
console.error("Fehler beim Hinzufügen des POI"); 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 ( return (
<form onSubmit={handleSubmit} className="m-0 p-2 w-full "> <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
<div className="flex items-center mb-4"> <div className="flex items-center mb-4">
<label htmlFor="name" className="block mr-2 flex-none"> <label htmlFor="name" className="block mr-2 flex-none">
Name : Name :
@@ -95,31 +95,31 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
<input type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name der Station" className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" /> <input type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name der Station" className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" />
</div> </div>
{/* {locationDeviceData.----------------------------------------------*/} {/* React Select for Devices */}
<div className="flex items-center mb-4"> <div className="flex items-center mb-4">
<label htmlFor="deviceName" className="block mr-2 flex-none"> <label htmlFor="deviceName" className="block mr-2 flex-none">
Gerät : Gerät :
</label> </label>
<select id="deviceName" name="deviceName" value={deviceName} onChange={(e) => setDeviceName(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"> <Select
{locationDeviceData.map((device, index) => ( id="deviceName"
<option key={index} value={device.name}> value={deviceName}
{device.name} onChange={setDeviceName}
</option> options={deviceOptions} // Options for filtering
))} placeholder="Gerät auswählen..."
</select> styles={customStyles} // Apply custom styles
/>
</div> </div>
{/* {locationDeviceData.----------------------------------------------*/}
<div className="flex items-center mb-4"> <div className="flex items-center mb-4">
<label htmlFor="idPoiTyp2" className="block mr-2 flex-none"> <label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
Typ: Typ:
</label> </label>
<select id="idPoiTyp2" name="idPoiTyp2" value={poiTypeId} onChange={(e) => setPoiTypeId(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"> <select id="idPoiTyp2" name="idPoiTyp2" value={poiTypeId} onChange={(e) => 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) => ( <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
<option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}> {poiTyp.name}
{poiTyp.name} </option>
</option> ))}
))}
</select> </select>
</div> </div>
<div className="flex flex-row items-center justify-center"> <div className="flex flex-row items-center justify-center">

74
package-lock.json generated
View File

@@ -1,5 +1,5 @@
{ {
"name": "09.09.2024 NodeMap", "name": "16.09.2024 NodeMap",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
@@ -25,6 +25,7 @@
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-redux": "^9.1.2", "react-redux": "^9.1.2",
"react-select": "^5.8.0",
"react-toastify": "^10.0.5", "react-toastify": "^10.0.5",
"recoil": "^0.7.7", "recoil": "^0.7.7",
"redux": "^5.0.1", "redux": "^5.0.1",
@@ -2087,6 +2088,28 @@
"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz", "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
"integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==" "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": { "node_modules/@heroicons/react": {
"version": "2.1.5", "version": "2.1.5",
"resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.5.tgz", "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.5.tgz",
@@ -3810,14 +3833,12 @@
"node_modules/@types/prop-types": { "node_modules/@types/prop-types": {
"version": "15.7.12", "version": "15.7.12",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
"integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
"peer": true
}, },
"node_modules/@types/react": { "node_modules/@types/react": {
"version": "18.3.5", "version": "18.3.5",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz",
"integrity": "sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==", "integrity": "sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==",
"peer": true,
"dependencies": { "dependencies": {
"@types/prop-types": "*", "@types/prop-types": "*",
"csstype": "^3.0.2" "csstype": "^3.0.2"
@@ -3827,7 +3848,6 @@
"version": "4.4.11", "version": "4.4.11",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
"integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==", "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
"peer": true,
"dependencies": { "dependencies": {
"@types/react": "*" "@types/react": "*"
} }
@@ -5732,7 +5752,6 @@
"version": "5.2.1", "version": "5.2.1",
"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
"integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
"peer": true,
"dependencies": { "dependencies": {
"@babel/runtime": "^7.8.7", "@babel/runtime": "^7.8.7",
"csstype": "^3.0.2" "csstype": "^3.0.2"
@@ -9573,6 +9592,11 @@
"tmpl": "1.0.5" "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": { "node_modules/merge-stream": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -10462,7 +10486,6 @@
"version": "15.8.1", "version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"peer": true,
"dependencies": { "dependencies": {
"loose-envify": "^1.4.0", "loose-envify": "^1.4.0",
"object-assign": "^4.1.1", "object-assign": "^4.1.1",
@@ -10472,8 +10495,7 @@
"node_modules/prop-types/node_modules/react-is": { "node_modules/prop-types/node_modules/react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
"peer": true
}, },
"node_modules/proxy-from-env": { "node_modules/proxy-from-env": {
"version": "1.0.0", "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": { "node_modules/react-toastify": {
"version": "10.0.5", "version": "10.0.5",
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz", "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
@@ -10660,7 +10702,6 @@
"version": "4.4.5", "version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
"integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
"peer": true,
"dependencies": { "dependencies": {
"@babel/runtime": "^7.5.5", "@babel/runtime": "^7.5.5",
"dom-helpers": "^5.0.1", "dom-helpers": "^5.0.1",
@@ -11900,6 +11941,19 @@
"requires-port": "^1.0.0" "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": { "node_modules/use-sync-external-store": {
"version": "1.2.2", "version": "1.2.2",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",

1
package.json
View File

@@ -20,6 +20,7 @@
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-redux": "^9.1.2", "react-redux": "^9.1.2",
"react-select": "^5.8.0",
"react-toastify": "^10.0.5", "react-toastify": "^10.0.5",
"recoil": "^0.7.7", "recoil": "^0.7.7",
"redux": "^5.0.1", "redux": "^5.0.1",