franzz/spot
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Add project popup
All checks were successful
Deploy Spot / deploy (push) Successful in 38s
Details

Browse Source
This commit is contained in:
Franzz
2026-05-19 17:49:06 +02:00
parent 93a72c628e
commit c43539b640
6 changed files with 69 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/project.vue
View File

@@ -217,7 +217,10 @@ export default {
},
addMarkers: () => {
this.addTrack(this.track);
this.markers.forEach(oMarker => this.addMarker(oMarker));
this.markers.forEach(oMarker => this.addMarker(
oMarker,
() => this.openMarkerPopup(oMarker.id, oMarker.type)
));
}
});
},
@@ -239,14 +242,16 @@ export default {
},
addMarkers: () => {
for(const asProject of Object.values(this.projects)) {
this.addMarker({
subtype: 'project',
longitude: asProject.longitude,
latitude: asProject.latitude,
opacityWhenCovered: 0.3
}, () => {
this.hash.items = [asProject.codename];
});
this.addMarker(
{
type: 'project',
subtype: 'project',
...asProject,
opacityWhenCovered: 0.3
},
() => {this.hash.items = [asProject.codename];},
(oEvent, oProject) => {this.openProjectPopup(oProject);}
);
}
}
});
@@ -352,28 +357,14 @@ export default {
this.map.on('mouseenter', 'track-hitbox', () => {this.map.getCanvas().style.cursor = 'pointer';});
this.map.on('mouseleave', 'track-hitbox', () => {this.map.getCanvas().style.cursor = '';});
},
openTrackPopup(oEvent) {
openProjectPopup(oProject) {
this.closePopup();
this.openPopup({
lnglat: oEvent.lngLat,
options: this.projects.getTrackInfo(oEvent.features[0], this.track, this.lang),
lnglat: [oProject.longitude, oProject.latitude],
options: oProject,
offset: [0, -32] //FIXME
});
},
addMarker(oMarker, fClickCallback=null) {
const $Marker = document.createElement('div');
createApp(SpotIconStack, this.markerProps[oMarker.subtype]).mount($Marker);
new Marker({element: $Marker, anchor: 'bottom', opacityWhenCovered: oMarker.opacityWhenCovered ?? 0})
.setLngLat([oMarker.longitude, oMarker.latitude])
.addTo(this.map)
.getElement()
.addEventListener('click', (oEvent) => {
oEvent.preventDefault();
oEvent.stopPropagation();
if(fClickCallback) fClickCallback(oEvent, oMarker);
else this.openMarkerPopup(oMarker.id, oMarker.type);
});
},
openMarkerPopup(iMarkerId, sMarkerType) {
this.closePopup();
let oMarker = this.markers.find((oCandidate) => oCandidate.id == iMarkerId && oCandidate.type == sMarkerType);
@@ -383,6 +374,13 @@ export default {
offset: [0, -32] //FIXME
});
},
openTrackPopup(oEvent) {
this.closePopup();
this.openPopup({
lnglat: oEvent.lngLat,
options: this.projects.getTrackInfo(oEvent.features[0], this.track, this.lang),
});
},
openPopup({lnglat, options={}, offset=[0, 0]} = {}) {
const $Popup = document.createElement('div');
this.popup.element = new Popup({
@@ -414,6 +412,32 @@ export default {
this.popup.element = null;
}
},
addMarker(oMarker, fClickCallback=null, fHoverCallback=null) {
const $Marker = document.createElement('div');
createApp(SpotIconStack, this.markerProps[oMarker.subtype]).mount($Marker);
const $MarkerElement = new Marker({element: $Marker, anchor: 'bottom', opacityWhenCovered: oMarker.opacityWhenCovered ?? 0})
.setLngLat([oMarker.longitude, oMarker.latitude])
.addTo(this.map)
.getElement();
if(fClickCallback) {
$MarkerElement.addEventListener('click', (oEvent) => {
oEvent.preventDefault();
oEvent.stopPropagation();
fClickCallback(oEvent, oMarker);
});
}
if(fHoverCallback) {
$MarkerElement.addEventListener('mouseenter', (oEvent) => {
fHoverCallback(oEvent, oMarker);
});
$MarkerElement.addEventListener('mouseleave', () => {
this.closePopup();
});
}
},
getInitialMapBounds() {
let oBounds = new LngLatBounds();
let oHashMarker;
@@ -527,7 +551,10 @@ export default {
//Add new Markers
if(aoMarkers.length > 0) {
this.markers.push(...aoMarkers);
aoMarkers.forEach(oMarker => this.addMarker(oMarker));
aoMarkers.forEach(oMarker => this.addMarker(
oMarker,
() => this.openMarkerPopup(oMarker.id, oMarker.type)
));
}
//Message Last Update