Performance improvements, add clock

UI/Base/LazyElement.ts

@@ -0,0 +1,30 @@
+import {UIElement} from "../UIElement";
+
+export default class LazyElement extends UIElement {
+
+
+    private _content: UIElement = undefined;
+
+    public Activate: () => void;
+
+    constructor(content: (() => UIElement)) {
+        super();
+        this.dumbMode = false;
+        const self = this;
+        this.Activate = () => {
+            if (this._content === undefined) {
+                self._content = content();
+            }
+            self.Update();
+        }
+    }
+
+    InnerRender(): string {
+        if (this._content === undefined) {
+            return "Rendering...";
+        }
+        return this._content.InnerRender();
+    }
+
+
+}

UI/Input/TextField.ts

@@ -12,7 +12,7 @@ export class TextField extends InputElement<string> {
     private readonly _htmlType: string;
     private readonly _textAreaRows: number;
 
-    private readonly _isValid: (string, country) => boolean;
+    private readonly _isValid: (string,country) => boolean;
     private _label: UIElement;
 
     constructor(options?: {
@@ -22,7 +22,7 @@ export class TextField extends InputElement<string> {
         htmlType?: string,
         label?: UIElement,
         textAreaRows?: number,
-        isValid?: ((s: string, country?: string) => boolean)
+        isValid?: ((s: string, country?: () => string) => boolean)
     }) {
         super(undefined);
         const self = this;

UI/Input/ValidatedTextField.ts

@@ -14,8 +14,8 @@ import DirectionInput from "./DirectionInput";
 interface TextFieldDef {
     name: string,
     explanation: string,
-    isValid: ((s: string, country?: string) => boolean),
-    reformat?: ((s: string, country?: string) => string),
+    isValid: ((s: string, country?:() => string) => boolean),
+    reformat?: ((s: string, country?: () => string) => string),
     inputHelper?: (value: UIEventSource<string>, options?: {
         location: [number, number]
     }) => InputElement<string>,
@@ -26,8 +26,8 @@ export default class ValidatedTextField {
 
     private static tp(name: string,
                       explanation: string,
-                      isValid?: ((s: string, country?: string) => boolean),
-                      reformat?: ((s: string, country?: string) => string),
+                      isValid?: ((s: string, country?: () => string) => boolean),
+                      reformat?: ((s: string, country?: () => string) => string),
                       inputHelper?: (value: UIEventSource<string>, options?:{
                           location: [number, number]
                       }) => InputElement<string>): TextFieldDef {
@@ -154,13 +154,14 @@ export default class ValidatedTextField {
         ValidatedTextField.tp(
             "phone",
             "A phone number",
-            (str, country: any) => {
+            (str, country: () => string) => {
                 if (str === undefined) {
                     return false;
                 }
-                return parsePhoneNumberFromString(str, country?.toUpperCase())?.isValid() ?? false
+                console.log("Validating phone number",str,"in country",country())
+                return parsePhoneNumberFromString(str, (country())?.toUpperCase() as any)?.isValid() ?? false
             },
-            (str, country: any) => parsePhoneNumberFromString(str, country?.toUpperCase()).formatInternational()
+            (str, country: () => string) => parsePhoneNumberFromString(str, (country())?.toUpperCase() as any).formatInternational()
         ),
         ValidatedTextField.tp(
             "opening_hours",
@@ -200,8 +201,8 @@ export default class ValidatedTextField {
         value?: UIEventSource<string>,
         textArea?: boolean,
         textAreaRows?: number,
-        isValid?: ((s: string, country: string) => boolean),
-        country?: string,
+        isValid?: ((s: string, country: () => string) => boolean),
+        country?: () => string,
         location?: [number /*lat*/, number /*lon*/]
     }): InputElement<string> {
         options = options ?? {};
@@ -304,7 +305,7 @@ export default class ValidatedTextField {
         textArea?: boolean,
         textAreaRows?: number,
         isValid?: ((string: string) => boolean),
-        country?: string
+        country?: () => string
     }): InputElement<T> {
         let textField: InputElement<string>;
         if (options?.type) {

UI/OhVisualization.ts

@@ -151,7 +151,7 @@ export default class OpeningHoursVisualization extends UIElement {
 
         const tags = this._source.data;
         if (tags._country === undefined) {
-            return "Loading...";
+            return "Loading country information...";
         }
         let oh = null;
 
@@ -165,7 +165,7 @@ export default class OpeningHoursVisualization extends UIElement {
             }, {tag_key: this._key});
         } catch (e) {
             console.log(e);
-            return "Error: could not visualize these opening hours"
+            return `Error: could not visualize these opening hours<br/><spann class='subtle'>${e}</spann>`
         }
 
         if (!oh.getState() && !oh.getUnknown()) {

UI/Popup/TagRenderingQuestion.ts

@@ -251,7 +251,7 @@ export default class TagRenderingQuestion extends UIElement {
 
         const textField = ValidatedTextField.InputForType(this._configuration.freeform.type, {
             isValid: (str) => (str.length <= 255),
-            country: this._tags.data._country,
+            country: () => this._tags.data._country,
             location: [this._tags.data._lat, this._tags.data._lon]
         });