Chore: run prettier
This commit is contained in:
parent
147c3db957
commit
9661ade80c
19 changed files with 910 additions and 897 deletions
|
|
@ -14,7 +14,8 @@
|
||||||
|
|
||||||
<SubtleButton
|
<SubtleButton
|
||||||
on:click={() => dispatch("click")}
|
on:click={() => dispatch("click")}
|
||||||
options={{ extraClasses: twMerge("flex items-center", clss) }}>
|
options={{ extraClasses: twMerge("flex items-center", clss) }}
|
||||||
|
>
|
||||||
<ChevronLeftIcon class="h-12 w-12" slot="image" />
|
<ChevronLeftIcon class="h-12 w-12" slot="image" />
|
||||||
<slot slot="message" />
|
<slot slot="message" />
|
||||||
</SubtleButton>
|
</SubtleButton>
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
if (hideSignal) {
|
if (hideSignal) {
|
||||||
onDestroy(
|
onDestroy(
|
||||||
hideSignal.addCallbackD(() => {
|
hideSignal.addCallbackD(() => {
|
||||||
if(initTime + 1000 > Date.now()){
|
if (initTime + 1000 > Date.now()) {
|
||||||
console.log("Ignoring hide signal")
|
console.log("Ignoring hide signal")
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
@ -32,7 +32,7 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div bind:this={mainElem} class="absolute bottom-0 right-0 h-full w-full pointer-events-none">
|
<div bind:this={mainElem} class="pointer-events-none absolute bottom-0 right-0 h-full w-full">
|
||||||
<div id="hand-container">
|
<div id="hand-container">
|
||||||
<img src="./assets/svg/hand.svg" />
|
<img src="./assets/svg/hand.svg" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -11,6 +11,7 @@
|
||||||
|
|
||||||
<button
|
<button
|
||||||
on:click={(e) => dispatch("click", e)}
|
on:click={(e) => dispatch("click", e)}
|
||||||
class={twJoin("pointer-events-auto m-0.5 h-fit w-fit rounded-full p-0.5 sm:p-1 md:m-1", cls)}>
|
class={twJoin("pointer-events-auto m-0.5 h-fit w-fit rounded-full p-0.5 sm:p-1 md:m-1", cls)}
|
||||||
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,8 @@
|
||||||
|
|
||||||
<SubtleButton
|
<SubtleButton
|
||||||
on:click={() => dispatch("click")}
|
on:click={() => dispatch("click")}
|
||||||
options={{ extraClasses: twMerge("flex items-center", clss) }}>
|
options={{ extraClasses: twMerge("flex items-center", clss) }}
|
||||||
|
>
|
||||||
<slot name="image" slot="image" />
|
<slot name="image" slot="image" />
|
||||||
<div class="flex w-full items-center justify-between" slot="message">
|
<div class="flex w-full items-center justify-between" slot="message">
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,8 @@
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class={twMerge(options.extraClasses, "secondary no-image-background")}
|
class={twMerge(options.extraClasses, "secondary no-image-background")}
|
||||||
on:click={(e) => dispatch("click", e)}>
|
on:click={(e) => dispatch("click", e)}
|
||||||
|
>
|
||||||
<slot name="image">
|
<slot name="image">
|
||||||
{#if imageUrl !== undefined}
|
{#if imageUrl !== undefined}
|
||||||
{#if typeof imageUrl === "string"}
|
{#if typeof imageUrl === "string"}
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="tabbedgroup h-full flex w-full">
|
<div class="tabbedgroup flex h-full w-full">
|
||||||
<TabGroup
|
<TabGroup
|
||||||
class="flex h-full w-full flex-col"
|
class="flex h-full w-full flex-col"
|
||||||
defaultIndex={1}
|
defaultIndex={1}
|
||||||
|
|
@ -67,7 +67,7 @@
|
||||||
</TabList>
|
</TabList>
|
||||||
<slot name="post-tablist" />
|
<slot name="post-tablist" />
|
||||||
</div>
|
</div>
|
||||||
<div class="normal-background overflow-y-auto h-full">
|
<div class="normal-background h-full overflow-y-auto">
|
||||||
<TabPanels class="tabpanels" defaultIndex={$tab}>
|
<TabPanels class="tabpanels" defaultIndex={$tab}>
|
||||||
<TabPanel class="tabpanel">
|
<TabPanel class="tabpanel">
|
||||||
<slot name="content0">
|
<slot name="content0">
|
||||||
|
|
@ -96,16 +96,15 @@
|
||||||
max-height: 100vh;
|
max-height: 100vh;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.tabpanel) {
|
:global(.tabpanel) {
|
||||||
height:100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.tabpanels) {
|
:global(.tabpanels) {
|
||||||
height: calc( 100% - 2rem );
|
height: calc(100% - 2rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
:global(.tab) {
|
:global(.tab) {
|
||||||
margin: 0.25rem;
|
margin: 0.25rem;
|
||||||
padding: 0.25rem;
|
padding: 0.25rem;
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
import FeatureSourceMerger from "../../Logic/FeatureSource/Sources/FeatureSourceMerger"
|
import FeatureSourceMerger from "../../Logic/FeatureSource/Sources/FeatureSourceMerger"
|
||||||
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
|
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
|
||||||
import { Utils } from "../../Utils"
|
import { Utils } from "../../Utils"
|
||||||
import {createEventDispatcher} from "svelte";
|
import { createEventDispatcher } from "svelte"
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* An advanced location input, which has support to:
|
* An advanced location input, which has support to:
|
||||||
|
|
@ -44,8 +44,8 @@
|
||||||
lon: number
|
lon: number
|
||||||
lat: number
|
lat: number
|
||||||
}>(undefined)
|
}>(undefined)
|
||||||
|
|
||||||
const dispatch = createEventDispatcher<{click: {lon: number, lat: number}}>()
|
const dispatch = createEventDispatcher<{ click: { lon: number; lat: number } }>()
|
||||||
|
|
||||||
const xyz = Tiles.embedded_tile(coordinate.lat, coordinate.lon, 16)
|
const xyz = Tiles.embedded_tile(coordinate.lat, coordinate.lon, 16)
|
||||||
const map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
|
const map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
|
||||||
|
|
@ -109,7 +109,7 @@
|
||||||
|
|
||||||
<LocationInput
|
<LocationInput
|
||||||
{map}
|
{map}
|
||||||
on:click={data => dispatch("click", data)}
|
on:click={(data) => dispatch("click", data)}
|
||||||
mapProperties={initialMapProperties}
|
mapProperties={initialMapProperties}
|
||||||
value={preciseLocation}
|
value={preciseLocation}
|
||||||
initialCoordinate={coordinate}
|
initialCoordinate={coordinate}
|
||||||
|
|
|
||||||
|
|
@ -3,21 +3,19 @@
|
||||||
* A mapcontrol button which allows the user to select a different background.
|
* A mapcontrol button which allows the user to select a different background.
|
||||||
* Even though the componenet is very small, it gets it's own class as it is often reused
|
* Even though the componenet is very small, it gets it's own class as it is often reused
|
||||||
*/
|
*/
|
||||||
import {Square3Stack3dIcon} from "@babeard/svelte-heroicons/solid";
|
import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
|
||||||
import type {SpecialVisualizationState} from "../SpecialVisualization";
|
import type { SpecialVisualizationState } from "../SpecialVisualization"
|
||||||
import Translations from "../i18n/Translations";
|
import Translations from "../i18n/Translations"
|
||||||
import MapControlButton from "../Base/MapControlButton.svelte";
|
import MapControlButton from "../Base/MapControlButton.svelte"
|
||||||
import Tr from "../Base/Tr.svelte";
|
import Tr from "../Base/Tr.svelte"
|
||||||
|
|
||||||
export let state: SpecialVisualizationState
|
export let state: SpecialVisualizationState
|
||||||
export let hideTooltip = false
|
export let hideTooltip = false
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<MapControlButton
|
<MapControlButton on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}>
|
||||||
on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
|
<Square3Stack3dIcon class="h-6 w-6" />
|
||||||
>
|
|
||||||
<Square3Stack3dIcon class="h-6 w-6"/>
|
|
||||||
{#if !hideTooltip}
|
{#if !hideTooltip}
|
||||||
<Tr cls="mx-2" t={Translations.t.general.backgroundSwitch}/>
|
<Tr cls="mx-2" t={Translations.t.general.backgroundSwitch} />
|
||||||
{/if}
|
{/if}
|
||||||
</MapControlButton>
|
</MapControlButton>
|
||||||
|
|
|
||||||
|
|
@ -1,40 +1,41 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import ThemeViewState from "../../Models/ThemeViewState";
|
import ThemeViewState from "../../Models/ThemeViewState"
|
||||||
import Translations from "../i18n/Translations";
|
import Translations from "../i18n/Translations"
|
||||||
import Tr from "../Base/Tr.svelte";
|
import Tr from "../Base/Tr.svelte"
|
||||||
import Loading from "../Base/Loading.svelte";
|
import Loading from "../Base/Loading.svelte"
|
||||||
|
|
||||||
export let state: ThemeViewState
|
export let state: ThemeViewState
|
||||||
/**
|
/**
|
||||||
* Gives the contributor some feedback based on the current state:
|
* Gives the contributor some feedback based on the current state:
|
||||||
* - is data loading?
|
* - is data loading?
|
||||||
* - Is all data hidden due to filters?
|
* - Is all data hidden due to filters?
|
||||||
* - Is no data in view?
|
* - Is no data in view?
|
||||||
*/
|
*/
|
||||||
|
|
||||||
let dataIsLoading = state.dataIsLoading
|
let dataIsLoading = state.dataIsLoading
|
||||||
let currentState = state.hasDataInView
|
let currentState = state.hasDataInView
|
||||||
currentState.data === ""
|
currentState.data === ""
|
||||||
const t = Translations.t.centerMessage
|
const t = Translations.t.centerMessage
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if $currentState === "has-visible-features"}
|
{#if $currentState === "has-visible-features"}
|
||||||
<!-- don't show anything -->
|
<!-- don't show anything -->
|
||||||
{:else if $currentState === "zoom-to-low"}
|
{:else if $currentState === "zoom-to-low"}
|
||||||
<div class="w-fit p-4 alert">
|
<div class="alert w-fit p-4">
|
||||||
<Tr t={t.zoomIn}/>
|
<Tr t={t.zoomIn} />
|
||||||
</div>
|
</div>
|
||||||
{:else if $currentState === "all-filtered-away"}
|
{:else if $currentState === "all-filtered-away"}
|
||||||
<div class="w-fit p-4 alert">
|
<div class="alert w-fit p-4">
|
||||||
<Tr t={t.allFilteredAway}/>
|
<Tr t={t.allFilteredAway} />
|
||||||
</div>
|
</div>
|
||||||
{:else if $dataIsLoading}
|
{:else if $dataIsLoading}
|
||||||
<div class="w-fit p-4 alert">
|
<div class="alert w-fit p-4">
|
||||||
<Loading>
|
<Loading>
|
||||||
<Tr t={Translations.t.centerMessage.loadingData}/>
|
<Tr t={Translations.t.centerMessage.loadingData} />
|
||||||
</Loading>
|
</Loading>
|
||||||
</div>
|
</div>
|
||||||
{:else if $currentState === "no-data"}
|
{:else if $currentState === "no-data"}
|
||||||
<div class="w-fit p-4 alert">
|
<div class="alert w-fit p-4">
|
||||||
<Tr t={t.noData}/>
|
<Tr t={t.noData} />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
||||||
|
|
@ -1,104 +1,102 @@
|
||||||
<script lang="ts">
|
<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 IfNot from "../Base/IfNot.svelte"
|
import IfNot from "../Base/IfNot.svelte"
|
||||||
import ToSvelte from "../Base/ToSvelte.svelte"
|
import ToSvelte from "../Base/ToSvelte.svelte"
|
||||||
import ThemeViewState from "../../Models/ThemeViewState"
|
import ThemeViewState from "../../Models/ThemeViewState"
|
||||||
import If from "../Base/If.svelte"
|
import If from "../Base/If.svelte"
|
||||||
import {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"
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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
|
||||||
|
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<div class="flex flex-col justify-between h-full">
|
<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)}
|
||||||
|
<If condition={state.featureSwitches.featureSwitchAddNew}>
|
||||||
|
<Tr t={Translations.t.general.welcomeExplanation.addNew} />
|
||||||
|
</If>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div>
|
<Tr t={layout.descriptionTail} />
|
||||||
|
|
||||||
<!-- Intro, description, ... -->
|
<!-- Buttons: open map, go to location, search -->
|
||||||
<Tr t={layout.description}/>
|
<NextButton clss="primary w-full" on:click={() => state.guistate.themeIsOpened.setData(false)}>
|
||||||
<Tr t={Translations.t.general.welcomeExplanation.general}/>
|
<div class="flex w-full justify-center text-2xl">
|
||||||
{#if layout.layers.some((l) => l.presets?.length > 0)}
|
<Tr t={Translations.t.general.openTheMap} />
|
||||||
<If condition={state.featureSwitches.featureSwitchAddNew}>
|
</div>
|
||||||
<Tr t={Translations.t.general.welcomeExplanation.addNew}/>
|
</NextButton>
|
||||||
</If>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<Tr t={layout.descriptionTail}/>
|
<div class="flex w-full flex-wrap sm:flex-nowrap">
|
||||||
|
<IfNot condition={state.geolocation.geolocationState.permission.map((p) => p === "denied")}>
|
||||||
|
<button class="flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
|
||||||
<!-- Buttons: open map, go to location, search -->
|
<ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")} />
|
||||||
<NextButton clss="primary w-full" on:click={() => state.guistate.themeIsOpened.setData(false)}>
|
<Tr t={Translations.t.general.openTheMapAtGeolocation} />
|
||||||
<div class="flex w-full justify-center text-2xl">
|
</button>
|
||||||
<Tr t={Translations.t.general.openTheMap}/>
|
</IfNot>
|
||||||
</div>
|
|
||||||
</NextButton>
|
|
||||||
|
|
||||||
<div class="flex w-full flex-wrap sm:flex-nowrap">
|
<div class=".button low-interaction m-1 flex w-full items-center gap-x-2 rounded border p-2">
|
||||||
<IfNot condition={state.geolocation.geolocationState.permission.map((p) => p === "denied")}>
|
<div class="w-full">
|
||||||
<button class="flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
|
<Geosearch
|
||||||
<ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")}/>
|
bounds={state.mapProperties.bounds}
|
||||||
<Tr t={Translations.t.general.openTheMapAtGeolocation}/>
|
on:searchCompleted={() => state.guistate.themeIsOpened.setData(false)}
|
||||||
</button>
|
on:searchIsValid={(isValid) => {
|
||||||
</IfNot>
|
searchEnabled = isValid
|
||||||
|
}}
|
||||||
<div class=".button low-interaction m-1 flex w-full items-center gap-x-2 rounded border p-2">
|
perLayer={state.perLayer}
|
||||||
<div class="w-full">
|
{selectedElement}
|
||||||
<Geosearch
|
{selectedLayer}
|
||||||
bounds={state.mapProperties.bounds}
|
{triggerSearch}
|
||||||
on:searchCompleted={() => state.guistate.themeIsOpened.setData(false)}
|
/>
|
||||||
on:searchIsValid={(isValid) => {
|
|
||||||
searchEnabled = isValid
|
|
||||||
}}
|
|
||||||
perLayer={state.perLayer}
|
|
||||||
{selectedElement}
|
|
||||||
{selectedLayer}
|
|
||||||
{triggerSearch}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
class={twJoin("flex items-center justify-between gap-x-2", !searchEnabled && "disabled")}
|
|
||||||
on:click={() => triggerSearch.ping()}>
|
|
||||||
<Tr t={Translations.t.general.search.searchShort}/>
|
|
||||||
<SearchIcon class="h-6 w-6"/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<button
|
||||||
|
class={twJoin("flex items-center justify-between gap-x-2", !searchEnabled && "disabled")}
|
||||||
|
on:click={() => triggerSearch.ping()}
|
||||||
|
>
|
||||||
|
<Tr t={Translations.t.general.search.searchShort} />
|
||||||
|
<SearchIcon class="h-6 w-6" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="links-as-button links-w-full m-2 flex flex-col gap-y-1">
|
|
||||||
|
<div class="links-as-button links-w-full m-2 flex flex-col gap-y-1">
|
||||||
<!-- bottom buttons, a bit hidden away: switch layout -->
|
<!-- bottom buttons, a bit hidden away: switch layout -->
|
||||||
<a class="flex" href={Utils.HomepageLink()}>
|
<a class="flex" href={Utils.HomepageLink()}>
|
||||||
<img class="h-6 w-6" src="./assets/svg/add.svg"/>
|
<img class="h-6 w-6" src="./assets/svg/add.svg" />
|
||||||
<Tr t={Translations.t.general.backToIndex}/>
|
<Tr t={Translations.t.general.backToIndex} />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -127,7 +127,8 @@
|
||||||
draggable="false"
|
draggable="false"
|
||||||
on:mousedown={click}
|
on:mousedown={click}
|
||||||
src="./assets/svg/elevator.svg"
|
src="./assets/svg/elevator.svg"
|
||||||
style={`top: ${top}px;`} />
|
style={`top: ${top}px;`}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,96 +1,96 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {Store, UIEventSource} from "../../../Logic/UIEventSource"
|
import { Store, UIEventSource } from "../../../Logic/UIEventSource"
|
||||||
import type {MapProperties} from "../../../Models/MapProperties"
|
import type { MapProperties } from "../../../Models/MapProperties"
|
||||||
import {Map as MlMap} from "maplibre-gl"
|
import { Map as MlMap } from "maplibre-gl"
|
||||||
import {MapLibreAdaptor} from "../../Map/MapLibreAdaptor"
|
import { MapLibreAdaptor } from "../../Map/MapLibreAdaptor"
|
||||||
import MaplibreMap from "../../Map/MaplibreMap.svelte"
|
import MaplibreMap from "../../Map/MaplibreMap.svelte"
|
||||||
import DragInvitation from "../../Base/DragInvitation.svelte"
|
import DragInvitation from "../../Base/DragInvitation.svelte"
|
||||||
import {GeoOperations} from "../../../Logic/GeoOperations"
|
import { GeoOperations } from "../../../Logic/GeoOperations"
|
||||||
import ShowDataLayer from "../../Map/ShowDataLayer"
|
import ShowDataLayer from "../../Map/ShowDataLayer"
|
||||||
import * as boundsdisplay from "../../../assets/layers/range/range.json"
|
import * as boundsdisplay from "../../../assets/layers/range/range.json"
|
||||||
import StaticFeatureSource from "../../../Logic/FeatureSource/Sources/StaticFeatureSource"
|
import StaticFeatureSource from "../../../Logic/FeatureSource/Sources/StaticFeatureSource"
|
||||||
import * as turf from "@turf/turf"
|
import * as turf from "@turf/turf"
|
||||||
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
|
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
|
||||||
import {createEventDispatcher, onDestroy} from "svelte"
|
import { createEventDispatcher, onDestroy } from "svelte"
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A visualisation to pick a location on a map background
|
* A visualisation to pick a location on a map background
|
||||||
*/
|
*/
|
||||||
export let value: UIEventSource<{ lon: number; lat: number }>
|
export let value: UIEventSource<{ lon: number; lat: number }>
|
||||||
export let initialCoordinate: { lon: number; lat: number }
|
export let initialCoordinate: { lon: number; lat: number }
|
||||||
initialCoordinate = initialCoordinate ?? value.data
|
initialCoordinate = initialCoordinate ?? value.data
|
||||||
export let maxDistanceInMeters: number = undefined
|
export let maxDistanceInMeters: number = undefined
|
||||||
export let mapProperties: Partial<MapProperties> & {
|
export let mapProperties: Partial<MapProperties> & {
|
||||||
readonly location: UIEventSource<{ lon: number; lat: number }>
|
readonly location: UIEventSource<{ lon: number; lat: number }>
|
||||||
} = undefined
|
} = undefined
|
||||||
/**
|
/**
|
||||||
* Called when setup is done, can be used to add more layers to the map
|
* Called when setup is done, can be used to add more layers to the map
|
||||||
*/
|
*/
|
||||||
export let onCreated: (
|
export let onCreated: (
|
||||||
value: Store<{
|
value: Store<{
|
||||||
lon: number
|
lon: number
|
||||||
lat: number
|
lat: number
|
||||||
}>,
|
}>,
|
||||||
map: Store<MlMap>,
|
map: Store<MlMap>,
|
||||||
mapProperties: MapProperties
|
mapProperties: MapProperties
|
||||||
) => void = undefined
|
) => void = undefined
|
||||||
|
|
||||||
const dispatch = createEventDispatcher<{ click: { lon: number, lat: number } }>()
|
const dispatch = createEventDispatcher<{ click: { lon: number; lat: number } }>()
|
||||||
|
|
||||||
export let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
|
export let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
|
||||||
let mla = new MapLibreAdaptor(map, mapProperties)
|
let mla = new MapLibreAdaptor(map, mapProperties)
|
||||||
mla.lastClickLocation.addCallbackAndRunD(lastClick => {
|
mla.lastClickLocation.addCallbackAndRunD((lastClick) => {
|
||||||
dispatch("click", lastClick)
|
dispatch("click", lastClick)
|
||||||
})
|
})
|
||||||
mapProperties.location.syncWith(value)
|
mapProperties.location.syncWith(value)
|
||||||
if (onCreated) {
|
if (onCreated) {
|
||||||
onCreated(value, map, mla)
|
onCreated(value, map, mla)
|
||||||
}
|
}
|
||||||
|
|
||||||
let rangeIsShown = false
|
let rangeIsShown = false
|
||||||
if (maxDistanceInMeters) {
|
if (maxDistanceInMeters) {
|
||||||
onDestroy(
|
onDestroy(
|
||||||
mla.location.addCallbackD((newLocation) => {
|
mla.location.addCallbackD((newLocation) => {
|
||||||
const l = [newLocation.lon, newLocation.lat]
|
const l = [newLocation.lon, newLocation.lat]
|
||||||
const c: [number, number] = [initialCoordinate.lon, initialCoordinate.lat]
|
const c: [number, number] = [initialCoordinate.lon, initialCoordinate.lat]
|
||||||
const d = GeoOperations.distanceBetween(l, c)
|
const d = GeoOperations.distanceBetween(l, c)
|
||||||
console.log("distance is", d, l, c)
|
console.log("distance is", d, l, c)
|
||||||
if (d <= maxDistanceInMeters) {
|
if (d <= maxDistanceInMeters) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
// This is too far away - let's move back
|
// This is too far away - let's move back
|
||||||
const correctLocation = GeoOperations.along(c, l, maxDistanceInMeters - 10)
|
const correctLocation = GeoOperations.along(c, l, maxDistanceInMeters - 10)
|
||||||
window.setTimeout(() => {
|
window.setTimeout(() => {
|
||||||
mla.location.setData({lon: correctLocation[0], lat: correctLocation[1]})
|
mla.location.setData({ lon: correctLocation[0], lat: correctLocation[1] })
|
||||||
}, 25)
|
}, 25)
|
||||||
|
|
||||||
if (!rangeIsShown) {
|
if (!rangeIsShown) {
|
||||||
new ShowDataLayer(map, {
|
new ShowDataLayer(map, {
|
||||||
layer: new LayerConfig(boundsdisplay),
|
layer: new LayerConfig(boundsdisplay),
|
||||||
features: new StaticFeatureSource([
|
features: new StaticFeatureSource([
|
||||||
turf.circle(c, maxDistanceInMeters, {
|
turf.circle(c, maxDistanceInMeters, {
|
||||||
units: "meters",
|
units: "meters",
|
||||||
properties: {range: "yes", id: "0"},
|
properties: { range: "yes", id: "0" },
|
||||||
}),
|
}),
|
||||||
]),
|
]),
|
||||||
})
|
})
|
||||||
rangeIsShown = true
|
rangeIsShown = true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="min-h-32 relative h-full cursor-pointer overflow-hidden">
|
<div class="min-h-32 relative h-full cursor-pointer overflow-hidden">
|
||||||
<div class="absolute top-0 left-0 h-full w-full cursor-pointer">
|
<div class="absolute top-0 left-0 h-full w-full cursor-pointer">
|
||||||
<MaplibreMap {map}/>
|
<MaplibreMap {map} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="pointer-events-none absolute top-0 left-0 flex h-full w-full items-center p-8 opacity-50"
|
class="pointer-events-none absolute top-0 left-0 flex h-full w-full items-center p-8 opacity-50"
|
||||||
>
|
>
|
||||||
<img class="h-full max-h-24" src="./assets/svg/move-arrows.svg"/>
|
<img class="h-full max-h-24" src="./assets/svg/move-arrows.svg" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<DragInvitation hideSignal={mla.location}/>
|
<DragInvitation hideSignal={mla.location} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,349 +1,356 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
/**
|
/**
|
||||||
* This component ties together all the steps that are needed to create a new point.
|
* This component ties together all the steps that are needed to create a new point.
|
||||||
* There are many subcomponents which help with that
|
* There are many subcomponents which help with that
|
||||||
*/
|
*/
|
||||||
import type {SpecialVisualizationState} from "../../SpecialVisualization"
|
import type { SpecialVisualizationState } from "../../SpecialVisualization"
|
||||||
import PresetList from "./PresetList.svelte"
|
import PresetList from "./PresetList.svelte"
|
||||||
import type PresetConfig from "../../../Models/ThemeConfig/PresetConfig"
|
import type PresetConfig from "../../../Models/ThemeConfig/PresetConfig"
|
||||||
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
|
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
|
||||||
import Tr from "../../Base/Tr.svelte"
|
import Tr from "../../Base/Tr.svelte"
|
||||||
import SubtleButton from "../../Base/SubtleButton.svelte"
|
import SubtleButton from "../../Base/SubtleButton.svelte"
|
||||||
import FromHtml from "../../Base/FromHtml.svelte"
|
import FromHtml from "../../Base/FromHtml.svelte"
|
||||||
import Translations from "../../i18n/Translations.js"
|
import Translations from "../../i18n/Translations.js"
|
||||||
import TagHint from "../TagHint.svelte"
|
import TagHint from "../TagHint.svelte"
|
||||||
import {And} from "../../../Logic/Tags/And.js"
|
import { And } from "../../../Logic/Tags/And.js"
|
||||||
import LoginToggle from "../../Base/LoginToggle.svelte"
|
import LoginToggle from "../../Base/LoginToggle.svelte"
|
||||||
import Constants from "../../../Models/Constants.js"
|
import Constants from "../../../Models/Constants.js"
|
||||||
import FilteredLayer from "../../../Models/FilteredLayer"
|
import FilteredLayer from "../../../Models/FilteredLayer"
|
||||||
import {Store, UIEventSource} from "../../../Logic/UIEventSource"
|
import { Store, UIEventSource } from "../../../Logic/UIEventSource"
|
||||||
import {EyeIcon, EyeOffIcon} from "@rgossiaux/svelte-heroicons/solid"
|
import { EyeIcon, EyeOffIcon } from "@rgossiaux/svelte-heroicons/solid"
|
||||||
import LoginButton from "../../Base/LoginButton.svelte"
|
import LoginButton from "../../Base/LoginButton.svelte"
|
||||||
import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte"
|
import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte"
|
||||||
import CreateNewNodeAction from "../../../Logic/Osm/Actions/CreateNewNodeAction"
|
import CreateNewNodeAction from "../../../Logic/Osm/Actions/CreateNewNodeAction"
|
||||||
import {OsmWay} from "../../../Logic/Osm/OsmObject"
|
import { OsmWay } from "../../../Logic/Osm/OsmObject"
|
||||||
import {Tag} from "../../../Logic/Tags/Tag"
|
import { Tag } from "../../../Logic/Tags/Tag"
|
||||||
import type {WayId} from "../../../Models/OsmFeature"
|
import type { WayId } from "../../../Models/OsmFeature"
|
||||||
import Loading from "../../Base/Loading.svelte"
|
import Loading from "../../Base/Loading.svelte"
|
||||||
import type {GlobalFilter} from "../../../Models/GlobalFilter"
|
import type { GlobalFilter } from "../../../Models/GlobalFilter"
|
||||||
import {onDestroy} from "svelte"
|
import { onDestroy } from "svelte"
|
||||||
import NextButton from "../../Base/NextButton.svelte"
|
import NextButton from "../../Base/NextButton.svelte"
|
||||||
import BackButton from "../../Base/BackButton.svelte"
|
import BackButton from "../../Base/BackButton.svelte"
|
||||||
import ToSvelte from "../../Base/ToSvelte.svelte"
|
import ToSvelte from "../../Base/ToSvelte.svelte"
|
||||||
import Svg from "../../../Svg"
|
import Svg from "../../../Svg"
|
||||||
import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
|
import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte"
|
||||||
import { twJoin } from "tailwind-merge"
|
import { twJoin } from "tailwind-merge"
|
||||||
|
|
||||||
export let coordinate: { lon: number; lat: number }
|
export let coordinate: { lon: number; lat: number }
|
||||||
export let state: SpecialVisualizationState
|
export let state: SpecialVisualizationState
|
||||||
|
|
||||||
let selectedPreset: {
|
let selectedPreset: {
|
||||||
preset: PresetConfig
|
preset: PresetConfig
|
||||||
layer: LayerConfig
|
layer: LayerConfig
|
||||||
icon: string
|
icon: string
|
||||||
tags: Record<string, string>
|
tags: Record<string, string>
|
||||||
} = undefined
|
} = undefined
|
||||||
let checkedOfGlobalFilters: number = 0
|
let checkedOfGlobalFilters: number = 0
|
||||||
let confirmedCategory = false
|
let confirmedCategory = false
|
||||||
$: if (selectedPreset === undefined) {
|
$: if (selectedPreset === undefined) {
|
||||||
confirmedCategory = false
|
confirmedCategory = false
|
||||||
creating = false
|
creating = false
|
||||||
checkedOfGlobalFilters = 0
|
checkedOfGlobalFilters = 0
|
||||||
}
|
}
|
||||||
|
|
||||||
let flayer: FilteredLayer = undefined
|
let flayer: FilteredLayer = undefined
|
||||||
let layerIsDisplayed: UIEventSource<boolean> | undefined = undefined
|
let layerIsDisplayed: UIEventSource<boolean> | undefined = undefined
|
||||||
let layerHasFilters: Store<boolean> | undefined = undefined
|
let layerHasFilters: Store<boolean> | undefined = undefined
|
||||||
let globalFilter: UIEventSource<GlobalFilter[]> = state.layerState.globalFilters
|
let globalFilter: UIEventSource<GlobalFilter[]> = state.layerState.globalFilters
|
||||||
let _globalFilter: GlobalFilter[] = []
|
let _globalFilter: GlobalFilter[] = []
|
||||||
onDestroy(
|
onDestroy(
|
||||||
globalFilter.addCallbackAndRun((globalFilter) => {
|
globalFilter.addCallbackAndRun((globalFilter) => {
|
||||||
console.log("Global filters are", globalFilter)
|
console.log("Global filters are", globalFilter)
|
||||||
_globalFilter = globalFilter ?? []
|
_globalFilter = globalFilter ?? []
|
||||||
})
|
})
|
||||||
|
)
|
||||||
|
$: {
|
||||||
|
flayer = state.layerState.filteredLayers.get(selectedPreset?.layer?.id)
|
||||||
|
layerIsDisplayed = flayer?.isDisplayed
|
||||||
|
layerHasFilters = flayer?.hasFilter
|
||||||
|
}
|
||||||
|
const t = Translations.t.general.add
|
||||||
|
|
||||||
|
const zoom = state.mapProperties.zoom
|
||||||
|
|
||||||
|
const isLoading = state.dataIsLoading
|
||||||
|
let preciseCoordinate: UIEventSource<{ lon: number; lat: number }> = new UIEventSource(undefined)
|
||||||
|
let snappedToObject: UIEventSource<string> = new UIEventSource<string>(undefined)
|
||||||
|
|
||||||
|
// Small helper variable: if the map is tapped, we should let the 'Next'-button grab some attention as users have to click _that_ to continue, not the map
|
||||||
|
let preciseInputIsTapped = false
|
||||||
|
|
||||||
|
let creating = false
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Call when the user should restart the flow by clicking on the map, e.g. because they disabled filters.
|
||||||
|
* Will delete the lastclick-location
|
||||||
|
*/
|
||||||
|
function abort() {
|
||||||
|
state.selectedElement.setData(undefined)
|
||||||
|
// When aborted, we force the contributors to place the pin _again_
|
||||||
|
// This is because there might be a nearby object that was disabled; this forces them to re-evaluate the map
|
||||||
|
state.lastClickObject.features.setData([])
|
||||||
|
preciseInputIsTapped = false
|
||||||
|
}
|
||||||
|
|
||||||
|
async function confirm() {
|
||||||
|
creating = true
|
||||||
|
const location: { lon: number; lat: number } = preciseCoordinate.data
|
||||||
|
const snapTo: WayId | undefined = <WayId>snappedToObject.data
|
||||||
|
const tags: Tag[] = selectedPreset.preset.tags.concat(
|
||||||
|
..._globalFilter.map((f) => f?.onNewPoint?.tags ?? [])
|
||||||
)
|
)
|
||||||
$: {
|
console.log("Creating new point at", location, "snapped to", snapTo, "with tags", tags)
|
||||||
flayer = state.layerState.filteredLayers.get(selectedPreset?.layer?.id)
|
|
||||||
layerIsDisplayed = flayer?.isDisplayed
|
|
||||||
layerHasFilters = flayer?.hasFilter
|
|
||||||
}
|
|
||||||
const t = Translations.t.general.add
|
|
||||||
|
|
||||||
const zoom = state.mapProperties.zoom
|
let snapToWay: undefined | OsmWay = undefined
|
||||||
|
if (snapTo !== undefined) {
|
||||||
const isLoading = state.dataIsLoading
|
const downloaded = await state.osmObjectDownloader.DownloadObjectAsync(snapTo, 0)
|
||||||
let preciseCoordinate: UIEventSource<{ lon: number; lat: number }> = new UIEventSource(undefined)
|
if (downloaded !== "deleted") {
|
||||||
let snappedToObject: UIEventSource<string> = new UIEventSource<string>(undefined)
|
snapToWay = downloaded
|
||||||
|
}
|
||||||
// Small helper variable: if the map is tapped, we should let the 'Next'-button grab some attention as users have to click _that_ to continue, not the map
|
|
||||||
let preciseInputIsTapped = false
|
|
||||||
|
|
||||||
let creating = false
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Call when the user should restart the flow by clicking on the map, e.g. because they disabled filters.
|
|
||||||
* Will delete the lastclick-location
|
|
||||||
*/
|
|
||||||
function abort() {
|
|
||||||
state.selectedElement.setData(undefined)
|
|
||||||
// When aborted, we force the contributors to place the pin _again_
|
|
||||||
// This is because there might be a nearby object that was disabled; this forces them to re-evaluate the map
|
|
||||||
state.lastClickObject.features.setData([])
|
|
||||||
preciseInputIsTapped = false
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function confirm() {
|
const newElementAction = new CreateNewNodeAction(tags, location.lat, location.lon, {
|
||||||
creating = true
|
theme: state.layout?.id ?? "unkown",
|
||||||
const location: { lon: number; lat: number } = preciseCoordinate.data
|
changeType: "create",
|
||||||
const snapTo: WayId | undefined = <WayId>snappedToObject.data
|
snapOnto: snapToWay,
|
||||||
const tags: Tag[] = selectedPreset.preset.tags.concat(
|
})
|
||||||
..._globalFilter.map((f) => f?.onNewPoint?.tags ?? [])
|
await state.changes.applyAction(newElementAction)
|
||||||
)
|
state.newFeatures.features.ping()
|
||||||
console.log("Creating new point at", location, "snapped to", snapTo, "with tags", tags)
|
// The 'changes' should have created a new point, which added this into the 'featureProperties'
|
||||||
|
const newId = newElementAction.newElementId
|
||||||
let snapToWay: undefined | OsmWay = undefined
|
console.log("Applied pending changes, fetching store for", newId)
|
||||||
if (snapTo !== undefined) {
|
const tagsStore = state.featureProperties.getStore(newId)
|
||||||
const downloaded = await state.osmObjectDownloader.DownloadObjectAsync(snapTo, 0)
|
{
|
||||||
if (downloaded !== "deleted") {
|
// Set some metainfo
|
||||||
snapToWay = downloaded
|
const properties = tagsStore.data
|
||||||
}
|
if (snapTo) {
|
||||||
}
|
// metatags (starting with underscore) are not uploaded, so we can safely mark this
|
||||||
|
delete properties["_referencing_ways"]
|
||||||
const newElementAction = new CreateNewNodeAction(tags, location.lat, location.lon, {
|
properties["_referencing_ways"] = `["${snapTo}"]`
|
||||||
theme: state.layout?.id ?? "unkown",
|
}
|
||||||
changeType: "create",
|
properties["_backend"] = state.osmConnection.Backend()
|
||||||
snapOnto: snapToWay,
|
properties["_last_edit:timestamp"] = new Date().toISOString()
|
||||||
})
|
const userdetails = state.osmConnection.userDetails.data
|
||||||
await state.changes.applyAction(newElementAction)
|
properties["_last_edit:contributor"] = userdetails.name
|
||||||
state.newFeatures.features.ping()
|
properties["_last_edit:uid"] = "" + userdetails.uid
|
||||||
// The 'changes' should have created a new point, which added this into the 'featureProperties'
|
tagsStore.ping()
|
||||||
const newId = newElementAction.newElementId
|
|
||||||
console.log("Applied pending changes, fetching store for", newId)
|
|
||||||
const tagsStore = state.featureProperties.getStore(newId)
|
|
||||||
{
|
|
||||||
// Set some metainfo
|
|
||||||
const properties = tagsStore.data
|
|
||||||
if (snapTo) {
|
|
||||||
// metatags (starting with underscore) are not uploaded, so we can safely mark this
|
|
||||||
delete properties["_referencing_ways"]
|
|
||||||
properties["_referencing_ways"] = `["${snapTo}"]`
|
|
||||||
}
|
|
||||||
properties["_backend"] = state.osmConnection.Backend()
|
|
||||||
properties["_last_edit:timestamp"] = new Date().toISOString()
|
|
||||||
const userdetails = state.osmConnection.userDetails.data
|
|
||||||
properties["_last_edit:contributor"] = userdetails.name
|
|
||||||
properties["_last_edit:uid"] = "" + userdetails.uid
|
|
||||||
tagsStore.ping()
|
|
||||||
}
|
|
||||||
const feature = state.indexedFeatures.featuresById.data.get(newId)
|
|
||||||
abort()
|
|
||||||
state.selectedLayer.setData(selectedPreset.layer)
|
|
||||||
state.selectedElement.setData(feature)
|
|
||||||
tagsStore.ping()
|
|
||||||
}
|
}
|
||||||
|
const feature = state.indexedFeatures.featuresById.data.get(newId)
|
||||||
|
abort()
|
||||||
|
state.selectedLayer.setData(selectedPreset.layer)
|
||||||
|
state.selectedElement.setData(feature)
|
||||||
|
tagsStore.ping()
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<LoginToggle ignoreLoading={true} {state}>
|
<LoginToggle ignoreLoading={true} {state}>
|
||||||
<!-- This component is basically one big if/then/else flow checking for many conditions and edge cases that (in some cases) have to be handled;
|
<!-- This component is basically one big if/then/else flow checking for many conditions and edge cases that (in some cases) have to be handled;
|
||||||
1. the first (and outermost) is of course: are we logged in?
|
1. the first (and outermost) is of course: are we logged in?
|
||||||
2. What do we want to add?
|
2. What do we want to add?
|
||||||
3. Are all elements of this category visible? (i.e. there are no filters possibly hiding this, is the data still loading, ...) -->
|
3. Are all elements of this category visible? (i.e. there are no filters possibly hiding this, is the data still loading, ...) -->
|
||||||
<LoginButton osmConnection={state.osmConnection} slot="not-logged-in">
|
<LoginButton osmConnection={state.osmConnection} slot="not-logged-in">
|
||||||
<Tr slot="message" t={Translations.t.general.add.pleaseLogin}/>
|
<Tr slot="message" t={Translations.t.general.add.pleaseLogin} />
|
||||||
</LoginButton>
|
</LoginButton>
|
||||||
{#if $isLoading}
|
{#if $isLoading}
|
||||||
<div class="alert">
|
<div class="alert">
|
||||||
<Loading>
|
<Loading>
|
||||||
<Tr t={Translations.t.general.add.stillLoading}/>
|
<Tr t={Translations.t.general.add.stillLoading} />
|
||||||
</Loading>
|
</Loading>
|
||||||
</div>
|
</div>
|
||||||
{:else if $zoom < Constants.minZoomLevelToAddNewPoint}
|
{:else if $zoom < Constants.minZoomLevelToAddNewPoint}
|
||||||
<div class="alert">
|
<div class="alert">
|
||||||
<Tr t={Translations.t.general.add.zoomInFurther}/>
|
<Tr t={Translations.t.general.add.zoomInFurther} />
|
||||||
</div>
|
</div>
|
||||||
{:else if selectedPreset === undefined}
|
{:else if selectedPreset === undefined}
|
||||||
<!-- First, select the correct preset -->
|
<!-- First, select the correct preset -->
|
||||||
<PresetList
|
<PresetList
|
||||||
{state}
|
{state}
|
||||||
on:select={(event) => {
|
on:select={(event) => {
|
||||||
selectedPreset = event.detail
|
selectedPreset = event.detail
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{:else if !$layerIsDisplayed}
|
{:else if !$layerIsDisplayed}
|
||||||
<!-- Check that the layer is enabled, so that we don't add a duplicate -->
|
<!-- Check that the layer is enabled, so that we don't add a duplicate -->
|
||||||
<div class="alert flex items-center justify-center">
|
<div class="alert flex items-center justify-center">
|
||||||
<EyeOffIcon class="w-8"/>
|
<EyeOffIcon class="w-8" />
|
||||||
<Tr
|
<Tr
|
||||||
t={Translations.t.general.add.layerNotEnabled.Subs({ layer: selectedPreset.layer.name })}
|
t={Translations.t.general.add.layerNotEnabled.Subs({ layer: selectedPreset.layer.name })}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-wrap-reverse md:flex-nowrap">
|
<div class="flex flex-wrap-reverse md:flex-nowrap">
|
||||||
<button
|
<button
|
||||||
class="flex w-full gap-x-1"
|
class="flex w-full gap-x-1"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
abort()
|
abort()
|
||||||
state.guistate.openFilterView(selectedPreset.layer)
|
state.guistate.openFilterView(selectedPreset.layer)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ToSvelte construct={Svg.layers_svg().SetClass("w-12")}/>
|
<ToSvelte construct={Svg.layers_svg().SetClass("w-12")} />
|
||||||
<Tr t={Translations.t.general.add.openLayerControl}/>
|
<Tr t={Translations.t.general.add.openLayerControl} />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
class="primary flex w-full gap-x-1"
|
class="primary flex w-full gap-x-1"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
layerIsDisplayed.setData(true)
|
layerIsDisplayed.setData(true)
|
||||||
abort()
|
abort()
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<EyeIcon class="w-12"/>
|
<EyeIcon class="w-12" />
|
||||||
<Tr t={Translations.t.general.add.enableLayer.Subs({ name: selectedPreset.layer.name })}/>
|
<Tr t={Translations.t.general.add.enableLayer.Subs({ name: selectedPreset.layer.name })} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{:else if $layerHasFilters}
|
{:else if $layerHasFilters}
|
||||||
<!-- Some filters are enabled. The feature to add might already be mapped, but hidden -->
|
<!-- Some filters are enabled. The feature to add might already be mapped, but hidden -->
|
||||||
<div class="alert flex items-center justify-center">
|
<div class="alert flex items-center justify-center">
|
||||||
<EyeOffIcon class="w-8"/>
|
<EyeOffIcon class="w-8" />
|
||||||
<Tr t={Translations.t.general.add.disableFiltersExplanation}/>
|
<Tr t={Translations.t.general.add.disableFiltersExplanation} />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap-reverse md:flex-nowrap">
|
<div class="flex flex-wrap-reverse md:flex-nowrap">
|
||||||
<button
|
<button
|
||||||
class="primary flex w-full gap-x-1"
|
class="primary flex w-full gap-x-1"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
abort()
|
abort()
|
||||||
state.layerState.filteredLayers.get(selectedPreset.layer.id).disableAllFilters()
|
state.layerState.filteredLayers.get(selectedPreset.layer.id).disableAllFilters()
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<EyeOffIcon class="w-12"/>
|
<EyeOffIcon class="w-12" />
|
||||||
<Tr t={Translations.t.general.add.disableFilters}/>
|
<Tr t={Translations.t.general.add.disableFilters} />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="flex w-full gap-x-1"
|
class="flex w-full gap-x-1"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
abort()
|
abort()
|
||||||
state.guistate.openFilterView(selectedPreset.layer)
|
state.guistate.openFilterView(selectedPreset.layer)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ToSvelte construct={Svg.layers_svg().SetClass("w-12")}/>
|
<ToSvelte construct={Svg.layers_svg().SetClass("w-12")} />
|
||||||
<Tr t={Translations.t.general.add.openLayerControl}/>
|
<Tr t={Translations.t.general.add.openLayerControl} />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{:else if !confirmedCategory}
|
{:else if !confirmedCategory}
|
||||||
<!-- Second, confirm the category -->
|
<!-- Second, confirm the category -->
|
||||||
<h2 class="mr-12">
|
<h2 class="mr-12">
|
||||||
<Tr
|
<Tr
|
||||||
t={Translations.t.general.add.confirmTitle.Subs({ title: selectedPreset.preset.title })}
|
t={Translations.t.general.add.confirmTitle.Subs({ title: selectedPreset.preset.title })}
|
||||||
/>
|
/>
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<Tr t={Translations.t.general.add.confirmIntro}/>
|
<Tr t={Translations.t.general.add.confirmIntro} />
|
||||||
|
|
||||||
{#if selectedPreset.preset.description}
|
{#if selectedPreset.preset.description}
|
||||||
<Tr t={selectedPreset.preset.description}/>
|
<Tr t={selectedPreset.preset.description} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if selectedPreset.preset.exampleImages}
|
||||||
|
<h3>
|
||||||
|
{#if selectedPreset.preset.exampleImages.length === 1}
|
||||||
|
<Tr t={Translations.t.general.example} />
|
||||||
|
{:else}
|
||||||
|
<Tr t={Translations.t.general.examples} />
|
||||||
{/if}
|
{/if}
|
||||||
|
</h3>
|
||||||
{#if selectedPreset.preset.exampleImages}
|
<span class="flex flex-wrap items-stretch">
|
||||||
<h3>
|
|
||||||
{#if selectedPreset.preset.exampleImages.length === 1}
|
|
||||||
<Tr t={Translations.t.general.example}/>
|
|
||||||
{:else}
|
|
||||||
<Tr t={Translations.t.general.examples}/>
|
|
||||||
{/if}
|
|
||||||
</h3>
|
|
||||||
<span class="flex flex-wrap items-stretch">
|
|
||||||
{#each selectedPreset.preset.exampleImages as src}
|
{#each selectedPreset.preset.exampleImages as src}
|
||||||
<img {src} class="m-1 h-64 w-auto rounded-lg"/>
|
<img {src} class="m-1 h-64 w-auto rounded-lg" />
|
||||||
{/each}
|
{/each}
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
<TagHint
|
<TagHint
|
||||||
embedIn={(tags) => t.presetInfo.Subs({ tags })}
|
embedIn={(tags) => t.presetInfo.Subs({ tags })}
|
||||||
{state}
|
{state}
|
||||||
tags={new And(selectedPreset.preset.tags)}
|
tags={new And(selectedPreset.preset.tags)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div class="flex w-full flex-wrap-reverse md:flex-nowrap">
|
<div class="flex w-full flex-wrap-reverse md:flex-nowrap">
|
||||||
<BackButton on:click={() => (selectedPreset = undefined)} clss="w-full">
|
<BackButton on:click={() => (selectedPreset = undefined)} clss="w-full">
|
||||||
<Tr t={t.backToSelect}/>
|
<Tr t={t.backToSelect} />
|
||||||
</BackButton>
|
</BackButton>
|
||||||
|
|
||||||
<NextButton on:click={() => (confirmedCategory = true)} clss="primary w-full">
|
<NextButton on:click={() => (confirmedCategory = true)} clss="primary w-full">
|
||||||
<div slot="image" class="relative">
|
<div slot="image" class="relative">
|
||||||
<FromHtml src={selectedPreset.icon}/>
|
<FromHtml src={selectedPreset.icon} />
|
||||||
<img class="absolute bottom-0 right-0 h-4 w-4" src="./assets/svg/confirm.svg"/>
|
<img class="absolute bottom-0 right-0 h-4 w-4" src="./assets/svg/confirm.svg" />
|
||||||
</div>
|
|
||||||
<div class="w-full">
|
|
||||||
<Tr t={selectedPreset.text}/>
|
|
||||||
</div>
|
|
||||||
</NextButton>
|
|
||||||
</div>
|
</div>
|
||||||
{:else if _globalFilter?.length > 0 && _globalFilter?.length > checkedOfGlobalFilters}
|
<div class="w-full">
|
||||||
<Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck} cls="mx-12"/>
|
<Tr t={selectedPreset.text} />
|
||||||
<SubtleButton
|
</div>
|
||||||
on:click={() => {
|
</NextButton>
|
||||||
|
</div>
|
||||||
|
{:else if _globalFilter?.length > 0 && _globalFilter?.length > checkedOfGlobalFilters}
|
||||||
|
<Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck} cls="mx-12" />
|
||||||
|
<SubtleButton
|
||||||
|
on:click={() => {
|
||||||
checkedOfGlobalFilters = checkedOfGlobalFilters + 1
|
checkedOfGlobalFilters = checkedOfGlobalFilters + 1
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
slot="image"
|
slot="image"
|
||||||
src={_globalFilter[checkedOfGlobalFilters].onNewPoint?.icon ?? "./assets/svg/confirm.svg"}
|
src={_globalFilter[checkedOfGlobalFilters].onNewPoint?.icon ?? "./assets/svg/confirm.svg"}
|
||||||
class="h-12 w-12"
|
class="h-12 w-12"
|
||||||
/>
|
/>
|
||||||
<Tr
|
<Tr
|
||||||
slot="message"
|
slot="message"
|
||||||
t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.confirmAddNew.Subs({
|
t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.confirmAddNew.Subs({
|
||||||
preset: selectedPreset.preset,
|
preset: selectedPreset.preset,
|
||||||
})}
|
})}
|
||||||
/>
|
/>
|
||||||
</SubtleButton>
|
</SubtleButton>
|
||||||
<SubtleButton
|
<SubtleButton
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
globalFilter.setData([])
|
globalFilter.setData([])
|
||||||
abort()
|
abort()
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img slot="image" src="./assets/svg/close.svg" class="h-8 w-8"/>
|
<img slot="image" src="./assets/svg/close.svg" class="h-8 w-8" />
|
||||||
<Tr slot="message" t={Translations.t.general.cancel}/>
|
<Tr slot="message" t={Translations.t.general.cancel} />
|
||||||
</SubtleButton>
|
</SubtleButton>
|
||||||
{:else if !creating}
|
{:else if !creating}
|
||||||
<div class="relative w-full p-1">
|
<div class="relative w-full p-1">
|
||||||
<div class="h-96 max-h-screen w-full overflow-hidden rounded-xl">
|
<div class="h-96 max-h-screen w-full overflow-hidden rounded-xl">
|
||||||
<NewPointLocationInput
|
<NewPointLocationInput
|
||||||
on:click={() => {preciseInputIsTapped = true}}
|
on:click={() => {
|
||||||
value={preciseCoordinate}
|
preciseInputIsTapped = true
|
||||||
snappedTo={snappedToObject}
|
}}
|
||||||
{state}
|
value={preciseCoordinate}
|
||||||
{coordinate}
|
snappedTo={snappedToObject}
|
||||||
targetLayer={selectedPreset.layer}
|
{state}
|
||||||
snapToLayers={selectedPreset.preset.preciseInput.snapToLayers}
|
{coordinate}
|
||||||
/>
|
targetLayer={selectedPreset.layer}
|
||||||
</div>
|
snapToLayers={selectedPreset.preset.preciseInput.snapToLayers}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class={twJoin(!preciseInputIsTapped && "hidden", "absolute top-0 p-12 flex justify-center w-full")}>
|
<div
|
||||||
<NextButton on:click={confirm} clss="primary w-fit">
|
class={twJoin(
|
||||||
<div class="flex w-full justify-end gap-x-2">
|
!preciseInputIsTapped && "hidden",
|
||||||
<Tr t={Translations.t.general.add.confirmLocation}/>
|
"absolute top-0 flex w-full justify-center p-12"
|
||||||
</div>
|
)}
|
||||||
</NextButton>
|
>
|
||||||
</div>
|
<NextButton on:click={confirm} clss="primary w-fit">
|
||||||
|
<div class="flex w-full justify-end gap-x-2">
|
||||||
|
<Tr t={Translations.t.general.add.confirmLocation} />
|
||||||
|
</div>
|
||||||
|
</NextButton>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="absolute bottom-0 left-0 p-4">
|
<div class="absolute bottom-0 left-0 p-4">
|
||||||
<OpenBackgroundSelectorButton {state}/>
|
<OpenBackgroundSelectorButton {state} />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-wrap-reverse md:flex-nowrap">
|
||||||
|
<BackButton on:click={() => (selectedPreset = undefined)} clss="w-full">
|
||||||
|
<Tr t={t.backToSelect} />
|
||||||
|
</BackButton>
|
||||||
|
|
||||||
|
<NextButton on:click={confirm} clss={"primary w-full"}>
|
||||||
|
<div class="flex w-full justify-end gap-x-2">
|
||||||
|
<Tr t={Translations.t.general.add.confirmLocation} />
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-wrap-reverse md:flex-nowrap">
|
</NextButton>
|
||||||
<BackButton on:click={() => (selectedPreset = undefined)} clss="w-full">
|
</div>
|
||||||
<Tr t={t.backToSelect}/>
|
{:else}
|
||||||
</BackButton>
|
<Loading>Creating point...</Loading>
|
||||||
|
{/if}
|
||||||
<NextButton on:click={confirm} clss={"primary w-full"}>
|
|
||||||
<div class="flex w-full justify-end gap-x-2">
|
|
||||||
<Tr t={Translations.t.general.add.confirmLocation}/>
|
|
||||||
</div>
|
|
||||||
</NextButton>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<Loading>Creating point...</Loading>
|
|
||||||
{/if}
|
|
||||||
</LoginToggle>
|
</LoginToggle>
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
import ChangeTagAction from "../../../Logic/Osm/Actions/ChangeTagAction"
|
import ChangeTagAction from "../../../Logic/Osm/Actions/ChangeTagAction"
|
||||||
import Loading from "../../Base/Loading.svelte"
|
import Loading from "../../Base/Loading.svelte"
|
||||||
import { DeleteFlowState } from "./DeleteFlowState"
|
import { DeleteFlowState } from "./DeleteFlowState"
|
||||||
import { twJoin } from "tailwind-merge"
|
import { twJoin } from "tailwind-merge"
|
||||||
|
|
||||||
export let state: SpecialVisualizationState
|
export let state: SpecialVisualizationState
|
||||||
export let deleteConfig: DeleteConfig
|
export let deleteConfig: DeleteConfig
|
||||||
|
|
@ -112,10 +112,13 @@
|
||||||
<button
|
<button
|
||||||
slot="save-button"
|
slot="save-button"
|
||||||
on:click={onDelete}
|
on:click={onDelete}
|
||||||
class={twJoin((selectedTags === undefined && "disabled"), "primary flex bg-red-600")}
|
class={twJoin(selectedTags === undefined && "disabled", "primary flex bg-red-600")}
|
||||||
>
|
>
|
||||||
<TrashIcon
|
<TrashIcon
|
||||||
class={twJoin("ml-1 mr-2 h-6 w-6 rounded-full p-1", selectedTags !== undefined && "bg-red-600")}
|
class={twJoin(
|
||||||
|
"ml-1 mr-2 h-6 w-6 rounded-full p-1",
|
||||||
|
selectedTags !== undefined && "bg-red-600"
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
<Tr t={t.delete} />
|
<Tr t={t.delete} />
|
||||||
</button>
|
</button>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import ImportFlow from "./ImportFlow.svelte"
|
import ImportFlow from "./ImportFlow.svelte"
|
||||||
import {PointImportFlowState} from "./PointImportFlowState"
|
import { PointImportFlowState } from "./PointImportFlowState"
|
||||||
import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte"
|
import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte"
|
||||||
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
|
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
|
||||||
import {UIEventSource} from "../../../Logic/UIEventSource"
|
import { UIEventSource } from "../../../Logic/UIEventSource"
|
||||||
import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
|
import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte"
|
||||||
|
|
||||||
export let importFlow: PointImportFlowState
|
export let importFlow: PointImportFlowState
|
||||||
|
|
||||||
|
|
@ -52,7 +52,7 @@
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute bottom-0">
|
<div class="absolute bottom-0">
|
||||||
<OpenBackgroundSelectorButton {state}/>
|
<OpenBackgroundSelectorButton {state} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ImportFlow>
|
</ImportFlow>
|
||||||
|
|
|
||||||
|
|
@ -4,16 +4,16 @@
|
||||||
*/
|
*/
|
||||||
import WayImportFlowState from "./WayImportFlowState"
|
import WayImportFlowState from "./WayImportFlowState"
|
||||||
import ImportFlow from "./ImportFlow.svelte"
|
import ImportFlow from "./ImportFlow.svelte"
|
||||||
import {UIEventSource} from "../../../Logic/UIEventSource"
|
import { UIEventSource } from "../../../Logic/UIEventSource"
|
||||||
import {Map as MlMap} from "maplibre-gl"
|
import { Map as MlMap } from "maplibre-gl"
|
||||||
import {MapLibreAdaptor} from "../../Map/MapLibreAdaptor"
|
import { MapLibreAdaptor } from "../../Map/MapLibreAdaptor"
|
||||||
import MaplibreMap from "../../Map/MaplibreMap.svelte"
|
import MaplibreMap from "../../Map/MaplibreMap.svelte"
|
||||||
import ShowDataLayer from "../../Map/ShowDataLayer"
|
import ShowDataLayer from "../../Map/ShowDataLayer"
|
||||||
import StaticFeatureSource from "../../../Logic/FeatureSource/Sources/StaticFeatureSource"
|
import StaticFeatureSource from "../../../Logic/FeatureSource/Sources/StaticFeatureSource"
|
||||||
import {ImportFlowUtils} from "./ImportFlow"
|
import { ImportFlowUtils } from "./ImportFlow"
|
||||||
import {GeoOperations} from "../../../Logic/GeoOperations"
|
import { GeoOperations } from "../../../Logic/GeoOperations"
|
||||||
import ConflateImportFlowState from "./ConflateImportFlowState"
|
import ConflateImportFlowState from "./ConflateImportFlowState"
|
||||||
import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
|
import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte"
|
||||||
|
|
||||||
export let importFlow: WayImportFlowState | ConflateImportFlowState
|
export let importFlow: WayImportFlowState | ConflateImportFlowState
|
||||||
|
|
||||||
|
|
@ -51,7 +51,7 @@
|
||||||
<MaplibreMap {map} />
|
<MaplibreMap {map} />
|
||||||
</div>
|
</div>
|
||||||
<div class="absolute bottom-0">
|
<div class="absolute bottom-0">
|
||||||
<OpenBackgroundSelectorButton/>
|
<OpenBackgroundSelectorButton />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</ImportFlow>
|
</ImportFlow>
|
||||||
|
|
|
||||||
|
|
@ -32,7 +32,8 @@
|
||||||
class={twJoin(`mapping-icon-${mapping.iconClass}`, "mr-1")}
|
class={twJoin(`mapping-icon-${mapping.iconClass}`, "mr-1")}
|
||||||
src={mapping.icon}
|
src={mapping.icon}
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
alt="" />
|
alt=""
|
||||||
|
/>
|
||||||
<SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} />
|
<SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} />
|
||||||
</div>
|
</div>
|
||||||
{:else if mapping.then !== undefined}
|
{:else if mapping.then !== undefined}
|
||||||
|
|
|
||||||
|
|
@ -277,7 +277,8 @@
|
||||||
<slot name="save-button" {selectedTags}>
|
<slot name="save-button" {selectedTags}>
|
||||||
<button
|
<button
|
||||||
on:click={onSave}
|
on:click={onSave}
|
||||||
class={twJoin(selectedTags === undefined ? "disabled" : "button-shadow", "primary")}>
|
class={twJoin(selectedTags === undefined ? "disabled" : "button-shadow", "primary")}
|
||||||
|
>
|
||||||
<Tr t={Translations.t.general.save} />
|
<Tr t={Translations.t.general.save} />
|
||||||
</button>
|
</button>
|
||||||
</slot>
|
</slot>
|
||||||
|
|
|
||||||
|
|
@ -1,440 +1,440 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {Store, UIEventSource} from "../Logic/UIEventSource"
|
import { Store, UIEventSource } from "../Logic/UIEventSource"
|
||||||
import {Map as MlMap} from "maplibre-gl"
|
import { Map as MlMap } from "maplibre-gl"
|
||||||
import MaplibreMap from "./Map/MaplibreMap.svelte"
|
import MaplibreMap from "./Map/MaplibreMap.svelte"
|
||||||
import FeatureSwitchState from "../Logic/State/FeatureSwitchState"
|
import FeatureSwitchState from "../Logic/State/FeatureSwitchState"
|
||||||
import MapControlButton from "./Base/MapControlButton.svelte"
|
import MapControlButton from "./Base/MapControlButton.svelte"
|
||||||
import ToSvelte from "./Base/ToSvelte.svelte"
|
import ToSvelte from "./Base/ToSvelte.svelte"
|
||||||
import If from "./Base/If.svelte"
|
import If from "./Base/If.svelte"
|
||||||
import {GeolocationControl} from "./BigComponents/GeolocationControl"
|
import { GeolocationControl } from "./BigComponents/GeolocationControl"
|
||||||
import type {Feature} from "geojson"
|
import type { Feature } from "geojson"
|
||||||
import SelectedElementView from "./BigComponents/SelectedElementView.svelte"
|
import SelectedElementView from "./BigComponents/SelectedElementView.svelte"
|
||||||
import LayerConfig from "../Models/ThemeConfig/LayerConfig"
|
import LayerConfig from "../Models/ThemeConfig/LayerConfig"
|
||||||
import Filterview from "./BigComponents/Filterview.svelte"
|
import Filterview from "./BigComponents/Filterview.svelte"
|
||||||
import ThemeViewState from "../Models/ThemeViewState"
|
import ThemeViewState from "../Models/ThemeViewState"
|
||||||
import type {MapProperties} from "../Models/MapProperties"
|
import type { MapProperties } from "../Models/MapProperties"
|
||||||
import Geosearch from "./BigComponents/Geosearch.svelte"
|
import Geosearch from "./BigComponents/Geosearch.svelte"
|
||||||
import Translations from "./i18n/Translations"
|
import Translations from "./i18n/Translations"
|
||||||
import {CogIcon, EyeIcon, MenuIcon, XCircleIcon} from "@rgossiaux/svelte-heroicons/solid"
|
import { CogIcon, EyeIcon, MenuIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
|
||||||
|
|
||||||
import Tr from "./Base/Tr.svelte"
|
import Tr from "./Base/Tr.svelte"
|
||||||
import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte"
|
import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte"
|
||||||
import FloatOver from "./Base/FloatOver.svelte"
|
import FloatOver from "./Base/FloatOver.svelte"
|
||||||
import PrivacyPolicy from "./BigComponents/PrivacyPolicy"
|
import PrivacyPolicy from "./BigComponents/PrivacyPolicy"
|
||||||
import Constants from "../Models/Constants"
|
import Constants from "../Models/Constants"
|
||||||
import TabbedGroup from "./Base/TabbedGroup.svelte"
|
import TabbedGroup from "./Base/TabbedGroup.svelte"
|
||||||
import UserRelatedState from "../Logic/State/UserRelatedState"
|
import UserRelatedState from "../Logic/State/UserRelatedState"
|
||||||
import LoginToggle from "./Base/LoginToggle.svelte"
|
import LoginToggle from "./Base/LoginToggle.svelte"
|
||||||
import LoginButton from "./Base/LoginButton.svelte"
|
import LoginButton from "./Base/LoginButton.svelte"
|
||||||
import CopyrightPanel from "./BigComponents/CopyrightPanel"
|
import CopyrightPanel from "./BigComponents/CopyrightPanel"
|
||||||
import DownloadPanel from "./DownloadFlow/DownloadPanel.svelte"
|
import DownloadPanel from "./DownloadFlow/DownloadPanel.svelte"
|
||||||
import ModalRight from "./Base/ModalRight.svelte"
|
import ModalRight from "./Base/ModalRight.svelte"
|
||||||
import {Utils} from "../Utils"
|
import { Utils } from "../Utils"
|
||||||
import Hotkeys from "./Base/Hotkeys"
|
import Hotkeys from "./Base/Hotkeys"
|
||||||
import {VariableUiElement} from "./Base/VariableUIElement"
|
import { VariableUiElement } from "./Base/VariableUIElement"
|
||||||
import SvelteUIElement from "./Base/SvelteUIElement"
|
import SvelteUIElement from "./Base/SvelteUIElement"
|
||||||
import OverlayToggle from "./BigComponents/OverlayToggle.svelte"
|
import OverlayToggle from "./BigComponents/OverlayToggle.svelte"
|
||||||
import LevelSelector from "./BigComponents/LevelSelector.svelte"
|
import LevelSelector from "./BigComponents/LevelSelector.svelte"
|
||||||
import ExtraLinkButton from "./BigComponents/ExtraLinkButton"
|
import ExtraLinkButton from "./BigComponents/ExtraLinkButton"
|
||||||
import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte"
|
import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte"
|
||||||
import Svg from "../Svg"
|
import Svg from "../Svg"
|
||||||
import {ShareScreen} from "./BigComponents/ShareScreen"
|
import { ShareScreen } from "./BigComponents/ShareScreen"
|
||||||
import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte"
|
import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte"
|
||||||
import type {RasterLayerPolygon} from "../Models/RasterLayers"
|
import type { RasterLayerPolygon } from "../Models/RasterLayers"
|
||||||
import {AvailableRasterLayers} from "../Models/RasterLayers"
|
import { AvailableRasterLayers } from "../Models/RasterLayers"
|
||||||
import RasterLayerOverview from "./Map/RasterLayerOverview.svelte"
|
import RasterLayerOverview from "./Map/RasterLayerOverview.svelte"
|
||||||
import IfHidden from "./Base/IfHidden.svelte"
|
import IfHidden from "./Base/IfHidden.svelte"
|
||||||
import {onDestroy} from "svelte"
|
import { onDestroy } from "svelte"
|
||||||
import {OpenJosm} from "./BigComponents/OpenJosm"
|
import { OpenJosm } from "./BigComponents/OpenJosm"
|
||||||
import MapillaryLink from "./BigComponents/MapillaryLink.svelte"
|
import MapillaryLink from "./BigComponents/MapillaryLink.svelte"
|
||||||
import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"
|
import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"
|
||||||
import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte";
|
import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte"
|
||||||
import Loading from "./Base/Loading.svelte";
|
import Loading from "./Base/Loading.svelte"
|
||||||
import StateIndicator from "./BigComponents/StateIndicator.svelte";
|
import StateIndicator from "./BigComponents/StateIndicator.svelte"
|
||||||
|
|
||||||
export let state: ThemeViewState
|
export let state: ThemeViewState
|
||||||
let layout = state.layout
|
let layout = state.layout
|
||||||
|
|
||||||
let maplibremap: UIEventSource<MlMap> = state.map
|
let maplibremap: UIEventSource<MlMap> = state.map
|
||||||
let selectedElement: UIEventSource<Feature> = state.selectedElement
|
let selectedElement: UIEventSource<Feature> = state.selectedElement
|
||||||
let selectedLayer: UIEventSource<LayerConfig> = state.selectedLayer
|
let selectedLayer: UIEventSource<LayerConfig> = state.selectedLayer
|
||||||
|
|
||||||
const selectedElementView = selectedElement.map(
|
const selectedElementView = selectedElement.map(
|
||||||
(selectedElement) => {
|
(selectedElement) => {
|
||||||
// Svelte doesn't properly reload some of the legacy UI-elements
|
// Svelte doesn't properly reload some of the legacy UI-elements
|
||||||
// As such, we _reconstruct_ the selectedElementView every time a new feature is selected
|
// As such, we _reconstruct_ the selectedElementView every time a new feature is selected
|
||||||
// This is a bit wasteful, but until everything is a svelte-component, this should do the trick
|
// This is a bit wasteful, but until everything is a svelte-component, this should do the trick
|
||||||
const layer = selectedLayer.data
|
const layer = selectedLayer.data
|
||||||
if (selectedElement === undefined || layer === undefined) {
|
if (selectedElement === undefined || layer === undefined) {
|
||||||
return undefined
|
return undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!(layer.tagRenderings?.length > 0) || layer.title === undefined) {
|
if (!(layer.tagRenderings?.length > 0) || layer.title === undefined) {
|
||||||
return undefined
|
return undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
const tags = state.featureProperties.getStore(selectedElement.properties.id)
|
const tags = state.featureProperties.getStore(selectedElement.properties.id)
|
||||||
return new SvelteUIElement(SelectedElementView, {state, layer, selectedElement, tags})
|
return new SvelteUIElement(SelectedElementView, { state, layer, selectedElement, tags })
|
||||||
},
|
},
|
||||||
[selectedLayer]
|
[selectedLayer]
|
||||||
)
|
)
|
||||||
|
|
||||||
const selectedElementTitle = selectedElement.map(
|
const selectedElementTitle = selectedElement.map(
|
||||||
(selectedElement) => {
|
(selectedElement) => {
|
||||||
// Svelte doesn't properly reload some of the legacy UI-elements
|
// Svelte doesn't properly reload some of the legacy UI-elements
|
||||||
// As such, we _reconstruct_ the selectedElementView every time a new feature is selected
|
// As such, we _reconstruct_ the selectedElementView every time a new feature is selected
|
||||||
// This is a bit wasteful, but until everything is a svelte-component, this should do the trick
|
// This is a bit wasteful, but until everything is a svelte-component, this should do the trick
|
||||||
const layer = selectedLayer.data
|
const layer = selectedLayer.data
|
||||||
if (selectedElement === undefined || layer === undefined) {
|
if (selectedElement === undefined || layer === undefined) {
|
||||||
return undefined
|
return undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
const tags = state.featureProperties.getStore(selectedElement.properties.id)
|
const tags = state.featureProperties.getStore(selectedElement.properties.id)
|
||||||
return new SvelteUIElement(SelectedElementTitle, {state, layer, selectedElement, tags})
|
return new SvelteUIElement(SelectedElementTitle, { state, layer, selectedElement, tags })
|
||||||
},
|
},
|
||||||
[selectedLayer]
|
[selectedLayer]
|
||||||
)
|
)
|
||||||
|
|
||||||
let mapproperties: MapProperties = state.mapProperties
|
let mapproperties: MapProperties = state.mapProperties
|
||||||
let featureSwitches: FeatureSwitchState = state.featureSwitches
|
let featureSwitches: FeatureSwitchState = state.featureSwitches
|
||||||
let availableLayers = state.availableLayers
|
let availableLayers = state.availableLayers
|
||||||
let userdetails = state.osmConnection.userDetails
|
let userdetails = state.osmConnection.userDetails
|
||||||
let currentViewLayer = layout.layers.find((l) => l.id === "current_view")
|
let currentViewLayer = layout.layers.find((l) => l.id === "current_view")
|
||||||
let rasterLayer: Store<RasterLayerPolygon> = state.mapProperties.rasterLayer
|
let rasterLayer: Store<RasterLayerPolygon> = state.mapProperties.rasterLayer
|
||||||
let rasterLayerName =
|
let rasterLayerName =
|
||||||
rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maplibre.properties.name
|
rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maplibre.properties.name
|
||||||
onDestroy(
|
onDestroy(
|
||||||
rasterLayer.addCallbackAndRunD((l) => {
|
rasterLayer.addCallbackAndRunD((l) => {
|
||||||
rasterLayerName = l.properties.name
|
rasterLayerName = l.properties.name
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
|
<div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
|
||||||
<MaplibreMap map={maplibremap}/>
|
<MaplibreMap map={maplibremap} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="pointer-events-none absolute top-0 left-0 w-full">
|
<div class="pointer-events-none absolute top-0 left-0 w-full">
|
||||||
<!-- Top components -->
|
<!-- Top components -->
|
||||||
<If condition={state.featureSwitches.featureSwitchSearch}>
|
<If condition={state.featureSwitches.featureSwitchSearch}>
|
||||||
<div class="pointer-events-auto float-right mt-1 px-1 max-[480px]:w-full sm:m-2">
|
<div class="pointer-events-auto float-right mt-1 px-1 max-[480px]:w-full sm:m-2">
|
||||||
<Geosearch
|
<Geosearch
|
||||||
bounds={state.mapProperties.bounds}
|
bounds={state.mapProperties.bounds}
|
||||||
perLayer={state.perLayer}
|
perLayer={state.perLayer}
|
||||||
{selectedElement}
|
{selectedElement}
|
||||||
{selectedLayer}
|
{selectedLayer}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</If>
|
</If>
|
||||||
<div class="float-left m-1 flex flex-col sm:mt-2">
|
<div class="float-left m-1 flex flex-col sm:mt-2">
|
||||||
<MapControlButton on:click={() => state.guistate.themeIsOpened.setData(true)}>
|
<MapControlButton on:click={() => state.guistate.themeIsOpened.setData(true)}>
|
||||||
<div class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 md:mx-2">
|
<div class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 md:mx-2">
|
||||||
<img class="mr-0.5 block h-6 w-6 sm:mr-1 md:mr-2 md:h-8 md:w-8" src={layout.icon}/>
|
<img class="mr-0.5 block h-6 w-6 sm:mr-1 md:mr-2 md:h-8 md:w-8" src={layout.icon} />
|
||||||
<b class="mr-1">
|
<b class="mr-1">
|
||||||
<Tr t={layout.title}/>
|
<Tr t={layout.title} />
|
||||||
</b>
|
</b>
|
||||||
</div>
|
</div>
|
||||||
</MapControlButton>
|
</MapControlButton>
|
||||||
<MapControlButton on:click={() => state.guistate.menuIsOpened.setData(true)}>
|
<MapControlButton on:click={() => state.guistate.menuIsOpened.setData(true)}>
|
||||||
<MenuIcon class="h-8 w-8 cursor-pointer"/>
|
<MenuIcon class="h-8 w-8 cursor-pointer" />
|
||||||
</MapControlButton>
|
</MapControlButton>
|
||||||
{#if currentViewLayer?.tagRenderings && currentViewLayer.defaultIcon()}
|
{#if currentViewLayer?.tagRenderings && currentViewLayer.defaultIcon()}
|
||||||
<MapControlButton
|
<MapControlButton
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
selectedLayer.setData(currentViewLayer)
|
selectedLayer.setData(currentViewLayer)
|
||||||
selectedElement.setData(state.currentView.features?.data?.[0])
|
selectedElement.setData(state.currentView.features?.data?.[0])
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ToSvelte
|
|
||||||
construct={() => currentViewLayer.defaultIcon().SetClass("w-8 h-8 cursor-pointer")}
|
|
||||||
/>
|
|
||||||
</MapControlButton>
|
|
||||||
{/if}
|
|
||||||
<ToSvelte
|
<ToSvelte
|
||||||
construct={() => new ExtraLinkButton(state, layout.extraLink).SetClass("pointer-events-auto")}
|
construct={() => currentViewLayer.defaultIcon().SetClass("w-8 h-8 cursor-pointer")}
|
||||||
/>
|
/>
|
||||||
<If condition={state.featureSwitchIsTesting}>
|
</MapControlButton>
|
||||||
<div class="alert w-fit">Testmode</div>
|
{/if}
|
||||||
</If>
|
<ToSvelte
|
||||||
</div>
|
construct={() => new ExtraLinkButton(state, layout.extraLink).SetClass("pointer-events-auto")}
|
||||||
<div class="flex justify-center w-full"> <!-- Flex and w-full are needed for the positioning -->
|
/>
|
||||||
<!-- Centermessage -->
|
<If condition={state.featureSwitchIsTesting}>
|
||||||
<StateIndicator {state}/>
|
<div class="alert w-fit">Testmode</div>
|
||||||
</div>
|
</If>
|
||||||
|
</div>
|
||||||
|
<div class="flex w-full justify-center">
|
||||||
|
<!-- Flex and w-full are needed for the positioning -->
|
||||||
|
<!-- Centermessage -->
|
||||||
|
<StateIndicator {state} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pointer-events-none absolute bottom-0 left-0 mb-4 w-screen">
|
<div class="pointer-events-none absolute bottom-0 left-0 mb-4 w-screen">
|
||||||
<!-- bottom controls -->
|
<!-- bottom controls -->
|
||||||
<div class="flex w-full items-end justify-between px-4">
|
<div class="flex w-full items-end justify-between px-4">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
<!-- bottom left elements -->
|
<!-- bottom left elements -->
|
||||||
<OpenBackgroundSelectorButton hideTooltip={true} {state}/>
|
<OpenBackgroundSelectorButton hideTooltip={true} {state} />
|
||||||
<a
|
<a
|
||||||
class="bg-black-transparent pointer-events-auto h-fit max-h-12 cursor-pointer self-end overflow-hidden rounded-2xl pl-1 pr-2 text-white opacity-50 hover:opacity-100"
|
class="bg-black-transparent pointer-events-auto h-fit max-h-12 cursor-pointer self-end overflow-hidden rounded-2xl pl-1 pr-2 text-white opacity-50 hover:opacity-100"
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
state.guistate.themeViewTab.setData("copyright")
|
state.guistate.themeViewTab.setData("copyright")
|
||||||
state.guistate.themeIsOpened.setData(true)
|
state.guistate.themeIsOpened.setData(true)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
© OpenStreetMap, <span class="w-24">{rasterLayerName}</span>
|
© OpenStreetMap, <span class="w-24">{rasterLayerName}</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col items-end">
|
<div class="flex flex-col items-end">
|
||||||
<!-- bottom right elements -->
|
<!-- bottom right elements -->
|
||||||
<If condition={state.floors.map((f) => f.length > 1)}>
|
<If condition={state.floors.map((f) => f.length > 1)}>
|
||||||
<div class="pointer-events-auto mr-0.5">
|
<div class="pointer-events-auto mr-0.5">
|
||||||
<LevelSelector
|
<LevelSelector
|
||||||
floors={state.floors}
|
floors={state.floors}
|
||||||
layerState={state.layerState}
|
layerState={state.layerState}
|
||||||
zoom={state.mapProperties.zoom}
|
zoom={state.mapProperties.zoom}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</If>
|
</If>
|
||||||
<MapControlButton on:click={() => mapproperties.zoom.update((z) => z + 1)}>
|
<MapControlButton on:click={() => mapproperties.zoom.update((z) => z + 1)}>
|
||||||
<ToSvelte construct={Svg.plus_svg().SetClass("w-8 h-8")}/>
|
<ToSvelte construct={Svg.plus_svg().SetClass("w-8 h-8")} />
|
||||||
</MapControlButton>
|
</MapControlButton>
|
||||||
<MapControlButton on:click={() => mapproperties.zoom.update((z) => z - 1)}>
|
<MapControlButton on:click={() => mapproperties.zoom.update((z) => z - 1)}>
|
||||||
<ToSvelte construct={Svg.min_svg().SetClass("w-8 h-8")}/>
|
<ToSvelte construct={Svg.min_svg().SetClass("w-8 h-8")} />
|
||||||
</MapControlButton>
|
</MapControlButton>
|
||||||
<If condition={featureSwitches.featureSwitchGeolocation}>
|
<If condition={featureSwitches.featureSwitchGeolocation}>
|
||||||
<MapControlButton>
|
<MapControlButton>
|
||||||
<ToSvelte
|
<ToSvelte
|
||||||
construct={new GeolocationControl(state.geolocation, mapproperties).SetClass(
|
construct={new GeolocationControl(state.geolocation, mapproperties).SetClass(
|
||||||
"block w-8 h-8"
|
"block w-8 h-8"
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</MapControlButton>
|
</MapControlButton>
|
||||||
</If>
|
</If>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<If
|
<If
|
||||||
condition={selectedElementView.map(
|
condition={selectedElementView.map(
|
||||||
(v) =>
|
(v) =>
|
||||||
v !== undefined && selectedLayer.data !== undefined && !selectedLayer.data.popupInFloatover,
|
v !== undefined && selectedLayer.data !== undefined && !selectedLayer.data.popupInFloatover,
|
||||||
[selectedLayer]
|
[selectedLayer]
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<!-- right modal with the selected element view -->
|
<!-- right modal with the selected element view -->
|
||||||
<ModalRight
|
<ModalRight
|
||||||
on:close={() => {
|
on:close={() => {
|
||||||
selectedElement.setData(undefined)
|
selectedElement.setData(undefined)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div class="normal-background absolute flex h-full w-full flex-col">
|
<div class="normal-background absolute flex h-full w-full flex-col">
|
||||||
<ToSvelte construct={new VariableUiElement(selectedElementTitle)}>
|
<ToSvelte construct={new VariableUiElement(selectedElementTitle)}>
|
||||||
<!-- Title -->
|
<!-- Title -->
|
||||||
</ToSvelte>
|
</ToSvelte>
|
||||||
<ToSvelte construct={new VariableUiElement(selectedElementView).SetClass("overflow-auto")}>
|
<ToSvelte construct={new VariableUiElement(selectedElementView).SetClass("overflow-auto")}>
|
||||||
<!-- Main view -->
|
<!-- Main view -->
|
||||||
</ToSvelte>
|
</ToSvelte>
|
||||||
</div>
|
</div>
|
||||||
</ModalRight>
|
</ModalRight>
|
||||||
</If>
|
</If>
|
||||||
|
|
||||||
<If
|
<If
|
||||||
condition={selectedElementView.map(
|
condition={selectedElementView.map(
|
||||||
(v) =>
|
(v) =>
|
||||||
v !== undefined && selectedLayer.data !== undefined && selectedLayer.data.popupInFloatover,
|
v !== undefined && selectedLayer.data !== undefined && selectedLayer.data.popupInFloatover,
|
||||||
[selectedLayer]
|
[selectedLayer]
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<!-- Floatover with the selected element, if applicable -->
|
<!-- Floatover with the selected element, if applicable -->
|
||||||
<FloatOver
|
<FloatOver
|
||||||
on:close={() => {
|
on:close={() => {
|
||||||
selectedElement.setData(undefined)
|
selectedElement.setData(undefined)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ToSvelte construct={new VariableUiElement(selectedElementView)}/>
|
<ToSvelte construct={new VariableUiElement(selectedElementView)} />
|
||||||
</FloatOver>
|
</FloatOver>
|
||||||
</If>
|
</If>
|
||||||
|
|
||||||
<If condition={state.guistate.themeIsOpened}>
|
<If condition={state.guistate.themeIsOpened}>
|
||||||
<!-- Theme menu -->
|
<!-- Theme menu -->
|
||||||
<FloatOver>
|
<FloatOver>
|
||||||
<span slot="close-button"><!-- Disable the close button --></span>
|
<span slot="close-button"><!-- Disable the close button --></span>
|
||||||
<TabbedGroup tab={state.guistate.themeViewTabIndex}>
|
<TabbedGroup tab={state.guistate.themeViewTabIndex}>
|
||||||
<div slot="post-tablist">
|
<div slot="post-tablist">
|
||||||
<XCircleIcon
|
<XCircleIcon
|
||||||
class="mr-2 h-8 w-8"
|
class="mr-2 h-8 w-8"
|
||||||
on:click={() => state.guistate.themeIsOpened.setData(false)}
|
on:click={() => state.guistate.themeIsOpened.setData(false)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex" slot="title0">
|
<div class="flex" slot="title0">
|
||||||
<img class="block h-4 w-4" src={layout.icon}/>
|
<img class="block h-4 w-4" src={layout.icon} />
|
||||||
<Tr t={layout.title}/>
|
<Tr t={layout.title} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="m-4 h-full" slot="content0">
|
<div class="m-4 h-full" slot="content0">
|
||||||
<ThemeIntroPanel {state}/>
|
<ThemeIntroPanel {state} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex" slot="title1">
|
<div class="flex" slot="title1">
|
||||||
<If condition={state.featureSwitches.featureSwitchFilter}>
|
<If condition={state.featureSwitches.featureSwitchFilter}>
|
||||||
<ToSvelte construct={Svg.filter_svg().SetClass("w-4 h-4")}/>
|
<ToSvelte construct={Svg.filter_svg().SetClass("w-4 h-4")} />
|
||||||
<Tr t={Translations.t.general.menu.filter}/>
|
<Tr t={Translations.t.general.menu.filter} />
|
||||||
</If>
|
</If>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="m-2 flex flex-col" slot="content1">
|
<div class="m-2 flex flex-col" slot="content1">
|
||||||
{#each layout.layers as layer}
|
{#each layout.layers as layer}
|
||||||
<Filterview
|
<Filterview
|
||||||
zoomlevel={state.mapProperties.zoom}
|
zoomlevel={state.mapProperties.zoom}
|
||||||
filteredLayer={state.layerState.filteredLayers.get(layer.id)}
|
filteredLayer={state.layerState.filteredLayers.get(layer.id)}
|
||||||
highlightedLayer={state.guistate.highlightedLayerInFilters}
|
highlightedLayer={state.guistate.highlightedLayerInFilters}
|
||||||
/>
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
{#each layout.tileLayerSources as tilesource}
|
{#each layout.tileLayerSources as tilesource}
|
||||||
<OverlayToggle
|
<OverlayToggle
|
||||||
layerproperties={tilesource}
|
layerproperties={tilesource}
|
||||||
state={state.overlayLayerStates.get(tilesource.id)}
|
state={state.overlayLayerStates.get(tilesource.id)}
|
||||||
highlightedLayer={state.guistate.highlightedLayerInFilters}
|
highlightedLayer={state.guistate.highlightedLayerInFilters}
|
||||||
zoomlevel={state.mapProperties.zoom}
|
zoomlevel={state.mapProperties.zoom}
|
||||||
/>
|
/>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
<div class="flex" slot="title2">
|
<div class="flex" slot="title2">
|
||||||
<If condition={state.featureSwitches.featureSwitchEnableExport}>
|
<If condition={state.featureSwitches.featureSwitchEnableExport}>
|
||||||
<ToSvelte construct={Svg.download_svg().SetClass("w-4 h-4")}/>
|
<ToSvelte construct={Svg.download_svg().SetClass("w-4 h-4")} />
|
||||||
<Tr t={Translations.t.general.download.title}/>
|
<Tr t={Translations.t.general.download.title} />
|
||||||
</If>
|
</If>
|
||||||
</div>
|
</div>
|
||||||
<div class="m-4" slot="content2">
|
<div class="m-4" slot="content2">
|
||||||
<DownloadPanel {state}/>
|
<DownloadPanel {state} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div slot="title3">
|
<div slot="title3">
|
||||||
<Tr t={Translations.t.general.attribution.title}/>
|
<Tr t={Translations.t.general.attribution.title} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ToSvelte construct={() => new CopyrightPanel(state)} slot="content3"/>
|
<ToSvelte construct={() => new CopyrightPanel(state)} slot="content3" />
|
||||||
|
|
||||||
<div slot="title4">
|
<div slot="title4">
|
||||||
<Tr t={Translations.t.general.sharescreen.title}/>
|
<Tr t={Translations.t.general.sharescreen.title} />
|
||||||
</div>
|
</div>
|
||||||
<div class="m-2" slot="content4">
|
<div class="m-2" slot="content4">
|
||||||
<ToSvelte construct={() => new ShareScreen(state)}/>
|
<ToSvelte construct={() => new ShareScreen(state)} />
|
||||||
</div>
|
</div>
|
||||||
</TabbedGroup>
|
</TabbedGroup>
|
||||||
</FloatOver>
|
</FloatOver>
|
||||||
</If>
|
</If>
|
||||||
|
|
||||||
<IfHidden condition={state.guistate.backgroundLayerSelectionIsOpened}>
|
<IfHidden condition={state.guistate.backgroundLayerSelectionIsOpened}>
|
||||||
<!-- background layer selector -->
|
<!-- background layer selector -->
|
||||||
<FloatOver on:close={() => state.guistate.backgroundLayerSelectionIsOpened.setData(false)}>
|
<FloatOver on:close={() => state.guistate.backgroundLayerSelectionIsOpened.setData(false)}>
|
||||||
<div class="h-full p-2">
|
<div class="h-full p-2">
|
||||||
<RasterLayerOverview
|
<RasterLayerOverview
|
||||||
{availableLayers}
|
{availableLayers}
|
||||||
map={state.map}
|
map={state.map}
|
||||||
mapproperties={state.mapProperties}
|
mapproperties={state.mapProperties}
|
||||||
userstate={state.userRelatedState}
|
userstate={state.userRelatedState}
|
||||||
visible={state.guistate.backgroundLayerSelectionIsOpened}
|
visible={state.guistate.backgroundLayerSelectionIsOpened}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</FloatOver>
|
</FloatOver>
|
||||||
</IfHidden>
|
</IfHidden>
|
||||||
|
|
||||||
<If condition={state.guistate.menuIsOpened}>
|
<If condition={state.guistate.menuIsOpened}>
|
||||||
<!-- Menu page -->
|
<!-- Menu page -->
|
||||||
<FloatOver>
|
<FloatOver>
|
||||||
<span slot="close-button"><!-- Hide the default close button --></span>
|
<span slot="close-button"><!-- Hide the default close button --></span>
|
||||||
<TabbedGroup tab={state.guistate.menuViewTabIndex}>
|
<TabbedGroup tab={state.guistate.menuViewTabIndex}>
|
||||||
<div slot="post-tablist">
|
<div slot="post-tablist">
|
||||||
<XCircleIcon
|
<XCircleIcon
|
||||||
class="mr-2 h-8 w-8"
|
class="mr-2 h-8 w-8"
|
||||||
on:click={() => state.guistate.menuIsOpened.setData(false)}
|
on:click={() => state.guistate.menuIsOpened.setData(false)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex" slot="title0">
|
<div class="flex" slot="title0">
|
||||||
<Tr t={Translations.t.general.menu.aboutMapComplete}/>
|
<Tr t={Translations.t.general.menu.aboutMapComplete} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="links-as-button links-w-full m-2 flex flex-col gap-y-1" slot="content0">
|
<div class="links-as-button links-w-full m-2 flex flex-col gap-y-1" slot="content0">
|
||||||
<Tr t={Translations.t.general.aboutMapComplete.intro}/>
|
<Tr t={Translations.t.general.aboutMapComplete.intro} />
|
||||||
|
|
||||||
<a class="flex" href={Utils.HomepageLink()}>
|
<a class="flex" href={Utils.HomepageLink()}>
|
||||||
<img class="h-6 w-6" src="./assets/svg/add.svg"/>
|
<img class="h-6 w-6" src="./assets/svg/add.svg" />
|
||||||
<Tr t={Translations.t.general.backToIndex}/>
|
<Tr t={Translations.t.general.backToIndex} />
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
|
<a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
|
||||||
<img class="h-6 w-6" src="./assets/svg/bug.svg"/>
|
<img class="h-6 w-6" src="./assets/svg/bug.svg" />
|
||||||
<Tr t={Translations.t.general.attribution.openIssueTracker}/>
|
<Tr t={Translations.t.general.attribution.openIssueTracker} />
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
|
<a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
|
||||||
<img class="h-6 w-6" src="./assets/svg/mastodon.svg"/>
|
<img class="h-6 w-6" src="./assets/svg/mastodon.svg" />
|
||||||
<Tr t={Translations.t.general.attribution.followOnMastodon}/>
|
<Tr t={Translations.t.general.attribution.followOnMastodon} />
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
|
<a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
|
||||||
<img class="h-6 w-6" src="./assets/svg/liberapay.svg"/>
|
<img class="h-6 w-6" src="./assets/svg/liberapay.svg" />
|
||||||
<Tr t={Translations.t.general.attribution.donate}/>
|
<Tr t={Translations.t.general.attribution.donate} />
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a class="flex" href={Utils.OsmChaLinkFor(7)} target="_blank">
|
<a class="flex" href={Utils.OsmChaLinkFor(7)} target="_blank">
|
||||||
<img class="h-6 w-6" src="./assets/svg/statistics.svg"/>
|
<img class="h-6 w-6" src="./assets/svg/statistics.svg" />
|
||||||
<Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: "MapComplete" })}/>
|
<Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: "MapComplete" })} />
|
||||||
</a>
|
</a>
|
||||||
{Constants.vNumber}
|
{Constants.vNumber}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex" slot="title1">
|
<div class="flex" slot="title1">
|
||||||
<CogIcon class="h-6 w-6"/>
|
<CogIcon class="h-6 w-6" />
|
||||||
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})}/>
|
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="links-as-button" slot="content1">
|
<div class="links-as-button" slot="content1">
|
||||||
<!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
|
<!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
|
||||||
<LoginToggle {state}>
|
<LoginToggle {state}>
|
||||||
<div class="flex flex-col" slot="not-logged-in">
|
<div class="flex flex-col" slot="not-logged-in">
|
||||||
<Tr class="alert" t={Translations.t.userinfo.notLoggedIn}/>
|
<Tr class="alert" t={Translations.t.userinfo.notLoggedIn} />
|
||||||
<LoginButton clss="primary" osmConnection={state.osmConnection}/>
|
<LoginButton clss="primary" osmConnection={state.osmConnection} />
|
||||||
</div>
|
</div>
|
||||||
<SelectedElementView
|
<SelectedElementView
|
||||||
highlightedRendering={state.guistate.highlightedUserSetting}
|
highlightedRendering={state.guistate.highlightedUserSetting}
|
||||||
layer={UserRelatedState.usersettingsConfig}
|
layer={UserRelatedState.usersettingsConfig}
|
||||||
selectedElement={{
|
selectedElement={{
|
||||||
type: "Feature",
|
type: "Feature",
|
||||||
properties: {},
|
properties: {},
|
||||||
geometry: { type: "Point", coordinates: [0, 0] },
|
geometry: { type: "Point", coordinates: [0, 0] },
|
||||||
}}
|
}}
|
||||||
{state}
|
{state}
|
||||||
tags={state.userRelatedState.preferencesAsTags}
|
tags={state.userRelatedState.preferencesAsTags}
|
||||||
/>
|
/>
|
||||||
</LoginToggle>
|
</LoginToggle>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex" slot="title2">
|
<div class="flex" slot="title2">
|
||||||
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")}/>
|
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
|
||||||
Get in touch with others
|
Get in touch with others
|
||||||
</div>
|
</div>
|
||||||
<div class="m-2" slot="content2">
|
<div class="m-2" slot="content2">
|
||||||
<CommunityIndexView location={state.mapProperties.location}/>
|
<CommunityIndexView location={state.mapProperties.location} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex" slot="title3">
|
<div class="flex" slot="title3">
|
||||||
<EyeIcon class="w-6"/>
|
<EyeIcon class="w-6" />
|
||||||
<Tr t={Translations.t.privacy.title}/>
|
<Tr t={Translations.t.privacy.title} />
|
||||||
</div>
|
</div>
|
||||||
<div class="m-2" slot="content3">
|
<div class="m-2" slot="content3">
|
||||||
<ToSvelte construct={() => new PrivacyPolicy()}/>
|
<ToSvelte construct={() => new PrivacyPolicy()} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Tr slot="title4" t={Translations.t.advanced.title}/>
|
<Tr slot="title4" t={Translations.t.advanced.title} />
|
||||||
<div class="m-2 flex flex-col" slot="content4">
|
<div class="m-2 flex flex-col" slot="content4">
|
||||||
<OpenIdEditor mapProperties={state.mapProperties}/>
|
<OpenIdEditor mapProperties={state.mapProperties} />
|
||||||
<ToSvelte
|
<ToSvelte
|
||||||
construct={() =>
|
construct={() =>
|
||||||
new OpenJosm(state.osmConnection, state.mapProperties.bounds).SetClass("w-full")}
|
new OpenJosm(state.osmConnection, state.mapProperties.bounds).SetClass("w-full")}
|
||||||
/>
|
/>
|
||||||
<MapillaryLink mapProperties={state.mapProperties}/>
|
<MapillaryLink mapProperties={state.mapProperties} />
|
||||||
<ToSvelte construct={Hotkeys.generateDocumentationDynamic}/>
|
<ToSvelte construct={Hotkeys.generateDocumentationDynamic} />
|
||||||
</div>
|
</div>
|
||||||
</TabbedGroup>
|
</TabbedGroup>
|
||||||
</FloatOver>
|
</FloatOver>
|
||||||
</If>
|
</If>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue