chore(deps): update dependency nuxt to v4
This commit is contained in:
Renovate
@@ -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>
|
||||
Reference in New Issue
Block a user