Fix input elements

UI/Base/Link.ts

@@ -4,32 +4,41 @@ import {UIEventSource} from "../../Logic/UIEventSource";
 
 
 export default class Link extends BaseUIElement {
-    private readonly _element: HTMLElement;
+    private readonly _href: string | UIEventSource<string>;
+    private readonly _embeddedShow: BaseUIElement;
+    private readonly _newTab: boolean;
 
     constructor(embeddedShow: BaseUIElement | string, href: string | UIEventSource<string>, newTab: boolean = false) {
         super();
-        const _embeddedShow = Translations.W(embeddedShow);
+        this._embeddedShow =Translations.W(embeddedShow);
+        this._href = href;
+        this._newTab = newTab;
 
-
-        const el = document.createElement("a")
-        
-        if(typeof href === "string"){
-            el.href = href
-        }else{
-            href.addCallbackAndRun(href => {
-                el.href = href;
-            })
-        }
-        if (newTab) {
-            el.target = "_blank"
-        }
-        el.appendChild(_embeddedShow.ConstructElement())
-        this._element = el
     }
 
     protected InnerConstructElement(): HTMLElement {
+        const embeddedShow = this._embeddedShow?.ConstructElement();
+        if(embeddedShow === undefined){
+            return undefined;
+        }
+        const el = document.createElement("a")
+        if(typeof this._href === "string"){
+            el.href = this._href
+        }else{
+           this._href.addCallbackAndRun(href => {
+                el.href = href;
+            })
+        }
+        if (this._newTab) {
+            el.target = "_blank"
+        }
+        el.appendChild(embeddedShow)
+        return el;
+    }
 
-        return this._element;
+    AsMarkdown(): string {
+        // @ts-ignore
+        return `[${this._embeddedShow.AsMarkdown()}](${this._href.data ?? this._href})`;
     }
 
 }

UI/Input/DirectionInput.ts

@@ -2,6 +2,7 @@ import {InputElement} from "./InputElement";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import Combine from "../Base/Combine";
 import Svg from "../../Svg";
