Studio: usability tests

src/UI/InputElement/Helpers/TranslationInput.svelte

@@ -6,6 +6,11 @@
   import ValidatedInput from "../ValidatedInput.svelte";
 
   export let value: UIEventSource<string> = new UIEventSource<string>("");
+  
+  export let args: string[] = []
+  
+  let prefix = args[0]
+  let postfix = args[1]
 
   let translations: UIEventSource<Record<string, string>> = value.sync((s) => {
     try {
@@ -42,7 +47,10 @@
   }));
 
 </script>
-<div class="flex">
+<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}>
@@ -50,5 +58,8 @@
       </option>
     {/each}
   </select>
-  <ValidatedInput type="string" value={currentVal} on:submit={() => dispatch("submit")} />
+  <ValidatedInput type="string" cls="w-full" value={currentVal} on:submit={() => dispatch("submit")} />
+  <span>
+  {postfix}
+  </span>
 </div>

src/UI/InputElement/InputHelper.svelte

@@ -9,8 +9,6 @@
   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";
@@ -19,6 +17,7 @@
   import DirectionInput from "./Helpers/DirectionInput.svelte";
   import DateInput from "./Helpers/DateInput.svelte";
   import ColorInput from "./Helpers/ColorInput.svelte";
+  import OpeningHoursInput from "./Helpers/OpeningHoursInput.svelte";
 
   export let type: ValidatorType;
   export let value: UIEventSource<string>;
@@ -27,17 +26,15 @@
   export let args: (string | number | boolean)[] = undefined;
 
   let properties = { feature, args: args ?? [] };
-  let construct = new UIEventSource<(value, extraProperties) => BaseUIElement>(undefined);
-  $: {
-    const helper = InputHelpers.AvailableInputHelpers[type];
-    construct.setData(helper);
-  }
-  let dispatch = createEventDispatcher<{ selected, submit }>();
+  let dispatch = createEventDispatcher<{
+    selected,
+    submit
+  }>();
 
 </script>
 
 {#if type === "translation" }
-  <TranslationInput {value} on:submit={() => dispatch("submit")} />
+  <TranslationInput {value} on:submit={() => dispatch("submit")} {args} />
 {:else if type === "direction"}
   <DirectionInput {value} mapProperties={InputHelpers.constructMapProperties(properties)} />
 {:else if type === "date"}
@@ -50,10 +47,8 @@
   <TagInput { value } />
 {:else if type === "simple_tag"}
   <SimpleTagInput { value } />
-
-{:else if $construct !== undefined}
-  <ToSvelte
-    construct={() =>
-      new VariableUiElement(construct.mapD((construct) => construct(value, properties)))}
-  />
+{:else if type === "opening_hours"}
+  <OpeningHoursInput { value } />
+{:else if type === "wikidata"}
+  <ToSvelte construct={() => InputHelpers.constructWikidataHelper(value, properties)} />
 {/if}

src/UI/InputElement/InputHelpers.ts

@@ -36,31 +36,6 @@ export interface InputHelperProperties {
 }
 
 export default class InputHelpers {
-    /**
-     * @deprecated
-     */
-    public static readonly AvailableInputHelpers: Readonly<
-        Partial<
-            Record<
-                ValidatorType,
-                (
-                    value: UIEventSource<string>,
-                    extraProperties?: InputHelperProperties
-                ) => BaseUIElement
-            >
-        >
-    > = {
-        direction: (value, properties) =>
-            new SvelteUIElement(DirectionInput, {
-                value,
-                mapProperties: InputHelpers.constructMapProperties(properties),
-            }),
-        date: (value) => new SvelteUIElement(DateInput, { value }),
-        color: (value) => new SvelteUIElement(ColorInput, { value }),
-        opening_hours: (value) => new SvelteUIElement(OpeningHoursInput, { value }),
-        wikidata: InputHelpers.constructWikidataHelper,
-    } as const
-
     public static hideInputField: string[] = ["translation", "simple_tag", "tag"]
 
     // noinspection JSUnusedLocalSymbols
@@ -95,7 +70,7 @@ export default class InputHelpers {
         return mapProperties
     }
 
-    private static constructWikidataHelper(
+    public static constructWikidataHelper(
         value: UIEventSource<string>,
         props: InputHelperProperties
     ) {

src/UI/InputElement/ValidatedInput.svelte

@@ -9,9 +9,11 @@
     import {Unit} from "../../Models/Unit"
     import UnitInput from "../Popup/UnitInput.svelte"
     import {Utils} from "../../Utils";
+    import { twMerge } from "tailwind-merge";
 
   export let type: ValidatorType
   export let feedback: UIEventSource<Translation> | undefined = undefined
+    export let cls : string = undefined
   export let getCountry: () => string | undefined
   export let placeholder: string | Translation | undefined
   export let unit: Unit = undefined
@@ -98,10 +100,20 @@
             htmlElem.onfocus = () => dispatch("selected")
         }
     }
+
+    /**
+     * Dispatches the submit, but only if the value is valid
+     */
+    function sendSubmit(){
+        if(feedback.data){
+            console.log("Not sending a submit as there is feedback")
+        }
+        dispatch("submit") 
+    }
 </script>
 
 {#if validator?.textArea}
-    <form on:submit|preventDefault={() => dispatch("submit")}>
+    <form on:submit|preventDefault={() => sendSubmit()}>
     
   <textarea
           class="w-full"
@@ -110,7 +122,7 @@
           placeholder={_placeholder}></textarea>
     </form>
 {:else}
-    <form class="inline-flex" on:submit|preventDefault={() => dispatch("submit")}>
+    <form class={twMerge("inline-flex",cls )} on:submit|preventDefault={() => sendSubmit()}>
         <input
                 bind:this={htmlElem}
                 bind:value={$_value}