Filter Gerät und Typ in Add und Update POI

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">
-              {locationDeviceData.map((device) => (
-                <option key={device.idLD} value={device.name}>
-                  {device.name}
-                </option>
-              ))}
-            </select>
+            <Select
+              id="deviceName"
+              value={deviceName}
+              onChange={setDeviceName}
+              options={deviceOptions} // Options for filtering
+              placeholder="Gerät auswählen..."
+              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">
-              {poiTypData.map((poiTyp) => (
-                <option key={poiTyp.idPoiTyp} 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>
+
           <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>