fix: POI-Typ Auswahl korrigiert, Initialwert wird nun gesetzt

- Problem behoben, dass der erste POI-Typ (Index 0) nicht korrekt übernommen wurde
- useEffect hinzugefügt, um sicherzustellen, dass poiTypeId gesetzt wird, sobald Daten verfügbar sind
- Fehlerhafte Initialisierung von poiTypeId korrigiert, damit das Dropdown sofort den ersten Eintrag auswählt

components/AddPOIModal.js

@@ -20,17 +20,18 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
   const setLoadData = useSetRecoilState(readPoiMarkersStore);
   const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom);
   const [deviceName, setDeviceName] = useState("");
-
+  //-----------------------------------------------------
   useEffect(() => {
     const fetchpoiTypData = async () => {
       try {
         const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
         const data = await response.json();
         setpoiTypData(data);
+
         if (data && data.length > 0) {
-          setPoiTypeId(data[0].idPoiTyp); // Set initial poiTypeId to the id of the first poiType
+          console.log("POI-Typen geladen:", data);
-          setPoiTypeName(data[1].name); // Set initial poiTypeName to the name of the first poiType
+          setPoiTypeId(data[0].idPoiTyp); // Setzt den ersten Typ
-          console.log("Initial poiTypeId set in ShowAddStationPopup.js :", data[0].idPoiTyp);
+          setPoiTypeName(data[0].name);
         }
       } catch (error) {
         console.error("Fehler beim Abrufen der poiTyp Daten:", error);
@@ -39,6 +40,16 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
 
     fetchpoiTypData();
   }, []);
+
+  useEffect(() => {
+    if (poiTypData.length > 0 && !poiTypeId) {
+      setPoiTypeId(poiTypData[0].idPoiTyp);
+    }
+  }, [poiTypData]);
+  useEffect(() => {
+    console.log("Aktueller POI Type:", poiTypeId);
+  }, [poiTypeId]);
+
   //------------------------------------------------------------------------------------------
   const gisStationsStatic = useSelector(selectGisStationsStatic);
   const locationDeviceData = gisStationsStatic?.Points ?? [];
@@ -58,7 +69,7 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
     event.preventDefault();
     const formData = {
       name,
-      poiTypeId,
+      poiTypeId: Number(poiTypeId), // Umwandlung in eine Zahl
       latitude,
       longitude,
       idLD: locationDeviceData.find((device) => device.LD_Name === deviceName)?.IdLD,
@@ -134,12 +145,24 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
             <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">
+            <select
-              {poiTypData.map((poiTyp) => (
+              id="idPoiTyp2"
-                <option key={poiTyp.idPoiTyp} value={poiTyp.idPoiTyp}>
+              name="idPoiTyp2"
-                  {poiTyp.name}
+              value={poiTypeId}
+              onChange={(e) => setPoiTypeId(Number(e.target.value))} // Hier ebenfalls umwandeln
+              className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
+            >
+              {poiTypData.length === 0 ? (
+                <option value="" disabled>
+                  Keine POI-Typen verfügbar
                 </option>
-              ))}
+              ) : (
+                poiTypData.map((poiTyp) => (
+                  <option key={poiTyp.idPoiTyp} value={poiTyp.idPoiTyp}>
+                    {poiTyp.name}
+                  </option>
+                ))
+              )}
             </select>
           </div>
 

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.38";
+export const APP_VERSION = "1.1.39";