Version 1.0.2 mit node_modules Verzeichnis

components/pois/AddPoiModalWindow.js

@@ -6,10 +6,9 @@ import { mapLayersState } from "../../store/atoms/mapLayersState";
 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(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); // Verwende useSetRecoilState
@@ -47,13 +46,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();
         console.log("Geräte von der API:", locationDeviceData); // Geräte-Daten aus der API anzeigen
         setLocationDeviceData(locationDeviceData);
@@ -186,9 +178,10 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
           styles={customStyles} // Apply custom styles here
         />
       </div>
-      {/* {locationDeviceData.----------------------------------------------*/}
-      <div className="flex items-center mb-4">
-        <label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
+
+      {/* React Select for POI Types */}
+      <div className="flex flex-col mb-4">
+        <label htmlFor="idPoiTyp" className="block mb-2 font-bold text-sm text-gray-700">
           Typ:
         </label>
         <Select
@@ -207,8 +200,8 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
             Lat : {latitude}
           </label>
         </div>
-        <div className="flex items-center mb-4">
-          <label htmlFor="lng" className="block mr-2 flex-none text-xs">
+        <div className="flex flex-col items-center">
+          <label htmlFor="lng" className="block mb-2 text-xs text-gray-700">
             Lng : {longitude}
           </label>
         </div>