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">
+        <Select
-          <option value="" disabled>
+          id="idPoiTyp"
-            Typ auswählen...
+          value={poiTypeId}
-          </option>
+          onChange={setPoiTypeId}
-          {poiTypData.map((poiTyp, index) => (
+          options={poiTypeOptions} // Options for filtering
-            <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
+          placeholder="Typ auswählen..."
-              {poiTyp.name}
+          styles={customStyles} // Apply custom styles
-            </option>
+        />
-          ))}
-        </select>
       </div>
 
       <div className="flex flex-row items-center justify-center">

components/pois/PoiUpdateModal.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import Select from "react-select"; // Importiere react-select
 import { useRecoilValue } from "recoil";
 import { selectedPoiState } from "../../store/atoms/poiState";
 import { currentPoiState } from "../../store/atoms/currentPoiState";
@@ -10,9 +11,9 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
   const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
   const [name, setName] = useState(poiData ? poiData.name : "");
   const [poiTypData, setPoiTypData] = useState([]);
-  const [poiTypeId, setPoiTypeId] = useState(""); // Sicherstellen, dass der Typ korrekt vorgewählt ist
+  const [poiTypeId, setPoiTypeId] = useState(null); // Verwende null für react-select
   const [locationDeviceData, setLocationDeviceData] = useState([]);
-  const [deviceName, setDeviceName] = useState(poiData ? poiData.deviceName : "");
+  const [deviceName, setDeviceName] = useState(poiData ? poiData.deviceName : null); // Verwende null für react-select
   const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
   const [description, setDescription] = useState(poiData ? poiData.description : "");
 
@@ -27,7 +28,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
     }
   }, [poiData]);
 
-  // Fetch POI types and set the current POI type in the dropdown
+  // Fetch POI types and set the current POI type in the react-select dropdown
   useEffect(() => {
     const fetchPoiTypData = async () => {
       try {
@@ -42,11 +43,14 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
         if (storedPoiType) {
           const matchingType = data.find((type) => type.name === storedPoiType);
           if (matchingType) {
-            setPoiTypeId(matchingType.idPoiTyp);
+            setPoiTypeId({ value: matchingType.idPoiTyp, label: matchingType.name });
           }
         } else if (poiData && poiData.idPoiTyp) {
           // Falls kein Typ im localStorage ist, setze den Typ von poiData
-          setPoiTypeId(poiData.idPoiTyp);
+          const matchingType = data.find((type) => type.idPoiTyp === poiData.idPoiTyp);
+          if (matchingType) {
+            setPoiTypeId({ value: matchingType.idPoiTyp, label: matchingType.name });
+          }
         }
       } catch (error) {
         console.error("Fehler beim Abrufen der poiTyp Daten:", error);
@@ -65,7 +69,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
 
         if (poiData && poiData.idLD) {
           const selectedDevice = data.find((device) => device.idLD === poiData.idLD);
-          setDeviceName(selectedDevice ? selectedDevice.name : "");
+          setDeviceName(selectedDevice ? { value: selectedDevice.name, label: selectedDevice.name } : null);
         }
       } catch (error) {
         console.error("Fehler beim Abrufen der Standort- und Gerätedaten:", error);
@@ -76,7 +80,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
 
   const handleSubmit = async (event) => {
     event.preventDefault();
-    const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`);
+    const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName?.value)}`);
     const idLDData = await idLDResponse.json();
     const idLD = idLDData.idLD;
 
@@ -90,7 +94,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
           idPoi: poiId,
           name: name,
           description: description,
-          idPoiTyp: poiTypeId, // Den ausgewählten Typ mitsenden
+          idPoiTyp: poiTypeId?.value, // Den ausgewählten Typ mitsenden
           idLD: idLD,
         }),
       });
@@ -127,6 +131,32 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
     }
   };
 
+  // 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,
+  }));
+
+  // 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 (
     <div className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]" onClick={onClose}>
       <div className="relative bg-white p-6 rounded-lg shadow-lg" onClick={(e) => e.stopPropagation()}>
@@ -143,31 +173,36 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
             <input type="text" id="description" name="description" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Beschreibung der Station" className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" />
           </div>
 
+          {/* React Select for Devices */}
           <div className="flex items-center mb-4">
             <label htmlFor="deviceName" className="block mr-2 flex-none">
               Gerät:
             </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) => (
+              id="deviceName"
-                <option key={device.idLD} 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>
 
+          {/* React Select for POI Types */}
           <div className="flex items-center mb-4">
             <label htmlFor="idPoiTyp" className="block mr-2 flex-none">
               Typ:
             </label>
-            <select id="idPoiTyp" name="idPoiTyp" value={poiTypeId} onChange={(e) => setPoiTypeId(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
+            <Select
-              {poiTypData.map((poiTyp) => (
+              id="idPoiTyp"
-                <option key={poiTyp.idPoiTyp} value={poiTyp.idPoiTyp}>
+              value={poiTypeId}
-                  {poiTyp.name}
+              onChange={setPoiTypeId}
-                </option>
+              options={poiTypeOptions} // Options for filtering
-              ))}
+              placeholder="Typ auswählen..."
-            </select>
+              styles={customStyles} // Apply custom styles
+            />
           </div>
+
           <button type="button" onClick={handleDeletePoi} className="bg-red-400 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full mb-4">
             POI löschen
           </button>