2023-05-18 15:44:54 +02:00
|
|
|
<script lang="ts">
|
2023-12-01 15:23:28 +01:00
|
|
|
import Translations from "../i18n/Translations"
|
|
|
|
import Tr from "../Base/Tr.svelte"
|
|
|
|
import NextButton from "../Base/NextButton.svelte"
|
|
|
|
import Geosearch from "./Geosearch.svelte"
|
|
|
|
import ThemeViewState from "../../Models/ThemeViewState"
|
|
|
|
import { UIEventSource } from "../../Logic/UIEventSource"
|
|
|
|
import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
|
|
|
|
import { twJoin } from "tailwind-merge"
|
|
|
|
import { Utils } from "../../Utils"
|
|
|
|
import type { GeolocationPermissionState } from "../../Logic/State/GeoLocationState"
|
|
|
|
import { GeoLocationState } from "../../Logic/State/GeoLocationState"
|
|
|
|
import If from "../Base/If.svelte"
|
|
|
|
import { ExclamationTriangleIcon } from "@babeard/svelte-heroicons/mini"
|
|
|
|
import type { Readable } from "svelte/store"
|
|
|
|
import Add from "../../assets/svg/Add.svelte"
|
|
|
|
import Location_refused from "../../assets/svg/Location_refused.svelte"
|
|
|
|
import Crosshair from "../../assets/svg/Crosshair.svelte"
|
2023-05-18 15:44:54 +02:00
|
|
|
|
2023-10-30 13:44:27 +01:00
|
|
|
/**
|
|
|
|
* The theme introduction panel
|
|
|
|
*/
|
|
|
|
export let state: ThemeViewState
|
|
|
|
let layout = state.layout
|
|
|
|
let selectedElement = state.selectedElement
|
2023-05-18 15:44:54 +02:00
|
|
|
|
2023-10-30 13:44:27 +01:00
|
|
|
let triggerSearch: UIEventSource<any> = new UIEventSource<any>(undefined)
|
|
|
|
let searchEnabled = false
|
2023-09-24 22:12:07 +02:00
|
|
|
|
2023-10-30 13:44:27 +01:00
|
|
|
let geopermission: Readable<GeolocationPermissionState> =
|
|
|
|
state.geolocation.geolocationState.permission
|
|
|
|
let currentGPSLocation = state.geolocation.geolocationState.currentGPSLocation
|
2023-09-24 22:12:07 +02:00
|
|
|
|
2023-10-30 13:44:27 +01:00
|
|
|
geopermission.addCallback((perm) => console.log(">>>> Permission", perm))
|
2023-05-18 15:44:54 +02:00
|
|
|
|
2023-10-30 13:44:27 +01:00
|
|
|
function jumpToCurrentLocation() {
|
|
|
|
const glstate = state.geolocation.geolocationState
|
|
|
|
if (glstate.currentGPSLocation.data !== undefined) {
|
|
|
|
const c: GeolocationCoordinates = glstate.currentGPSLocation.data
|
|
|
|
state.guistate.themeIsOpened.setData(false)
|
|
|
|
const coor = { lon: c.longitude, lat: c.latitude }
|
|
|
|
state.mapProperties.location.setData(coor)
|
2023-05-18 15:44:54 +02:00
|
|
|
}
|
2023-10-30 13:44:27 +01:00
|
|
|
if (glstate.permission.data !== "granted") {
|
|
|
|
glstate.requestPermission()
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
2023-05-18 15:44:54 +02:00
|
|
|
</script>
|
|
|
|
|
2023-06-15 16:12:46 +02:00
|
|
|
<div class="flex h-full flex-col justify-between">
|
|
|
|
<div>
|
|
|
|
<!-- Intro, description, ... -->
|
|
|
|
<Tr t={layout.description} />
|
|
|
|
<Tr t={Translations.t.general.welcomeExplanation.general} />
|
|
|
|
{#if layout.layers.some((l) => l.presets?.length > 0)}
|
2023-09-16 18:52:42 +02:00
|
|
|
<Tr t={Translations.t.general.welcomeExplanation.addNew} />
|
2023-06-15 16:12:46 +02:00
|
|
|
{/if}
|
2023-06-15 16:11:36 +02:00
|
|
|
|
2023-06-15 16:12:46 +02:00
|
|
|
<Tr t={layout.descriptionTail} />
|
2023-06-15 16:11:36 +02:00
|
|
|
|
2023-06-15 16:12:46 +02:00
|
|
|
<!-- Buttons: open map, go to location, search -->
|
|
|
|
<NextButton clss="primary w-full" on:click={() => state.guistate.themeIsOpened.setData(false)}>
|
|
|
|
<div class="flex w-full justify-center text-2xl">
|
|
|
|
<Tr t={Translations.t.general.openTheMap} />
|
|
|
|
</div>
|
|
|
|
</NextButton>
|
2023-05-18 15:44:54 +02:00
|
|
|
|
2023-06-15 16:12:46 +02:00
|
|
|
<div class="flex w-full flex-wrap sm:flex-nowrap">
|
2023-10-11 01:41:42 +02:00
|
|
|
<If condition={state.featureSwitches.featureSwitchGeolocation}>
|
|
|
|
{#if $currentGPSLocation !== undefined || $geopermission === "prompt"}
|
|
|
|
<button class="flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
|
2023-12-01 15:23:28 +01:00
|
|
|
<Crosshair class="h-8 w-8" />
|
2023-10-11 01:41:42 +02:00
|
|
|
<Tr t={Translations.t.general.openTheMapAtGeolocation} />
|
|
|
|
</button>
|
|
|
|
<!-- No geolocation granted - we don't show the button -->
|
|
|
|
{:else if $geopermission === "requested"}
|
2023-10-16 14:27:05 +02:00
|
|
|
<button
|
|
|
|
class="disabled flex w-full items-center gap-x-2"
|
|
|
|
on:click={jumpToCurrentLocation}
|
|
|
|
>
|
2023-10-11 01:41:42 +02:00
|
|
|
<!-- Even though disabled, when clicking we request the location again in case the contributor dismissed the location popup -->
|
2023-12-01 15:23:28 +01:00
|
|
|
<Crosshair
|
|
|
|
class="h-8 w-8"
|
|
|
|
style="animation: 3s linear 0s infinite normal none running spin;"
|
|
|
|
/>
|
2023-10-11 01:41:42 +02:00
|
|
|
<Tr t={Translations.t.general.waitingForGeopermission} />
|
|
|
|
</button>
|
|
|
|
{:else if $geopermission === "denied"}
|
|
|
|
<button class="disabled flex w-full items-center gap-x-2">
|
2023-12-01 15:23:28 +01:00
|
|
|
<Location_refused class="h-8 w-8" />
|
2023-10-11 01:41:42 +02:00
|
|
|
<Tr t={Translations.t.general.geopermissionDenied} />
|
|
|
|
</button>
|
|
|
|
{:else}
|
|
|
|
<button class="disabled flex w-full items-center gap-x-2">
|
2023-12-01 15:23:28 +01:00
|
|
|
<Crosshair
|
|
|
|
class="h-8 w-8"
|
|
|
|
style="animation: 3s linear 0s infinite normal none running spin;"
|
|
|
|
/>
|
2023-10-11 01:41:42 +02:00
|
|
|
<Tr t={Translations.t.general.waitingForLocation} />
|
|
|
|
</button>
|
|
|
|
{/if}
|
|
|
|
</If>
|
2023-05-18 15:44:54 +02:00
|
|
|
|
2023-10-11 01:41:42 +02:00
|
|
|
<If condition={state.featureSwitches.featureSwitchSearch}>
|
2023-10-16 14:27:05 +02:00
|
|
|
<div
|
2023-10-30 13:44:27 +01:00
|
|
|
class=".button low-interaction m-1 flex h-fit w-full items-center gap-x-2 rounded border p-2"
|
2023-10-16 14:27:05 +02:00
|
|
|
>
|
2023-10-11 01:41:42 +02:00
|
|
|
<div class="w-full">
|
|
|
|
<Geosearch
|
|
|
|
bounds={state.mapProperties.bounds}
|
|
|
|
on:searchCompleted={() => state.guistate.themeIsOpened.setData(false)}
|
|
|
|
on:searchIsValid={(isValid) => {
|
2023-10-16 14:27:05 +02:00
|
|
|
searchEnabled = isValid
|
|
|
|
}}
|
2023-10-11 01:41:42 +02:00
|
|
|
perLayer={state.perLayer}
|
|
|
|
{selectedElement}
|
|
|
|
{triggerSearch}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<button
|
2023-10-16 14:27:05 +02:00
|
|
|
class={twJoin(
|
|
|
|
"flex items-center justify-between gap-x-2",
|
|
|
|
!searchEnabled && "disabled"
|
|
|
|
)}
|
2023-10-11 01:41:42 +02:00
|
|
|
on:click={() => triggerSearch.ping()}
|
|
|
|
>
|
|
|
|
<Tr t={Translations.t.general.search.searchShort} />
|
|
|
|
<SearchIcon class="h-6 w-6" />
|
|
|
|
</button>
|
2023-06-15 16:11:36 +02:00
|
|
|
</div>
|
2023-10-11 01:41:42 +02:00
|
|
|
</If>
|
2023-05-18 15:44:54 +02:00
|
|
|
</div>
|
2023-10-20 22:21:36 +02:00
|
|
|
|
|
|
|
{#if $currentGPSLocation === undefined && $geopermission === "requested" && GeoLocationState.isSafari()}
|
2023-10-30 13:44:27 +01:00
|
|
|
<a
|
|
|
|
href="https://support.apple.com/en-us/HT207092"
|
|
|
|
class="button w-full"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener"
|
|
|
|
>
|
|
|
|
<div class="link-underline m-1 flex w-full">
|
2023-10-20 22:21:36 +02:00
|
|
|
<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}
|
2023-06-15 16:12:46 +02:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="links-as-button links-w-full m-2 flex flex-col gap-y-1">
|
2023-06-15 16:11:36 +02:00
|
|
|
<!-- bottom buttons, a bit hidden away: switch layout -->
|
|
|
|
<a class="flex" href={Utils.HomepageLink()}>
|
2023-12-01 15:23:28 +01:00
|
|
|
<Add class="h-6 w-6" />
|
2023-06-15 16:12:46 +02:00
|
|
|
<Tr t={Translations.t.general.backToIndex} />
|
2023-06-15 16:11:36 +02:00
|
|
|
</a>
|
2023-06-14 20:39:36 +02:00
|
|
|
</div>
|
2023-05-18 15:44:54 +02:00
|
|
|
</div>
|