From 38b43cbe48ea51f6bda5a2b2231eda1049f5d81f Mon Sep 17 00:00:00 2001 From: ISA Date: Fri, 20 Dec 2024 08:10:45 +0100 Subject: [PATCH] bereich.png erstellt und bei editMode active marker.setZIndexOffset(1000); --- components/DataSheet.js | 2 +- components/MapComponent.js | 26 ++++++++ hooks/layers/useBereicheMarkersLayer.js | 61 +++++++++++++++++- .../api/talas_v5_DB/bereich/updateBereich.js | 34 ++++++++++ public/img/bereich.png | Bin 0 -> 1469 bytes utils/updateBereichUtil.js | 27 ++++++++ 6 files changed, 148 insertions(+), 2 deletions(-) create mode 100644 pages/api/talas_v5_DB/bereich/updateBereich.js create mode 100644 public/img/bereich.png create mode 100644 utils/updateBereichUtil.js 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 0000000000000000000000000000000000000000..78b49d24e5ff31c1acf8a31dda591f157677a7ac GIT binary patch literal 1469 zcmZ8gc{J2(82*j1N0=Ccu`f-si(BMsVwlA;hpuGHzGcba+RDB53=+e187B-=)~;-g zC6zU%EH`V>kU~vEk&G>Oa_>3!oco>ge9!Ye=Xu}vkN13;cspxRVOe1S07NlpO9w8? zaB)JApL;(cB@Y7tC?Uwg0*|q=BgHcwbBKYKUqDbOl3JJt zQx5cz7(-N{AWy4o32{Pk@E9SL*5vv!rB@uyuezg74NzW`M6XE;H77lCm=}^Nx!P#R z{QhgebWvKnCl4TEdz_KdzCDZhU+g^CH zl}|el*?&O@H9_b$?2crenRsWm5T-73Q~0u=SkU^p1p&w00=g%G+RN0qf;^}kpHvR9 zzYtMLEUY9$$wLv9j&Za-g(irrRufE|saq>1Z~k-Vbdetsb2eK~XEMcc$56{OxVIy5 zQTiFSPQ}R&oMQx08`M_|_GldF9YEy{+C1?3b`XAflT+1EFt?P}f3YW45n$;^#)vGk zdi99+@CQ6oMc8ZKVEsQ^GOGh`ss=KX85AOPCZjfV<+@Xk3+H0Z?O&vGdtRSuPAg*_ zb#cO)oh*&~#{1NEyT01#JU zxsdx;|JXYM1U~e6xLO~?1Bi3kg^QpJ-a|i_tA8Af3`s@q@IDH z9;ob}t_KH)#X$7S`gWH0nmqu3wJ?^*3(nSTvN_r{LVQ4Xq!&@%Pqa{~Qj&Oki&~*X zCgM$^BTw4#eNai#X-#oLNWv`G^C02Ag z{l*uFcaiV*lYHBqfc&JInwqDpt6{-mVRv_S;)jk8&dkV!hJ=jH&cgY4Kv({J^HaAE^ zMMa9NtZWsP+C8cR3=swDYHN?}&d>i2KPtff^oid3@ZoO@`igO9720kbB*&=7m(%A~ zLqwz=;(RhH+S^@9rjZXkw_=0N`S_@ko$4DK9pH%EiD0Qm&IV%j-b}{#T4)w3sIMY7 zdZX5nXEpy_pL>2MeNJtql6GDZXKH39^?q;9tx~d#4VE&!`@m<5!*MR5P$-R1u)QVG zQibZ{V4z%Zg&)lCNoB9CWqAmq8#+5n<}jz>{RS!JEgg-G>zz$aj_rD4GFUZ;uQ7!- zRvx{$lLIV4KYj<#Y<9gP>qV6^Ucs#~r`{qSTGr&+e zF+&E2Locuw^O(4EN1@=znwFio`6axHA`ZGga3i_PKkgZ!lvV=1=Hce%yJ>>M;n1Hm zCkW6Im8-n%`2cMD?eXR1<-&NWy|(8Curqr3z9ujc%}vcAb8V}m*=m^z3JUyFQ&WXS z{Klo?dFuPaOHa@cJ(_OOm_t%B3DHrB>0Yts)PN@I>$SgRE%Ik;Aa`R+XGF1lt|DNV zUAHfeY+t?JHzaCkWNb`+`={cgdr{VQ^82Boq3F?4;{%CVt(Wp&%~Mx?(oVp$jw#E` P9{xa-o#p-Wp2>d$E5v|q literal 0 HcmV?d00001 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; + } +};