From 94635337e64c4c2fc78187dd1fb1015cd1d3d05b Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Mon, 24 Apr 2023 03:36:02 +0200
Subject: [PATCH] Refactoring: improve special components

---
 UI/InputElement/InputHelpers.ts             |  2 +-
 UI/InputElement/ValidatedInput.svelte       |  8 ++-----
 UI/InputElement/Validators/DateValidator.ts |  5 +++++
 test.ts                                     | 24 +++++++--------------
 4 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/UI/InputElement/InputHelpers.ts b/UI/InputElement/InputHelpers.ts
index 309071390..46c1c9c07 100644
--- a/UI/InputElement/InputHelpers.ts
+++ b/UI/InputElement/InputHelpers.ts
@@ -76,7 +76,7 @@ export default class InputHelpers {
             mapProperties = { ...mapProperties, location }
         }
         let zoom = 17
-        if (properties.args[0]) {
+        if (properties?.args?.[0] !== undefined) {
             zoom = Number(properties.args[0])
             if (isNaN(zoom)) {
                 throw "Invalid zoom level for argument at 'length'-input"
diff --git a/UI/InputElement/ValidatedInput.svelte b/UI/InputElement/ValidatedInput.svelte
index 761ef01e2..697e0f7da 100644
--- a/UI/InputElement/ValidatedInput.svelte
+++ b/UI/InputElement/ValidatedInput.svelte
@@ -10,7 +10,7 @@
   export let value: UIEventSource<string>;
   // Internal state, only copied to 'value' so that no invalid values leak outside
   let _value = new UIEventSource(value.data ?? "");
-  onDestroy(value.addCallbackAndRun(v => _value.setData(v ?? "")));
+  onDestroy(value.addCallbackAndRunD(v => _value.setData(v ?? "")));
   export let type: ValidatorType;
   let validator = Validators.get(type);
   export let feedback: UIEventSource<Translation> | undefined = undefined;
@@ -34,12 +34,8 @@
 
   let dispatch = createEventDispatcher<{ selected }>();
   $: {
-    console.log(htmlElem);
     if (htmlElem !== undefined) {
-      htmlElem.onfocus = () => {
-        console.log("Dispatching selected event");
-        return dispatch("selected");
-      };
+      htmlElem.onfocus = () => dispatch("selected");
     }
   }
 </script>
diff --git a/UI/InputElement/Validators/DateValidator.ts b/UI/InputElement/Validators/DateValidator.ts
index a67e371dd..340b8159a 100644
--- a/UI/InputElement/Validators/DateValidator.ts
+++ b/UI/InputElement/Validators/DateValidator.ts
@@ -10,6 +10,11 @@ export default class DateValidator extends Validator {
     }
 
     reformat(str: string) {
+        console.log("Reformatting", str)
+        if (!this.isValid(str)) {
+            // The date is invalid - we return the string as is
+            return str
+        }
         const d = new Date(str)
         let month = "" + (d.getMonth() + 1)
         let day = "" + d.getDate()
diff --git a/test.ts b/test.ts
index ddca5d174..fd2294d46 100644
--- a/test.ts
+++ b/test.ts
@@ -9,12 +9,8 @@ import { UIEventSource } from "./Logic/UIEventSource"
 import { VariableUiElement } from "./UI/Base/VariableUIElement"
 import { FixedUiElement } from "./UI/Base/FixedUiElement"
 import Title from "./UI/Base/Title"
-import { WikipediaBoxOptions } from "./UI/Wikipedia/WikipediaBoxOptions"
-import Wikipedia from "./Logic/Web/Wikipedia"
-import WikipediaPanel from "./UI/Wikipedia/WikipediaPanel.svelte"
 import SvelteUIElement from "./UI/Base/SvelteUIElement"
-import LanguagePicker from "./UI/LanguagePicker"
-import { Utils } from "./Utils"
+import ValidatedInput from "./UI/InputElement/ValidatedInput.svelte"
 
 function testspecial() {
     const layout = new LayoutConfig(<any>theme, true) // qp.data === "" ?  : new AllKnownLayoutsLazy().get(qp.data)
@@ -37,10 +33,13 @@ function testinput() {
             },
         })
 
+        const feedback: UIEventSource<any> = new UIEventSource<any>(undefined)
         els.push(
             new Combine([
                 new Title(key),
+                new SvelteUIElement(ValidatedInput, { value, type: key, feedback }),
                 helper,
+                new VariableUiElement(feedback),
                 new VariableUiElement(value.map((v) => new FixedUiElement(v))),
             ]).SetClass("flex flex-col p-1 border-3 border-gray-500")
         )
@@ -48,14 +47,7 @@ function testinput() {
     new Combine(els).SetClass("flex flex-col").AttachTo("maindiv")
 }
 
-async function testWaySplit() {
-    const ids = new UIEventSource(["Q42", "Q1"])
-    new SvelteUIElement(WikipediaPanel, { wikiIds: ids, addEntry: true }).AttachTo("maindiv")
-    new LanguagePicker(["en", "nl"]).AttachTo("extradiv")
-    await Utils.waitFor(5000)
-    ids.data.push("Q430")
-    ids.ping()
-}
-testWaySplit().then((_) => console.log("inited"))
-//testinput()
-// testspecial()
+testinput()
+/*/
+testspecial()
+//*/