Track popup

src/components/project.vue

@@ -93,7 +93,7 @@ export default {
 			map: {
 				panToBetweenPanels: this.panToBetweenPanels,
 				openMarkerPopup: this.openMarkerPopup,
-				closeMarkerPopup: this.closeMarkerPopup,
+				closePopup: this.closePopup,
 				isMarkerVisible: this.isMarkerVisible
 			},
 			project: this
@@ -142,22 +142,6 @@ export default {
 			this.setFeedUpdateTimer(-1);
 			this.map.remove();
 		},
-		getNaturalDuration(iHours) {
-			var iTimeMinutes = 0, iTimeHours = 0, iTimeDays = Math.floor(iHours/8); //8 hours a day
-			if(iTimeDays > 1) iTimeDays = Math.round(iTimeDays * 2) / 2; //Round down to the closest half day
-			else {
-				iTimeDays = 0;
-				iTimeHours = Math.floor(iHours);
-				iHours -= iTimeHours;
-	
-				iTimeMinutes = Math.floor(iHours * 4) * 15; //Round down to the closest 15 minutes
-			}
-			return '~ '
-				+(iTimeDays>0?(iTimeDays+(iTimeDays%2==0?'':'½')+' '+this.lang.get(iTimeDays>1?'unit.days':'unit.day')):'')	//Days
-				+((iTimeHours>0 || iTimeDays==0)?iTimeHours+this.lang.get('unit.hour'):'')									//Hours
-				+((iTimeDays>0 || iTimeMinutes==0)?'':iTimeMinutes);														//Minutes
-	
-		},
 		initProject() {
 			this.currProject = this.projects[this.hash.items[0]];
 			this.modeHisto = (this.currProject.mode == this.consts.modes.histo);
@@ -263,9 +247,12 @@ export default {
 		},
 		addTrack(oTrack, bCenter=false) {
 			this.track = oTrack;
+			this.track.features.forEach((oFeature, iFeatureId) => {
+				oFeature.properties.track_id = iFeatureId;
+			});
 			this.map.addSource('track', {
 				'type': 'geojson',
-				'data': oTrack
+				'data': this.track
 			});
 
 			//Color mapping
@@ -290,6 +277,27 @@ export default {
 					'line-width': this.hikes.width
 				}
 			});
+
+			//Enlarged track (click hit box)
+			this.map.addLayer({
+				'id': 'track-hitbox',
+				'type': 'line',
+				'source': 'track',
+				'paint': {
+					'line-opacity': 0,
+					'line-width': this.hikes.width + 20
+				}
+			});
+			this.map.on('click', 'track-hitbox', this.openTrackPopup);
+			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) {
+			this.closePopup();
+			this.openPopup({
+				lnglat: oEvent.lngLat,
+				options: this.projects.getTrackInfo(oEvent.features[0], this.track, this.lang),
+			});
 		},
 		addMarker(oMarker) {
 			const $Marker = document.createElement('div');
@@ -306,22 +314,27 @@ export default {
 				});
 		},
 		openMarkerPopup(iMarkerId, sMarkerType) {
-			this.closeMarkerPopup();
-
+			this.closePopup();
 			let oMarker = this.markers.find((oCandidate) => oCandidate.id == iMarkerId && oCandidate.type == sMarkerType);
-
+			this.openPopup({
+				offset: [0, this.markerSize.height * -1], //FIXME
+				lnglat: [oMarker.longitude, oMarker.latitude],
+				options: oMarker
+			});
+		},
+		openPopup({offset=[0, 0], lnglat, options={}} = {}) {
 			const $Popup = document.createElement('div');
 			this.popup.element = new Popup({
 					anchor: 'bottom',
-					offset: [0, this.markerSize.height * -1], //FIXME
+					offset: offset,
 					closeButton: false
 				})
 				.setDOMContent($Popup)
-				.setLngLat([oMarker.longitude, oMarker.latitude])
+				.setLngLat(lnglat)
 				.addTo(this.map);
 
 			this.popup.content = createApp(ProjectPopup, {
-				options: oMarker,
+				options: options,
 				project: this.currProject
 			});
 			this.popup.content
@@ -330,7 +343,7 @@ export default {
 				.provide('consts', this.consts)
 				.mount($Popup);
 		},
-		closeMarkerPopup() {
+		closePopup() {
 			if(this.popup.content) {
 				this.popup.content.unmount();
 				this.popup.content = null;
@@ -444,19 +457,21 @@ export default {
 		},
 		async checkNewFeed() {
 			let aoData = await this.api.get('new_feed', {id_project: this.currProject.id, id: this.feed.refIdFirst});
+			const aoFeed = aoData.feed || [];
+			const aoMarkers = aoData.markers || [];
 			
-			if(Object.keys(aoData.feed).length > 0) {
+			if(aoFeed.length > 0) {
 				//Update pointer
 				this.feed.refIdFirst = aoData.ref_id_first;
 				
 				//Add new posts
-				this.posts.unshift(...aoData.feed);
+				this.posts.unshift(...aoFeed);
 			}
 					
 			//Add new Markers
-			if(Object.keys(aoData.markers).length > 0) {
-				this.markers.push(...aoData.markers);
-				aoData.messages.forEach(oMarker => this.addMarker(oMarker));
+			if(aoMarkers.length > 0) {
+				this.markers.push(...aoMarkers);
+				aoMarkers.forEach(oMarker => this.addMarker(oMarker));
 			}
 
 			//Message Last Update