Track popup

This commit is contained in:
2026-05-02 17:54:34 +02:00
parent da46106779
commit 87286dc8fd
10 changed files with 191 additions and 69 deletions

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>