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

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 (
-    <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">
         <label htmlFor="name" className="block mr-2 flex-none">
           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" />
       </div>
 
-      {/* {locationDeviceData.----------------------------------------------*/}
+      {/* 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, index) => (
-            <option key={index} 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>
-      {/* {locationDeviceData.----------------------------------------------*/}
+
       <div className="flex items-center mb-4">
         <label htmlFor="idPoiTyp2" 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">
-          {poiTypData &&
-            poiTypData.map((poiTyp, index) => (
-              <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
-                {poiTyp.name}
-              </option>
-            ))}
+          {poiTypData.map((poiTyp, index) => (
+            <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
+              {poiTyp.name}
+            </option>
+          ))}
         </select>
       </div>
       <div className="flex flex-row items-center justify-center">