119 lines
3.6 KiB
Vue
119 lines
3.6 KiB
Vue
<template>
|
|
<div :key='isAuthenticated'>
|
|
<v-container fluid grid-list-md class='app-fade-in'>
|
|
<v-layout row wrap>
|
|
<v-flex xs12>
|
|
<v-text-field
|
|
v-model='origin'
|
|
:label="$t('origins.origin')"
|
|
:placeholder="$t('origins.geolocation')"
|
|
>
|
|
<template #append-outer>
|
|
<v-tooltip top>
|
|
<template #activator='{ on }'>
|
|
<v-icon v-on='on' @click='fetchAddress()'
|
|
>mdi-crosshairs-gps
|
|
</v-icon>
|
|
</template>
|
|
<span v-text="$t('origins.fetchAddress')" />
|
|
</v-tooltip>
|
|
</template>
|
|
<template #prepend>
|
|
<v-tooltip top>
|
|
<template #activator='{ on }'>
|
|
<v-icon
|
|
:disabled='!origin'
|
|
v-on='on'
|
|
@click='saveOrigin(origin)'
|
|
>mdi-bookmark-plus-outline
|
|
</v-icon>
|
|
</template>
|
|
<span v-text="$t('origins.save')" />
|
|
</v-tooltip>
|
|
</template>
|
|
</v-text-field>
|
|
</v-flex>
|
|
</v-layout>
|
|
<v-layout v-for='o in origins' :key='o' row wrap>
|
|
<v-flex xs12>
|
|
<v-tooltip top>
|
|
<template #activator='{ on }'>
|
|
<v-icon v-on='on' @click='removeOrigin(o)'
|
|
>mdi-delete-outline
|
|
</v-icon>
|
|
</template>
|
|
<span v-text="$t('origins.remove')" />
|
|
</v-tooltip>
|
|
<span>{{ o }}</span>
|
|
</v-flex>
|
|
</v-layout>
|
|
</v-container>
|
|
<v-snackbar
|
|
v-model='snackbar.active'
|
|
:color='snackbar.color'
|
|
:timeout='5000'
|
|
>
|
|
{{ snackbar.text }}
|
|
</v-snackbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang='ts'>
|
|
import { computed, defineComponent, ref } from 'vue'
|
|
import { useAuth } from '~/plugins/auth'
|
|
import { useTranslation } from '~/plugins/i18n'
|
|
import {
|
|
useFetchAddressLazyQuery,
|
|
useFindOriginsQuery,
|
|
useRemoveOriginMutation,
|
|
useSaveOriginMutation
|
|
} from '~/graphql/generated/operations'
|
|
import { useState } from '~/store'
|
|
|
|
export default defineComponent({
|
|
name: 'OriginsPage',
|
|
setup() {
|
|
const state = useState()
|
|
const { t } = useTranslation()
|
|
state.setTitle(t('app.links.origins'))
|
|
const { isAuthenticated } = useAuth()
|
|
const { result, loading, 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())
|
|
return {
|
|
isAuthenticated,
|
|
loading,
|
|
origins,
|
|
snackbar,
|
|
origin,
|
|
saveOrigin: saveOriginFn,
|
|
removeOrigin: removeOriginFn,
|
|
fetchAddress: fetchAddressFn
|
|
}
|
|
}
|
|
})
|
|
</script>
|