112 lines
3.3 KiB
Vue
112 lines
3.3 KiB
Vue
<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
|
|
v-bind="props"
|
|
@click="fetchAddressFn()"
|
|
>
|
|
mdi-crosshairs-gps
|
|
</v-icon>
|
|
</template>
|
|
<span v-text="$t('origins.fetchAddress')" />
|
|
</v-tooltip>
|
|
</template>
|
|
<template #prepend>
|
|
<v-tooltip top>
|
|
<template #activator="{ props }">
|
|
<v-icon
|
|
:disabled="!origin"
|
|
v-bind="props"
|
|
@click="saveOriginFn(origin)"
|
|
>
|
|
mdi-bookmark-plus-outline
|
|
</v-icon>
|
|
</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
|
|
v-bind="props"
|
|
@click="removeOriginFn(o)"
|
|
>
|
|
mdi-delete-outline
|
|
</v-icon>
|
|
</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 { computed, ref } from 'vue'
|
|
import { useAuth0 } from '@auth0/auth0-vue'
|
|
import { useI18n } from '#i18n'
|
|
import {
|
|
useFetchAddressLazyQuery,
|
|
useFindOriginsQuery,
|
|
useRemoveOriginMutation,
|
|
useSaveOriginMutation,
|
|
} from '~/graphql/generated/operations'
|
|
import { useState } from '~/store'
|
|
|
|
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>
|