MVP #5.1 #69
|
@ -1,34 +1,49 @@
|
|||
<script lang="ts">
|
||||
import { Alert, Button } from 'flowbite-svelte'
|
||||
import { createEventDispatcher, onMount } from 'svelte'
|
||||
import { Alert, Button } from 'flowbite-svelte';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
let state: 'granted' | 'not-granted' | 'unknown' = 'unknown'; //state variable is used to determine whether the user has granted or denied location access.
|
||||
const dispatch = createEventDispatcher();
|
||||
let state: 'granted' | 'not-granted' | 'unknown' = 'unknown'; //state variable is used to determine whether the user has granted, denied or hasn't decided location access.
|
||||
|
||||
const handlePermission = (status: PermissionState) => {
|
||||
if (status === 'granted') {
|
||||
state = 'granted';
|
||||
localStorage.setItem('locationPermission', 'granted');
|
||||
document.cookie = 'locationPermission=granted; path=/';
|
||||
} else if (status === 'denied') {
|
||||
state = 'not-granted';
|
||||
localStorage.setItem('locationPermission', 'not-granted');
|
||||
document.cookie = 'locationPermission=not-granted; path=/';
|
||||
}
|
||||
};
|
||||
|
||||
// checks if the navigator.permissions API is available
|
||||
onMount(() => {
|
||||
if (navigator.permissions) {
|
||||
//navigator.permissions.query method to check if the permission has already been granted.
|
||||
navigator.permissions.query({ name: 'geolocation' }).then((result) => {
|
||||
if (result.state === 'granted') {
|
||||
state = 'granted';
|
||||
} else if (result.state === 'prompt') {
|
||||
state = 'unknown'; //If the permission status is prompt, it means the user has not yet made a decision, so the state is set to unknown
|
||||
} else {
|
||||
state = 'not-granted';
|
||||
}
|
||||
navigator.permissions
|
||||
.query({ name: 'geolocation' })
|
||||
.then((permissionStatus) => {
|
||||
handlePermission(permissionStatus.state);
|
||||
permissionStatus.onchange = () => {
|
||||
handlePermission(permissionStatus.state);
|
||||
};
|
||||
});
|
||||
} else if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
() => {
|
||||
state = 'granted';
|
||||
localStorage.setItem('locationPermission', 'granted');
|
||||
document.cookie = 'locationPermission=granted; path=/';
|
||||
},
|
||||
() => {
|
||||
state = 'not-granted';
|
||||
localStorage.setItem('locationPermission', 'not-granted');
|
||||
document.cookie = 'locationPermission=not-granted; path=/';
|
||||
}
|
||||
);
|
||||
} else {
|
||||
state = 'not-granted';
|
||||
localStorage.setItem('locationPermission', 'not-granted');
|
||||
document.cookie = 'locationPermission=not-granted; path=/';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
@ -48,7 +63,6 @@
|
|||
{#if state === 'granted'}
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
onMount(() => {
|
||||
const event = new CustomEvent('locationGranted', { detail: { granted: true } });
|
||||
window.dispatchEvent(event);
|
||||
|
|
|
@ -4,22 +4,26 @@
|
|||
import LocationRequest from '$lib/components/Map/LocationRequest.svelte'
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
let user = { lat: 50.073658, lng: 14.41854 }
|
||||
let granted = false
|
||||
let user = null
|
||||
|
||||
const handleLocationGranted = (position: GeolocationPosition) => {
|
||||
user = { lat: position.coords.latitude, lng: position.coords.longitude }
|
||||
granted = true
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
navigator.permissions.query({ name: 'geolocation' })
|
||||
.then(permissionStatus => {
|
||||
if (permissionStatus.state === 'granted') {
|
||||
granted = true
|
||||
} else {
|
||||
granted = false
|
||||
const storedPermission = localStorage.getItem('locationPermission')
|
||||
if (storedPermission === 'granted') {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(position) => {
|
||||
handleLocationGranted(position)
|
||||
},
|
||||
(error) => {
|
||||
console.log(error)
|
||||
}
|
||||
)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error)
|
||||
granted = false
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
|
@ -27,6 +31,6 @@
|
|||
{#if granted}
|
||||
<Erantmap class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user />
|
||||
{:else}
|
||||
<LocationRequest on:locationGranted={() => (granted = true)} />
|
||||
<LocationRequest on:locationGranted={handleLocationGranted} />
|
||||
{/if}
|
||||
</NavigationBarLayout>
|
Loading…
Reference in New Issue