Madmin
/
Erant-OldApp
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Permissions API is read only, updating LocationRequest, map.svelte #70

Merged
matthieu42morin merged 1 commits from master into deploy/prod 2023-03-12 16:04:59 +00:00
Conversation 0 Commits 1 Files Changed 2 +64 -79
2 changed files with 64 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0f670ef68e - Show all commits

72
src/lib/components/Map/LocationRequest.svelte
View File

@ -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} -->

37
src/routes/map.svelte
View File

@ -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>