62 lines
2.8 KiB
Vue
62 lines
2.8 KiB
Vue
<template>
|
|
<v-card xs12>
|
|
<v-card-title primary-title>
|
|
<h3 class="headline mb-0"><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('band', event.band.name)" medium title="Dölj">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 xs12 sm6 v-if="event.time"><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 class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('danceHall', event.danceHall.name)" small :title="$t('events.hide')">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 class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('city', event.danceHall.city)" small :title="$t('events.hide')">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 class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('municipality', event.danceHall.municipality)" small :title="$t('events.hide')">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 class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('state', event.danceHall.state)" small :title="$t('events.hide')">mdi-eye-off</v-icon>{{event.danceHall.state}}</v-flex>
|
|
</v-layout>
|
|
<v-layout row wrap v-for="distance in event.distances" :key="event.origin">
|
|
<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>
|
|
import dayjs from 'dayjs'
|
|
|
|
export default {
|
|
props: {
|
|
event: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
hasUser: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
toggleIgnore: {
|
|
type: Function,
|
|
required: true
|
|
}
|
|
},
|
|
setup(props) {
|
|
const time = (props.event.time || '').split('-')[0].replace('.', ':')
|
|
const weekday = dayjs(props.event.date).format('dddd')
|
|
const daysUntil = dayjs(`${props.event.date} ${time}`).fromNow()
|
|
return {
|
|
weekday,
|
|
daysUntil
|
|
}
|
|
},
|
|
};
|
|
</script>
|