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