mirror of
https://framagit.org/les/gancio.git
synced 2025-01-31 16:42:22 +01:00
71 lines
2.6 KiB
Vue
71 lines
2.6 KiB
Vue
<template>
|
|
<v-container id='home' class='px-2 px-sm-6 pt-0'>
|
|
<h1 class='d-block text-h4 font-weight-black text-center text-uppercase mt-10 mx-auto w-100 text-underline'>
|
|
<u>{{ place.name }}</u>
|
|
</h1>
|
|
<span v-if='place.name!=="online"' class="d-block text-subtitle text-center w-100">{{ place.address }}</span>
|
|
|
|
<!-- Map -->
|
|
<div v-if='settings.allow_geolocation && place.latitude && place.longitude' >
|
|
<div class="mt-4 mx-auto px-4" >
|
|
<Map :place='place' :height='mapHeight' />
|
|
</div>
|
|
<div class="mt-4">
|
|
<HowToArriveNav :place='place' class="justify-center" />
|
|
</div>
|
|
</div>
|
|
<!-- Events -->
|
|
<div id="events" class='mt-14'>
|
|
<v-lazy class='event v-card' :value='idx<9' v-for='(event, idx) in events' :key='event.id' :min-height='hide_thumbs ? 105 : undefined' :options="{ threshold: .5, rootMargin: '500px' }" :class="{ 'theme--dark': is_dark }">
|
|
<Event :event='event' :lazy='idx > 9' />
|
|
</v-lazy>
|
|
</div>
|
|
|
|
<h2 v-if="pastEvents.length">{{$t('common.past_events')}}</h2>
|
|
<div v-if="pastEvents.length" id="events" class='mt-14'>
|
|
<v-lazy class='event v-card' :value='idx<9' v-for='(event, idx) in pastEvents' :key='event.id' :min-height='hide_thumbs ? 105 : undefined' :options="{ threshold: .5, rootMargin: '500px' }" :class="{ 'theme--dark': is_dark }">
|
|
<Event :event='event' :lazy='idx > 9' />
|
|
</v-lazy>
|
|
</div>
|
|
</v-container>
|
|
</template>
|
|
<script>
|
|
|
|
import { mapState, mapGetters } from 'vuex'
|
|
import Event from '@/components/Event'
|
|
import HowToArriveNav from '@/components/HowToArriveNav.vue'
|
|
|
|
export default {
|
|
name: 'Place',
|
|
components: {
|
|
Event,
|
|
HowToArriveNav,
|
|
[process.client && 'Map']: () => import('@/components/Map.vue')
|
|
},
|
|
data() {
|
|
return { mapHeight: "14rem" }
|
|
},
|
|
head() {
|
|
const title = `${this.settings.title} - ${this.place.name}`
|
|
return {
|
|
title,
|
|
link: [
|
|
{ rel: 'alternate', type: 'application/rss+xml', title, href: this.settings.baseurl + `/feed/rss/place/${this.place.id}` },
|
|
{ rel: 'alternate', type: 'text/calendar', title, href: this.settings.baseurl + `/feed/ics/place/${this.place.id}` }
|
|
],
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['settings']),
|
|
...mapGetters(['hide_thumbs', 'is_dark']),
|
|
},
|
|
async asyncData({ $axios, params, error }) {
|
|
try {
|
|
const { events, pastEvents, place } = await $axios.$get(`/place/${params.id}`)
|
|
return { events, pastEvents, place }
|
|
} catch (e) {
|
|
error({ statusCode: 404, message: 'Place not found!' })
|
|
}
|
|
}
|
|
}
|
|
</script>
|