+import {FixedUiElement} from "../Base/FixedUiElement";
 
 
 /**
@@ -11,15 +12,18 @@ export default class DirectionInput extends InputElement<string> {
 
     private readonly value: UIEventSource<string>;
     public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
-    private _element: HTMLElement;
 
     constructor(value?: UIEventSource<string>) {
         super();
         this.value = value ?? new UIEventSource<string>(undefined);
 
-        
-        this._element =       new Combine([
-            `<div style="width:100%;height: 100%;position: absolute;top:0;left:0;border-radius:100%;"></div>`,
+    }
+
+    protected InnerConstructElement(): HTMLElement {
+
+
+        const element =       new Combine([
+            new FixedUiElement("").SetClass("w-full h-full absolute top-0 left-O rounded-full"),
             Svg.direction_svg().SetStyle(
                 `position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform:rotate(${this.value.data ?? 0}deg);`)
                 .SetClass("direction-svg"),
@@ -30,20 +34,15 @@ export default class DirectionInput extends InputElement<string> {
             .ConstructElement()
 
 
-const self = this;
         this.value.addCallbackAndRun(rotation => {
-            const selfElement = self._element;
-            if (selfElement === null) {
-                return;
-            }
-            const cone = selfElement.getElementsByClassName("direction-svg")[0] as HTMLElement
+            const cone = element.getElementsByClassName("direction-svg")[0] as HTMLElement
             cone.style.transform = `rotate(${rotation}deg)`;
 
         })
-    }
-
-    protected InnerConstructElement(): HTMLElement {
-        return this._element
+        
+        this.RegisterTriggers(element)
+        
+        return element;
     }
 
 
@@ -52,7 +51,7 @@ const self = this;
     }
 
 
-    protected InnerUpdate(htmlElement: HTMLElement) {
+    private RegisterTriggers(htmlElement: HTMLElement) {
         const self = this;
 
         function onPosChange(x: number, y: number) {

UI/Input/ValidatedTextField.ts

@@ -39,7 +39,7 @@ export default class ValidatedTextField {
             undefined,
             undefined,
             "text"),
-        
+
         ValidatedTextField.tp(
             "date",
             "A date",
@@ -63,7 +63,24 @@ export default class ValidatedTextField {
             (value) => new SimpleDatePicker(value)),
         ValidatedTextField.tp(
             "wikidata",
-            "A wikidata identifier, e.g. Q42"),
+            "A wikidata identifier, e.g. Q42",
+            (str) => {
+                if (str === undefined) {
+                    return false;
+                }
+                return (str.length > 1 && (str.startsWith("q") || str.startsWith("Q")) || str.startsWith("https://www.wikidata.org/wiki/Q"))
+            },
+            (str) => {
+                if (str === undefined) {
+                    return undefined;
+                }
+                const wd = "https://www.wikidata.org/wiki/";
+                if (str.startsWith(wd)) {
+                    str = str.substr(wd.length)
+                }
+                return str.toUpperCase();
+            }),
+
         ValidatedTextField.tp(
             "int",
             "A number",
@@ -213,8 +230,8 @@ export default class ValidatedTextField {
         placeholder?: string | UIElement,
         value?: UIEventSource<string>,
         htmlType?: string,
-        textArea?:boolean,
-        inputMode?:string,
+        textArea?: boolean,
+        inputMode?: string,
         textAreaRows?: number,
         isValid?: ((s: string, country: () => string) => boolean),
         country?: () => string,

index.html

@@ -12,8 +12,6 @@
     <link rel="stylesheet" href="./css/mobile.css"/>
     <link rel="stylesheet" href="./css/openinghourstable.css"/>
     <link rel="stylesheet" href="./css/tagrendering.css"/>
-    <link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick.css"/>
-    <link rel="stylesheet" type="text/css" href="node_modules/slick-carousel/slick/slick-theme.css"/>
     <link rel="stylesheet" href="css/ReviewElement.css"/>
     <link rel="stylesheet" href="vendor/MarkerCluster.css"/>
     <link rel="stylesheet" href="vendor/MarkerCluster.Default.css"/>

scripts/generateDocs.ts

@@ -12,15 +12,19 @@ import {writeFileSync} from "fs";
 import LayoutConfig from "../Customizations/JSON/LayoutConfig";
 import State from "../State";
 import {QueryParameters} from "../Logic/Web/QueryParameters";
+import Link from "../UI/Base/Link";
 
 
-function WriteFile(filename, html: string | BaseUIElement): void {
-    writeFileSync(filename, Translations.W(html).AsMarkdown());
+function WriteFile(filename, html: string | BaseUIElement, autogenSource: string): void {
+    writeFileSync(filename, new Combine([Translations.W(html),
+        new Link("Generated from "+autogenSource, "../../../"+autogenSource)
+    ]).AsMarkdown());
 }
 
-WriteFile("./Docs/SpecialRenderings.md", SpecialVisualizations.HelpMessage)
-WriteFile("./Docs/CalculatedTags.md", new Combine([SimpleMetaTagger.HelpText(), ExtraFunction.HelpText()]).SetClass("flex-col"))
-WriteFile("./Docs/SpecialInputElements.md", ValidatedTextField.HelpText());
+WriteFile("./Docs/SpecialRenderings.md", SpecialVisualizations.HelpMessage, "UI/SpecialVisualisations.ts")
+WriteFile("./Docs/CalculatedTags.md", new Combine([SimpleMetaTagger.HelpText(), ExtraFunction.HelpText()]).SetClass("flex-col"),
+    "SimpleMetaTagger and ExtraFunction")
+WriteFile("./Docs/SpecialInputElements.md", ValidatedTextField.HelpText(),"ValidatedTextField.ts");
 
 
 new State(new LayoutConfig({
@@ -47,7 +51,7 @@ new State(new LayoutConfig({
 }))
 QueryParameters.GetQueryParameter("layer-<layer-id>", "true", "Wether or not the layer with id <layer-id> is shown")
 
-WriteFile("./Docs/URL_Parameters.md", QueryParameters.GenerateQueryParameterDocs())
+WriteFile("./Docs/URL_Parameters.md", QueryParameters.GenerateQueryParameterDocs(), "QueryParameters")
 
 console.log("Generated docs")
 

test.ts

@@ -1,40 +1,10 @@
-import {UIEventSource} from "./Logic/UIEventSource";
-import SpecialVisualizations from "./UI/SpecialVisualizations";
-import State from "./State";
+import ValidatedTextField from "./UI/Input/ValidatedTextField";
 import Combine from "./UI/Base/Combine";
-import {FixedUiElement} from "./UI/Base/FixedUiElement";
-import OpeningHoursVisualization from "./UI/OpeningHours/OpeningHoursVisualization";
-import OpeningHoursPickerTable from "./UI/OpeningHours/OpeningHoursPickerTable";
-import OpeningHoursPicker from "./UI/OpeningHours/OpeningHoursPicker";
-import {OH, OpeningHour} from "./UI/OpeningHours/OpeningHours";
 import {VariableUiElement} from "./UI/Base/VariableUIElement";
-import PublicHolidayInput from "./UI/OpeningHours/PublicHolidayInput";
 
 
-const tagsSource = new UIEventSource({
-    id: 'id',
-    name: 'name',
-    surface: 'asphalt',
-    image: "https://i.imgur.com/kX3rl3v.jpg",
-    "image:1": "https://i.imgur.com/oHAJqMB.jpg",
-    "opening_hours": "mo-fr 09:00-18:00",
-    _country: "be",
-})
-
-const state = new State(undefined)
-State.state = state
-
-const ohData = new UIEventSource<string>("")
-new OpeningHoursPicker().AttachTo("maindiv")
-/*
-const allSpecials = SpecialVisualizations.specialVisualizations.map(spec => {
-    try{
-
-        return new Combine([spec.funcName, spec.constr(state, tagsSource, spec.args.map(a => a.defaultValue ?? "")).SetClass("block")])
-            .SetClass("flex flex-col border border-black p-2 m-2");   
-    }catch(e){
-        console.error(e)
-        return new FixedUiElement("Could not construct "+spec.funcName+" due to "+e).SetClass("alert")
-    }
-})
-new Combine(allSpecials).AttachTo("maindiv")*/
+new Combine(ValidatedTextField.tpList.map(tp => {
+    const tf = ValidatedTextField.InputForType(tp.name);
+    
+    return new Combine([tf, new VariableUiElement(tf.GetValue()).SetClass("alert")]);
+})).AttachTo("maindiv")