chore(deps): update dependency nuxt to v4

2025-07-16 16:05:26 +00:00
parent db5f9725d4
commit d8e438be10
22 changed files with 1264 additions and 573 deletions
@@ -0,0 +1,140 @@
+<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 type { PropType } from 'vue'
+import { computed  } 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>