126 lines
3.7 KiB
Vue
126 lines
3.7 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>
|