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

MVP #5.1 #69

Merged
matthieu42morin merged 3 commits from master into deploy/prod 2023-03-11 19:14:20 +00:00
Conversation 0 Commits 3 Files Changed 8 +87 -69
2 changed files with 87 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 000835a34a - Show all commits

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

@ -1,57 +1,71 @@
<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() 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. 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.
// checks if the navigator.permissions API is available const handlePermission = (status: PermissionState) => {
onMount(() => { if (status === 'granted') {
if (navigator.permissions) { state = 'granted';
//navigator.permissions.query method to check if the permission has already been granted. localStorage.setItem('locationPermission', 'granted');
navigator.permissions.query({ name: 'geolocation' }).then((result) => { document.cookie = 'locationPermission=granted; path=/';
if (result.state === 'granted') { } else if (status === 'denied') {
state = 'granted'; state = 'not-granted';
} else if (result.state === 'prompt') { localStorage.setItem('locationPermission', 'not-granted');
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 document.cookie = 'locationPermission=not-granted; path=/';
} else { }
state = 'not-granted'; };
}
});
} else if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
() => {
state = 'granted';
},
() => {
state = 'not-granted';
}
);
} else {
state = 'not-granted';
}
});
</script>
{#if state === 'not-granted'} onMount(() => {
<Alert class="absolute w-full max-w-[400px] h-24" color="green"> if (navigator.permissions) {
<span class="text-lg font-medium">This is an info alert</span> navigator.permissions
<div slot="extra"> .query({ name: 'geolocation' })
<div class="mt-2 mb-4 text-sm">Please provide Erant your location</div> .then((permissionStatus) => {
<div class="flex gap-2"> handlePermission(permissionStatus.state);
<Button on:click={() => dispatch('ok')} size="xs">ok</Button> permissionStatus.onchange = () => {
</div> handlePermission(permissionStatus.state);
</div> };
</Alert> });
{/if} } else if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
{#if state === 'granted'} () => {
<script> state = 'granted';
import { onMount } from 'svelte'; localStorage.setItem('locationPermission', 'granted');
document.cookie = 'locationPermission=granted; path=/';
onMount(() => { },
const event = new CustomEvent('locationGranted', { detail: { granted: true } }); () => {
window.dispatchEvent(event); 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> </script>
{/if}
{#if state === 'not-granted'}
<Alert class="absolute w-full max-w-[400px] h-24" color="green">
<span class="text-lg font-medium">This is an info alert</span>
<div slot="extra">
<div class="mt-2 mb-4 text-sm">Please provide Erant your location</div>
<div class="flex gap-2">
<Button on:click={() => dispatch('ok')} size="xs">ok</Button>
</div>
</div>
</Alert>
{/if}
{#if state === 'granted'}
<script>
import { onMount } from 'svelte';
onMount(() => {
const event = new CustomEvent('locationGranted', { detail: { granted: true } });
window.dispatchEvent(event);
});
</script>
{/if}

30
src/routes/map.svelte
View File

@ -4,22 +4,26 @@
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 user = { lat: 50.073658, lng: 14.41854 }
let granted = false let granted = false
let user = null
const handleLocationGranted = (position: GeolocationPosition) => {
user = { lat: position.coords.latitude, lng: position.coords.longitude }
granted = true
}
onMount(() => { onMount(() => {
navigator.permissions.query({ name: 'geolocation' }) const storedPermission = localStorage.getItem('locationPermission')
.then(permissionStatus => { if (storedPermission === 'granted') {
if (permissionStatus.state === 'granted') { navigator.geolocation.getCurrentPosition(
granted = true (position) => {
} else { handleLocationGranted(position)
granted = false },
(error) => {
console.log(error)
} }
}) )
.catch(error => { }
console.error(error)
granted = false
})
}) })
</script> </script>
@ -27,6 +31,6 @@
{#if granted} {#if granted}
<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={() => (granted = true)} /> <LocationRequest on:locationGranted={handleLocationGranted} />
{/if} {/if}
</NavigationBarLayout> </NavigationBarLayout>