Fix: Zuverlässige Anzeige von poiTypName mit Fremdschlüssel in den Markern sichergestellt

- Implementierung der Fremdschlüssel-Logik für die `poiTyp`-Daten in `MapComponent`.
- Nutzung einer Map, um die Fremdschlüssel-Beziehung zwischen `poiTyp`-IDs und deren Namen effizient zu verwalten.
- Sicherstellung, dass `poiTypName` korrekt in Marker-Popups angezeigt wird, indem die Fremdschlüssel-Beziehung geprüft wird.
- Verbesserte Bedingungsprüfung sorgt dafür, dass die Popups nun die richtigen `poiTypName`-Werte anzeigen, oder als Fallback "Unbekannt" verwendet wird.
- Effekt-Logik wurde so angepasst, dass Marker nur aktualisiert werden, wenn die `poiTyp`-Daten vollständig geladen sind.

components/ShowAddStationPopup.js

@@ -1,22 +1,21 @@
 // components/ShowAddStationPopup.js
 import React, { useState, useEffect, use } from "react";
 import ReactDOM from "react-dom";
-import { useRecoilValue ,useRecoilState, useSetRecoilState } from "recoil";
+import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
 import { readPoiMarkersStore } from "../store/selectors/readPoiMarkersStore";
-import { poiReadFromDbTriggerAtom } from '../store/atoms/poiReadFromDbTriggerAtom';
+import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
 
 const ShowAddStationPopup = ({ onClose, map, latlng }) => {
- 
-  const [poiTypData2, setPoiTypData2] = useState(); // Recoil State verwenden
+  const [poiTypData, setpoiTypData] = useState(); // Recoil State verwenden
   const [name, setName] = useState("");
   const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string
+  const [poiTypeName, setPoiTypeName] = useState(""); // Initialize as string
   const [latitude] = useState(latlng.lat.toFixed(5));
   const [longitude] = useState(latlng.lng.toFixed(5));
   const setLoadData = useSetRecoilState(readPoiMarkersStore);
   const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom);
 
-
-/*   useEffect(() => {
+  /*   useEffect(() => {
     if (map && loadData) {
       
       console.log("Map and loadData are defined in ShowAddStationPopup.js", map);
@@ -27,15 +26,16 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
     }
   }, [map, loadData]); */
 
-// In Kontextmenü-Formular Typen anzeigen
+  // In Kontextmenü-Formular Typen anzeigen
   useEffect(() => {
-    const fetchPoiTypData2 = async () => {
+    const fetchpoiTypData = async () => {
       try {
         const response = await fetch("/api/readPoiTyp");
         const data = await response.json();
-        setPoiTypData2(data);
+        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
@@ -46,44 +46,41 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
       }
     };
 
-    fetchPoiTypData2();
+    fetchpoiTypData();
   }, []);
 
-//-----------------handleSubmit-------------------
-const handleSubmit = async (event) => {
-  event.preventDefault();
-  const formData = {
+  //-----------------handleSubmit-------------------
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const formData = {
       name,
       poiTypeId,
       latitude,
       longitude,
-  };
+    };
 
-  const response = await fetch("/api/addLocation", {
+    const response = await fetch("/api/addLocation", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(formData),
-  });
+    });
 
-  if (response.ok) {
+    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;
+        console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert
+        const newTrigger = trigger + 1;
+        console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert
+        onClose();
+        return newTrigger;
       });
-  } else {
+    } else {
       console.error("Fehler beim Hinzufügen des POI");
-  }
+    }
 
-  if (map && typeof map.closePopup === "function") {
+    if (map && typeof map.closePopup === "function") {
       map.closePopup();
-  }
-};
-
-
-  
+    }
+  };
 
   return (
     <form onSubmit={handleSubmit} className="m-0 p-2 w-full ">
@@ -112,8 +109,8 @@ const handleSubmit = async (event) => {
           onChange={(e) => setPoiTypeId(e.target.value)}
           className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
         >
-          {poiTypData2 &&
-            poiTypData2.map((poiTyp, index) => (
+          {poiTypData &&
+            poiTypData.map((poiTyp, index) => (
               <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
                 {poiTyp.name}
               </option>