Add table, fix preferences view

UI/Base/Button.ts

@@ -1,39 +1,29 @@
 import {UIElement} from "../UIElement";
-import Locale from "../i18n/Locale";
 import Translations from "../i18n/Translations";
 import BaseUIElement from "../BaseUIElement";
 
-export class Button extends UIElement {
+export class Button extends BaseUIElement {
     private _text: BaseUIElement;
     private _onclick: () => void;
-    private _clss: string;
 
-    constructor(text: string | UIElement, onclick: (() => void), clss: string = "") {
-        super(Locale.language);
+    constructor(text: string | UIElement, onclick: (() => void)) {
+        super();
         this._text = Translations.W(text);
         this._onclick = onclick;
-        if (clss !== "") {
-
-            this._clss = "class='" + clss + "'";
-        }else{
-            this._clss = "";
-        }
     }
 
-
-    InnerRender(): string {
-
-        return "<form>" +
-            "<button id='button-"+this.id+"' type='button' "+this._clss+">" + this._text.Render() +  "</button>" +
-            "</form>";
-    }
-
-    InnerUpdate(htmlElement: HTMLElement) {
-        super.InnerUpdate(htmlElement);
-        const self = this;
-        document.getElementById("button-"+this.id).onclick = function(){
-            self._onclick();
+    protected InnerConstructElement(): HTMLElement {
+        const el = this._text.ConstructElement();
+        if(el === undefined){
+            return undefined;
         }
+        const form = document.createElement("form")
+        const button = document.createElement("button")
+        button.type = "button"
+        button.appendChild(el)
+        button.onclick = this._onclick
+        form.appendChild(button)
+        return form;
     }
 
 }

UI/Base/Table.ts

@@ -0,0 +1,59 @@
+import BaseUIElement from "../BaseUIElement";
+import {Utils} from "../../Utils";
+import Translations from "../i18n/Translations";
+
+export default class Table extends BaseUIElement {
+
+    private readonly _header: BaseUIElement[];
+    private readonly _contents: BaseUIElement[][];
+
+    constructor(header: (BaseUIElement | string)[], contents: (BaseUIElement | string)[][]) {
+        super();
+        this._header = header.map(Translations.W);
+        this._contents = contents.map(row => row.map(Translations.W));
+    }
+
+    protected InnerConstructElement(): HTMLElement {
+        const table = document.createElement("table")
+
+        const headerElems = Utils.NoNull((this._header ?? []).map(elems => elems.ConstructElement()))
+        if (headerElems.length > 0) {
+
+            const tr = document.createElement("tr");
+            headerElems.forEach(headerElem => {
+                const td = document.createElement("th")
+                td.appendChild(headerElem)
+                tr.appendChild(td)
+            })
+            table.appendChild(tr)
+        }
+
+        for (const row of this._contents) {
+            const tr = document.createElement("tr")
+            for (const elem of row) {
+                const htmlElem = elem.ConstructElement()
+                if (htmlElem === undefined) {
+                    continue;
+                }
+
+                const td = document.createElement("td")
+                td.appendChild(htmlElem)
+                tr.appendChild(td)
+            }
+            table.appendChild(tr)
+        }
+
+        return table;
+    }
+    
+    AsMarkdown(): string {
+        
+        const headerMarkdownParts =  this._header.map(hel => hel?.AsMarkdown() ?? " ")
+        const header =headerMarkdownParts.join(" | ");
+        const headerSep = headerMarkdownParts.map(part => '-'.repeat(part.length + 2)).join("|")
+        const table = this._contents.map(row => row.map(el => el.AsMarkdown()?? " ").join("|")).join("\n")
+        
+        return [header, headerSep, table, ""].join("\n")
+    }
+
+}

UI/BigComponents/LicensePicker.ts

@@ -6,11 +6,11 @@ import {UIEventSource} from "../../Logic/UIEventSource";
 export default class LicensePicker extends DropDown<string>{
     
     constructor() {
-        super(Translations.t.image.willBePublished,
+        super(Translations.t.image.willBePublished.Clone(),
             [
-                {value: "CC0", shown: Translations.t.image.cco},
-                {value: "CC-BY-SA 4.0", shown: Translations.t.image.ccbs},
-                {value: "CC-BY 4.0", shown: Translations.t.image.ccb}
+                {value: "CC0", shown: Translations.t.image.cco.Clone()},
+                {value: "CC-BY-SA 4.0", shown: Translations.t.image.ccbs.Clone()},
+                {value: "CC-BY 4.0", shown: Translations.t.image.ccb.Clone()}
             ],
             State.state?.osmConnection?.GetPreference("pictures-license") ?? new UIEventSource<string>("CC0")
         )