forked from MapComplete/MapComplete
88 lines
3.1 KiB
Svelte
88 lines
3.1 KiB
Svelte
|
<script lang="ts">/**
|
||
|
|
* The 'languageQuestion' is a special element which asks about the (possible) languages of a feature
|
||
|
|
* (e.g. which speech output an ATM has, in what language(s) the braille writing is or what languages are spoken at a school)
|
||
|
|
*
|
||
|
|
* This is written into a `key`.
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
import { Translation } from "../../i18n/Translation"
|
||
|
|
import SpecialTranslation from "../TagRendering/SpecialTranslation.svelte"
|
||
|
|
import type { SpecialVisualizationState } from "../../SpecialVisualization"
|
||
|
|
import type { Store } from "../../../Logic/UIEventSource"
|
||
|
|
import { UIEventSource } from "../../../Logic/UIEventSource"
|
||
|
|
|
||
|
|
import type { Feature } from "geojson"
|
||
|
|
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
|
||
|
|
import LanguageOptions from "./LanguageOptions.svelte"
|
||
|
|
import Translations from "../../i18n/Translations"
|
||
|
|
import Tr from "../../Base/Tr.svelte"
|
||
|
|
import { createEventDispatcher } from "svelte"
|
||
|
|
import { Tag } from "../../../Logic/Tags/Tag"
|
||
|
|
import ChangeTagAction from "../../../Logic/Osm/Actions/ChangeTagAction"
|
||
|
|
import { And } from "../../../Logic/Tags/And"
|
||
|
|
|
||
|
|
export let question: string
|
||
|
|
export let prefix: string
|
||
|
|
|
||
|
|
export let foundLanguages: Store<string[]>
|
||
|
|
export let state: SpecialVisualizationState
|
||
|
|
export let tags: UIEventSource<Record<string, string>>
|
||
|
|
export let feature: Feature
|
||
|
|
export let layer: LayerConfig | undefined
|
||
|
|
let dispatch = createEventDispatcher<{ save }>()
|
||
|
|
|
||
|
|
let selectedLanguages: UIEventSource<string[]> = new UIEventSource<string[]>([])
|
||
|
|
let countries: Store<Set<string>> = tags.mapD(tags => new Set<string>(tags["_country"]?.toUpperCase()?.split(";") ?? []))
|
||
|
|
async function applySelectedLanguages() {
|
||
|
|
const selectedLngs = selectedLanguages.data
|
||
|
|
const selection: Tag[] = selectedLanguages.data.map((ln) => new Tag(prefix + ln, "yes"))
|
||
|
|
if (selection.length === 0) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
const currentLanguages = foundLanguages.data
|
||
|
|
|
||
|
|
for (const currentLanguage of currentLanguages) {
|
||
|
|
if (selectedLngs.indexOf(currentLanguage) >= 0) {
|
||
|
|
continue
|
||
|
|
}
|
||
|
|
// Erase languages that are not spoken anymore
|
||
|
|
selection.push(new Tag(prefix + currentLanguage, ""))
|
||
|
|
}
|
||
|
|
|
||
|
|
if (state === undefined || state?.featureSwitchIsTesting?.data) {
|
||
|
|
for (const tag of selection) {
|
||
|
|
tags.data[tag.key] = tag.value
|
||
|
|
}
|
||
|
|
tags.ping()
|
||
|
|
} else if (state.changes) {
|
||
|
|
await state.changes
|
||
|
|
.applyAction(
|
||
|
|
new ChangeTagAction(
|
||
|
|
tags.data.id,
|
||
|
|
new And(selection),
|
||
|
|
tags.data,
|
||
|
|
{
|
||
|
|
theme: state?.layout?.id ?? "unkown",
|
||
|
|
changeType: "answer",
|
||
|
|
},
|
||
|
|
),
|
||
|
|
)
|
||
|
|
}
|
||
|
|
dispatch("save")
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="flex flex-col disable-links interactive border-interactive p-2">
|
||
|
|
<div class="interactive justify-between pt-1 font-bold">
|
||
|
|
<SpecialTranslation {feature} {layer} {state} t={new Translation({"*":question})} {tags} />
|
||
|
|
</div>
|
||
|
|
<LanguageOptions {selectedLanguages} countries={$countries}/>
|
||
|
|
|
||
|
|
<div class="flex justify-end flex-wrap-reverse w-full">
|
||
|
|
<slot name="cancel-button"></slot>
|
||
|
|
<button class="primary" class:disabled={$selectedLanguages.length === 0} on:click={_ => applySelectedLanguages()}>
|
||
|
|
<Tr t={Translations.t.general.save} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|