dancefinder-app/components/pages/events/Event/index.vue

<template>
  <v-card flat outlined rounded class='mx-3 my-3 rounded-xl'>
    <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>