forked from MapComplete/MapComplete
92 lines
3 KiB
Svelte
92 lines
3 KiB
Svelte
<script lang="ts">
|
|
import LayoutConfig from "../../../Models/ThemeConfig/LayoutConfig"
|
|
import { createEventDispatcher } from "svelte"
|
|
import type PresetConfig from "../../../Models/ThemeConfig/PresetConfig"
|
|
import Tr from "../../Base/Tr.svelte"
|
|
import Translations from "../../i18n/Translations.js"
|
|
import { Translation } from "../../i18n/Translation"
|
|
import type { SpecialVisualizationState } from "../../SpecialVisualization"
|
|
import { ImmutableStore } from "../../../Logic/UIEventSource"
|
|
import { TagUtils } from "../../../Logic/Tags/TagUtils"
|
|
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
|
|
import FromHtml from "../../Base/FromHtml.svelte"
|
|
import NextButton from "../../Base/NextButton.svelte"
|
|
|
|
/**
|
|
* This component lists all the presets and allows the user to select one
|
|
*/
|
|
export let state: SpecialVisualizationState
|
|
let layout: LayoutConfig = state.layout
|
|
let presets: {
|
|
preset: PresetConfig
|
|
layer: LayerConfig
|
|
text: Translation
|
|
icon: string
|
|
tags: Record<string, string>
|
|
}[] = []
|
|
|
|
for (const layer of layout.layers) {
|
|
const flayer = state.layerState.filteredLayers.get(layer.id)
|
|
if (flayer.isDisplayed.data === false) {
|
|
// The layer is not displayed...
|
|
if (!state.featureSwitches.featureSwitchFilter.data) {
|
|
// ...and we cannot enable the layer control -> we skip, as these presets can never be shown anyway
|
|
continue
|
|
}
|
|
|
|
if (layer.name === undefined) {
|
|
// this layer can never be toggled on in any case, so we skip the presets
|
|
continue
|
|
}
|
|
}
|
|
|
|
for (const preset of layer.presets) {
|
|
const tags = TagUtils.KVtoProperties(preset.tags ?? [])
|
|
|
|
const icon: string = layer.mapRendering[0]
|
|
.RenderIcon(new ImmutableStore<any>(tags), false)
|
|
.html.SetClass("w-12 h-12 block relative")
|
|
.ConstructElement().innerHTML
|
|
|
|
const description = preset.description?.FirstSentence()
|
|
|
|
const simplified = {
|
|
preset,
|
|
layer,
|
|
icon,
|
|
description,
|
|
tags,
|
|
text: Translations.t.general.add.addNew.Subs(
|
|
{ category: preset.title },
|
|
preset.title["context"]
|
|
),
|
|
}
|
|
presets.push(simplified)
|
|
}
|
|
}
|
|
|
|
const dispatch = createEventDispatcher<{
|
|
select: { preset: PresetConfig; layer: LayerConfig; icon: string; tags: Record<string, string> }
|
|
}>()
|
|
</script>
|
|
|
|
<div class="flex w-full flex-col">
|
|
<h2 class="mr-12">
|
|
<!-- The title gets a big right margin to give place to the 'close'-button, see https://github.com/pietervdvn/MapComplete/issues/1445 -->
|
|
<Tr t={Translations.t.general.add.intro} />
|
|
</h2>
|
|
|
|
{#each presets as preset}
|
|
<NextButton on:click={() => dispatch("select", preset)}>
|
|
<FromHtml slot="image" src={preset.icon} />
|
|
<div class="flex flex-col">
|
|
<b class="w-fit">
|
|
<Tr t={preset.text} />
|
|
</b>
|
|
{#if preset.description}
|
|
<Tr t={preset.description} cls="font-normal" />
|
|
{/if}
|
|
</div>
|
|
</NextButton>
|
|
{/each}
|
|
</div>
|