151 lines
4.2 KiB
Vue
151 lines
4.2 KiB
Vue
<template>
|
|
<v-card xs12>
|
|
<v-card-title primary-title>
|
|
<h3 class='headline mb-0'>
|
|
<v-icon
|
|
v-if='hasUser'
|
|
class='ml-1 mr-1'
|
|
medium
|
|
title="Dölj"
|
|
@click="toggleIgnore('band', event.band.name)"
|
|
>mdi-eye-off</v-icon
|
|
>{{ event.band.name }}
|
|
</h3>
|
|
</v-card-title>
|
|
<v-container>
|
|
<v-layout row wrap>
|
|
<v-flex xs12 sm6
|
|
><strong class='mr-1' v-text="$t('events.date')" />{{
|
|
event.date
|
|
}}
|
|
({{ weekday }} {{ daysUntil }})
|
|
</v-flex
|
|
>
|
|
<v-flex v-if='event.time' xs12 sm6
|
|
><strong class='mr-1' v-text="$t('events.time')" />{{
|
|
event.time
|
|
}}
|
|
</v-flex
|
|
>
|
|
</v-layout>
|
|
<v-layout row wrap>
|
|
<v-flex xs12 sm6 md3
|
|
><strong class='mr-1' v-text="$t('events.hall')" />
|
|
<v-icon
|
|
v-if='hasUser'
|
|
class='ml-1 mr-1'
|
|
small
|
|
:title="$t('events.hide')"
|
|
@click="toggleIgnore('danceHall', event.danceHall.name)"
|
|
>mdi-eye-off
|
|
</v-icon
|
|
>
|
|
{{ event.danceHall.name }}
|
|
</v-flex
|
|
>
|
|
<v-flex xs12 sm6 md3
|
|
><strong class='mr-1' v-text="$t('events.city')" />
|
|
<v-icon
|
|
v-if='hasUser'
|
|
class='ml-1 mr-1'
|
|
small
|
|
:title="$t('events.hide')"
|
|
@click="toggleIgnore('city', event.danceHall.city)"
|
|
>mdi-eye-off
|
|
</v-icon
|
|
>
|
|
{{ event.danceHall.city }}
|
|
</v-flex
|
|
>
|
|
<v-flex xs12 sm6 md3
|
|
><strong class='mr-1' v-text="$t('events.municipality')" />
|
|
<v-icon
|
|
v-if='hasUser'
|
|
class='ml-1 mr-1'
|
|
small
|
|
:title="$t('events.hide')"
|
|
@click="
|
|
toggleIgnore('municipality', event.danceHall.municipality)
|
|
"
|
|
>mdi-eye-off
|
|
</v-icon
|
|
>
|
|
{{ event.danceHall.municipality }}
|
|
</v-flex
|
|
>
|
|
<v-flex xs12 sm6 md3
|
|
><strong class='mr-1' v-text="$t('events.state')" />
|
|
<v-icon
|
|
v-if='hasUser'
|
|
class='ml-1 mr-1'
|
|
small
|
|
:title="$t('events.hide')"
|
|
@click="toggleIgnore('state', event.danceHall.state)"
|
|
>mdi-eye-off
|
|
</v-icon
|
|
>
|
|
{{ event.danceHall.state }}
|
|
</v-flex
|
|
>
|
|
</v-layout>
|
|
<v-layout
|
|
v-for='distance in event.distances'
|
|
:key='distance.origin'
|
|
row
|
|
wrap
|
|
>
|
|
<v-flex xs12 sm6>
|
|
<v-icon>mdi-home</v-icon>
|
|
<span
|
|
><strong>{{ distance.origin }}</strong></span
|
|
>
|
|
</v-flex>
|
|
<v-flex xs12 sm6>
|
|
<v-icon>mdi-car</v-icon>
|
|
<span>{{ (distance.distance / 1000) | numeral('0,0.00') }} km</span>
|
|
<v-icon>mdi-clock-outline</v-icon>
|
|
<span>{{ distance.duration }}</span>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script lang='ts'>
|
|
// eslint-disable-next-line import/no-duplicates
|
|
import { format, formatDistanceToNow, parseISO } from 'date-fns'
|
|
// eslint-disable-next-line import/no-duplicates
|
|
import { enGB, sv } from 'date-fns/locale'
|
|
import { computed, defineComponent, getCurrentInstance, PropType } from 'vue'
|
|
import { Event } from '~/graphql/generated/operations'
|
|
|
|
export default defineComponent({
|
|
name: 'EventDetail',
|
|
props: {
|
|
event: {
|
|
type: Object as PropType<Event>,
|
|
required: true
|
|
},
|
|
hasUser: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
toggleIgnore: {
|
|
type: Function,
|
|
required: true
|
|
}
|
|
},
|
|
setup(props) {
|
|
const instance = getCurrentInstance()
|
|
const locale = computed(() => (instance?.proxy.$i18n.locale ?? 'sv') === 'en' ? enGB : sv )
|
|
const time = (props.event.time || '').split('-')[0].replace('.', ':')
|
|
const weekday = format(parseISO(props.event.date), 'EEEE', { locale: locale.value })
|
|
const daysUntil = formatDistanceToNow(parseISO(`${props.event.date}T${time}`), { addSuffix: true, locale: locale.value })
|
|
return {
|
|
weekday,
|
|
daysUntil
|
|
}
|
|
}
|
|
})
|
|
</script>
|