61 lines
1.9 KiB
Vue
61 lines
1.9 KiB
Vue
<script>
|
|
import projectMapLink from './projectMapLink.vue';
|
|
import spotIcon from './spotIcon.vue';
|
|
import projectRelTime from './projectRelTime.vue';
|
|
import projectMediaLink from './projectMediaLink.vue';
|
|
import { options } from '../scripts/lightbox';
|
|
|
|
export default {
|
|
components: {
|
|
spotIcon,
|
|
projectMapLink,
|
|
projectMediaLink,
|
|
projectRelTime
|
|
},
|
|
props: {
|
|
type: String,
|
|
options: Object,
|
|
medias: Array,
|
|
project: Object
|
|
},
|
|
inject: ['lang', 'consts'],
|
|
computed: {
|
|
timeIcon() {
|
|
return (this.type == 'media')?'image-shot':'time';
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="'info-window '+type">
|
|
<div class="header" v-if="type=='message'">
|
|
<h1>
|
|
<spotIcon :icon="'message'" :classes="'fa-lg'" :text="lang.get('post_message')+' '+lang.get('counter', options.displayed_id)" />
|
|
<span class="message-type">({{ options.type }})</span>
|
|
</h1>
|
|
<div class="separator"></div>
|
|
</div>
|
|
<p class="coordinates">
|
|
<spotIcon :icon="'coords'" :classes="'fa-fw fa-lg'" :margin="true" />
|
|
<projectMapLink :options="options" />
|
|
</p>
|
|
<p class="altitude" v-if="options.altitude">
|
|
<spotIcon :icon="'altitude'" :classes="'fa-fw fa-lg'" :text="options.altitude+'m'" />
|
|
</p>
|
|
<p class="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>
|
|
</p>
|
|
<p class="weather" v-if="options.weather_icon && options.weather_icon!='unknown'" :title="options.weather_cond==''?'':lang.get(options.weather_cond)">
|
|
<spotIcon :icon="options.weather_icon" :classes="'fa-fw fa-lg'" :text="options.weather_temp+'°C'" />
|
|
</p>
|
|
<div v-if="medias.length > 0">
|
|
<div class="separator"></div>
|
|
<div class="medias">
|
|
<projectMediaLink v-for="media in medias" :options="media" :type="'marker'" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|