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

Track popup

Browse Source
This commit is contained in:
Franzz
2026-05-02 17:54:34 +02:00
parent da46106779
commit 87286dc8fd
10 changed files with 191 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
i18n/en.json
View File

@@ -130,8 +130,11 @@
"ref_id": "Ref. Spot ID"
},
"stats": {
"duration": "Duration",
"distance": "Distance",
"elevation": "Elevation",
"elevation_gain": "Elevation gain",
"elevation_loss": "Elevation loss",
"legend": "Legend",
"segment_length": "Segment length",
"type": "Track Type"

3
i18n/es.json
View File

@@ -130,8 +130,11 @@
"ref_id": "ID Spot ref."
},
"stats": {
"duration": "Duración",
"distance": "Distancia",
"elevation": "Elevación",
"elevation_gain": "Ascenso acumulado",
"elevation_loss": "Descenso acumulado",
"legend": "Leyenda",
"segment_length": "Tamaño del segmento",
"type": "Tipo de sendero"

3
i18n/fr.json
View File

@@ -130,8 +130,11 @@
"ref_id": "ID Spot ref."
},
"stats": {
"duration": "Durée",
"distance": "Distance",
"elevation": "Dénivelé",
"elevation_gain": "Dénivelé positif",
"elevation_loss": "Dénivelé négatif",
"legend": "Légende",
"segment_length": "Taille du segment",
"type": "Type de rando"

2
lib/Spot.php
View File

@@ -588,7 +588,7 @@ class Spot extends Main
}
//Sort Table IDs by type & Get attributes
$asFeedIds = array('message'=>array(), 'media'=>array(), 'message'=>array());
$asFeedIds = array('message'=>array(), 'media'=>array(), 'post'=>array());
foreach($asItems as $asItem) {
$asFeedIds[$asItem['type']][$asItem['id']] = $asItem;
}

75
src/components/project.vue
View File

@@ -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

54
src/components/projectPopup.vue
View File

