AddPoiModalWindow mit Bereich-Filter

components/pois/AddPoiModalWindow.js

@@ -1,7 +1,7 @@
 // components/pois/AddPoiModalWindow.js
 import React, { useState, useEffect } from "react";
 import Select from "react-select"; // Importiere react-select
-import { useRecoilState } from "recoil";
+import { useSetRecoilState, useRecoilState } from "recoil";
 import { mapLayersState } from "../../store/atoms/mapLayersState";
 import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTriggerAtom";
 
@@ -11,7 +11,7 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
   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 = useRecoilState(poiReadFromDbTriggerAtom);
+  const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom); // Verwende useSetRecoilState
   const [locationDeviceData, setLocationDeviceData] = useState([]);
   const [filteredDevices, setFilteredDevices] = useState([]); // Gefilterte Geräte
   const [deviceName, setDeviceName] = useState(null); // Verwende null für react-select
@@ -106,7 +106,7 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
     });
 
     if (response.ok) {
-      setTrigger((trigger) => trigger + 1);
+      setTrigger((trigger) => trigger + 1); // Verwenden des Triggers zur Aktualisierung
       onClose();
       window.location.reload();
     } else {
@@ -129,8 +129,33 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
     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
+    }),
+  };
+
+  // Style für größere Breite des Modals und für Inputs
+  const modalStyles = {
+    // width: "300px", // größere Breite für das Modal
+    //maxWidth: "100%", // responsive, passt sich an
+    //padding: "20px", // Polsterung für das Modal
+    //backgroundColor: "white", // Hintergrundfarbe
+    //borderRadius: "8px", // Abgerundete Ecken
+    //boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)", // Schatten für das Modal
+  };
+
   return (
-    <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
+    <form onSubmit={handleSubmit} style={modalStyles} className="m-0 p-2 w-full">
       <div className="flex flex-col mb-4">
         <label htmlFor="name" className="block mb-2 font-bold text-sm text-gray-700">
           Beschreibung :
@@ -143,7 +168,15 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
         <label htmlFor="deviceName" className="block mb-2 font-bold text-sm text-gray-700">
           Gerät :
         </label>
-        <Select id="deviceName" value={deviceName} onChange={setDeviceName} options={deviceOptions} placeholder="Gerät auswählen..." isClearable />
+        <Select
+          id="deviceName"
+          value={deviceName}
+          onChange={setDeviceName}
+          options={deviceOptions}
+          placeholder="Gerät auswählen..."
+          isClearable
+          styles={customStyles} // Apply custom styles here
+        />
       </div>
 
       {/* React Select for POI Types */}
@@ -151,7 +184,14 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
         <label htmlFor="idPoiTyp" className="block mb-2 font-bold text-sm text-gray-700">
           Typ:
         </label>
-        <Select id="idPoiTyp" value={poiTypeId} onChange={setPoiTypeId} options={poiTypeOptions} placeholder="Typ auswählen..." />
+        <Select
+          id="idPoiTyp"
+          value={poiTypeId}
+          onChange={setPoiTypeId}
+          options={poiTypeOptions}
+          placeholder="Typ auswählen..."
+          styles={customStyles} // Apply custom styles here
+        />
       </div>
 
       <div className="flex flex-row items-center justify-between mb-4">