Permissions API is read only, updating LocationRequest, map.svelte
Changes to be committed: modified: src/lib/components/Map/LocationRequest.svelte modified: src/routes/map.svelte
This commit is contained in:
parent
000835a34a
commit
0f670ef68e
|
@ -1,71 +1,49 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Alert, Button } from 'flowbite-svelte';
|
import { Alert, Button } from 'flowbite-svelte'
|
||||||
import { createEventDispatcher, onMount } from 'svelte';
|
import { createEventDispatcher, onMount } from 'svelte'
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
|
let granted = false;
|
||||||
|
|
||||||
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=/';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
if (navigator.permissions) {
|
if ('permissions' in navigator) {
|
||||||
navigator.permissions
|
navigator.permissions.query({ name: 'geolocation' }).then((permissionStatus) => {
|
||||||
.query({ name: 'geolocation' })
|
if (permissionStatus.state === 'granted') {
|
||||||
.then((permissionStatus) => {
|
granted = true;
|
||||||
handlePermission(permissionStatus.state);
|
dispatch('locationGranted'); // This is the event that is emitted when the location is granted and later used in the map.svelte file.
|
||||||
permissionStatus.onchange = () => {
|
}
|
||||||
handlePermission(permissionStatus.state);
|
else if (permissionStatus.state !== 'granted') {
|
||||||
};
|
|
||||||
});
|
|
||||||
} else if (navigator.geolocation) {
|
|
||||||
navigator.geolocation.getCurrentPosition(
|
navigator.geolocation.getCurrentPosition(
|
||||||
() => {
|
(position) => {
|
||||||
state = 'granted';
|
(position);
|
||||||
localStorage.setItem('locationPermission', 'granted');
|
|
||||||
document.cookie = 'locationPermission=granted; path=/';
|
|
||||||
},
|
},
|
||||||
() => {
|
(error) => {
|
||||||
state = 'not-granted';
|
console.log(error);
|
||||||
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>
|
}
|
||||||
|
});
|
||||||
|
|
||||||
{#if state === 'not-granted'}
|
</script>
|
||||||
|
|
||||||
|
{#if !granted}
|
||||||
<Alert class="absolute w-full max-w-[400px] h-24" color="green">
|
<Alert class="absolute w-full max-w-[400px] h-24" color="green">
|
||||||
<span class="text-lg font-medium">This is an info alert</span>
|
<span class="text-lg font-medium">This is an info alert</span>
|
||||||
<div slot="extra">
|
<div slot="extra">
|
||||||
<div class="mt-2 mb-4 text-sm">Please provide Erant your location</div>
|
<div class="mt-2 mb-4 text-sm">To advance through your experience you need to enable the location access, without it the app won't work.</div>
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
<Button on:click={() => dispatch('ok')} size="xs">ok</Button>
|
<Button on:click={() => dispatch('ok')} size="xs">ok</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Alert>
|
</Alert>
|
||||||
{/if}
|
{/if}
|
||||||
|
<!--{#if state === 'granted'}
|
||||||
{#if state === 'granted'}
|
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
const event = new CustomEvent('locationGranted', { detail: { granted: true } });
|
dispatch('locationGranted');
|
||||||
window.dispatchEvent(event);
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
{/if}
|
{/if} -->
|
||||||
|
|
|
@ -1,36 +1,43 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import NavigationBarLayout from '$lib/components/Layouts/NavigationBarLayout.svelte'
|
import NavigationBarLayout from '$lib/components/Layouts/NavigationBarLayout.svelte';
|
||||||
import Erantmap from '$lib/components/Map/Erantmap.svelte'
|
import Erantmap from '$lib/components/Map/Erantmap.svelte';
|
||||||
import LocationRequest from '$lib/components/Map/LocationRequest.svelte'
|
import LocationRequest from '$lib/components/Map/LocationRequest.svelte';
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
let granted = false
|
let user: { lat: number, lng: number } = null;
|
||||||
let user = null
|
let granted = false;
|
||||||
|
|
||||||
|
const lastGame = localStorage.getItem('lastGame')
|
||||||
|
|
||||||
const handleLocationGranted = (position: GeolocationPosition) => {
|
const handleLocationGranted = (position: GeolocationPosition) => {
|
||||||
user = { lat: position.coords.latitude, lng: position.coords.longitude }
|
user = { lat: position.coords.latitude, lng: position.coords.longitude };
|
||||||
granted = true
|
granted = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
const storedPermission = localStorage.getItem('locationPermission')
|
if ('permissions' in navigator) {
|
||||||
if (storedPermission === 'granted') {
|
navigator.permissions.query({ name: 'geolocation' }).then((permissionStatus) => {
|
||||||
|
if (permissionStatus.state === 'granted') {
|
||||||
navigator.geolocation.getCurrentPosition(
|
navigator.geolocation.getCurrentPosition(
|
||||||
(position) => {
|
(position) => {
|
||||||
handleLocationGranted(position)
|
handleLocationGranted(position);
|
||||||
},
|
},
|
||||||
(error) => {
|
(error) => {
|
||||||
console.log(error)
|
console.log(error);
|
||||||
}
|
}
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<NavigationBarLayout>
|
<NavigationBarLayout>
|
||||||
{#if granted}
|
{#if granted}
|
||||||
|
<!-- Conditionally center on current location if granted is true. -->
|
||||||
<Erantmap class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user />
|
<Erantmap class="w-full h-full" center={{ lng: user.lng, lat: user.lat }} bind:user />
|
||||||
{:else}
|
{:else}
|
||||||
<LocationRequest on:locationGranted={handleLocationGranted} />
|
<!--If not granted, the LocationRequest component is displayed and when it is granted center map. -->
|
||||||
|
<LocationRequest on:locationGranted={() => granted = true} />
|
||||||
{/if}
|
{/if}
|
||||||
</NavigationBarLayout>
|
</NavigationBarLayout>
|
Loading…
Reference in New Issue