forked from MapComplete/MapComplete
70 lines
2.4 KiB
Svelte
70 lines
2.4 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { UIEventSource } from "../../../Logic/UIEventSource"
|
||
|
|
import LanguageQuestion from "./LanguageQuestion.svelte"
|
||
|
|
import LanguageAnswer from "./LanguageAnswer.svelte"
|
||
|
|
import Tr from "../../Base/Tr.svelte"
|
||
|
|
import Translations from "../../i18n/Translations"
|
||
|
|
import type { SpecialVisualizationState } from "../../SpecialVisualization"
|
||
|
|
import type { Feature } from "geojson"
|
||
|
|
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
|
||
|
|
import EditButton from "../TagRendering/EditButton.svelte"
|
||
|
|
|
||
|
|
export let key: string
|
||
|
|
export let tags: UIEventSource<Record<string, string>>
|
||
|
|
|
||
|
|
export let state: SpecialVisualizationState
|
||
|
|
export let feature: Feature
|
||
|
|
export let layer: LayerConfig | undefined
|
||
|
|
|
||
|
|
export let question: string
|
||
|
|
export let on_no_known_languages: string = undefined
|
||
|
|
export let single_render: string
|
||
|
|
export let item_render: string
|
||
|
|
export let render_all: string // Should contain one `{list()}`
|
||
|
|
let prefix = key + ":"
|
||
|
|
let foundLanguages = tags.map((tags) => {
|
||
|
|
const foundLanguages: string[] = []
|
||
|
|
for (const k in tags) {
|
||
|
|
const v = tags[k]
|
||
|
|
if (v !== "yes") {
|
||
|
|
continue
|
||
|
|
}
|
||
|
|
if (k.startsWith(prefix)) {
|
||
|
|
foundLanguages.push(k.substring(prefix.length))
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return foundLanguages
|
||
|
|
})
|
||
|
|
|
||
|
|
const forceInputMode = new UIEventSource(false)
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{#if $foundLanguages.length === 0 && on_no_known_languages && !$forceInputMode}
|
||
|
|
<div class="p-1 flex items-center justify-between low-interaction rounded">
|
||
|
|
<div>
|
||
|
|
{on_no_known_languages}
|
||
|
|
</div>
|
||
|
|
<EditButton on:click={_ => forceInputMode.setData(true)} />
|
||
|
|
</div>
|
||
|
|
{:else if $forceInputMode || $foundLanguages.length === 0}
|
||
|
|
<LanguageQuestion {question} {foundLanguages} {prefix} {state} {tags} {feature} {layer}
|
||
|
|
on:save={_ => forceInputMode.setData(false)}>
|
||
|
|
<span slot="cancel-button">
|
||
|
|
{#if $forceInputMode}
|
||
|
|
<button on:click={_ => forceInputMode.setData(false)}>
|
||
|
|
<Tr t={Translations.t.general.cancel} />
|
||
|
|
</button>
|
||
|
|
{/if}
|
||
|
|
</span>
|
||
|
|
</LanguageQuestion>
|
||
|
|
{:else}
|
||
|
|
<div class="p-2 flex items-center justify-between low-interaction rounded">
|
||
|
|
<div>
|
||
|
|
<LanguageAnswer {single_render} {item_render} {render_all} languages={foundLanguages} {state} {tags} { feature}
|
||
|
|
{layer} />
|
||
|
|
</div>
|
||
|
|
<EditButton on:click={_ => forceInputMode.setData(true)} />
|
||
|
|
</div>
|
||
|
|
{/if}
|