argoyle
c80fd0313c
Adds internationalization support in filters and origins pages by importing the useI18n function. Expands ESLint configuration to include new rules and plugins, ensuring improved code quality. Introduces Grafana monitoring plugin to enhance performance tracking capabilities in the application.
110 lines
3.3 KiB
Vue
110 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
|
|
icon='mdi-crosshairs-gps'
|
|
v-bind="props"
|
|
@click="fetchAddressFn()"
|
|
/>
|
|
</template>
|
|
<span v-text="t('origins.fetchAddress')" />
|
|
</v-tooltip>
|
|
</template>
|
|
<template #prepend>
|
|
<v-tooltip 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-layout>
|
|
<v-layout v-for="o in origins" :key="o" row wrap>
|
|
<v-col xs="12">
|
|
<v-tooltip 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-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 { useAuth0 } from '@auth0/auth0-vue'
|
|
import { computed, ref } from '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>
|