chore: add eslint and fix lint errors

components/pages/events/Event/index.vue

@@ -1,29 +1,87 @@
 <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>
+      <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-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-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-layout row wrap v-for="distance in event.distances" :key="distance">
         <v-flex xs12 sm6>
           <v-icon>mdi-home</v-icon>
-          <span><strong>{{distance.origin}}</strong></span>
+          <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>
+          <span>{{ (distance.distance / 1000) | numeral('0,0.00') }} km</span>
           <v-icon>mdi-clock-outline</v-icon>
-          <span>{{distance.duration}}</span>
+          <span>{{ distance.duration }}</span>
         </v-flex>
       </v-layout>
     </v-container>
@@ -31,31 +89,31 @@
 </template>
 
 <script>
-  import dayjs from 'dayjs'
+import dayjs from 'dayjs'
 
-  export default {
-    props: {
-      event: {
-        type: Object,
-        required: true
-      },
-      hasUser: {
-        type: Boolean,
-        required: true
-      },
-      toggleIgnore: {
-        type: Function,
-        required: true
-      }
+export default {
+  props: {
+    event: {
+      type: Object,
+      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
-      }
+    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>