Mit Datenbank verbindenund Marker anzeigen

components/MapComponent.js

@@ -3,7 +3,7 @@ import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
 import "leaflet-contextmenu";
-const MapComponent = () => {
+const MapComponent = ({ locations, onLocationUpdate }) => {
   const mapRef = useRef(null);
   const [map, setMap] = useState(null);
   const [online, setOnline] = useState(navigator.onLine);
@@ -59,7 +59,98 @@ const MapComponent = () => {
     }
   }, [mapRef, map]);
 
-  console.log(map);
+  // Handle online/offline status
+  useEffect(() => {
+    window.addEventListener("online", checkInternet);
+    window.addEventListener("offline", checkInternet);
+    return () => {
+      window.removeEventListener("online", checkInternet);
+      window.removeEventListener("offline", checkInternet);
+    };
+  }, []);
+
+  // Update map layers based on online status
+  useEffect(() => {
+    if (map) {
+      const newLayer = L.tileLayer(
+        online ? onlineTileLayer : offlineTileLayer,
+        {
+          minZoom: 7,
+          maxZoom: online ? 19 : 14,
+          attribution:
+            'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+        }
+      );
+
+      map.eachLayer((layer) => {
+        if (layer instanceof L.TileLayer) {
+          map.removeLayer(layer);
+        }
+      });
+
+      newLayer.addTo(map);
+    }
+  }, [online, map]);
+
+  // Marker handling
+  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(
+          `<b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`
+        );
+
+        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]);
+
+  //------------------------------------------
+  function parsePoint(pointString) {
+    const match = pointString.match(
+      /POINT\s*\((\d+(\.\d+)?)\s+(\d+(\.\d+)?)\)/
+    );
+    if (match) {
+      return {
+        longitude: parseFloat(match[1]),
+        latitude: parseFloat(match[3]), // Achtung: Index 3 für die zweite Koordinate, wegen der Gruppe (\.\d+)?
+      };
+    } else {
+      // Handle the error or return a default/fallback value
+      console.error("Invalid POINT format:", pointString);
+      return null; // Oder eine sinnvolle Standardantwort
+    }
+  }
+  //----------------------------------
   //-----Kontextmenu----------------
   const newLink = (e) => {
     try {
@@ -180,6 +271,22 @@ const MapComponent = () => {
     console.log("intialMap in  hinzufügen: ", initialMap);
     L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(initialMap);
   };
+  setTimeout(() => {
+    const form = document.getElementById("addStationForm");
+    if (form) {
+      form.addEventListener("submit", async (event) => {
+        event.preventDefault();
+        const name = event.target.description.value;
+        const type = event.target.position.value;
+        const lat = event.target.lat.value;
+        const lng = event.target.lng.value;
+
+        // Hier wird `onAddLocation` mit den Werten aufgerufen, die aus dem Formular gesammelt wurden
+        await onAddLocation(name, type, lat, lng);
+        map.closePopup();
+      });
+    }
+  }, 10);
 
   function fly(stationValue) {
     var x = 51.41321407879154;