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(() => {
if (map && poiLayerRef.current && isPoiTypLoaded) {
map.removeLayer(poiLayerRef.current);
poiLayerRef.current = new L.LayerGroup().addTo(map);
try {
if (map && poiLayerRef.current && isPoiTypLoaded) {
map.removeLayer(poiLayerRef.current);
poiLayerRef.current = new L.LayerGroup().addTo(map);
locations.forEach(async (location) => {
const { latitude, longitude } = parsePoint(location.position);
const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
const deviceName = await fetchDeviceNameById(location.idLD);
//console.log("location.icon:", location);
locations.forEach(async (location) => {
try {
const { latitude, longitude } = parsePoint(location.position);
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
// Finde das passende Icon aus poiData
const matchingIcon = poiData.find(
(poi) => poi.idPoi === location.idPoi
);
const iconUrl = matchingIcon
? `/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),
},
],
});
const canDrag = userRights ? userRights.includes(56) : false;
const matchingIcon = poiData.find(
(poi) => poi.idPoi === location.idPoi
);
const iconUrl = matchingIcon
? `/img/icons/pois/${matchingIcon.path}`
: "/img/icons/pois/default-icon.png";
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);
const marker = L.marker([latitude, longitude], {
icon: L.icon({
iconUrl: iconUrl,
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
}),
draggable: canDrag,
id: location.idPoi,
}).bindContextMenu({
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [
{
text: "POI Bearbeiten",
icon: "/img/poi-edit.png",
callback: () => handleEditPoi(marker),
},
],
});
} 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) {
marker.addTo(poiLayerRef.current);
}
});
}
} catch (error) {
console.error("Error in useEffect:", error);
}
}, [
map,
@@ -1270,6 +1274,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
userRights,
poiLayerVisible,
]);
//---------------------------------------------
//-------------------------------------------------------------------------------