Add table, fix preferences view

Models/Constants.ts

@@ -2,7 +2,7 @@ import { Utils } from "../Utils";
 
 export default class Constants {
     
-    public static vNumber = "0.7.5b";
+    public static vNumber = "0.8.0";
 
     // The user journey states thresholds when a new feature gets unlocked
     public static userJourney = {

State.ts

@@ -221,7 +221,7 @@ export default class State {
 
 
             this.backgroundLayerId = QueryParameters.GetQueryParameter("background",
-            layoutToUse.defaultBackgroundId ?? "osm",
+            layoutToUse?.defaultBackgroundId ?? "osm",
             "The id of the background layer to start with")
 
         }

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 = "") {
+    constructor(text: string | UIElement, onclick: (() => void)) {
-        super(Locale.language);
+        super();
         this._text = Translations.W(text);
         this._onclick = onclick;
-        if (clss !== "") {
-
-            this._clss = "class='" + clss + "'";
-        }else{
-            this._clss = "";
-        }
     }
 
-
+    protected InnerConstructElement(): HTMLElement {
-    InnerRender(): string {
+        const el = this._text.ConstructElement();
-
+        if(el === undefined){
-        return "<form>" +
+            return undefined;
-            "<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();
         }
+        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: "CC0", shown: Translations.t.image.cco.Clone()},
-                {value: "CC-BY-SA 4.0", shown: Translations.t.image.ccbs},
+                {value: "CC-BY-SA 4.0", shown: Translations.t.image.ccbs.Clone()},
-                {value: "CC-BY 4.0", shown: Translations.t.image.ccb}
+                {value: "CC-BY 4.0", shown: Translations.t.image.ccb.Clone()}
             ],
             State.state?.osmConnection?.GetPreference("pictures-license") ?? new UIEventSource<string>("CC0")
         )

preferences.ts

@@ -9,6 +9,8 @@ import {Utils} from "./Utils";
 import {SubtleButton} from "./UI/Base/SubtleButton";
 import LZString from "lz-string";
 import {LayoutConfigJson} from "./Customizations/JSON/LayoutConfigJson";
+import BaseUIElement from "./UI/BaseUIElement";
+import Table from "./UI/Base/Table";
 
 
 const connection = new OsmConnection(false, new UIEventSource<string>(undefined), "");
@@ -99,11 +101,14 @@ function createTable(preferences: any) {
         return;
     }
     rendered = true;
-    const prefs = [];
+    const prefs: (BaseUIElement|string)[][] = [];
     for (const key in preferences) {
+        if(!preferences.hasOwnProperty(key)){
+            continue;
+        }
         const pref = connection.GetPreference(key, "");
 
-        let value: UIElement = new FixedUiElement(pref.data);
+        let value: BaseUIElement = new FixedUiElement(pref.data);
         if (connection.userDetails.data.csCount > 500 &&
             (key.startsWith("mapcomplete") || connection.userDetails.data.csCount > 2500)) {
             value = new TextField({
@@ -111,24 +116,22 @@ function createTable(preferences: any) {
             });
         }
 
-        const c = [
+        const row = [
-            "<tr><td>",
             key,
-            "</td><td>",
+            new Button("delete", () => pref.setData(null)),
-            new Button("delete", () => pref.setData("")),
+            value
-            "</td><td>",
-            value,
-            "</td></tr>"
         ];
-        prefs.push(...c);
+        prefs.push(row);
     }
 
     new Combine(
         [
             ...salvageThemes(preferences).map(theme => SalvageButton(theme)),
-            "<table>",
+            new Table(
-            ...prefs,
+                ["Key","","Value"],
-            "</table>",
+                prefs
+                
+            ),
         new SubtleButton("./assets/svg/delete_icon.svg", "Delete all mapcomplete preferences (mangrove identies are preserved)").onClick(() => clearAll(preferences))]
     ).AttachTo("maindiv");
 }