forked from MapComplete/MapComplete
54 lines
1.4 KiB
Svelte
54 lines
1.4 KiB
Svelte
|
<script lang="ts">
|
||
|
|
|
||
|
|
import { UIEventSource } from "../../../Logic/UIEventSource";
|
||
|
|
import LanguageUtils from "../../../Utils/LanguageUtils";
|
||
|
|
import { onDestroy } from "svelte";
|
||
|
|
import ValidatedInput from "../ValidatedInput.svelte";
|
||
|
|
|
||
|
|
export let value: UIEventSource<string> = new UIEventSource<string>("");
|
||
|
|
|
||
|
|
let translations: UIEventSource<Record<string, string>> = value.sync((s) => {
|
||
|
|
try {
|
||
|
|
return JSON.parse(s);
|
||
|
|
} catch (e) {
|
||
|
|
return {};
|
||
|
|
}
|
||
|
|
}, [], v => JSON.stringify(v));
|
||
|
|
|
||
|
|
const allLanguages: string[] = LanguageUtils.usedLanguagesSorted;
|
||
|
|
let currentLang = new UIEventSource("en");
|
||
|
|
const currentVal = new UIEventSource<string>("");
|
||
|
|
|
||
|
|
function update() {
|
||
|
|
const v = currentVal.data;
|
||
|
|
const l = currentLang.data;
|
||
|
|
if (translations.data[l] === v) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
translations.data[l] = v;
|
||
|
|
translations.ping();
|
||
|
|
}
|
||
|
|
|
||
|
|
onDestroy(currentLang.addCallbackAndRunD(currentLang => {
|
||
|
|
console.log("Applying current lang:", currentLang);
|
||
|
|
translations.data[currentLang] = translations.data[currentLang] ?? "";
|
||
|
|
currentVal.setData(translations.data[currentLang]);
|
||
|
|
}));
|
||
|
|
|
||
|
|
|
||
|
|
onDestroy(currentVal.addCallbackAndRunD(v => {
|
||
|
|
update();
|
||
|
|
}));
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<div class="flex">
|
||
|
|
<select bind:value={$currentLang}>
|
||
|
|
{#each allLanguages as language}
|
||
|
|
<option value={language}>
|
||
|
|
{language}
|
||
|
|
</option>
|
||
|
|
{/each}
|
||
|
|
</select>
|
||
|
|
<ValidatedInput type="string" value={currentVal} />
|
||
|
|
</div>
|