diff --git a/components/DataSheet.js b/components/DataSheet.js index 76889dfb2..892ff01dc 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -218,7 +218,7 @@ function DataSheet() { {/* Bereiche */}
- + diff --git a/components/MapComponent.js b/components/MapComponent.js index 42a935302..494101756 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -42,6 +42,7 @@ import useLineData from "../hooks/useLineData.js"; //import { useCreateAndSetDevices } from "../hooks/useCreateAndSetDevices"; import { useMapComponentState } from "../hooks/useMapComponentState"; import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines"; +import { updateLocation } from "../utils/updateBereichUtil"; //-------------------------------------------- import { currentPoiState } from "../redux/slices/currentPoiSlice.js"; import { selectGisStationsStaticDistrict, setGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice"; @@ -173,6 +174,17 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { }); const [polylineEventsDisabled, setPolylineEventsDisabled] = useRecoilState(polylineEventsDisabledState); // Recoil State + const handleLocationUpdate = async (idLocation, idMap, newCoords) => { + try { + const result = await updateLocation(idLocation, idMap, newCoords); + console.log("Erfolgreiche Aktualisierung:", result); + + // Aktualisieren Sie Marker oder andere Elemente + } catch (error) { + console.error("Fehler beim Aktualisieren der Location:", error); + } + }; + //--------------------------------------------------------------- /* useEffect(() => { @@ -795,6 +807,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { // Bereichs-Marker basierend auf dynamischer URL laden const bereicheMarkers = useBereicheMarkersLayer(map, oms, bereichUrl); + //const bereicheMarkers = useBereicheMarkersLayer(map, oms, editMode ? `/api/talas_v5_DB/bereich/readBereich?editMode=true` : `/api/talas_v5_DB/bereich/readBereich`); //const bereicheMarkers = useBereicheMarkersLayer(map, oms, "/api/talas_v5_DB/bereich/readBereich?m=12"); /* useEffect(() => { @@ -803,6 +816,19 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { console.log("Bereiche-Markierungen geladen:", bereicheMarkers); } }, [map, oms, bereicheMarkers]); */ + useEffect(() => { + const editMode = localStorage.getItem("editMode") === "true"; + + bereicheMarkers.forEach((marker) => { + if (editMode) { + marker.dragging.enable(); + marker.setZIndexOffset(1000); // Marker nach oben setzen + } else { + marker.dragging.disable(); + marker.setZIndexOffset(0); // Standard-Z-Index + } + }); + }, [bereicheMarkers]); //---------------------------------- useEffect(() => { diff --git a/hooks/layers/useBereicheMarkersLayer.js b/hooks/layers/useBereicheMarkersLayer.js index 571a13d34..21c258a92 100644 --- a/hooks/layers/useBereicheMarkersLayer.js +++ b/hooks/layers/useBereicheMarkersLayer.js @@ -1,10 +1,11 @@ import { useEffect, useState, useRef } from "react"; import L from "leaflet"; import "leaflet/dist/leaflet.css"; +import { updateLocation } from "../../utils/updateBereichUtil"; // Definiere ein Standard-Icon const customIcon = new L.Icon({ - iconUrl: "/img/marker-icon.png", + iconUrl: "/img/bereich.png", iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], @@ -100,6 +101,64 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => { }; }, [map, bereicheMarkers, oms]); + useEffect(() => { + const fetchBereiche = async () => { + try { + const response = await fetch(apiUrl); + const data = await response.json(); + + const markers = data.map((item) => { + const marker = L.marker([item.x, item.y], { + icon: customIcon, + draggable: true, // Ermöglicht Drag-and-Drop + }); + + // Tooltip + marker.bindTooltip( + `ID Location: ${item.idLocation}
+ ID Map: ${item.idMaps}`, + { + permanent: false, + direction: "top", + offset: [0, -20], + } + ); + + // Event-Listener für Drag-End + marker.on("dragend", async (e) => { + const { lat, lng } = e.target.getLatLng(); + try { + await updateLocation(item.idLocation, item.idMaps, { x: lat, y: lng }); + console.log("Koordinaten erfolgreich aktualisiert:", { lat, lng }); + } catch (error) { + console.error("Fehler beim Aktualisieren der Koordinaten:", error); + } + }); + + return marker; + }); + + setBereicheMarkers(markers); + } catch (error) { + console.error("Fehler beim Laden der Bereiche:", error); + } + }; + + fetchBereiche(); + }, [apiUrl]); + + useEffect(() => { + if (map) { + bereicheMarkers.forEach((marker) => marker.addTo(map)); + } + + return () => { + if (map) { + bereicheMarkers.forEach((marker) => map.removeLayer(marker)); + } + }; + }, [map, bereicheMarkers]); + return bereicheMarkers; }; diff --git a/pages/api/talas_v5_DB/bereich/updateBereich.js b/pages/api/talas_v5_DB/bereich/updateBereich.js new file mode 100644 index 000000000..a8453294f --- /dev/null +++ b/pages/api/talas_v5_DB/bereich/updateBereich.js @@ -0,0 +1,34 @@ +import getPool from "../../../utils/mysqlPool"; // Singleton-Pool importieren + +export default async function handler(req, res) { + const pool = getPool(); // Singleton-Pool verwenden + + if (req.method !== "PUT") { + return res.status(405).json({ error: "Nur PUT Methode erlaubt" }); + } + + const { idLocation, idMap, x, y } = req.body; + + if (!idLocation || !idMap || x === undefined || y === undefined) { + return res.status(400).json({ error: "Alle Felder (idLocation, idMap, x, y) sind erforderlich" }); + } + + let connection; + + try { + connection = await pool.getConnection(); + const query = "UPDATE location_coordinates SET x = ?, y = ? WHERE idLocation = ? AND idMaps = ?"; + const [result] = await connection.query(query, [x, y, idLocation, idMap]); + + if (result.affectedRows > 0) { + res.status(200).json({ success: true, message: "Koordinaten erfolgreich aktualisiert" }); + } else { + res.status(404).json({ error: "Kein Eintrag gefunden, der aktualisiert werden konnte" }); + } + } catch (error) { + console.error("Fehler beim Aktualisieren der Koordinaten:", error); + res.status(500).json({ error: "Interner Serverfehler beim Aktualisieren der Koordinaten" }); + } finally { + if (connection) connection.release(); + } +} diff --git a/public/img/bereich.png b/public/img/bereich.png new file mode 100644 index 000000000..78b49d24e Binary files /dev/null and b/public/img/bereich.png differ diff --git a/utils/updateBereichUtil.js b/utils/updateBereichUtil.js new file mode 100644 index 000000000..34ff49ab5 --- /dev/null +++ b/utils/updateBereichUtil.js @@ -0,0 +1,27 @@ +export const updateLocation = async (idLocation, idMap, newCoords) => { + try { + const response = await fetch("/api/updateBereich", { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + idLocation, + idMap, + x: newCoords.x, + y: newCoords.y, + }), + }); + + if (!response.ok) { + throw new Error("Fehler beim Aktualisieren der Koordinaten"); + } + + const data = await response.json(); + console.log("Koordinaten erfolgreich aktualisiert:", data); + return data; + } catch (error) { + console.error("Fehler beim Aufruf von updateLocation:", error); + throw error; + } +};