137 lines
4.3 KiB
Vue
137 lines
4.3 KiB
Vue
<script setup>
|
|
import { Button } from '@/components/ui/button/index.js'
|
|
import { useForm } from 'vee-validate'
|
|
import { FormControl, FormField, FormItem, FormLabel } from '@/components/ui/form/index.js'
|
|
import { Input } from '@/components/ui/input/index.js'
|
|
import { toTypedSchema } from '@vee-validate/zod'
|
|
import { z } from 'zod'
|
|
import { onMounted, onUnmounted, ref } from 'vue'
|
|
import { AlertCircle, ArrowLeft, CircleCheckBig, Send } from 'lucide-vue-next'
|
|
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert/index.js'
|
|
import { useAuthStore } from '@/stores/auth.js'
|
|
import { API_BASE_URL } from '@/config.js'
|
|
|
|
const authStore = useAuthStore()
|
|
|
|
const formSchema = toTypedSchema(
|
|
z.object({
|
|
latitude: z.number(),
|
|
longitude: z.number()
|
|
})
|
|
)
|
|
const form = useForm({
|
|
validationSchema: formSchema
|
|
})
|
|
|
|
const formContainer = ref(null)
|
|
const latitudeInput = ref(null)
|
|
const longitudeInput = ref(null)
|
|
|
|
const formStatus = ref({
|
|
sending: false,
|
|
sent: false,
|
|
error: false,
|
|
errorMsg: ''
|
|
})
|
|
|
|
const onSubmit = form.handleSubmit(async (values) => {
|
|
if (!authStore.isAuth) return
|
|
|
|
console.log('Envoi de la localisation...')
|
|
formContainer.value.classList.add('hidden')
|
|
formStatus.value.sending = true
|
|
|
|
const response = await fetch(API_BASE_URL + '/location', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-admin-token': authStore.adminToken
|
|
},
|
|
body: JSON.stringify({
|
|
latitude: values.latitude,
|
|
longitude: values.longitude
|
|
})
|
|
})
|
|
if (!response.ok) {
|
|
console.log('POST post API failed: ' + response.statusText + '\n\n' + response.body)
|
|
formStatus.value.sending = false
|
|
formStatus.value.error = true
|
|
formStatus.value.errorMsg =
|
|
"Une erreur est survenue lors de l'envoi du poste : " + response.statusText
|
|
formContainer.value.classList.remove('hidden')
|
|
return
|
|
}
|
|
|
|
formStatus.value.sending = false
|
|
formStatus.value.sent = true
|
|
})
|
|
|
|
let geoWatchId = null
|
|
|
|
onMounted(() => {
|
|
geoWatchId = navigator.geolocation.watchPosition((position) => {
|
|
console.log(position)
|
|
form.setFieldValue('latitude', position.coords.latitude)
|
|
form.setFieldValue('longitude', position.coords.longitude)
|
|
})
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
if (geoWatchId != null) {
|
|
navigator.geolocation.clearWatch(geoWatchId)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="grid grid-cols-3 grid-rows-1 mt-28 sm:mt-20 w-full justify-center items-center gap-4">
|
|
<div class="col-span-3 col-start-1 lg:col-span-1 lg:col-start-2 mx-5 lg:mx-0">
|
|
<h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl mb-6">
|
|
Envoyer la localisation
|
|
</h1>
|
|
<RouterLink to="/admin">
|
|
<Button class="mb-6">
|
|
<ArrowLeft class="mr-2" />
|
|
Retour
|
|
</Button>
|
|
</RouterLink>
|
|
<Alert variant="destructive" class="mb-6" v-if="formStatus.error">
|
|
<AlertCircle class="w-4 h-4"></AlertCircle>
|
|
<AlertTitle>Erreur...</AlertTitle>
|
|
<AlertDescription>{{ formStatus.errorMsg }}</AlertDescription>
|
|
</Alert>
|
|
<Alert class="mb-6" v-if="formStatus.sent">
|
|
<CircleCheckBig class="w-4 h-4"></CircleCheckBig>
|
|
<AlertTitle>Localisation envoyée !</AlertTitle>
|
|
</Alert>
|
|
<p v-if="formStatus.sending">Sending...</p>
|
|
<div id="form-container" ref="formContainer">
|
|
<form id="post-form" class="space-y-6" @submit="onSubmit">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<FormField ref="latitudeInput" v-slot="{ componentField }" name="latitude">
|
|
<FormItem>
|
|
<FormLabel>Latitude</FormLabel>
|
|
<FormControl>
|
|
<Input disabled v-bind="componentField"></Input>
|
|
</FormControl>
|
|
</FormItem>
|
|
</FormField>
|
|
<FormField ref="longitudeInput" v-slot="{ componentField }" name="longitude">
|
|
<FormItem>
|
|
<FormLabel>Longitude</FormLabel>
|
|
<FormControl>
|
|
<Input disabled v-bind="componentField"></Input>
|
|
</FormControl>
|
|
</FormItem>
|
|
</FormField>
|
|
</div>
|
|
<Button class="mt-6 w-full" type="submit">
|
|
<Send />
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|