chore(deps): update dependency nuxt to v4
This commit is contained in:
Renovate
@@ -0,0 +1,25 @@
|
||||
body,
|
||||
html {
|
||||
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.t-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-fade-in {
|
||||
animation: fade-in 350ms ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<v-row dense>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-icon class="me-1" icon='mdi-home' />
|
||||
<span><strong>{{ distance.origin }}</strong></span>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="12" md="6">
|
||||
<v-icon class="me-1" icon='mdi-car' />
|
||||
<span>{{ numericDistance }}</span>
|
||||
<v-icon class="ms-2 me-1" icon='mdi-clock-outline' />
|
||||
<span>{{ distance.duration }}</span>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import type { PropType } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
|
||||
import type { DanceHallDistance } from '~~/graphql/generated/operations'
|
||||
|
||||
const props = defineProps({
|
||||
distance: {
|
||||
type: Object as PropType<DanceHallDistance>,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
const numericDistance = computed(() =>
|
||||
`${Number(props.distance.distance / 1000).toLocaleString('sv-SE', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
})} km`)
|
||||
</script>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-row v-for="event in events" :key="event.id" wrap>
|
||||
<v-col xs="12">
|
||||
<event-card
|
||||
:event="event"
|
||||
:has-user="hasUser"
|
||||
:toggle-ignore="toggleIgnore"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import type { PropType } from 'vue'
|
||||
|
||||
import type { Event } from '~~/graphql/generated/operations'
|
||||
|
||||
import EventCard from './event-card.vue'
|
||||
|
||||
defineProps({
|
||||
hasUser: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
toggleIgnore: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
events: {
|
||||
type: Array as PropType<Event[]>,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div :key="isAuthenticated ? 'true' : 'false'">
|
||||
<v-container :key="range" fluid grid-list-md class="app-fade-in">
|
||||
<v-row v-if="!isAuthenticated" wrap>
|
||||
<v-col xs="12">
|
||||
<p><b v-text="t('events.login')" /></p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row wrap>
|
||||
<v-col xs="12">
|
||||
<v-text-field
|
||||
v-model="origin"
|
||||
variant="underlined"
|
||||
hide-details
|
||||
:label="t('origins.origin')"
|
||||
:placeholder="t('origins.geolocation')"
|
||||
>
|
||||
<template #append>
|
||||
<v-tooltip top>
|
||||
<template #activator="{ props }">
|
||||
<v-icon
|
||||
icon='mdi-crosshairs-gps'
|
||||
v-bind="props"
|
||||
@click="fetchAddressFn()"
|
||||
/>
|
||||
</template>
|
||||
<span v-text="t('origins.fetchAddress')" />
|
||||
</v-tooltip>
|
||||
</template>
|
||||
<template #prepend>
|
||||
<v-tooltip v-if="isAuthenticated" top>
|
||||
<template #activator="{ props }">
|
||||
<v-icon
|
||||
icon='mdi-bookmark-plus-outline'
|
||||
:disabled="!origin"
|
||||
v-bind="props"
|
||||
@click="saveOriginFn(origin)"
|
||||
/>
|
||||
</template>
|
||||
<span v-text="t('origins.save')" />
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row wrap>
|
||||
<v-col>
|
||||
<v-btn-toggle
|
||||
v-if="smAndUp"
|
||||
v-model="state.range"
|
||||
mandatory
|
||||
>
|
||||
<v-btn v-for="r in ranges" :key="r.value" variant="outlined" :value="r.value">
|
||||
<span v-text="t(`events.range.${r.value}`)" />
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
<v-select
|
||||
v-else
|
||||
v-model="state.range"
|
||||
variant="outlined"
|
||||
:items="ranges"
|
||||
item-title="name"
|
||||
item-value="value"
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row wrap>
|
||||
<v-col cols="12" sm="8">
|
||||
<v-text-field
|
||||
v-model="state.search"
|
||||
variant="underlined"
|
||||
append-outer-icon="mdi-magnify"
|
||||
:label="t('events.filter')"
|
||||
:placeholder="t('events.filter')"
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="4">
|
||||
<v-checkbox v-model="state.includeHidden" :label="t('events.includeHidden')" hide-details />
|
||||
</v-col>
|
||||
</v-row>
|
||||
<event-list
|
||||
:events="events"
|
||||
:has-user="isAuthenticated"
|
||||
:toggle-ignore="toggleIgnore"
|
||||
/>
|
||||
</v-container>
|
||||
<v-snackbar
|
||||
v-model="snackbar.active"
|
||||
:color="snackbar.color"
|
||||
:timeout="5000"
|
||||
>
|
||||
{{ snackbar.text }}
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { useAuth0 } from '@auth0/auth0-vue'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useDisplay } from 'vuetify'
|
||||
|
||||
import { useI18n } from '#i18n'
|
||||
import { useState } from '~/store'
|
||||
import type { FindEventsQueryVariables } from '~~/graphql/generated/operations'
|
||||
import {
|
||||
useFetchAddressLazyQuery,
|
||||
useFindEventsQuery,
|
||||
useSaveOriginMutation,
|
||||
useToggleIgnoreBandMutation,
|
||||
useToggleIgnoreCityMutation,
|
||||
useToggleIgnoreDanceHallMutation,
|
||||
useToggleIgnoreMunicipalityMutation,
|
||||
useToggleIgnoreStateMutation,
|
||||
} from '~~/graphql/generated/operations'
|
||||
|
||||
import EventList from './event-list.vue'
|
||||
|
||||
const state = useState()
|
||||
const { smAndUp } = useDisplay()
|
||||
const range = computed(() => state.range)
|
||||
const { t } = useI18n()
|
||||
state.setTitle(t('app.links.events'))
|
||||
const { isAuthenticated } = useAuth0()
|
||||
const variables = ref<FindEventsQueryVariables>({
|
||||
range: state.range,
|
||||
includeOrigins: isAuthenticated.value || false,
|
||||
search: state.search,
|
||||
includeHidden: state.includeHidden,
|
||||
})
|
||||
const { result, refetch } = useFindEventsQuery(() => variables.value)
|
||||
watch([state, isAuthenticated], () => {
|
||||
variables.value.range = state.range
|
||||
variables.value.search = state.search
|
||||
variables.value.includeHidden = state.includeHidden
|
||||
variables.value.includeOrigins = isAuthenticated.value || false
|
||||
refetch(variables.value)
|
||||
})
|
||||
const events = computed(() => result.value?.events ?? [])
|
||||
const origins = computed(() => result.value?.origins ?? [])
|
||||
const ranges = [
|
||||
{ name: '1 vecka', value: 'ONE_WEEK' },
|
||||
{ name: '2 veckor', value: 'TWO_WEEKS' },
|
||||
{ name: '1 månad', value: 'ONE_MONTH' },
|
||||
{ name: '1 kvartal', value: 'ONE_QUARTER' },
|
||||
{ name: '1 år', value: 'ONE_YEAR' },
|
||||
]
|
||||
const snackbar = ref({ active: false, color: 'success', text: '' })
|
||||
|
||||
const origin = ref('')
|
||||
const fetchEvents = () => {
|
||||
const originsTemp = [...(origins.value || [])]
|
||||
if (origin.value) {
|
||||
originsTemp.push(origin.value)
|
||||
}
|
||||
variables.value = {
|
||||
...variables.value,
|
||||
range: state.range,
|
||||
origins: originsTemp,
|
||||
includeOrigins: isAuthenticated.value || false,
|
||||
}
|
||||
refetch(variables.value)
|
||||
}
|
||||
|
||||
const { mutate: doToggleIgnoreBand } = useToggleIgnoreBandMutation({})
|
||||
const { mutate: doToggleIgnoreDanceHall } = useToggleIgnoreDanceHallMutation({})
|
||||
const { mutate: doToggleIgnoreCity } = useToggleIgnoreCityMutation({})
|
||||
const { mutate: doToggleIgnoreMunicipality } = useToggleIgnoreMunicipalityMutation({})
|
||||
const { mutate: doToggleIgnoreState } = useToggleIgnoreStateMutation({})
|
||||
|
||||
const toggleIgnoreSuccess = (name: string) => {
|
||||
return () => {
|
||||
fetchEvents()
|
||||
snackbar.value.color = 'success'
|
||||
snackbar.value.text = `${name} har dolts`
|
||||
snackbar.value.active = true
|
||||
}
|
||||
}
|
||||
|
||||
const toggleIgnoreFailed = (name: string) => {
|
||||
return () => {
|
||||
snackbar.value.color = 'error'
|
||||
snackbar.value.text = `${name} kunde inte döljas`
|
||||
snackbar.value.active = true
|
||||
}
|
||||
}
|
||||
|
||||
const toggleIgnore = (type: string, name: string) => {
|
||||
switch (type) {
|
||||
case 'band':
|
||||
doToggleIgnoreBand({ name })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed)
|
||||
break
|
||||
case 'danceHall':
|
||||
doToggleIgnoreDanceHall({ name })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed)
|
||||
break
|
||||
case 'city':
|
||||
doToggleIgnoreCity({ name })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed)
|
||||
break
|
||||
case 'municipality':
|
||||
doToggleIgnoreMunicipality({ name })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed)
|
||||
break
|
||||
case 'state':
|
||||
doToggleIgnoreState({ name })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed)
|
||||
break
|
||||
default:
|
||||
}
|
||||
}
|
||||
|
||||
const { mutate: doSaveOrigin } = useSaveOriginMutation({})
|
||||
const { refetch: doFetchAddress, load: loadFetchAddress } = useFetchAddressLazyQuery({ latlng: '' })
|
||||
const fetchAddressFn = () => {
|
||||
if (window.navigator) {
|
||||
window.navigator.geolocation.getCurrentPosition((pos) => {
|
||||
loadFetchAddress()
|
||||
doFetchAddress({
|
||||
latlng: `${pos.coords.latitude},${pos.coords.longitude}`,
|
||||
})?.then((result) => {
|
||||
origin.value = result.data.address
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
const saveOriginFn = (o: string) =>
|
||||
doSaveOrigin({ origin: o }).then(() => {
|
||||
origin.value = ''
|
||||
fetchEvents()
|
||||
})
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<v-card flat variant="outlined" rounded="xl" class="mx-3 my-3">
|
||||
<v-card-title>
|
||||
<span v-text="t(titleKey, model.length)" />
|
||||
</v-card-title>
|
||||
<v-list>
|
||||
<v-list-item v-for="item in model" :key="item" :title="item">
|
||||
<template #prepend>
|
||||
<v-list-item-action @click="toggleIgnore(type, item)">
|
||||
<v-tooltip top>
|
||||
<template #activator="{ props }">
|
||||
<v-icon icon='mdi-delete-outline' v-bind="props" />
|
||||
</template>
|
||||
<span v-text="t('filters.remove')" />
|
||||
</v-tooltip>
|
||||
</v-list-item-action>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
defineProps({
|
||||
model: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
titleKey: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
toggleIgnore: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<div :key="isAuthenticated ? 'true' : 'false'">
|
||||
<v-container fluid grid-list-md class="app-fade-in">
|
||||
<v-row wrap>
|
||||
<v-col cols="12">
|
||||
<v-card>
|
||||
<v-container fluid grid-list-md>
|
||||
<v-row wrap>
|
||||
<v-col xs="12" sm="12" md="4" lg="4">
|
||||
<list
|
||||
:model="bands || []"
|
||||
title-key="filters.band"
|
||||
type="band"
|
||||
:toggle-ignore="toggleIgnore"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col xs="12" sm="12" md="4" lg="4">
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<list
|
||||
:model="states || []"
|
||||
title-key="filters.state"
|
||||
type="state"
|
||||
:toggle-ignore="toggleIgnore"
|
||||
/>
|
||||
<list
|
||||
:model="municipalities || []"
|
||||
title-key="filters.municipality"
|
||||
type="municipality"
|
||||
:toggle-ignore="toggleIgnore"
|
||||
/>
|
||||
<list
|
||||
:model="cities || []"
|
||||
title-key="filters.city"
|
||||
type="city"
|
||||
:toggle-ignore="toggleIgnore"
|
||||
/>
|
||||
<list
|
||||
:model="danceHalls || []"
|
||||
title-key="filters.hall"
|
||||
type="danceHall"
|
||||
:toggle-ignore="toggleIgnore"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<v-snackbar
|
||||
v-model="snackbar.active"
|
||||
:color="snackbar.color"
|
||||
:timeout="5000"
|
||||
>
|
||||
{{ snackbar.text }}
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { useAuth0 } from '@auth0/auth0-vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import { useI18n } from '#i18n'
|
||||
import { useState } from '~/store'
|
||||
import {
|
||||
useFetchFiltersQuery,
|
||||
useToggleIgnoreBandMutation,
|
||||
useToggleIgnoreCityMutation,
|
||||
useToggleIgnoreDanceHallMutation,
|
||||
useToggleIgnoreMunicipalityMutation,
|
||||
useToggleIgnoreStateMutation,
|
||||
} from '~~/graphql/generated/operations'
|
||||
|
||||
import List from './filter-list.vue'
|
||||
|
||||
const state = useState()
|
||||
const { t } = useI18n()
|
||||
state.setTitle(t('app.links.filters'))
|
||||
const { isAuthenticated } = useAuth0()
|
||||
const { result, refetch } = useFetchFiltersQuery()
|
||||
const bands = computed(() => result.value?.bands ?? [])
|
||||
const cities = computed(() => result.value?.cities ?? [])
|
||||
const danceHalls = computed(() => result.value?.danceHalls ?? [])
|
||||
const municipalities = computed(() => result.value?.municipalities ?? [])
|
||||
const states = computed(() => result.value?.states ?? [])
|
||||
const snackbar = ref({ active: false, color: 'success', text: '' })
|
||||
const { mutate: doToggleIgnoreBand } = useToggleIgnoreBandMutation({})
|
||||
const { mutate: doToggleIgnoreDanceHall } = useToggleIgnoreDanceHallMutation({})
|
||||
const { mutate: doToggleIgnoreCity } = useToggleIgnoreCityMutation({})
|
||||
const { mutate: doToggleIgnoreMunicipality } = useToggleIgnoreMunicipalityMutation({})
|
||||
const { mutate: doToggleIgnoreState } = useToggleIgnoreStateMutation({})
|
||||
|
||||
const toggleIgnoreSuccess = (name: string) => {
|
||||
return () => {
|
||||
refetch()
|
||||
snackbar.value.color = 'success'
|
||||
snackbar.value.text = t('filters.success', { name })
|
||||
snackbar.value.active = true
|
||||
}
|
||||
}
|
||||
|
||||
const toggleIgnoreFailed = (name: string) => {
|
||||
return () => {
|
||||
snackbar.value.color = 'error'
|
||||
snackbar.value.text = t('filters.failure', { name })
|
||||
snackbar.value.active = true
|
||||
}
|
||||
}
|
||||
|
||||
const toggleIgnore = (type: string, name: string) => {
|
||||
switch (type) {
|
||||
case 'band':
|
||||
doToggleIgnoreBand({ name })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed)
|
||||
break
|
||||
case 'danceHall':
|
||||
doToggleIgnoreDanceHall({ name })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed)
|
||||
break
|
||||
case 'city':
|
||||
doToggleIgnoreCity({ name })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed)
|
||||
break
|
||||
case 'municipality':
|
||||
doToggleIgnoreMunicipality({ name })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed)
|
||||
break
|
||||
case 'state':
|
||||
doToggleIgnoreState({ name })
|
||||
.then(toggleIgnoreSuccess(name))
|
||||
.catch(toggleIgnoreFailed)
|
||||
break
|
||||
default:
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div :key="isAuthenticated ? 'true' : 'false'">
|
||||
<v-container fluid grid-list-md class="app-fade-in">
|
||||
<v-layout row wrap>
|
||||
<v-col xs="12">
|
||||
<v-text-field
|
||||
v-model="origin"
|
||||
variant="underlined"
|
||||
:label="t('origins.origin')"
|
||||
:placeholder="t('origins.geolocation')"
|
||||
>
|
||||
<template #append>
|
||||
<v-tooltip top>
|
||||
<template #activator="{ props }">
|
||||
<v-icon
|
||||
icon='mdi-crosshairs-gps'
|
||||
v-bind="props"
|
||||
@click="fetchAddressFn()"
|
||||
/>
|
||||
</template>
|
||||
<span v-text="t('origins.fetchAddress')" />
|
||||
</v-tooltip>
|
||||
</template>
|
||||
<template #prepend>
|
||||
<v-tooltip top>
|
||||
<template #activator="{ props }">
|
||||
<v-icon
|
||||
icon='mdi-bookmark-plus-outline'
|
||||
:disabled="!origin"
|
||||
v-bind="props"
|
||||
@click="saveOriginFn(origin)"
|
||||
/>
|
||||
</template>
|
||||
<span v-text="t('origins.save')" />
|
||||
</v-tooltip>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
</v-layout>
|
||||
<v-layout v-for="o in origins" :key="o" row wrap>
|
||||
<v-col xs="12">
|
||||
<v-tooltip top>
|
||||
<template #activator="{ props }">
|
||||
<v-icon
|
||||
icon='mdi-delete-outline'
|
||||
v-bind="props"
|
||||
@click="removeOriginFn(o)"
|
||||
/>
|
||||
</template>
|
||||
<span v-text="t('origins.remove')" />
|
||||
</v-tooltip>
|
||||
<span>{{ o }}</span>
|
||||
</v-col>
|
||||
</v-layout>
|
||||
</v-container>
|
||||
<v-snackbar
|
||||
v-model="snackbar.active"
|
||||
:color="snackbar.color"
|
||||
:timeout="5000"
|
||||
>
|
||||
{{ snackbar.text }}
|
||||
</v-snackbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { useAuth0 } from '@auth0/auth0-vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
import { useI18n } from '#i18n'
|
||||
import { useState } from '~/store'
|
||||
import {
|
||||
useFetchAddressLazyQuery,
|
||||
useFindOriginsQuery,
|
||||
useRemoveOriginMutation,
|
||||
useSaveOriginMutation,
|
||||
} from '~~/graphql/generated/operations'
|
||||
|
||||
const state = useState()
|
||||
const { t } = useI18n()
|
||||
state.setTitle(t('app.links.origins'))
|
||||
const { isAuthenticated } = useAuth0()
|
||||
const { result, refetch } = useFindOriginsQuery()
|
||||
const origins = computed(() => result.value?.origins ?? [])
|
||||
const snackbar = ref({ active: false, color: 'success', text: '' })
|
||||
const { mutate: doSaveOrigin } = useSaveOriginMutation({})
|
||||
const { mutate: doRemoveOrigin } = useRemoveOriginMutation({})
|
||||
const { refetch: doFetchAddress, load } = useFetchAddressLazyQuery({ latlng: '' })
|
||||
const origin = ref('')
|
||||
const fetchAddressFn = () => {
|
||||
if (window.navigator) {
|
||||
window.navigator.geolocation.getCurrentPosition((pos) => {
|
||||
load()
|
||||
doFetchAddress({
|
||||
latlng: `${pos.coords.latitude},${pos.coords.longitude}`,
|
||||
})?.then((res) => {
|
||||
origin.value = res.data.address
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
const saveOriginFn = (o: string) =>
|
||||
doSaveOrigin({ origin: o }).then(() => {
|
||||
refetch()
|
||||
origin.value = ''
|
||||
})
|
||||
const removeOriginFn = (o: string) =>
|
||||
doRemoveOrigin({ origin: o }).then(() => refetch())
|
||||
</script>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<v-app :key='locale + isAuthenticated'>
|
||||
<v-navigation-drawer v-model='nav' temporary app>
|
||||
<v-list dense>
|
||||
<v-list-item v-if='isAuthenticated && user' :title='user.name' :prepend-avatar='user.picture' />
|
||||
<v-list-item>
|
||||
<v-switch v-model='darkMode' color='primary' :label="t('app.darkMode')" hide-details class='ms-1' />
|
||||
</v-list-item>
|
||||
<!-- eslint-disable-next-line vue/no-bare-strings-in-template -->
|
||||
<v-list-item title='In English' :to="switchLocalePath('en')">
|
||||
<template #prepend>
|
||||
<!-- eslint-disable-next-line vue/no-bare-strings-in-template -->
|
||||
<div class='d-flex d-inline-flex text-h5 me-8'>
|
||||
🇬🇧
|
||||
</div>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<!-- eslint-disable-next-line vue/no-bare-strings-in-template -->
|
||||
<v-list-item title='På Svenska' :to="switchLocalePath('sv')">
|
||||
<template #prepend>
|
||||
<!-- eslint-disable-next-line vue/no-bare-strings-in-template -->
|
||||
<div class='d-flex d-inline-flex text-h5 me-8'>
|
||||
🇸🇪
|
||||
</div>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item to='/' :title="t('app.links.events')" prepend-icon='mdi-calendar-outline' />
|
||||
<v-list-item v-if='isAuthenticated' to='/origins/' :title="t('app.links.origins')" prepend-icon='mdi-home' />
|
||||
<v-list-item
|
||||
v-if='isAuthenticated' to='/filters/' :title="t('app.links.filters')"
|
||||
prepend-icon='mdi-magnify' />
|
||||
<v-list-item v-if='!user' link :title="t('app.login')" prepend-icon='mdi-login' @click='doLogin' />
|
||||
<v-list-item
|
||||
v-if='isAuthenticated' link :title="t('app.logout')" prepend-icon='mdi-logout'
|
||||
@click='doLogout' />
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
<v-app-bar app scroll-off-screen>
|
||||
<v-app-bar-nav-icon @click='nav = !nav' />
|
||||
<v-toolbar-title :title='title' />
|
||||
<v-spacer />
|
||||
<v-toolbar-items>
|
||||
<v-list-item v-if='isAuthenticated && user' :prepend-avatar='user.picture' :title='user.name' />
|
||||
</v-toolbar-items>
|
||||
</v-app-bar>
|
||||
<v-main>
|
||||
<v-container v-if='!isLoading' fluid>
|
||||
<slot />
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { useAuth0 } from '@auth0/auth0-vue'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
import { useSwitchLocalePath } from '#i18n'
|
||||
import { useState } from '~/store'
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
const { $faro } = useNuxtApp()
|
||||
const switchLocalePath = useSwitchLocalePath()
|
||||
const state = useState()
|
||||
const { isLoading, isAuthenticated, user, loginWithRedirect, logout } =
|
||||
useAuth0()
|
||||
const doLogin = () => {
|
||||
loginWithRedirect({
|
||||
appState: { targetUrl: window.location.pathname },
|
||||
})
|
||||
}
|
||||
const doLogout = () => {
|
||||
logout({
|
||||
logoutParams: {
|
||||
returnTo: window.location.origin,
|
||||
},
|
||||
})
|
||||
}
|
||||
const theme = useTheme()
|
||||
onMounted(() => {
|
||||
if (state.darkMode) {
|
||||
theme.global.name.value = 'dark'
|
||||
} else {
|
||||
theme.global.name.value = 'light'
|
||||
}
|
||||
})
|
||||
const darkMode = computed<boolean>({
|
||||
get: () => theme.global.current.value.dark,
|
||||
set: (value: boolean) => {
|
||||
state.setDarkMode(value)
|
||||
if (value) {
|
||||
theme.global.name.value = 'dark'
|
||||
} else {
|
||||
theme.global.name.value = 'light'
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const nav = ref(false)
|
||||
const title = computed(() => state.title)
|
||||
watchEffect(() => {
|
||||
if ($faro && !isLoading.value && user.value) {
|
||||
$faro.api.setUser({
|
||||
id: user.value.sub,
|
||||
email: user.value.email,
|
||||
username: user.value.preferred_username,
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<filters />
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { useI18n } from '#i18n'
|
||||
import { useHead } from '#imports'
|
||||
|
||||
import Filters from '../components/pages/filters/filter-page.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
useHead({
|
||||
title: t('filters.title'),
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<events />
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { useI18n } from '#i18n'
|
||||
import { useHead } from '#imports'
|
||||
import Events from '~/components/pages/events/event-page.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
useHead({
|
||||
title: t('events.title'),
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<origins />
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { useI18n } from '#i18n'
|
||||
import { useHead } from '#imports'
|
||||
|
||||
import Origins from '../components/pages/origins/origin-page.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
useHead({
|
||||
title: t('origins.title'),
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,46 @@
|
||||
import { FetchTransport, getWebInstrumentations, initializeFaro,InternalLoggerLevel } from '@grafana/faro-web-sdk'
|
||||
import { TracingInstrumentation } from '@grafana/faro-web-tracing'
|
||||
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch'
|
||||
|
||||
import { envConfig } from '~/utils/environment'
|
||||
const config = envConfig(window.location.hostname)
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
if (config.grafanaUrl) {
|
||||
const faro = initializeFaro({
|
||||
app: {
|
||||
name: 'Shiny Frontend',
|
||||
version: '1.0.0',
|
||||
environment: config.name,
|
||||
},
|
||||
sessionTracking: {
|
||||
samplingRate: config.tracesSampleRate,
|
||||
},
|
||||
instrumentations: [
|
||||
// Mandatory, omits default instrumentations otherwise.
|
||||
...getWebInstrumentations(),
|
||||
|
||||
// Tracing package to get end-to-end visibility for HTTP requests.
|
||||
new TracingInstrumentation({
|
||||
instrumentations: [
|
||||
new FetchInstrumentation({
|
||||
ignoreUrls: [
|
||||
config.grafanaUrl,
|
||||
config.apiUrl,
|
||||
new RegExp('.*/sw.js$'),
|
||||
new RegExp('.*_payload.json.*'),
|
||||
new RegExp(`https://${config.auth.domain}/*`),
|
||||
],
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
internalLoggerLevel: InternalLoggerLevel.VERBOSE,
|
||||
transports: [
|
||||
new FetchTransport({ url: config.grafanaUrl }),
|
||||
],
|
||||
})
|
||||
console.log(`initialized faro for ${config.grafanaUrl}, sample-rate ${config.tracesSampleRate * 100}%`)
|
||||
nuxtApp.provide('faro', faro)
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,107 @@
|
||||
import { ApolloClient, ApolloLink, createHttpLink, from, InMemoryCache, split } from '@apollo/client/core'
|
||||
import { setContext } from '@apollo/client/link/context'
|
||||
import { WebSocketLink } from '@apollo/client/link/ws'
|
||||
import { getMainDefinition } from '@apollo/client/utilities'
|
||||
import type { GetTokenSilentlyOptions } from '@auth0/auth0-spa-js'
|
||||
import type { Auth0VueClient } from '@auth0/auth0-vue'
|
||||
import { SpanKind, TraceFlags } from '@opentelemetry/api'
|
||||
import { DefaultApolloClient, provideApolloClient } from '@vue/apollo-composable'
|
||||
|
||||
import { defineNuxtPlugin, useNuxtApp } from '#app'
|
||||
import { envConfig } from '~/utils/environment'
|
||||
|
||||
const apiUrl = envConfig(window.location.hostname).apiUrl
|
||||
const wsUrl = apiUrl.replace(/^http/, 'ws')
|
||||
|
||||
const cache = new InMemoryCache({
|
||||
typePolicies: {
|
||||
},
|
||||
})
|
||||
|
||||
const getToken = async (options: GetTokenSilentlyOptions) => {
|
||||
const nuxtApp = useNuxtApp()
|
||||
const auth0: Auth0VueClient = nuxtApp.$auth0 as Auth0VueClient
|
||||
return await auth0.getAccessTokenSilently(options).catch(() => {
|
||||
return undefined
|
||||
})
|
||||
}
|
||||
|
||||
const httpLink = createHttpLink({
|
||||
uri: apiUrl,
|
||||
})
|
||||
|
||||
const wsLink = new WebSocketLink({
|
||||
uri: wsUrl,
|
||||
options: {
|
||||
reconnect: true,
|
||||
lazy: true,
|
||||
connectionParams: () => {
|
||||
return getToken({}).then((token) => ({
|
||||
authToken: token,
|
||||
}))
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const authLink = setContext(async (_, { headers }) => {
|
||||
return await getToken({}).then((token) => ({
|
||||
headers: {
|
||||
...headers,
|
||||
authorization: token ? `Bearer ${token}` : '',
|
||||
},
|
||||
}))
|
||||
})
|
||||
|
||||
const createSpanLink = new ApolloLink((operation, forward) => {
|
||||
const nuxtApp = useNuxtApp()
|
||||
if (nuxtApp.$faro) {
|
||||
const { trace } = nuxtApp.$faro.api.getOTEL()
|
||||
const span = trace.getTracer('default').startSpan(`gql.${operation.operationName}`, {
|
||||
kind: SpanKind.INTERNAL, // 0: Internal, 1: Server, 2: Client, 3: Producer, 4: Consumer
|
||||
})
|
||||
const spanContext = span.spanContext()
|
||||
const traceParent = '00' + '-' + spanContext.traceId + '-' + spanContext.spanId + '-0' + Number(spanContext.traceFlags || TraceFlags.NONE).toString(16)
|
||||
operation.setContext({ span, headers: { ...operation.getContext().headers, 'traceparent': traceParent } })
|
||||
|
||||
return forward(operation).map((data) => {
|
||||
span.end()
|
||||
return data
|
||||
})
|
||||
}
|
||||
return forward(operation)
|
||||
})
|
||||
|
||||
const link =
|
||||
from([
|
||||
createSpanLink,
|
||||
split(
|
||||
({ query }) => {
|
||||
const definition = getMainDefinition(query)
|
||||
return (
|
||||
definition.kind === 'OperationDefinition' &&
|
||||
definition.operation === 'subscription'
|
||||
)
|
||||
},
|
||||
authLink.concat(wsLink),
|
||||
authLink.concat(httpLink),
|
||||
),
|
||||
])
|
||||
|
||||
const instance = new ApolloClient({
|
||||
connectToDevTools: true,
|
||||
link,
|
||||
cache,
|
||||
defaultOptions: {
|
||||
query: {
|
||||
fetchPolicy: 'cache-first',
|
||||
},
|
||||
watchQuery: {
|
||||
fetchPolicy: 'cache-and-network',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
nuxtApp.provide(DefaultApolloClient[Symbol.toStringTag], instance)
|
||||
provideApolloClient(instance)
|
||||
})
|
||||
@@ -0,0 +1,11 @@
|
||||
import { createAuth0 } from '@auth0/auth0-vue'
|
||||
|
||||
import { defineNuxtPlugin } from '#app'
|
||||
import { envConfig } from '~/utils/environment'
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
const options = envConfig(window.location.hostname).auth
|
||||
const auth0 = createAuth0(options)
|
||||
nuxtApp.vueApp.use(auth0)
|
||||
nuxtApp.provide('auth0', auth0)
|
||||
})
|
||||
@@ -0,0 +1,15 @@
|
||||
import '@mdi/font/css/materialdesignicons.css'
|
||||
import 'vuetify/styles'
|
||||
|
||||
import { createVuetify } from 'vuetify'
|
||||
|
||||
import { defineNuxtPlugin } from '#app'
|
||||
|
||||
export default defineNuxtPlugin((app) => {
|
||||
const vuetify = createVuetify({
|
||||
theme: {
|
||||
defaultTheme: 'light',
|
||||
},
|
||||
})
|
||||
app.vueApp.use(vuetify)
|
||||
})
|
||||
@@ -0,0 +1,54 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import { Range } from '~~/graphql/generated/operations'
|
||||
|
||||
export const useState = defineStore(
|
||||
'state',
|
||||
() => {
|
||||
const title = ref<string>('')
|
||||
const darkMode = ref(false)
|
||||
const locale = ref('sv')
|
||||
const range = ref<Range | undefined>(Range.OneWeek)
|
||||
const search = ref('')
|
||||
const includeHidden = ref(false)
|
||||
const setTitle = (s: string) => {
|
||||
title.value = s
|
||||
}
|
||||
const setDarkMode = (b: boolean) => {
|
||||
darkMode.value = b
|
||||
}
|
||||
const setLocale = (l: string) => {
|
||||
locale.value = l
|
||||
}
|
||||
const setSearch = (s: string) => {
|
||||
search.value = s
|
||||
}
|
||||
const setIncludeHidden = (b: boolean) => {
|
||||
includeHidden.value = b
|
||||
}
|
||||
const setRange = (r: Range | undefined) => {
|
||||
range.value = r
|
||||
}
|
||||
return {
|
||||
title,
|
||||
darkMode,
|
||||
locale,
|
||||
search,
|
||||
includeHidden,
|
||||
range,
|
||||
setTitle,
|
||||
setDarkMode,
|
||||
setLocale,
|
||||
setSearch,
|
||||
setIncludeHidden,
|
||||
setRange,
|
||||
}
|
||||
},
|
||||
{
|
||||
persist: {
|
||||
storage: localStorage,
|
||||
key: 'dancefinder_state',
|
||||
},
|
||||
},
|
||||
)
|
||||
@@ -0,0 +1,49 @@
|
||||
import type { Auth0ClientOptions, CacheLocation } from '@auth0/auth0-spa-js'
|
||||
|
||||
interface EnvConfig {
|
||||
name: string
|
||||
apiUrl: string
|
||||
auth: Auth0ClientOptions
|
||||
dev: boolean
|
||||
tracesSampleRate: number
|
||||
grafanaUrl: string
|
||||
}
|
||||
|
||||
export const envConfig = (host: string): EnvConfig => {
|
||||
const options = {
|
||||
useRefreshTokens: true,
|
||||
cacheLocation: 'localstorage' as CacheLocation,
|
||||
authorizationParams: {
|
||||
audience: 'http://dancefinder.unbound.se',
|
||||
redirect_uri: window.location.origin,
|
||||
},
|
||||
}
|
||||
const prod = {
|
||||
...options,
|
||||
domain: 'unbound.eu.auth0.com',
|
||||
clientId: 'orQfnvCPUR5C3mJkKoiWLQHOVQsBn60e',
|
||||
}
|
||||
|
||||
switch (host) {
|
||||
case 'localhost':
|
||||
return {
|
||||
name: 'development',
|
||||
apiUrl: 'http://localhost:6080/query',
|
||||
auth: prod,
|
||||
dev: true,
|
||||
tracesSampleRate: 1.0,
|
||||
grafanaUrl: '',
|
||||
}
|
||||
case 'dancefinder.unbound.se':
|
||||
return {
|
||||
name: 'production',
|
||||
apiUrl: 'https://dancefinder.unbound.se/query',
|
||||
auth: prod,
|
||||
dev: false,
|
||||
tracesSampleRate: 1.0,
|
||||
grafanaUrl: 'https://faro-collector-prod-eu-west-0.grafana.net/collect/532676b975308d70605d856635721a61',
|
||||
}
|
||||
default:
|
||||
throw new Error(`unexpected host: ${host}`)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { gql as apolloGql } from '@apollo/client/core'
|
||||
import { markRaw } from 'vue'
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export function gql(literals: string | readonly string[], ...args: any[]) {
|
||||
return markRaw(apolloGql(literals, ...args))
|
||||
}
|
||||
Reference in New Issue
Block a user