Bug Fix

Der Bug in der Anwendung tritt auf, wenn eine Checkbox angeklickt wird und unerwartet eine Zoom-Funktion ausgelöst wird.
 Dies geschieht nach einer Auswahl aus einem Dropdown-Menü. Wenn eine Option im Dropdown-Menü ausgewählt wird,
 scheint der darauf folgende Klick auf eine Checkbox dazu zu führen, dass auf die zuletzt ausgewählte Position im Dropdown-Menü
 gezoomt wird. Die Zustandsänderungen oder Event-Handler in der Anwendung interagieren auf eine nicht beabsichtigte Weise,
 wodurch diese unerwünschte Zoom-Aktion aktiviert wird. sogar wenn Info geklickt wird.

components/DataSheet.js

@@ -1,35 +1,31 @@
 //components/DataSheet.js
-import React, { useEffect, useState, useCallback } from "react";
+import React, { useEffect, useState } from "react";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState";
 import { gisSystemStaticState } from "../store/atoms/gisSystemState";
 import { mapLayersState } from "../store/atoms/mapLayersState";
 import { selectedAreaState } from "../store/atoms/selectedAreaState";
 import { zoomTriggerState } from "../store/atoms/zoomTriggerState";
-import { debounce } from "lodash"; // Lodash-Bibliothek für die Debounce-Funktion
 
 function DataSheet() {
-  const [disableZoom, setDisableZoom] = useState(false);
   const setSelectedArea = useSetRecoilState(selectedAreaState);
   const [mapLayersVisibility, setMapLayersVisibility] =
     useRecoilState(mapLayersState);
   const [stationListing, setStationListing] = useState([]);
   const [systemListing, setSystemListing] = useState([]);
-  const [selectedStation, setSelectedStation] = useState(""); // Neuer State für den ausgewählten Station-Wert
-
   const GisStationsStaticDistrict = useRecoilValue(
     gisStationsStaticDistrictState
   );
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
   // In deiner Dropdown onChange Funktion
   const handleAreaChange = (event) => {
-    setSelectedStation(event.target.value);
     const selectedIndex = event.target.options.selectedIndex;
     const areaName = event.target.options[selectedIndex].text;
-    setDisableZoom(true);
+    //useState selectedStation setzen
+
     setSelectedArea(areaName);
-    console.log("Selected area normal:", areaName);
-    setTimeout(() => setDisableZoom(false), 1000);
+    console.log("Area selected oder areaName in DataSheet.js:", areaName); // Nur zur Bestätigung in der Konsole
+    //console.log("event.target:", event.target);
   };
 
   useEffect(() => {
@@ -84,54 +80,25 @@ function DataSheet() {
   }, [GisStationsStaticDistrict, GisSystemStatic]);
   //---------------------------------------------------------
   const handleCheckboxChange = (name, event) => {
-    event.stopPropagation();
     const { checked } = event.target;
-    setDisableZoom(true);
-    setMapLayersVisibility((prev) => ({
-      ...prev,
-      [name]: checked,
-    }));
-    setTimeout(() => setDisableZoom(false), 1000); // Erhöhen Sie die Verzögerung
-  };
+    console.log(`Checkbox ${name} checked state:`, checked); // Log the checked state of the checkbox
 
+    setMapLayersVisibility((prev) => {
+      const newState = {
+        ...prev,
+        [name]: checked,
+      };
+      console.log(`New mapLayersVisibility state:`, newState); // Log the new state after update
+      return newState;
+    });
+  };
   //---------------------------------------------------------
   const setZoomTrigger = useSetRecoilState(zoomTriggerState);
 
-  // Debounce-Funktion zum Verhindern von zu schnellen Zoom-Auslösungen
-  const debouncedSetZoomTrigger = useCallback(
-    debounce(() => {
-      setZoomTrigger((current) => current + 1);
-    }, 300),
-    [setZoomTrigger]
-  ); // 300 Millisekunden Verzögerung
-
   const handleIconClick = () => {
-    if (selectedStation !== "Station wählen" && !disableZoom) {
-      console.log("Icon clicked, valid station selected, triggering zoom.");
-      debouncedSetZoomTrigger();
-    } else {
-      console.log(
-        "No zoom triggered due to either 'Station wählen' or disableZoom state."
-      );
-    }
-    setSelectedStation("Station wählen"); // Dies setzt das Dropdown-Menü zurück auf den Standardwert
+    setSelectedArea("Station wählen"); // Setzt die Dropdown-Auswahl zurück auf "Station wählen"
+    setZoomTrigger((current) => current + 1); // Trigger durch Inkrementierung
   };
-
-  useEffect(() => {
-    console.log("Selected station has changed to:", selectedStation);
-    // Führen Sie hier weitere Aktionen basierend auf dem neuen Wert von selectedStation aus
-  }, [selectedStation]); // Abhängigkeit zu selectedStation hinzufügen
-  //---------------------------------------------------------
-  /*   useEffect(() => {
-    if (!disableZoom) {
-      console.log("Zoom enabled, ready to trigger zoom.");
-      // Stellen Sie hier Ihre Logik bereit, um den Zoom zu triggern, wenn dies zulässig ist
-      debouncedSetZoomTrigger();
-    } else {
-      console.log("Zoom disabled, no action will be taken.");
-    }
-  }, [disableZoom]); // Reagiert nur auf Änderungen von disableZoom */
-
   //---------------------------------------------------------
 
   return (
@@ -142,12 +109,11 @@ function DataSheet() {
       <div className="flex flex-col gap-4 p-4">
         <div className="flex items-center justify-between">
           <select
-            value={selectedStation} // Binden des Wertes an den State
             onChange={handleAreaChange} // Verwenden der neuen handleAreaChange Funktion
             id="stationListing"
             className="border-solid-1 p-2 rounded ml-1  font-semibold"
           >
-            <option>Station wählen</option>
+            <option value="Station wählen">Station wählen</option>
             {stationListing.map((station) => (
               <option key={station.id} value={station.id}>
                 {station.name}

components/MapComponent.js

@@ -470,7 +470,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   //--------------------------------------------------------------------------------
 
   const mapLayersVisibility = useRecoilValue(mapLayersState);
-
+  /* 
   const handleCheckboxChange = (name, event) => {
     const { checked } = event.target;
     const internalName = layerNames[name] || name; // Nutzt den internen Namen, wenn vorhanden, sonst den originalen Namen
@@ -481,7 +481,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         [internalName]: checked,
       };
     });
-  };
+  }; */
 
   //------------------------------------------
   //------------------------------------------ */
@@ -544,6 +544,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     }
   }
   //---------------------------------------------------------
+  const handleMarkerClick = (markerData) => {
+    // Setze die aktuellen Daten im State, um sie im Formular vorzubelegen
+    setCurrentMarkerData(markerData);
+    setShowEditModal(true);
+  };
+  // In der Marker-Erstellungsfunktion
+
   //------------------------------------------
   // API-Daten laden für GisStationsStaticDistrict
   //http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStaticDistrict?idMap=10&idUser=485

components/PoiUtils.js

@@ -0,0 +1,55 @@
+import L from "leaflet";
+
+// Funktion, um POI Markers zu erstellen
+export const createPoiMarkers = (poiData, iconPath) => {
+  return poiData.map((location) => {
+    return L.marker([location.latitude, location.longitude], {
+      icon: L.icon({
+        iconUrl: iconPath,
+        iconSize: [25, 41],
+        iconAnchor: [12, 41],
+        popupAnchor: [1, -34],
+        draggable: true,
+      }),
+      id: location.idPoi,
+    });
+  });
+};
+
+// Funktion zum Hinzufügen von Markern zur Karte und zum Umgang mit Events
+export const addMarkersToMap = (markers, map, layerGroup) => {
+  markers.forEach((marker) => {
+    marker.addTo(layerGroup);
+    marker.on("mouseover", () => marker.openPopup());
+    marker.on("mouseout", () => marker.closePopup());
+    marker.on("dragend", (e) => {
+      const newLat = e.target.getLatLng().lat;
+      const newLng = e.target.getLatLng().lng;
+      const markerId = e.target.options.id;
+      updateLocationInDatabase(markerId, newLat, newLng);
+    });
+  });
+};
+
+// Funktion zum Aktualisieren der Standorte in der Datenbank
+export const updateLocationInDatabase = async (
+  id,
+  newLatitude,
+  newLongitude
+) => {
+  const response = await fetch("/api/updateLocation", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      id,
+      latitude: newLatitude,
+      longitude: newLongitude,
+    }),
+  });
+
+  if (!response.ok) {
+    console.error("Fehler beim Aktualisieren der Position");
+  }
+};
+
+// Weitere Funktionen können hier hinzugefügt werden