argoyle
348e0fa045
Replace deprecated V2 props that were being silently ignored: - v-layout → v-row, grid-list-md removed, xs → cols on v-col - v-tooltip top → location="top", v-list dense → density="compact" - v-app-bar app/scroll-off-screen → scroll-behavior="hide" - append-outer-icon → append-icon, remove primary-title - headline class → text-h6, remove wrap from v-row Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
110 lines
3.3 KiB
Vue
110 lines
3.3 KiB
Vue
<template>
|
|
<div :key="isAuthenticated ? 'true' : 'false'">
|
|
<v-container fluid class="app-fade-in">
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<v-text-field
|
|
v-model="origin"
|
|
variant="underlined"
|
|
:label="t('origins.origin')"
|
|
:placeholder="t('origins.geolocation')"
|
|
>
|
|
<template #append>
|
|
<v-tooltip location="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 location="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 v-for="o in origins" :key="o">
|
|
<v-col cols="12">
|
|
<v-tooltip location="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-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 {
|
|
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>
|