midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fixes to the personal theme

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-09-15 02:29:31 +02:00
parent ce1568f2bb
commit 9e6460030b
11 changed files with 126 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
InitUiElements.ts
View file

@ -39,42 +39,7 @@ import {Utils} from "./Utils";
export class InitUiElements {
static InitAll(layoutToUse: Layout, layoutFromBase64: string, testing: UIEventSource<string>, layoutName: string ) {
if (layoutToUse === undefined) {
console.log("Incorrect layout")
new FixedUiElement("Error: incorrect layout <i>" + layoutName + "</i><br/><a href='https://pietervdvn.github.io/MapComplete/index.html'>Go back</a>").AttachTo("centermessage").onClick(() => {
});
throw "Incorrect layout"
}
const hash = location.hash.substr(1);
console.log("Using layout: ", layoutToUse.id, "LayoutFromBase64 is ", layoutFromBase64);
State.state = new State(layoutToUse);
// This 'leaks' the global state via the window object, useful for debugging
// @ts-ignore
window.mapcomplete_state = State.state;
if (layoutToUse.hideFromOverview) {
State.state.osmConnection.GetPreference("hidden-theme-" + layoutToUse.id + "-enabled").setData("true");
}
if (layoutFromBase64 !== "false") {
State.state.layoutDefinition = hash;
console.log("Layout definition:",Utils.EllipsesAfter(State.state.layoutDefinition, 100))
if (testing.data !== "true") {
State.state.osmConnection.OnLoggedIn(() => {
State.state.osmConnection.GetLongPreference("installed-theme-" + layoutToUse.id).setData(State.state.layoutDefinition);
})
} else {
console.warn("NOT saving custom layout to OSM as we are tesing -> probably in an iFrame")
}
}
InitUiElements.InitBaseMap();
new FixedUiElement("").AttachTo("decoration-desktop"); // Remove the decoration
function setupAllLayerElements() {
private static setupAllLayerElements() {
// ------------- Setup the layers -------------------------------
@ -108,7 +73,42 @@ export class InitUiElements {
}
setupAllLayerElements();
static InitAll(layoutToUse: Layout, layoutFromBase64: string, testing: UIEventSource<string>, layoutName: string,
layoutDefinition: string = "") {
if (layoutToUse === undefined) {
console.log("Incorrect layout")
new FixedUiElement("Error: incorrect layout <i>" + layoutName + "</i><br/><a href='https://pietervdvn.github.io/MapComplete/index.html'>Go back</a>").AttachTo("centermessage").onClick(() => {
});
throw "Incorrect layout"
}
console.log("Using layout: ", layoutToUse.id, "LayoutFromBase64 is ", layoutFromBase64);
State.state = new State(layoutToUse);
// This 'leaks' the global state via the window object, useful for debugging
// @ts-ignore
window.mapcomplete_state = State.state;
if (layoutToUse.hideFromOverview) {
State.state.osmConnection.GetPreference("hidden-theme-" + layoutToUse.id + "-enabled").setData("true");
}
if (layoutFromBase64 !== "false") {
State.state.layoutDefinition = layoutDefinition;
console.log("Layout definition:", Utils.EllipsesAfter(State.state.layoutDefinition, 100))
if (testing.data !== "true") {
State.state.osmConnection.OnLoggedIn(() => {
State.state.osmConnection.GetLongPreference("installed-theme-" + layoutToUse.id).setData(State.state.layoutDefinition);
})
} else {
console.warn("NOT saving custom layout to OSM as we are tesing -> probably in an iFrame")
}
}
InitUiElements.InitBaseMap();
new FixedUiElement("").AttachTo("decoration-desktop"); // Remove the decoration
InitUiElements.setupAllLayerElements();
function updateFavs() {
@ -133,9 +133,10 @@ export class InitUiElements {
}
}
setupAllLayerElements();
InitUiElements.setupAllLayerElements();
State.state.layerUpdater.ForceRefresh();
State.state.locationControl.ping();
State.state.layoutToUse.ping();
}
if (layoutToUse === AllKnownLayouts.allSets[PersonalLayout.NAME]) {

5
Logic/LayerUpdater.ts
View file

@ -20,11 +20,13 @@ export class LayerUpdater {
*/
private readonly previousBounds: Map<number, Bounds[]> = new Map<number, Bounds[]>();
private readonly state: State;
/**
* The most important layer should go first, as that one gets first pick for the questions
*/
constructor(state: State) {
this.state = state;
const self = this;
this.sufficentlyZoomed = State.state.locationControl.map(location => {
@ -178,6 +180,7 @@ export class LayerUpdater {
for (let i = 0; i < 25; i++) {
this.previousBounds.set(i, []);
}
this.update(this.state);
}
}

14
Logic/Osm/ChangesetHandler.ts
View file

@ -6,11 +6,11 @@ import {State} from "../../State";
export class ChangesetHandler {
private _dryRun: boolean;
private userDetails: UIEventSource<UserDetails>;
private auth: any;
private readonly _dryRun: boolean;
private readonly userDetails: UIEventSource<UserDetails>;
private readonly auth: any;
public currentChangeset: UIEventSource<string>;
public readonly currentChangeset: UIEventSource<string>;
constructor(layoutName: string, dryRun: boolean, osmConnection: OsmConnection, auth) {
this._dryRun = dryRun;
@ -30,6 +30,12 @@ export class ChangesetHandler {
generateChangeXML: (csid: string) => string,
continuation: () => void) {
if(this.userDetails.data.csCount == 0){
// The user became a contributor!
this.userDetails.data.csCount = 1;
this.userDetails.ping();
}
if (this._dryRun) {
const changesetXML = generateChangeXML("123456");
console.log(changesetXML);

5
Logic/Osm/OsmPreferences.ts
View file

@ -65,17 +65,16 @@ export class OsmPreferences {
source.setData(undefined);
return;
}
if (l > 25) {
const prefsCount = Number(l);
if (prefsCount > 100) {
throw "Length to long";
}
const prefsCount = Number(l);
let str = "";
for (let i = 0; i < prefsCount; i++) {
str += self.GetPreference(allStartWith + "-" + i, "").data;
}
source.setData(str);
source.ping();
console.log("Long preference", key, "has", str.length, "chars");
}

57
Logic/PersonalLayersPanel.ts
View file

@ -4,19 +4,18 @@ import Translations from "../UI/i18n/Translations";
import {UIEventSource} from "./UIEventSource";
import {AllKnownLayouts} from "../Customizations/AllKnownLayouts";
import Combine from "../UI/Base/Combine";
import {Img} from "../UI/Img";
import {CheckBox} from "../UI/Input/CheckBox";
import {PersonalLayout} from "./PersonalLayout";
import {Layout} from "../Customizations/Layout";
import {SubtleButton} from "../UI/Base/SubtleButton";
import {FixedUiElement} from "../UI/Base/FixedUiElement";
export class PersonalLayersPanel extends UIElement {
private checkboxes: UIElement[] = [];
constructor() {
super(State.state.favouriteLayers);
this.ListenTo(State.state.osmConnection.userDetails);
this.ListenTo(State.state.favouriteLayers);
this.UpdateView([]);
const self = this;
@ -32,7 +31,6 @@ export class PersonalLayersPanel extends UIElement {
const favs = State.state.favouriteLayers.data ?? [];
const controls = new Map<string, UIEventSource<boolean>>();
const allLayouts = AllKnownLayouts.layoutsList.concat(extraThemes);
console.log("ALL LAYOUTS", allLayouts)
for (const layout of allLayouts) {
if (layout.id === PersonalLayout.NAME) {
continue;
@ -40,50 +38,41 @@ export class PersonalLayersPanel extends UIElement {
const header =
new Combine([
`<div class="custom-layer-panel-header-img"><img src='${layout.icon}'></div>`,
"<span><b>",
`<img style="max-width: 3em;max-height: 3em; float: left; padding: 0.1em; margin-right: 0.3em;" src='${layout.icon}'>`,
"<b>",
layout.title,
"</b><br/>",
layout.description ?? "",
"</span>",
], 'custom-layer-panel-header')
layout.description ?? ""
]).SetStyle("background: #eee; display: block; padding: 0.5em; border-radius:0.5em; overflow:auto;")
this.checkboxes.push(header);
for (const layer of layout.layers) {
if (typeof layer === "string") {
continue;
}
let icon = layer.icon;
if (icon !== undefined && typeof (icon) !== "string") {
icon = icon.GetContent({"id": "node/-1"}).txt ?? "./assets/bug.svg";
let icon = layer.icon ?? "./assets/checkmark.svg";
if (typeof (icon) !== "string") {
icon = icon.GetContent({"id": "node/-1"}).txt ?? "./assets/checkmark.svg";
}
const image = (layer.icon ? `<img src='${layer.icon}'>` : Img.checkmark);
const noimage = (layer.icon ? `<img src='${layer.icon}'>` : Img.no_checkmark);
let name = layer.name ?? layer.id;
if (name === undefined) {
continue;
}
if (typeof (name) !== "string") {
name = name.InnerRender();
}
const content = new Combine([
"<span>",
"<b>", name ?? "", "</b> ",
"<b>",
name,
"</b> ",
layer.description !== undefined ? new Combine(["<br/>", layer.description]) : "",
"</span>"])
])
const cb = new CheckBox(
new Combine([
image, content
]),
new Combine([
"<span style='opacity: 0.1'>",
noimage, "</span>",
"<del>",
new SubtleButton(icon ?? "./assets/checkmark.svg", content),
new SubtleButton(
new FixedUiElement(`<img src="${icon}">`).SetStyle("opacity:0.1"),
new Combine(["<del>",
content,
"</del>"
]),
])),
controls[layer.id] ?? (favs.indexOf(layer.id) >= 0)
);
cb.SetClass("custom-layer-checkbox");
@ -92,6 +81,9 @@ export class PersonalLayersPanel extends UIElement {
cb.isEnabled.addCallback((isEnabled) => {
const favs = State.state.favouriteLayers;
if (isEnabled) {
if(favs.data.indexOf(layer.id)>= 0){
return; // Already added
}
favs.data.push(layer.id);
} else {
favs.data.splice(favs.data.indexOf(layer.id), 1);
@ -103,14 +95,15 @@ export class PersonalLayersPanel extends UIElement {
}
}
State.state.favouriteLayers.addCallback((layers) => {
for (const layerId of layers) {
controls[layerId]?.setData(true);
}
})
});
}
}
InnerRender(): string {
const t = Translations.t.favourite;
@ -122,7 +115,7 @@ export class PersonalLayersPanel extends UIElement {
return new Combine([
t.panelIntro,
...this.checkboxes
], "custom-layer-panel").Render();
]).Render();
}

25
UI/Base/SubtleButton.ts
View file

@ -1,40 +1,51 @@
import {UIElement} from "../UIElement";
import Translations from "../i18n/Translations";
import Combine from "./Combine";
import {FixedUiElement} from "./FixedUiElement";
export class SubtleButton extends UIElement{
private readonly imageUrl: string;
private readonly image: UIElement;
private readonly message: UIElement;
private readonly linkTo: { url: string, newTab?: boolean } = undefined;
constructor(imageUrl: string, message: string | UIElement, linkTo: { url: string, newTab?: boolean } = undefined) {
constructor(imageUrl: string | UIElement, message: string | UIElement, linkTo: { url: string, newTab?: boolean } = undefined) {
super(undefined);
this.linkTo = linkTo;
this.message = Translations.W(message);
this.imageUrl = imageUrl;
if(this.message !== null){
this.message.dumbMode = false;
}
if ((imageUrl ?? "") === "") {
this.image = new FixedUiElement("");
} else if (typeof (imageUrl) === "string") {
this.image = new FixedUiElement(`<img src="${imageUrl}">`);
} else {
this.image = imageUrl;
}
}
InnerRender(): string {
if(this.message !== null && this.message.IsEmpty()){
// Message == null: special case to force empty text
return "";
}
if(this.linkTo != undefined){
return new Combine([
`<a class="subtle-button" href="${this.linkTo.url}" ${this.linkTo.newTab ? 'target="_blank"' : ""}>`,
this.imageUrl !== undefined ? `<img src='${this.imageUrl}'>` : "",
this.message ?? "",
this.image,
this.message,
'</a>'
]).Render();
}
return new Combine([
'<span class="subtle-button">',
this.imageUrl !== undefined ? `<img src='${this.imageUrl}'>` : "",
this.message ?? "",
this.image,
this.message,
'</span>'
]).Render();
}

2
UI/CustomGenerator/GenerateEmpty.ts
View file

@ -6,7 +6,7 @@ export class GenerateEmpty {
public static createEmptyLayer(): LayerConfigJson {
return {
id: "yourlayer",
name: "Layer",
name: {},
minzoom: 12,
overpassTags: {and: [""]},
title: {},

4
UI/CustomGenerator/SavePanel.ts
View file

@ -7,6 +7,7 @@ import {OsmConnection} from "../../Logic/Osm/OsmConnection";
import {FixedUiElement} from "../Base/FixedUiElement";
import {TextField} from "../Input/TextField";
import {SubtleButton} from "../Base/SubtleButton";
import {LayerConfigJson} from "../../Customizations/JSON/LayerConfigJson";
export default class SavePanel extends UIElement {
private json: UIElement;
@ -45,7 +46,8 @@ export default class SavePanel extends UIElement {
this.loadFromJson = new SubtleButton("./assets/reload.svg", "<b>Load the JSON file below</b>")
.onClick(() => {
const json = jsonTextField.GetValue().data;
config.setData(JSON.parse(json));
const parsed : LayoutConfigJson = JSON.parse(json);
config.setData(parsed);
});
}

8
UI/Input/MultiLingualTextFields.ts
View file

@ -12,6 +12,14 @@ export default class MultiLingualTextFields extends InputElement<any> {
value: UIEventSource<Map<string, UIEventSource<string>>> = undefined) {
super(undefined);
this._value = value ?? new UIEventSource({});
this._value.addCallbackAndRun(latestData => {
if(typeof(latestData) === "string"){
console.warn("Refusing string for multilingual input",latestData);
self._value.setData({});
}
})
const self = this;
function setup(languages: string[]) {

1
assets/checkmark.svg Normal file
View file

@ -0,0 +1 @@
<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 7.28571L10.8261 15L23 3" stroke="black" stroke-width="4" stroke-linejoin="round"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 195 B

4
index.ts
View file

@ -82,7 +82,7 @@ if (layoutFromBase64.startsWith("wiki:")) {
console.log("DOWNLOADED:",layoutJson);
const layout = FromJSON.LayoutFromJSON(JSON.parse(layoutJson));
layout.id = layoutFromBase64;
InitUiElements.InitAll(layout, layoutFromBase64, testing, layoutFromBase64);
InitUiElements.InitAll(layout, layoutFromBase64, testing, layoutFromBase64, btoa(layoutJson));
} catch (e) {
new FixedUiElement(`<a href="${cleanUrl}">${themeName}</a> is invalid:<br/>${e}`)
.SetClass("clickable")
@ -98,7 +98,7 @@ if (layoutFromBase64.startsWith("wiki:")) {
} else if (layoutFromBase64 !== "false") {
layoutToUse = InitUiElements.LoadLayoutFromHash(userLayoutParam);
InitUiElements.InitAll(layoutToUse, layoutFromBase64, testing, defaultLayout);
InitUiElements.InitAll(layoutToUse, layoutFromBase64, testing, defaultLayout, location.hash.substr(1));
} else {
InitUiElements.InitAll(layoutToUse, layoutFromBase64, testing, defaultLayout);
}