UX: add button for safari users which links to explanation on how to enable geolocation

langs/en.json

@@ -193,6 +193,8 @@
             "title": "Download",
             "uploadGpx": "Upload your track to OpenStreetMap"
         },
+        "enableGeolocationForSafari": "Did you not get the popup to ask for geopermission?",
+        "enableGeolocationForSafariLink": "Learn how to enable the geolocation permission in settings",
         "error": "Something went wrong",
         "example": "Example",
         "examples": "Examples",
@@ -249,7 +251,7 @@
         "openTheMap": "Open the map",
         "openTheMapAtGeolocation": "Zoom to your location",
         "opening_hours": {
-            "closed_permanently": "Closed for an unkown duration",
+            "closed_permanently": "Closed for an unknown duration",
             "closed_until": "Closed until {date}",
             "error_loading": "Error: could not visualize these opening hours.",
             "loadingCountry": "Determining country…",

src/Logic/State/GeoLocationState.ts

@@ -102,6 +102,10 @@ export class GeoLocationState {
         this.requestPermissionAsync()
     }
 
+    public static isSafari(): boolean{
+       return navigator.permissions === undefined && navigator.geolocation !== undefined
+    }
+
     /**
      * Requests the user to allow access to their position.
      * When granted, will be written to the 'geolocationState'.
@@ -119,8 +123,12 @@ export class GeoLocationState {
             return
         }
 
-        if (navigator.permissions === undefined && navigator.geolocation !== undefined) {
+        if (GeoLocationState.isSafari()) {
-            // This is probably safari - we just start watching right away
+            // This is probably safari
+            // Safari does not support the 'permissions'-API for geolocation,
+            // so we just start watching right away
+
+            this.permission.setData("requested")
             this.startWatching()
             return
         }

src/UI/BigComponents/ThemeIntroPanel.svelte

@@ -1,48 +1,51 @@
 <script lang="ts">
-  import Translations from "../i18n/Translations"
+    import Translations from "../i18n/Translations"
-  import Svg from "../../Svg"
+    import Svg from "../../Svg"
-  import Tr from "../Base/Tr.svelte"
+    import Tr from "../Base/Tr.svelte"
-  import NextButton from "../Base/NextButton.svelte"
+    import NextButton from "../Base/NextButton.svelte"
-  import Geosearch from "./Geosearch.svelte"
+    import Geosearch from "./Geosearch.svelte"
-  import ToSvelte from "../Base/ToSvelte.svelte"
+    import ToSvelte from "../Base/ToSvelte.svelte"
-  import ThemeViewState from "../../Models/ThemeViewState"
+    import ThemeViewState from "../../Models/ThemeViewState"
-  import { Store, UIEventSource } from "../../Logic/UIEventSource"
+    import { UIEventSource } from "../../Logic/UIEventSource"
-  import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
+    import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
-  import { twJoin } from "tailwind-merge"
+    import { twJoin } from "tailwind-merge"
-  import { Utils } from "../../Utils"
+    import { Utils } from "../../Utils"
-  import type { GeolocationPermissionState } from "../../Logic/State/GeoLocationState"
+    import type { GeolocationPermissionState } from "../../Logic/State/GeoLocationState"
-  import If from "../Base/If.svelte"
+    import { GeoLocationState } from "../../Logic/State/GeoLocationState"
+    import If from "../Base/If.svelte"
+    import { ExclamationTriangleIcon } from "@babeard/svelte-heroicons/mini"
+    import { Readable } from "svelte/store"
 
-  /**
+    /**
-   * The theme introduction panel
+     * The theme introduction panel
-   */
+     */
-  export let state: ThemeViewState
+    export let state: ThemeViewState
-  let layout = state.layout
+    let layout = state.layout
-  let selectedElement = state.selectedElement
+    let selectedElement = state.selectedElement
-  let selectedLayer = state.selectedLayer
+    let selectedLayer = state.selectedLayer
 
-  let triggerSearch: UIEventSource<any> = new UIEventSource<any>(undefined)
+    let triggerSearch: UIEventSource<any> = new UIEventSource<any>(undefined)
-  let searchEnabled = false
+    let searchEnabled = false
 
-  let geopermission: Store<GeolocationPermissionState> =
+    let geopermission: Readable<GeolocationPermissionState> =
-    state.geolocation.geolocationState.permission
+        state.geolocation.geolocationState.permission
-  let currentGPSLocation = state.geolocation.geolocationState.currentGPSLocation
+    let currentGPSLocation = state.geolocation.geolocationState.currentGPSLocation
 
-  geopermission.addCallback((perm) => console.log(">>>> Permission", perm))
+    geopermission.addCallback((perm) => console.log(">>>> Permission", perm))
 
-  function jumpToCurrentLocation() {
+    function jumpToCurrentLocation() {
-    const glstate = state.geolocation.geolocationState
+        const glstate = state.geolocation.geolocationState
-    if (glstate.currentGPSLocation.data !== undefined) {
+        if (glstate.currentGPSLocation.data !== undefined) {
-      const c: GeolocationCoordinates = glstate.currentGPSLocation.data
+            const c: GeolocationCoordinates = glstate.currentGPSLocation.data
-      state.guistate.themeIsOpened.setData(false)
+            state.guistate.themeIsOpened.setData(false)
-      const coor = { lon: c.longitude, lat: c.latitude }
+            const coor = { lon: c.longitude, lat: c.latitude }
-      state.mapProperties.location.setData(coor)
+            state.mapProperties.location.setData(coor)
+        }
+        if (glstate.permission.data !== "granted") {
+            glstate.requestPermission()
+            return
+        }
     }
-    if (glstate.permission.data !== "granted") {
-      glstate.requestPermission()
-      return
-    }
-  }
 </script>
 
 <div class="flex h-full flex-col justify-between">
@@ -84,6 +87,7 @@
             />
             <Tr t={Translations.t.general.waitingForGeopermission} />
           </button>
+
         {:else if $geopermission === "denied"}
           <button class="disabled flex w-full items-center gap-x-2">
             <ToSvelte construct={Svg.location_refused_svg().SetClass("w-8 h-8")} />
@@ -103,7 +107,7 @@
 
       <If condition={state.featureSwitches.featureSwitchSearch}>
         <div
-          class=".button low-interaction m-1 flex w-full items-center gap-x-2 rounded border p-2"
+          class=".button low-interaction m-1 flex w-full items-center gap-x-2 rounded border p-2 h-fit"
         >
           <div class="w-full">
             <Geosearch
@@ -131,6 +135,19 @@
         </div>
       </If>
     </div>
+
+    {#if $currentGPSLocation === undefined && $geopermission === "requested" && GeoLocationState.isSafari()}
+      <a href="https://support.apple.com/en-us/HT207092" class="button w-full" target="_blank" rel="noopener">
+        <div class="flex w-full link-underline m-1">
+          <ExclamationTriangleIcon class="w-12 pr-2" />
+          <div class="flex w-full flex-col">
+            <Tr cls="font-normal" t={Translations.t.general.enableGeolocationForSafari} />
+            <Tr t={Translations.t.general.enableGeolocationForSafariLink} />
+          </div>
+        </div>
+      </a>
+    {/if}
+
   </div>
 
   <div class="links-as-button links-w-full m-2 flex flex-col gap-y-1">