Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set draggable based on permission

Browse Source
This commit is contained in:
ISA
2024-05-28 13:14:34 +02:00
parent 6c85dc9f5a
commit 21218609bc
1 changed files with 39 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
components/MapComponent.js
View File

@@ -613,7 +613,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
// serverIP 10.10.0.13 idMap=10 idUser=485 // serverIP 10.10.0.13 idMap=10 idUser=485
const serverURL = "http://10.10.0.13"; const serverURL = "http://10.10.0.13";
const c = 10; // Beispielwert für idMap const c = 10; // Beispielwert für idMap
const user = 483; // Beispielwert für idUser const user = 486; // Beispielwert für idUser
const fetchUserRights = async () => { const fetchUserRights = async () => {
try { try {
@@ -969,20 +969,17 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
useEffect(() => { useEffect(() => {
if (map && poiLayerRef.current && isPoiTypLoaded) { if (map && poiLayerRef.current && isPoiTypLoaded) {
// Entfernen Sie die bestehende Ebene und erstellen Sie eine neue
map.removeLayer(poiLayerRef.current); map.removeLayer(poiLayerRef.current);
poiLayerRef.current = new L.LayerGroup().addTo(map); poiLayerRef.current = new L.LayerGroup().addTo(map);
// Fügen Sie die aktualisierten Marker hinzu
locations.forEach(async (location) => { locations.forEach(async (location) => {
const { latitude, longitude } = parsePoint(location.position); const { latitude, longitude } = parsePoint(location.position);
const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt "; const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
//console.log("poiTypName in poiLayer:", poiTypName);
//console.log("location.idPoiTyp poiLayer:", location.idPoiTyp);
//console.log("location.idPoiTyp poiLayer:", location);
//console.log("location.idPoiTyp:", location.idPoiTyp);
const deviceName = await fetchDeviceNameById(location.idLD); const deviceName = await fetchDeviceNameById(location.idLD);
// Check if user has the right to drag the marker
const canDrag = userRights ? userRights.includes(56) : false; // Check if userRights is not null before using includes
const marker = L.marker([latitude, longitude], { const marker = L.marker([latitude, longitude], {
icon: L.icon({ icon: L.icon({
iconUrl: `/img/icons/pois/poi-marker-icon-${location.idPoiTyp}.png`, iconUrl: `/img/icons/pois/poi-marker-icon-${location.idPoiTyp}.png`,
@@ -990,74 +987,67 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
iconAnchor: [12, 41], iconAnchor: [12, 41],
popupAnchor: [1, -34], popupAnchor: [1, -34],
}), }),
draggable: true, draggable: canDrag, // Set draggable based on permission
id: location.idPoi, id: location.idPoi,
}).bindContextMenu({ }).bindContextMenu({
contextmenu: true, contextmenu: true,
contextmenuWidth: 140, contextmenuWidth: 140,
contextmenuItems: [ contextmenuItems: [
{ {
text: "POI Bearbeiten", //git stash save "POI Bearbeiten" text: "POI Bearbeiten",
icon: "/img/poi-edit.png", icon: "/img/poi-edit.png",
callback: () => handleEditPoi(marker), callback: () => handleEditPoi(marker),
}, },
], ],
}); });
//console.log("location.idPoi:", location);
// Popup konfigurieren
marker.bindPopup(` marker.bindPopup(`
<div> <div>
<b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br> <b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
${deviceName}<br>
${poiTypName}<br>
</div>
`);
${deviceName}<br> <!-- Gerät:-->
${poiTypName}<br> <!-- Typ:-->
</div>
`);
const poiData = {
id: location.idPoi,
deviceId: location.idLD,
typ: poiTypName,
description: location.description,
};
// Event-Handler hinzufügen
marker.on("mouseover", function () { marker.on("mouseover", function () {
this.openPopup(); this.openPopup();
//Informationen in der Konsole anzeigen handlePoiSelect({
//console.log("poiLayer Marker ID:", location.idPoi); id: location.idPoi,
//console.log("poiLayer Marker Typ:", poiTypName); deviceId: location.idLD,
//console.log("poiLayer Marker Beschreibung:", location.description); typ: poiTypName,
//Informationen an handlePoiSelect übergeben description: location.description,
handlePoiSelect(poiData); });
//console.log("poiData in MapComponent.js:", poiData);
setCurrentPoi(location); setCurrentPoi(location);
//console.log("poiData in MapComponent.js:", poiData);
}); });
marker.on("mouseout", function () { marker.on("mouseout", function () {
this.closePopup(); this.closePopup();
}); });
marker.on("dragend", (e) => { marker.on("dragend", (e) => {
const newLat = e.target.getLatLng().lat; if (canDrag) {
const newLng = e.target.getLatLng().lng; const newLat = e.target.getLatLng().lat;
const markerId = e.target.options.id; const newLng = e.target.getLatLng().lng;
updateLocationInDatabase(markerId, newLat, newLng).then(() => { const markerId = e.target.options.id;
onLocationUpdate(markerId, newLat, newLng); updateLocationInDatabase(markerId, newLat, newLng).then(() => {
console.log("trigger in MapComponent.js:", poiReadTrigger); onLocationUpdate(markerId, newLat, newLng);
}); });
} else {
console.log("Drag operation not allowed");
}
}); });
marker.addTo(poiLayerRef.current); marker.addTo(poiLayerRef.current);
}); });
} }
}, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded]); }, [
map,
locations,
onLocationUpdate,
poiReadTrigger,
isPoiTypLoaded,
userRights,
]);
useEffect(() => { useEffect(() => {
if (gisSystemStaticLoaded && map) { if (gisSystemStaticLoaded && map) {