dancefinder-app/components/pages/events/Event/index.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="distance.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 {
  name: 'EventDetail',
  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>