From 1f1ab4b818b79b7a84e8b69a85774dde6d91fe4c Mon Sep 17 00:00:00 2001
From: Ismail Ali <ismailali1553@gmail.com>
Date: Sun, 9 Mar 2025 19:30:11 +0100
Subject: [PATCH] fix: POI-Typ Auswahl korrigiert, Initialwert wird nun gesetzt
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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 | 43 ++++++++++++++++++++++++++++++---------
 config/appVersion.js      |  2 +-
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/components/AddPOIModal.js b/components/AddPOIModal.js
index fa1a07077..9841d0078 100644
--- a/components/AddPOIModal.js
+++ b/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
-          setPoiTypeName(data[1].name); // Set initial poiTypeName to the name of the first poiType
-          console.log("Initial poiTypeId set in ShowAddStationPopup.js :", data[0].idPoiTyp);
+          console.log("POI-Typen geladen:", data);
+          setPoiTypeId(data[0].idPoiTyp); // Setzt den ersten Typ
+          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">
-              {poiTypData.map((poiTyp) => (
-                <option key={poiTyp.idPoiTyp} value={poiTyp.idPoiTyp}>
-                  {poiTyp.name}
+            <select
+              id="idPoiTyp2"
+              name="idPoiTyp2"
+              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>
 
diff --git a/config/appVersion.js b/config/appVersion.js
index e1ff93af2..02654aa4d 100644
--- a/config/appVersion.js
+++ b/config/appVersion.js
@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.38";
+export const APP_VERSION = "1.1.39";