123 lines
3.6 KiB
Vue
123 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')"
|
|
>
|
|
<v-tooltip top slot="append-outer">
|
|
<template v-slot:activator="{ on }">
|
|
<v-icon v-on="on" v-on:click="fetchAddress()"
|
|
>mdi-crosshairs-gps</v-icon
|
|
>
|
|
</template>
|
|
<span v-text="$t('origins.fetchAddress')" />
|
|
</v-tooltip>
|
|
<v-tooltip top slot="prepend">
|
|
<template v-slot:activator="{ on }">
|
|
<v-icon
|
|
v-on="on"
|
|
:disabled="!origin"
|
|
v-on:click="saveOrigin(origin)"
|
|
>mdi-bookmark-plus-outline</v-icon
|
|
>
|
|
</template>
|
|
<span v-text="$t('origins.save')" />
|
|
</v-tooltip>
|
|
</v-text-field>
|
|
</v-flex>
|
|
</v-layout>
|
|
<template>
|
|
<v-layout row wrap v-for="origin in origins" :key="origin">
|
|
<v-flex xs12>
|
|
<v-tooltip top slot="prepend">
|
|
<template v-slot:activator="{ on }">
|
|
<v-icon v-on="on" v-on:click="removeOrigin(origin)"
|
|
>mdi-delete-outline
|
|
</v-icon>
|
|
</template>
|
|
<span v-text="$t('origins.remove')" />
|
|
</v-tooltip>
|
|
<span>{{ origin }}</span>
|
|
</v-flex>
|
|
</v-layout>
|
|
</template>
|
|
</v-container>
|
|
<v-snackbar
|
|
v-model="snackbar.active"
|
|
:color="snackbar.color"
|
|
:timeout="5000"
|
|
>
|
|
{{ snackbar.text }}
|
|
</v-snackbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref } from '@vue/composition-api'
|
|
import { useMutations } from '@u3u/vue-hooks'
|
|
import {
|
|
fetchAddress,
|
|
findOrigins,
|
|
removeOrigin,
|
|
saveOrigin
|
|
} from '../../../utils/graph-client'
|
|
import {
|
|
useLazyQuery,
|
|
useMutation,
|
|
useQuery,
|
|
useResult
|
|
} from '../../../plugins/apollo'
|
|
import useAuth from '../../../plugins/auth'
|
|
import { useTranslation } from '../../../plugins/i18n'
|
|
|
|
export default {
|
|
setup() {
|
|
const { setTitle } = useMutations(['setTitle'])
|
|
const { t } = useTranslation()
|
|
setTitle(t('app.links.origins'))
|
|
const { isAuthenticated } = useAuth()
|
|
const { data, loading, refetch } = useQuery(findOrigins)
|
|
const origins = useResult(data, [])
|
|
const snackbar = ref({ active: false, color: 'success', text: '' })
|
|
const [doSaveOrigin] = useMutation(saveOrigin)
|
|
const [doRemoveOrigin] = useMutation(removeOrigin)
|
|
const [doFetchAddress] = useLazyQuery(fetchAddress)
|
|
const origin = ref('')
|
|
const fetchAddressFn = () => {
|
|
if (window.navigator) {
|
|
window.navigator.geolocation.getCurrentPosition(pos => {
|
|
doFetchAddress({
|
|
variables: {
|
|
latlng: `${pos.coords.latitude},${pos.coords.longitude}`
|
|
}
|
|
}).then(res => {
|
|
origin.value = res.address
|
|
})
|
|
})
|
|
}
|
|
}
|
|
const saveOriginFn = o =>
|
|
doSaveOrigin({ variables: { origin: o } }).then(() => {
|
|
refetch()
|
|
origin.value = ''
|
|
})
|
|
const removeOriginFn = o =>
|
|
doRemoveOrigin({ variables: { origin: o } }).then(() => refetch())
|
|
return {
|
|
isAuthenticated,
|
|
loading,
|
|
origins,
|
|
snackbar,
|
|
origin,
|
|
saveOrigin: saveOriginFn,
|
|
removeOrigin: removeOriginFn,
|
|
fetchAddress: fetchAddressFn
|
|
}
|
|
}
|
|
}
|
|
</script>
|