@@ -29,32 +29,42 @@ export default {
</script>
<template>
<div :class="options.type">
<div class="header" v-if="options.type=='message'">
<div :class="options.type+' '+options.subtype">
<div class="header" v-if="options.type=='track'">
<h1>
<spotIcon :icon="'message'" size="lg" :text="lang.get('feed.counter', options.displayed_id)" width="auto" />
<span class="message-type">({{ options.type }})</span>
<spotIcon :icon="options.subtype" size="lg" :text="this.options.name" width="auto" :textClasses="options.subtype" />
</h1>
<div class="separator"></div>
<p v-if="options.description" class="description">{{ options.description }}</p>
<div v-if="options.subtype!='hitchhiking'" class="separator"></div>
</div>
<div class="section coordinates">
<spotIcon :icon="'coords'" fixed-width size="lg" margin="right" />
<projectMapLink :options="options" />
<div v-if="options.type=='track'">
<div v-if="options.subtype!='hitchhiking'" class="section track-stats">
<spotIcon :title="lang.get('stats.distance')" :icon="'distance'" width="fixed" size="lg" :text="options.distance+'km'" />
<spotIcon :title="lang.get('stats.duration')" :icon="'time'" width="fixed" size="lg" :text="options.duration" />
<spotIcon :title="lang.get('stats.elevation_gain')" :icon="'elev-gain'" width="fixed" size="lg" :text="options.elev_gain+'m'" />
<spotIcon :title="lang.get('stats.elevation_loss')" :icon="'elev-drop'" width="fixed" size="lg" :text="options.elev_drop+'m'" />
</div>
</div>
<div class="section altitude" v-if="options.altitude">
<spotIcon :icon="'altitude'" fixed-width size="lg" :text="options.altitude+'m'" />
</div>
<div class="section time">
<projectRelTime :icon="timeIcon" :localTime="options.formatted_time_local" :siteTime="options.formatted_time" :offset="options.day_offset" />
<span v-if="project.mode==consts.modes.blog"> ({{ options.relative_time }})</span>
</div>
<div class="section weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':lang.get('weather.'+options.weather_icon)">
<spotIcon :icon="options.weather_icon" fixed-width size="lg" :text="options.weather_temp+'°C'" />
</div>
<div v-if="medias" class="section medias">
<spotIcon v-if="options.type=='message'" icon="media" fixed-width size="lg" :text="lang.get('media.nearby')" />
<div class="medias-list">
<projectMediaLink v-for="media in medias" :options="media" :type="'marker'" />
<div v-else>
<div class="section coordinates">
<spotIcon :icon="'coords'" width="fixed" size="lg" margin="right" />
<projectMapLink :options="options" />
</div>
<div v-if="options.altitude" class="section altitude">
<spotIcon :icon="'altitude'" width="fixed" size="lg" :text="options.altitude+'m'" />
</div>
<div class="section time">
<projectRelTime :icon="timeIcon" :localTime="options.formatted_time_local" :siteTime="options.formatted_time" :offset="options.day_offset" />
<span v-if="project.mode==consts.modes.blog"> ({{ options.relative_time }})</span>
</div>
<div class="section weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':lang.get('weather.'+options.weather_icon)">
<spotIcon :icon="options.weather_icon" width="fixed" size="lg" :text="options.weather_temp+'°C'" />
</div>
<div v-if="medias" class="section medias">
<spotIcon v-if="options.type=='message'" icon="media" width="fixed" size="lg" :text="lang.get('media.nearby')" />
<div class="medias-list">
<projectMediaLink v-for="media in medias" :options="media" :type="'marker'" />
</div>
</div>
</div>
</div>

8
src/components/projectPost.vue
View File

@@ -91,16 +91,16 @@
this.hash.items = [this.hash.items[0], this.options.type, this.options.id];
return this.map.panToBetweenPanels(this.lngLat, this.focusZoomLevel, iAnimDuration).then(() => {
this.openMarkerPopup();
this.openMarkerPopup(false);
});
},
openMarkerPopup() {
this.mouseOverDrill = true;
openMarkerPopup(bMouseEvent=true) {
this.mouseOverDrill = bMouseEvent;
if(this.map.isMarkerVisible(this.lngLat)) this.map.openMarkerPopup(this.options.id, this.options.type);
},
closeMarkerPopup() {
this.mouseOverDrill = false;
if(!this.popupRequested) this.map.closeMarkerPopup();
if(!this.popupRequested) this.map.closePopup();
this.popupRequested = false;
},
send() {

6
src/scripts/icons.js
View File

@@ -88,9 +88,9 @@ const ICONS = {
map: faMapLocationDot,
marker: faLocationPin,
footprint: faShoePrints,
'track-off-track': faPersonHiking,
'track-main': faPersonHiking,
'track-hitchhiking': faCarSide,
'off-track': faPersonHiking,
'main': faPersonHiking,
'hitchhiking': faCarSide,
'track-start': faPersonHiking,
'track-end': faPersonHiking,
layers: faLayerGroup,

81
src/scripts/projects.js
View File

@@ -1,3 +1,5 @@
import { LngLat } from 'maplibre-gl';
export default class Projects {
constructor(asProjects = {}) {
@@ -14,4 +16,83 @@ export default class Projects {
const sCodeName = this.getDefaultCodeName();
return this[this.getDefaultCodeName()];
}
getTrackInfo(oFeature, oTrack, oLang) {
const iTrackId = Number(oFeature.properties.track_id);
const oTrackFeature = oTrack.features[iTrackId] || oFeature;
const aoCoords = oTrackFeature.geometry.coordinates;
if(oTrackFeature.properties.type == 'hitchhiking') {
return {
type: 'track',
subtype: oTrackFeature.properties.type,
name: oTrackFeature.properties.name
};
}
const asStats = this.getTrackStats(aoCoords);
return {
type: 'track',
subtype: oTrackFeature.properties.type,
name: oTrackFeature.properties.name,
description: oTrackFeature.properties.description,
distance: Math.round(asStats.distance / 100) / 10,
elev_gain: Math.round(asStats.elevGain),
elev_drop: Math.abs(Math.round(asStats.elevDrop)),
duration: this.getNaturalDuration(asStats.time, oLang)
};
}
getNaturalDuration(iHours, oLang) {
let 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?'':'\u00bd')+' '+oLang.get(iTimeDays>1?'unit.days':'unit.day')):'') //Days
+((iTimeHours>0 || iTimeDays==0)?iTimeHours+oLang.get('unit.hour'):'') //Hours
+((iTimeDays>0 || iTimeMinutes==0)?'':iTimeMinutes); //Minutes
}
getTrackStats(aoCoords) {
let iDistance = 0, iElevDrop = 0, iElevGain = 0, iTime = 0;
for(let i = 1; i < aoCoords.length; i++) {
const oCurrPoint = new LngLat(aoCoords[i][0], aoCoords[i][1]);
const oPrevPoint = new LngLat(aoCoords[i - 1][0], aoCoords[i - 1][1]);
const iCurrElev = Number(aoCoords[i][2]);
const iPrevElev = Number(aoCoords[i - 1][2]);
const iElevDelta = (Number.isFinite(iCurrElev) && Number.isFinite(iPrevElev))?(iCurrElev - iPrevElev):0;
const iSegDistance = oCurrPoint.distanceTo(oPrevPoint);
if(iSegDistance <= 0) continue;
iDistance += iSegDistance;
iElevDrop += Math.min(iElevDelta, 0);
iElevGain += Math.max(iElevDelta, 0);
let iSpeedCorrecRatio = 0;
const iAngle = iElevDelta / iSegDistance;
if(iAngle < -1) iSpeedCorrecRatio = 0.5;
else if(iAngle < -0.2) iSpeedCorrecRatio = 1.25;
else if(iAngle < 0.1) iSpeedCorrecRatio = 1;
else if(iAngle < 0.25) iSpeedCorrecRatio = 0.85;
else if(iAngle < 0.5) iSpeedCorrecRatio = 0.6;
else if(iAngle < 1) iSpeedCorrecRatio = 0.5;
else iSpeedCorrecRatio = 0.25;
iTime += iSegDistance / 1000 * iSpeedCorrecRatio / 3.5;
}
return {
distance: iDistance,
elevDrop: iElevDrop,
elevGain: iElevGain,
time: iTime
};
}
}

25
src/styles/_page.project.map.scss
View File

@@ -30,15 +30,16 @@ $thumbnail-max-size: 60px;
font-weight: bold;
text-align: center;
.message-type {
color: color.$default;
span.hitchhiking {
font-size: calc(1em / 1.4 * 1.2);
font-weight: normal;
font-size: calc(1em / 1.4);
margin-left: 0.5em;
vertical-align: center;
}
}
.description {
text-align: center;
}
.separator {
border-top: 1px solid color.$default-bg;
margin: var.$elem-spacing 0;
@@ -48,11 +49,21 @@ $thumbnail-max-size: 60px;
font-size: 1.0em;
margin: var.$elem-spacing 0 0 0;
&:first-child {
margin: 0;
}
a {
color: color.$default;
}
}
.track-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var.$elem-spacing;
}
.medias-list {
line-height: 0;
@@ -104,10 +115,6 @@ $thumbnail-max-size: 60px;
}
.media {
.coordinates {
margin-top: 0;
}
.medias-list {
a.media-link img {
width: 100%;