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>Datum:</strong> {{event.date}} ({{ weekday }})</v-flex>
        <v-flex xs12 sm6 v-if="event.time"><strong>Tid:</strong> {{event.time}}</v-flex>
      </v-layout>
      <v-layout row wrap>
        <v-flex xs12 sm6 md3><strong>Var:</strong><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('danceHall', event.danceHall.name)" small title="Dölj">mdi-eye-off</v-icon>{{event.danceHall.name}}</v-flex>
        <v-flex xs12 sm6 md3><strong>Ort:</strong><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('city', event.danceHall.city)" small title="Dölj">mdi-eye-off</v-icon>{{event.danceHall.city}}</v-flex>
        <v-flex xs12 sm6 md3><strong>Kommun:</strong><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('municipality', event.danceHall.municipality)" small title="Dölj">mdi-eye-off</v-icon>{{event.danceHall.municipality}}</v-flex>
        <v-flex xs12 sm6 md3><strong>Län:</strong><v-icon class="ml-1 mr-1" v-if="hasUser" v-on:click="toggleIgnore('state', event.danceHall.state)" small title="Dölj">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>
  export default {
    props: {
      event: {
        type: Object,
        required: true
      },
      hasUser: {
        type: Boolean,
        required: true
      },
      toggleIgnore: {
        type: Function,
        required: true
      }
    },
    computed: {
      weekday() {
        return window.$nuxt.$moment(this.event.date).format('dddd');
      }
    }
  };
</script>