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

fix: userRights ? userRights.includes(56) : fale;

Browse Source 
in try catch block eingepackt, falls ein Fehler auftaucht, dann in der Console und nicht im Browser
This commit is contained in:
ISA
2024-06-10 07:19:48 +02:00
parent 62f5502b02
commit c76ada149a
1 changed files with 81 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
components/MapComponent.js
View File

@@ -1178,88 +1178,92 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}, []); }, []);
useEffect(() => { useEffect(() => {
if (map && poiLayerRef.current && isPoiTypLoaded) { try {
map.removeLayer(poiLayerRef.current); if (map && poiLayerRef.current && isPoiTypLoaded) {
poiLayerRef.current = new L.LayerGroup().addTo(map); map.removeLayer(poiLayerRef.current);
poiLayerRef.current = new L.LayerGroup().addTo(map);
locations.forEach(async (location) => { locations.forEach(async (location) => {
const { latitude, longitude } = parsePoint(location.position); try {
const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt"; const { latitude, longitude } = parsePoint(location.position);
const deviceName = await fetchDeviceNameById(location.idLD); const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
//console.log("location.icon:", location); const deviceName = await fetchDeviceNameById(location.idLD);
// Check if user has the right to drag the marker const canDrag = userRights ? userRights.includes(56) : false;
const canDrag = userRights ? userRights.includes(56) : false; // Check if userRights is not null before using includes const matchingIcon = poiData.find(
// Finde das passende Icon aus poiData (poi) => poi.idPoi === location.idPoi
const matchingIcon = poiData.find( );
(poi) => poi.idPoi === location.idPoi const iconUrl = matchingIcon
); ? `/img/icons/pois/${matchingIcon.path}`
const iconUrl = matchingIcon : "/img/icons/pois/default-icon.png";
? `/img/icons/pois/${matchingIcon.path}`
: "/img/icons/pois/default-icon.png";
const marker = L.marker([latitude, longitude], {
icon: L.icon({
iconUrl: `/img/icons/pois/poi-marker-icon-${location.idPoiTyp}.png`,
//iconUrl: `/img/icons/pois/poi-marker-icon-${location.icon}.png`, //die kommen nicht aus poi sonder aus poityp tabelle
iconUrl: iconUrl,
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
}),
draggable: canDrag, // Set draggable based on permission
id: location.idPoi,
}).bindContextMenu({
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [
{
text: "POI Bearbeiten",
icon: "/img/poi-edit.png",
callback: () => handleEditPoi(marker),
},
],
});
marker.bindPopup(` const marker = L.marker([latitude, longitude], {
<div> icon: L.icon({
<b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br> iconUrl: iconUrl,
${deviceName}<br> iconSize: [25, 41],
${poiTypName}<br> iconAnchor: [12, 41],
</div> popupAnchor: [1, -34],
`); }),
draggable: canDrag,
marker.on("mouseover", function () { id: location.idPoi,
this.openPopup(); }).bindContextMenu({
handlePoiSelect({ contextmenu: true,
id: location.idPoi, contextmenuWidth: 140,
deviceId: location.idLD, contextmenuItems: [
typ: poiTypName, {
description: location.description, text: "POI Bearbeiten",
}); icon: "/img/poi-edit.png",
setCurrentPoi(location); callback: () => handleEditPoi(marker),
}); },
],
marker.on("mouseout", function () {
this.closePopup();
});
marker.on("dragend", (e) => {
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.error("Drag operation not allowed"); marker.bindPopup(`
<div>
<b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
${deviceName}<br>
${poiTypName}<br>
</div>
`);
marker.on("mouseover", function () {
this.openPopup();
handlePoiSelect({
id: location.idPoi,
deviceId: location.idLD,
typ: poiTypName,
description: location.description,
});
setCurrentPoi(location);
});
marker.on("mouseout", function () {
this.closePopup();
});
marker.on("dragend", (e) => {
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.error("Drag operation not allowed");
}
});
if (poiLayerVisible) {
marker.addTo(poiLayerRef.current);
}
} catch (innerError) {
console.error("Error processing a location:", innerError);
} }
}); });
//poiLayer ein - oder ausschalten }
if (poiLayerVisible) { } catch (error) {
marker.addTo(poiLayerRef.current); console.error("Error in useEffect:", error);
}
});
} }
}, [ }, [
map, map,
@@ -1270,6 +1274,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
userRights, userRights,
poiLayerVisible, poiLayerVisible,
]); ]);
//--------------------------------------------- //---------------------------------------------
//------------------------------------------------------------------------------- //-------------------------------------------------------------------------------