statusInfo für DE und etc.

components/MapComponent.js

@@ -365,7 +365,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   //-----Kontextmenu----ende------------
   // Ensure this function is only called when map is initialized and available
   const showAddStationPopup = (e) => {
-    if (!newMap) {
+    if (!initMap) {
       return;
     }
 
@@ -427,7 +427,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 </form>
   `;
 
-    L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(newMap);
+    L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(initMap);
 
     // Attach event listener here
     L.DomEvent.on(popupContent, "submit", handleSubmit);
@@ -541,6 +541,50 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
 
     fetchData();
   }, []);
+  // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
+  useEffect(() => {
+    // Remove old markers
+    if (map) {
+      /* map.eachLayer((layer) => {
+        if (layer instanceof L.Marker) {
+          map.removeLayer(layer);
+        }
+      }); */
+      // Add new markers
+      locations.forEach((location) => {
+        const { latitude, longitude } = parsePoint(location.position);
+        const marker = L.marker([latitude, longitude], {
+          icon: L.icon({
+            iconUrl: "/location.svg",
+            iconSize: [34, 34],
+            iconAnchor: [17, 34],
+            popupAnchor: [0, -34],
+          }),
+          draggable: true,
+          id: location.idPoi,
+        });
+        marker.bindPopup(
+          `<div class="bg-red-500 text-red p-2 translate-y-8"><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
+          { permanent: false, closeButton: true }
+        );
+        marker.bindTooltip(
+          `<div class=" text-red p-2 "><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
+          { permanent: false, direction: "top", offset: [0, -30] }
+        );
+        marker.on("dragend", function (e) {
+          const newLat = e.target.getLatLng().lat;
+          const newLng = e.target.getLatLng().lng;
+          const markerId = e.target.options.id;
+          updateLocationInDatabase(markerId, newLat, newLng).then(() => {
+            onLocationUpdate(markerId, newLat, newLng);
+          });
+        });
+        marker.addTo(map);
+      });
+    }
+  }, [map, locations, onLocationUpdate]);
+
+  //------------------------------------------
 
   //-----------------------------------------------------------------
   //         TALAS  Marker hinzufügen
@@ -552,33 +596,31 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   // Daten von einer externen Quelle laden
   useEffect(() => {
     async function fetchData() {
+      if (!map) return;
       try {
-        const responses = await Promise.all([
+        // Erster Fetch-Aufruf
-          fetch(config.mapGisStationsStaticDistrictUrl),
+        const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
-          fetch(config.mapGisStationsStatusDistrictUrl),
+        const jsonResponse = await response1.json();
-        ]);
-        const [jsonResponse, statusResponse] = await Promise.all(
-          responses.map((res) => res.json())
-        );
 
-        if (
+        // Zweiter Fetch-Aufruf
-          jsonResponse &&
+        const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
-          jsonResponse.Points &&
+        const statusResponse = await response2.json();
-          statusResponse &&
+
-          statusResponse.Statis
+        if (jsonResponse.Points && statusResponse.Statis) {
-        ) {
           const statisMap = new Map(
             statusResponse.Statis.map((s) => [s.IdLD, s])
           );
+          console.log("statisMap", statisMap);
+
           let markersData = jsonResponse.Points.filter(
-            (p) => p.System === 1
+            (station) => station.System === 1
-          ).map((p) => {
+          ).map((station) => {
-            const statis = statisMap.get(p.IdLD);
+            const statis = statisMap.get(station.IdLD);
-            const marker = L.marker([p.X, p.Y], {
+            const marker = L.marker([station.X, station.Y], {
               icon: L.icon({
                 iconUrl: statis
-                  ? `img/icons/${statis.Na}-marker-icon-${p.Icon}.png`
+                  ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png`
-                  : `img/icons/marker-icon-${p.Icon}.png`,
+                  : `img/icons/marker-icon-${station.Icon}.png`,
                 iconSize: [25, 41],
                 iconAnchor: [12, 41],
                 popupAnchor: [1, -34],
@@ -589,21 +631,32 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
             if (statis) {
               marker.on("add", () => marker.bounce(3));
             }
-
+            // String-Zusammenstellung für das Popup-Infofenster
+            const matchingStatuses = statusResponse.Statis.filter(
+              (status) => status.IdLD === station.IdLD
+            );
+            let statusInfo = matchingStatuses
+              .reverse()
+              .map(
+                (status) => `
+                  <div class="flex items-center my-1">
+                    <div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
+                    ${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
+                  </div>
+                `
+              )
+              .join("");
             // Ein Popup und Tooltip mit Informationen zur Station binden
             marker.bindPopup(
-              `<b>Station: ${p.LD_Name}</b><br>Device: ${p.Device}`
+              `<b>${station.LD_Name}</b><br>
+              ${station.Device}<br>
+              ${station.Area_Short} (${station.Area_Name})<br>
+              ${station.Location_Short} (${station.Location_Name})<br>${statusInfo}`
             );
-            /*  marker.bindTooltip(
-              `<div class="tooltip-content">Station: ${p.LD_Name}</div>`,
-              {
-                permanent: false,
-                direction: "top",
-              }
-            ); */
 
             return marker;
           });
+
           setTalasMarkers(markersData);
         }
       } catch (error) {
@@ -611,11 +664,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       }
     }
 
-    if (!map) return;
-
     fetchData();
   }, [map]); // Abhängigkeit nur auf `map` setzen
-
+  //--------------------------------------------------------------------------------
   useEffect(() => {
     if (map && talasMarkers.length) {
       talasMarkers.forEach((marker) => {