Refactoring: convert language input element into svelte,remove many obsolete classes

src/UI/Popup/LanguageElement/LanguageQuestion.svelte

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