Merge master

src/UI/InputElement/Helpers/TranslationInput.svelte

@@ -0,0 +1,53 @@
+<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>