MapComplete/src/UI/InputElement/Helpers/TranslationInput.svelte

<script lang="ts">

  import { UIEventSource } from "../../../Logic/UIEventSource";
  import LanguageUtils from "../../../Utils/LanguageUtils";
  import { createEventDispatcher, onDestroy } from "svelte";
  import ValidatedInput from "../ValidatedInput.svelte";

  export let value: UIEventSource<Record<string, string>> = new UIEventSource<Record<string, string>>({});
  
  export let args: string[] = []
  
  let prefix = args[0] ?? ""
  let postfix = args[1] ?? ""

  let translations: UIEventSource<Record<string, string>> = value

  const allLanguages: string[] = LanguageUtils.usedLanguagesSorted;
  let currentLang = new UIEventSource("en");
  const currentVal = new UIEventSource<string>("");
  let dispatch = createEventDispatcher<{ submit }>()

  function update() {
    const v = currentVal.data;
    const l = currentLang.data;
    if(translations.data === "" || translations.data === undefined){
      translations.data = {}
    }
    if (translations.data[l] === v) {
      return;
    }
    translations.data[l] = v;
    translations.ping();
  }

  onDestroy(currentLang.addCallbackAndRunD(currentLang => {
    console.log("Applying current lang:", currentLang);
    if(!translations.data){
      translations.data = {}
    }
    translations.data[currentLang] = translations.data[currentLang] ?? "";
    currentVal.setData(translations.data[currentLang]);
  }));


  onDestroy(currentVal.addCallbackAndRunD(v => {
    update();
  }));

</script>
<div class="flex font-bold space-x-1 m-1 mt-2 interactive">
  <span>
  {prefix}
  </span>
  <select bind:value={$currentLang}>
    {#each allLanguages as language}
      <option value={language}>
        {language}
      </option>
    {/each}
  </select>
  <ValidatedInput type="string" cls="w-full" value={currentVal} on:submit={() => dispatch("submit")} />
  <span>
  {postfix}
  </span>
</div>