Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Add table, fix preferences view

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-15 00:55:12 +02:00
parent 8e72b70742
commit afbe765ce9
6 changed files with 95 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Models/Constants.ts
View file

@ -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 = {

2
State.ts
View file

@ -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")
}

38
UI/Base/Button.ts
View file

@ -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;
}
}

59
UI/Base/Table.ts Normal file
View file

@ -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")
}
}

8
UI/BigComponents/LicensePicker.ts
View file

@ -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")
)

29
preferences.ts
View file

@ -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 = [
"<tr><td>",
const row = [
key,
"</td><td>",
new Button("delete", () => pref.setData("")),
"</td><td>",
value,
"</td></tr>"
new Button("delete", () => pref.setData(null)),
value
];
prefs.push(...c);
prefs.push(row);
}
new Combine(
[
...salvageThemes(preferences).map(theme => SalvageButton(theme)),
"<table>",
...prefs,
"</table>",
new Table(
["Key","","Value"],
prefs
),
new SubtleButton("./assets/svg/delete_icon.svg", "Delete all mapcomplete preferences (mangrove identies are preserved)").onClick(() => clearAll(preferences))]
).AttachTo("maindiv");
}