Filter Gerät und Typ in Add und Update POI

components/pois/AddPoiModalWindow.js

@@ -1,6 +1,6 @@
 // components/pois/AddPoiModalWindow.js
 import React, { useState, useEffect } from "react";
-import Select from "react-select"; // Import react-select
+import Select from "react-select"; // Importiere react-select
 import { useSetRecoilState } from "recoil";
 import { readPoiMarkersStore } from "../../store/selectors/readPoiMarkersStore";
 import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTriggerAtom";
@@ -8,12 +8,12 @@ import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTrigger
 const AddPoiModalWindow = ({ onClose, map, latlng }) => {
   const [poiTypData, setpoiTypData] = useState([]);
   const [name, setName] = useState("");
-  const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as empty string
+  const [poiTypeId, setPoiTypeId] = useState(null); // Verwende null für react-select
   const [latitude] = useState(latlng.lat.toFixed(5));
   const [longitude] = useState(latlng.lng.toFixed(5));
   const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom);
   const [locationDeviceData, setLocationDeviceData] = useState([]);
-  const [deviceName, setDeviceName] = useState(null); // Initialize as null
+  const [deviceName, setDeviceName] = useState(null); // Verwende null für react-select
 
   useEffect(() => {
     const fetchInitialData = async () => {
@@ -27,7 +27,7 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
         setLocationDeviceData(locationDeviceData);
 
         if (locationDeviceData.length > 0) {
-          setDeviceName(locationDeviceData[0].name); // Set initial device name
+          setDeviceName({ value: locationDeviceData[0].name, label: locationDeviceData[0].name }); // Set initial device name
         }
       } catch (error) {
         console.error("Fehler beim Abrufen der Daten:", error);
@@ -48,7 +48,7 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
 
     const formData = {
       name,
-      poiTypeId,
+      poiTypeId: poiTypeId.value, // Verwende den Wert von react-select
       latitude,
       longitude,
       idLD: locationDeviceData.find((device) => device.name === deviceName?.value).idLD,
@@ -75,6 +75,11 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
   };
 
   // Erstelle Optionen für react-select
+  const poiTypeOptions = poiTypData.map((poiTyp) => ({
+    value: poiTyp.idPoiTyp,
+    label: poiTyp.name,
+  }));
+
   const deviceOptions = locationDeviceData.map((device) => ({
     value: device.name,
     label: device.name,
@@ -119,20 +124,19 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
         />
       </div>
 
+      {/* React Select for POI Types */}
       <div className="flex items-center mb-4">
-        <label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
+        <label htmlFor="idPoiTyp" className="block mr-2 flex-none">
           Typ:
         </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">
-          <option value="" disabled>
-            Typ auswählen...
-          </option>
-          {poiTypData.map((poiTyp, index) => (
-            <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
-              {poiTyp.name}
-            </option>
-          ))}
-        </select>
+        <Select
+          id="idPoiTyp"
+          value={poiTypeId}
+          onChange={setPoiTypeId}
+          options={poiTypeOptions} // Options for filtering
+          placeholder="Typ auswählen..."
+          styles={customStyles} // Apply custom styles
+        />
       </div>
 
       <div className="flex flex-row items-center justify-center">