Studo: WIP

src/UI/InputElement/Helpers/TranslationInput.svelte

@@ -2,7 +2,7 @@
 
   import { UIEventSource } from "../../../Logic/UIEventSource";
   import LanguageUtils from "../../../Utils/LanguageUtils";
-  import { onDestroy } from "svelte";
+  import { createEventDispatcher, onDestroy } from "svelte";
   import ValidatedInput from "../ValidatedInput.svelte";
 
   export let value: UIEventSource<string> = new UIEventSource<string>("");
@@ -18,6 +18,7 @@
   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;
@@ -49,5 +50,5 @@
       </option>
     {/each}
   </select>
-  <ValidatedInput type="string" value={currentVal} />
+  <ValidatedInput type="string" value={currentVal} on:submit={() => dispatch("submit")} />
 </div>

src/UI/InputElement/InputHelper.svelte

@@ -4,30 +4,59 @@
    * Note that all values are stringified
    */
 
-  import { UIEventSource } from "../../Logic/UIEventSource"
-  import type { ValidatorType } from "./Validators"
-  import InputHelpers from "./InputHelpers"
-  import ToSvelte from "../Base/ToSvelte.svelte"
-  import type { Feature } from "geojson"
-  import BaseUIElement from "../BaseUIElement"
-  import { VariableUiElement } from "../Base/VariableUIElement"
+  import { UIEventSource } from "../../Logic/UIEventSource";
+  import type { ValidatorType } from "./Validators";
+  import InputHelpers from "./InputHelpers";
+  import ToSvelte from "../Base/ToSvelte.svelte";
+  import type { Feature } from "geojson";
+  import BaseUIElement from "../BaseUIElement";
+  import { VariableUiElement } from "../Base/VariableUIElement";
+  import { createEventDispatcher } from "svelte";
+  import ImageHelper from "./Helpers/ImageHelper.svelte";
+  import TranslationInput from "./Helpers/TranslationInput.svelte";
+  import TagInput from "./Helpers/TagInput.svelte";
+  import SimpleTagInput from "./Helpers/SimpleTagInput.svelte";
+  import DirectionInput from "./Helpers/DirectionInput.svelte";
+  import DateInput from "./Helpers/DateInput.svelte";
+  import ColorInput from "./Helpers/ColorInput.svelte";
 
-  export let type: ValidatorType
-  export let value: UIEventSource<string>
+  export let type: ValidatorType;
+  export let value: UIEventSource<string>;
 
-  export let feature: Feature
-  export let args: (string | number | boolean)[] = undefined
+  export let feature: Feature;
+  export let args: (string | number | boolean)[] = undefined;
 
-  let properties = { feature, args: args ?? [] }
-  let construct = new UIEventSource<(value, extraProperties) => BaseUIElement>(undefined)
+  let properties = { feature, args: args ?? [] };
+  let construct = new UIEventSource<(value, extraProperties) => BaseUIElement>(undefined);
   $: {
-    construct.setData(InputHelpers.AvailableInputHelpers[type])
+    const helper = InputHelpers.AvailableInputHelpers[type];
+    construct.setData(helper);
   }
+  let dispatch = createEventDispatcher<{ selected, submit }>();
+
 </script>
 
-{#if construct !== undefined}
-  <ToSvelte
-    construct={() =>
+{#if type === "translation" }
+  <TranslationInput {value} on:submit={() => dispatch("submit")} />
+{:else if type === "direction"}
+  <DirectionInput {value} mapProperties={InputHelpers.constructMapProperties(properties)} />
+{:else if type === "date"}
+  <DateInput { value } />
+{:else if type === "color"}
+  <ColorInput { value } />
+{:else if type === "image"}
+  <ImageHelper { value } />
+{:else if type === "tag"}
+  <TagInput { value } />
+{:else if type === "simple_tag"}
+  <SimpleTagInput { value } />
+
+{:else if $construct !== undefined}
+  {#if isBaseUIElement}
+    <ToSvelte
+      construct={() =>
       new VariableUiElement(construct.mapD((construct) => construct(value, properties)))}
-  />
+    />
+
+  {/if}
 {/if}

src/UI/InputElement/InputHelpers.ts

@@ -1,10 +1,7 @@
 import { ValidatorType } from "./Validators"
 import { UIEventSource } from "../../Logic/UIEventSource"
-import SvelteUIElement from "../Base/SvelteUIElement"
-import DirectionInput from "./Helpers/DirectionInput.svelte"
+
 import { MapProperties } from "../../Models/MapProperties"
-import DateInput from "./Helpers/DateInput.svelte"
-import ColorInput from "./Helpers/ColorInput.svelte"
 import BaseUIElement from "../BaseUIElement"
 import OpeningHoursInput from "../OpeningHours/OpeningHoursInput"
 import WikidataSearchBox from "../Wikipedia/WikidataSearchBox"
@@ -13,10 +10,6 @@ import { Utils } from "../../Utils"
 import Locale from "../i18n/Locale"
 import { Feature } from "geojson"
 import { GeoOperations } from "../../Logic/GeoOperations"
-import ImageHelper from "./Helpers/ImageHelper.svelte"
-import TranslationInput from "./Helpers/TranslationInput.svelte"
-import TagInput from "./Helpers/TagInput.svelte"
-import SimpleTagInput from "./Helpers/SimpleTagInput.svelte"
 
 export interface InputHelperProperties {
     /**
@@ -39,6 +32,9 @@ export interface InputHelperProperties {
 }
 
 export default class InputHelpers {
+    /**
+     * @deprecated
+     */
     public static readonly AvailableInputHelpers: Readonly<
         Partial<
             Record<
@@ -50,30 +46,21 @@ export default class InputHelpers {
             >
         >
     > = {
-        direction: (value, properties) =>
-            new SvelteUIElement(DirectionInput, {
-                value,
-                mapProperties: InputHelpers.constructMapProperties(properties),
-            }),
-        date: (value) => new SvelteUIElement(DateInput, { value }),
-        color: (value) => new SvelteUIElement(ColorInput, { value }),
+        // TODO: remake in svelte,move selection logic to 'inputHelper.svelte'
         opening_hours: (value) => new OpeningHoursInput(value),
         wikidata: InputHelpers.constructWikidataHelper,
-        image: (value) => new SvelteUIElement(ImageHelper, { value }),
-        translation: (value) => new SvelteUIElement(TranslationInput, { value }),
-        tag: (value) => new SvelteUIElement(TagInput, { value }),
-        simple_tag: (value) => new SvelteUIElement(SimpleTagInput, { value }),
     } as const
 
     public static hideInputField: string[] = ["translation", "simple_tag", "tag"]
 
+    // noinspection JSUnusedLocalSymbols
     /**
      * Constructs a mapProperties-object for the given properties.
      * Assumes that the first helper-args contains the desired zoom-level
      * @param properties
      * @private
      */
-    private static constructMapProperties(
+    public static constructMapProperties(
         properties: InputHelperProperties
     ): Partial<MapProperties> {
         let location = properties?.mapProperties?.location

src/UI/InputElement/ValidatedInput.svelte

@@ -110,7 +110,7 @@
           placeholder={_placeholder}></textarea>
     </form>
 {:else}
-    <form class="inline-flex" on:submit={() => dispatch("submit")}>
+    <form class="inline-flex" on:submit|preventDefault={() => dispatch("submit")}>
         <input
                 bind:this={htmlElem}
                 bind:value={$_value}