From f699905f4b7b11afc47fa1dece2b8f8ff04e646d Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Sat, 10 Aug 2024 12:44:23 +0200
Subject: [PATCH] UX: improve geolocation-indicators

---
 src/Logic/State/GeoLocationState.ts           | 37 ++++++++++++++++++-
 src/UI/BigComponents/GeolocationControl.ts    |  4 +-
 ...rol.svelte => GeolocationIndicator.svelte} | 17 +++++----
 3 files changed, 46 insertions(+), 12 deletions(-)
 rename src/UI/BigComponents/{GeolocationControl.svelte => GeolocationIndicator.svelte} (79%)

diff --git a/src/Logic/State/GeoLocationState.ts b/src/Logic/State/GeoLocationState.ts
index 72f919615..2f28e2a58 100644
--- a/src/Logic/State/GeoLocationState.ts
+++ b/src/Logic/State/GeoLocationState.ts
@@ -1,6 +1,8 @@
 import { Store, UIEventSource } from "../UIEventSource"
 import { LocalStorageSource } from "../Web/LocalStorageSource"
 import { QueryParameters } from "../Web/QueryParameters"
+import { Translation } from "../../UI/i18n/Translation"
+import Translations from "../../UI/i18n/Translations"
 
 export type GeolocationPermissionState = "prompt" | "requested" | "granted" | "denied"
 
@@ -62,7 +64,11 @@ export class GeoLocationState {
      */
     private readonly _grantedThisSession: UIEventSource<boolean> = new UIEventSource<boolean>(false)
 
-    constructor() {
+    /**
+     * A human explanation of the current gps state, to be shown on the home screen or as tooltip
+     */
+    public readonly gpsStateExplanation  : Store<Translation>
+     constructor() {
         const self = this
 
         this.permission.addCallbackAndRunD(async (state) => {
@@ -96,7 +102,34 @@ export class GeoLocationState {
             }
             this.requestPermission()
         }
-    }
+
+
+        this.gpsStateExplanation = this.gpsAvailable.map(available => {
+            if (!available) {
+                return Translations.t.general.labels.locationNotAvailable
+            }
+            if (this.permission.data === "denied") {
+                return Translations.t.general.geopermissionDenied
+            }
+            if (this.permission.data === "prompt") {
+                return Translations.t.general.labels.jumpToLocation
+            }
+            if (this.permission.data === "requested") {
+                return Translations.t.general.waitingForGeopermission
+            }
+
+
+            if (!this.allowMoving.data) {
+                return Translations.t.general.visualFeedback.islocked
+            }
+
+            if (this.currentGPSLocation.data !== undefined) {
+                return Translations.t.general.labels.jumpToLocation
+            }
+            return Translations.t.general.waitingForLocation
+        }, [this.allowMoving, this.permission])
+
+     }
 
     /**
      * Requests the user to allow access to their position.
diff --git a/src/UI/BigComponents/GeolocationControl.ts b/src/UI/BigComponents/GeolocationControl.ts
index 846e3e960..febe212bf 100644
--- a/src/UI/BigComponents/GeolocationControl.ts
+++ b/src/UI/BigComponents/GeolocationControl.ts
@@ -4,8 +4,8 @@ import Constants from "../../Models/Constants"
 import { MapProperties } from "../../Models/MapProperties"
 
 /**
- * Displays an icon depending on the state of the geolocation.
- * Will set the 'lock' if clicked twice
+ * Does the user interaction state with a geolocation button, such as keeping track of the last click,
+ * and lock status + moving the map when clicked
  */
 export class GeolocationControlState {
     public readonly lastClick = new UIEventSource<Date>(undefined)
diff --git a/src/UI/BigComponents/GeolocationControl.svelte b/src/UI/BigComponents/GeolocationIndicator.svelte
similarity index 79%
rename from src/UI/BigComponents/GeolocationControl.svelte
rename to src/UI/BigComponents/GeolocationIndicator.svelte
index eba93f08a..ef66911a7 100644
--- a/src/UI/BigComponents/GeolocationControl.svelte
+++ b/src/UI/BigComponents/GeolocationIndicator.svelte
@@ -16,24 +16,25 @@
   let geolocationControlState = state.geolocationControl
   let isAvailable = state.geolocation.geolocationState.gpsAvailable
   let lastClickWasRecent = geolocationControlState.lastClickWithinThreeSecs
+  export let clss = "h-8 w-8 shrink-0"
 </script>
 
 {#if !$allowMoving}
-  <Location_locked class="h-8 w-8" />
+  <Location_locked class={clss} />
 {:else if $currentGPSLocation !== undefined}
   <!-- If we have a location; this implies that the location access was granted -->
   {#if $lastClickWasRecent}
-    <Location_unlocked class="h-8 w-8" />
+    <Location_unlocked class={clss} />
   {:else}
-    <Location class="h-8 w-8" />
+    <Location class={clss} />
   {/if}
+{:else if $geopermission === "denied" || !$isAvailable}
+  <Location_refused class={clss} />
 {:else if $geopermission === "prompt"}
-  <Location class="h-8 w-8" />
+  <Location class={clss} />
 {:else if $geopermission === "requested"}
   <!-- Even though disabled, when clicking we request the location again in case the contributor dismissed the location popup -->
-  <Location class="h-8 w-8" style="animation: 3s linear 0s infinite normal none running spin;" />
-{:else if $geopermission === "denied" || !$isAvailable}
-  <Location_refused class="h-8 w-8" />
+  <Location class={clss} style="animation: 3s linear 0s infinite normal none running spin;" />
 {:else}
-  <Location class="h-8 w-8" style="animation: 3s linear 0s infinite normal none running spin;" />
+  <Location class={clss} style="animation: 3s linear 0s infinite normal none running spin;" />
 {/if}