69 lines
1.9 KiB
Vue
69 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { useGeolocation } from "@vueuse/core";
|
|
import { watch } from "vue";
|
|
import { locations } from "../objects/PosDepartmentStepMobileFlow.vue";
|
|
|
|
const props = withDefaults(defineProps<{
|
|
enableHighAccuracy?: boolean;
|
|
maximumAge?: number;
|
|
timeout?: number;
|
|
}>(), {
|
|
enableHighAccuracy: true,
|
|
maximumAge: 30000,
|
|
timeout: 27000,
|
|
});
|
|
|
|
const emits = defineEmits<{
|
|
(e: 'location-updated', coords: { latitude: number | null; longitude: number | null }): void;
|
|
}>();
|
|
|
|
const { coords, locatedAt, error, resume, pause } = useGeolocation({
|
|
enableHighAccuracy: props.enableHighAccuracy,
|
|
maximumAge: props.maximumAge,
|
|
timeout: props.timeout,
|
|
});
|
|
|
|
const getLocationTimestamp = () => {
|
|
const timestamp = Number(locatedAt.value);
|
|
return Number.isFinite(timestamp) ? timestamp : Date.now();
|
|
};
|
|
|
|
const onUpdate = (newCoords: { latitude: number | null; longitude: number | null }) => {
|
|
const normalizedCoords = locations.normalizeCoordinatePair(newCoords);
|
|
if (normalizedCoords) {
|
|
const timestamp = getLocationTimestamp();
|
|
locations.set({
|
|
coords: normalizedCoords,
|
|
timestamp: new Date(timestamp),
|
|
locatedAt: timestamp,
|
|
errorMessage: error.value ? error.value.message : null,
|
|
})
|
|
emits('location-updated', normalizedCoords);
|
|
}
|
|
};
|
|
watch(coords, (newCoords) => {
|
|
onUpdate(newCoords);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div v-show="false">
|
|
<p>Latitude: {{ coords.latitude }}</p>
|
|
<p>Longitude: {{ coords.longitude }}</p>
|
|
<p>Located At: {{ new Date(locatedAt).toLocaleString() }}</p>
|
|
<p v-if="error">Error: {{ error.message }}</p>
|
|
<template v-if="false">
|
|
<button @click="resume">Resume</button>
|
|
<button @click="pause">Pause</button>
|
|
<button @click="onUpdate({
|
|
latitude: 55.613448,
|
|
longitude: 12.495521
|
|
})">Update Now</button>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|