99 lines
3.9 KiB
Vue
99 lines
3.9 KiB
Vue
<script>
|
|
import projectMapLink from '@components/projectMapLink';
|
|
import spotIcon from '@components/spotIcon';
|
|
import projectRelTime from '@components/projectRelTime';
|
|
import projectMediaLink from '@components/projectMediaLink';
|
|
|
|
export default {
|
|
components: {
|
|
spotIcon,
|
|
projectMapLink,
|
|
projectMediaLink,
|
|
projectRelTime
|
|
},
|
|
props: {
|
|
options: Object,
|
|
project: Object
|
|
},
|
|
inject: ['lang', 'consts', 'isMobile'],
|
|
computed: {
|
|
activeTimeInterval() {
|
|
if(this.options.mode == this.consts.modes.blog) return this.lang.get('project.wip');
|
|
|
|
const sYearFrom = this.options.active_from.substr(0, 4);
|
|
const sYearTo = this.options.active_to.substr(0, 4);
|
|
return (sYearFrom == sYearTo)?sYearFrom:(sYearFrom + '-' + sYearTo);
|
|
},
|
|
timeinfo() {
|
|
return (this.options.type == 'media')?
|
|
{
|
|
icon: 'image-shot',
|
|
local_time: this.options.taken_on_formatted_time_local,
|
|
site_time: this.options.taken_on_formatted_time,
|
|
offset: this.options.taken_on_day_offset,
|
|
relative_time: this.options.taken_on_relative_time
|
|
}:
|
|
{
|
|
icon: 'time',
|
|
local_time: this.options.formatted_time_local,
|
|
site_time: this.options.formatted_time,
|
|
offset: this.options.day_offset,
|
|
relative_time: this.options.relative_time
|
|
};
|
|
},
|
|
localTime() {
|
|
return this.timeinfo.local_time +
|
|
((this.project.mode == this.consts.modes.blog)?' (' + this.timeinfo.relative_time + ')':'')
|
|
;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="options.type+' '+options.subtype">
|
|
<div class="header" v-if="options.type == 'track' || options.type == 'project'">
|
|
<h1>
|
|
<spotIcon :icon="options.subtype" size="lg" :text="this.options.name" width="auto" :textClasses="options.subtype" />
|
|
</h1>
|
|
<p v-if="options.description" class="description">{{ options.description }}</p>
|
|
<div v-if="options.subtype!='hitchhiking'" class="separator"></div>
|
|
</div>
|
|
<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 v-else-if="options.type=='project'" class="section">
|
|
<spotIcon icon="calendar" width="fixed" size="lg" :text="activeTimeInterval" />
|
|
</div>
|
|
<div v-else>
|
|
<div class="section" v-if="options.comment">
|
|
<spotIcon icon="post" width="fixed" size="lg" :text="options.comment" />
|
|
</div>
|
|
<div class="section time">
|
|
<projectRelTime :icon="timeinfo.icon" :localTime="localTime" :siteTime="timeinfo.site_time" :offset="timeinfo.offset" />
|
|
</div>
|
|
<div v-if="!isMobile()" 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 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="options.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 options?.medias" :options="media" :type="'marker'" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|