argoyle
c80fd0313c
Adds internationalization support in filters and origins pages by importing the useI18n function. Expands ESLint configuration to include new rules and plugins, ensuring improved code quality. Introduces Grafana monitoring plugin to enhance performance tracking capabilities in the application.
140 lines
4.0 KiB
Vue
140 lines
4.0 KiB
Vue
<template>
|
|
<v-card flat variant="outlined" rounded="xl">
|
|
<v-card-title v-if="event.band" primary-title>
|
|
<h3 class="headline mb-0">
|
|
<v-icon
|
|
v-if="hasUser"
|
|
class="ml-1 mr-1 text-medium-emphasis"
|
|
size="small"
|
|
:title="t('events.hide')"
|
|
icon='mdi-eye-off'
|
|
@click="toggleIgnore('band', event.band.name)"
|
|
/>
|
|
{{ event.band.name }}
|
|
</h3>
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<v-row dense>
|
|
<v-col
|
|
cols="12"
|
|
xs="12"
|
|
sm="6"
|
|
>
|
|
<strong class="mr-1" v-text="t('events.date')" />{{
|
|
event.date
|
|
}}
|
|
({{ weekday }} {{ daysUntil }})
|
|
</v-col>
|
|
<v-col v-if="event.time" cols="12" xs="12" sm="6">
|
|
<strong class="mr-1" v-text="t('events.time')" />{{
|
|
event.time
|
|
}}
|
|
</v-col>
|
|
</v-row>
|
|
<v-row v-if="event.danceHall" dense>
|
|
<v-col
|
|
cols="12"
|
|
xs="12"
|
|
sm="6"
|
|
>
|
|
<strong class="mr-1" v-text="t('events.hall')" />
|
|
<v-icon
|
|
v-if="hasUser"
|
|
class="ml-1 mr-1 text-medium-emphasis"
|
|
size="small"
|
|
:title="t('events.hide')"
|
|
icon='mdi-eye-off'
|
|
@click="toggleIgnore('danceHall', event.danceHall.name)"
|
|
/>
|
|
{{ event.danceHall.name }}
|
|
</v-col>
|
|
<v-col
|
|
cols="12"
|
|
xs="12"
|
|
sm="6"
|
|
>
|
|
<strong class="mr-1" v-text="t('events.city')" />
|
|
<v-icon
|
|
v-if="hasUser"
|
|
class="ml-1 mr-1 text-medium-emphasis"
|
|
size="small"
|
|
:title="t('events.hide')"
|
|
icon='mdi-eye-off'
|
|
@click="toggleIgnore('city', event.danceHall.city)"
|
|
/>
|
|
{{ event.danceHall.city }}
|
|
</v-col>
|
|
<v-col
|
|
cols="12"
|
|
xs="12"
|
|
sm="6"
|
|
>
|
|
<strong class="mr-1" v-text="t('events.municipality')" />
|
|
<v-icon
|
|
v-if="hasUser"
|
|
class="ml-1 mr-1 text-medium-emphasis"
|
|
size="small"
|
|
:title="t('events.hide')"
|
|
icon='mdi-eye-off'
|
|
@click="
|
|
toggleIgnore('municipality', event.danceHall.municipality)
|
|
"
|
|
/>
|
|
{{ event.danceHall.municipality }}
|
|
</v-col>
|
|
<v-col
|
|
cols="12"
|
|
xs="12"
|
|
sm="6"
|
|
>
|
|
<strong class="mr-1" v-text="t('events.state')" />
|
|
<v-icon
|
|
v-if="hasUser"
|
|
class="ml-1 mr-1 text-medium-emphasis"
|
|
size="small"
|
|
:title="t('events.hide')"
|
|
icon='mdi-eye-off'
|
|
@click="toggleIgnore('state', event.danceHall.state)"
|
|
/>
|
|
{{ event.danceHall.state }}
|
|
</v-col>
|
|
</v-row>
|
|
<distance-display v-for="distance in event.distances" :key="distance.origin" :distance="distance" />
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup lang='ts'>
|
|
|
|
import { format, formatDistanceToNow, parseISO } from 'date-fns'
|
|
import { enGB, sv } from 'date-fns/locale'
|
|
import { computed, type PropType } from 'vue'
|
|
|
|
import { useI18n } from '#i18n'
|
|
import DistanceDisplay from '~/components/pages/events/event-distance.vue'
|
|
import type { Event } from '~/graphql/generated/operations'
|
|
|
|
const props = defineProps({
|
|
event: {
|
|
type: Object as PropType<Event>,
|
|
required: true,
|
|
},
|
|
hasUser: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
toggleIgnore: {
|
|
type: Function,
|
|
required: true,
|
|
},
|
|
})
|
|
const { t, locale: currentLocale } = useI18n()
|
|
const locale = computed(() => (currentLocale.value ?? 'sv') === 'en' ? enGB : sv)
|
|
const time = computed(() => (props.event.time || '').split('-')[0].replace('.', ':'))
|
|
const weekday = computed(() => format(parseISO(props.event.date), 'EEEE', { locale: locale.value }))
|
|
const daysUntil = computed(() => formatDistanceToNow(parseISO(`${props.event.date}T${time.value}`), {
|
|
addSuffix: true,
|
|
locale: locale.value,
|
|
}))
|
|
</script>
|