From 0f670ef68e9152b259a7b474f574ad3d1718eec3 Mon Sep 17 00:00:00 2001
From: matthieu42morin <matthieu.bernard.morin@gmail.com>
Date: Sun, 12 Mar 2023 16:57:53 +0100
Subject: [PATCH]  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

---
 src/lib/components/Map/LocationRequest.svelte | 96 +++++++------------
 src/routes/map.svelte                         | 47 +++++----
 2 files changed, 64 insertions(+), 79 deletions(-)

diff --git a/src/lib/components/Map/LocationRequest.svelte b/src/lib/components/Map/LocationRequest.svelte
index ceaec32..a594188 100644
--- a/src/lib/components/Map/LocationRequest.svelte
+++ b/src/lib/components/Map/LocationRequest.svelte
@@ -1,71 +1,49 @@
 <script lang="ts">
-	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, 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=/';
-	  }
-	};
-  
+	import { Alert, Button } from 'flowbite-svelte'
+	import { createEventDispatcher, onMount } from 'svelte'
+	const dispatch = createEventDispatcher()
+	let granted = false;
+
+	
 	onMount(() => {
-	  if (navigator.permissions) {
-		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=/';
+	  	if ('permissions' in navigator) {
+			navigator.permissions.query({ name: 'geolocation' }).then((permissionStatus) => {
+		  	if  (permissionStatus.state === 'granted') {
+				granted = true;
+				dispatch('locationGranted'); // This is the event that is emitted when the location is granted and later used in the map.svelte file.
+			}
+			else if (permissionStatus.state !== 'granted') {
+				navigator.geolocation.getCurrentPosition(
+			  		(position) => {
+						(position);
+			  		},
+			  		(error) => {
+						console.log(error);
+			  		}
+				);
+		  	}
+		});
 	  }
 	});
-  </script>
-  
-  {#if state === 'not-granted'}
+
+</script>
+
+{#if !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>
+		<span class="text-lg font-medium">This is an info alert</span>
+		<div slot="extra">
+			<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">
+				<Button on:click={() => dispatch('ok')} size="xs">ok</Button>
+			</div>
 		</div>
-	  </div>
 	</Alert>
-  {/if}
-  
-  {#if state === 'granted'}
+{/if}
+<!--{#if state === 'granted'}
 	<script>
 	  import { onMount } from 'svelte';
 	  onMount(() => {
-		const event = new CustomEvent('locationGranted', { detail: { granted: true } });
-		window.dispatchEvent(event);
+		dispatch('locationGranted');
 	  });
 	</script>
-  {/if}
\ No newline at end of file
+  {/if} -->
diff --git a/src/routes/map.svelte b/src/routes/map.svelte
index 825b0c3..cd52021 100644
--- a/src/routes/map.svelte
+++ b/src/routes/map.svelte
@@ -1,36 +1,43 @@
 <script lang="ts">
-	import NavigationBarLayout from '$lib/components/Layouts/NavigationBarLayout.svelte'
-	import Erantmap from '$lib/components/Map/Erantmap.svelte'
-	import LocationRequest from '$lib/components/Map/LocationRequest.svelte'
-	import { onMount } from 'svelte'
-  
-	let granted = false
-	let user = null
+	import NavigationBarLayout from '$lib/components/Layouts/NavigationBarLayout.svelte';
+	import Erantmap from '$lib/components/Map/Erantmap.svelte';
+	import LocationRequest from '$lib/components/Map/LocationRequest.svelte';
+	import { onMount } from 'svelte';
   
+	let user: { lat: number, lng: number } = null;
+	let granted = false;
+
+	const lastGame = localStorage.getItem('lastGame')
+
 	const handleLocationGranted = (position: GeolocationPosition) => {
-	  user = { lat: position.coords.latitude, lng: position.coords.longitude }
-	  granted = true
+	  user = { lat: position.coords.latitude, lng: position.coords.longitude };
+	  granted = true;
 	}
   
 	onMount(() => {
-	  const storedPermission = localStorage.getItem('locationPermission')
-	  if (storedPermission === 'granted') {
-		navigator.geolocation.getCurrentPosition(
-		  (position) => {
-			handleLocationGranted(position)
-		  },
-		  (error) => {
-			console.log(error)
+	  if ('permissions' in navigator) {
+		navigator.permissions.query({ name: 'geolocation' }).then((permissionStatus) => {
+		  if (permissionStatus.state === 'granted') {
+			navigator.geolocation.getCurrentPosition(
+			  (position) => {
+				handleLocationGranted(position);
+			  },
+			  (error) => {
+				console.log(error);
+			  }
+			);
 		  }
-		)
+		});
 	  }
-	})
+	});
   </script>
   
   <NavigationBarLayout>
 	{#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 />
 	{: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}
   </NavigationBarLayout>
\ No newline at end of file
-- 
2.40.1