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

Add loading from JSON in the custom generator, small clarifications

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-09-07 01:03:23 +02:00
parent 93bfa73088
commit 115dc0249c
5 changed files with 42 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
Customizations/JSON/FromJSON.ts
View file

@ -264,6 +264,11 @@ export class FromJSON {
const iconSize = FromJSON.TagRenderingWithDefault(json.iconSize, "iconSize", "40,40,center");
const color = FromJSON.TagRenderingWithDefault(json.color, "layercolor", "#0000ff");
const width = FromJSON.TagRenderingWithDefault(json.width, "layerwidth", "10");
if(json.title === "Layer"){
json.title = {};
}
let title= FromJSON.TagRendering(json.title);
let tagRenderingDefs = json.tagRenderings ?? [];
let hasImageElement = false;
@ -338,7 +343,7 @@ export class FromJSON {
icon: icon.GetContent(renderTags).txt,
overpassFilter: overpassTags,
title: FromJSON.TagRendering(json.title),
title: title,
minzoom: json.minzoom,
presets: presets,
elementsToShow: tagRenderings,

2
UI/CustomGenerator/GenerateEmpty.ts
View file

@ -9,7 +9,7 @@ export class GenerateEmpty {
name: "Layer",
minzoom: 12,
overpassTags: {and: [""]},
title: "Layer",
title: {},
description: {},
tagRenderings: [],
icon: {

32
UI/CustomGenerator/SavePanel.ts
View file

@ -5,10 +5,14 @@ import {LayoutConfigJson} from "../../Customizations/JSON/LayoutConfigJson";
import Combine from "../Base/Combine";
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
import {FixedUiElement} from "../Base/FixedUiElement";
import {TextField} from "../Input/TextField";
import {SubtleButton} from "../Base/SubtleButton";
import {FromJSON} from "../../Customizations/JSON/FromJSON";
export default class SavePanel extends UIElement {
private json: UIElement;
private lastSaveEl: UIElement;
private loadFromJson: UIElement;
constructor(
connection: OsmConnection,
@ -17,7 +21,6 @@ export default class SavePanel extends UIElement {
super();
this.lastSaveEl = new VariableUiElement(chronic
.map(date => {
if (date === undefined) {
@ -26,12 +29,25 @@ export default class SavePanel extends UIElement {
return "Your theme was last saved at " + date.toISOString()
})).onClick(() => chronic.setData(new Date()));
this.json = new VariableUiElement(config.map(config => {
return JSON.stringify(config, null, 2)
.replace(/\n/g, "<br/>")
.replace(/ /g, "&nbsp;");
}))
.SetClass("literal-code");
const jsonStr = config.map(config =>
JSON.stringify(config, null, 2));
const jsonTextField = new TextField({
placeholder: "JSON Config",
fromString: str => str,
toString: str => str,
value: jsonStr,
startValidated: false,
textArea: true,
textAreaRows: 20
});
this.json = jsonTextField;
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));
});
}
InnerRender(): string {
@ -41,6 +57,8 @@ export default class SavePanel extends UIElement {
"<h3>JSON configuration</h3>",
"The url hash is actually no more then a BASE64-encoding of the below JSON. This json contains the full configuration of the theme.<br/>" +
"This configuration is mainly useful for debugging",
"<br/>",
this.loadFromJson,
this.json
]).SetClass("scrollable")
.Render();

8
UI/Input/TextField.ts
View file

@ -111,6 +111,7 @@ export class TextField<T> extends InputElement<T> {
private readonly startValidated: boolean;
public readonly IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly _isArea: boolean;
private _textAreaRows: number;
constructor(options: {
/**
@ -131,7 +132,8 @@ export class TextField<T> extends InputElement<T> {
fromString: (string: string) => T,
value?: UIEventSource<T>,
startValidated?: boolean,
textArea?: boolean
textArea?: boolean,
textAreaRows?: number
}) {
super(undefined);
const self = this;
@ -144,7 +146,7 @@ export class TextField<T> extends InputElement<T> {
this._fromString = options.fromString ?? ((str) => (str))
this.value.addCallback((str) => this.mappedValue.setData(options.fromString(str)));
this.mappedValue.addCallback((t) => this.value.setData(options.toString(t)));
this._textAreaRows = options.textAreaRows;
this._placeholder = Translations.W(options.placeholder ?? "");
this.ListenTo(this._placeholder._source);
@ -171,7 +173,7 @@ export class TextField<T> extends InputElement<T> {
InnerRender(): string {
if(this._isArea){
return `<textarea id="text-${this.id}" class="form-text-field" rows="4" cols="50" style="max-width: 100%;box-sizing: border-box"></textarea>`
return `<textarea id="text-${this.id}" class="form-text-field" rows="${this._textAreaRows}" cols="50" style="max-width: 100%; width: 100%; box-sizing: border-box"></textarea>`
}
return `<form onSubmit='return false' class='form-text-field'>` +

3
assets/themes/cyclestreets/cyclestreets.json
View file

@ -2,7 +2,8 @@
"id": "fietsstraten",
"version": "2020-08-30",
"title": "Fietsstraten",
"description": "Een fietsstraat is een straat waar <b>automobilisten geen fietsers mogen inhalen</b> en waar een maximumsnelheid van <b>30km/u</b> geldt.<br/><br/>Op deze open kaart kan je alle gekende fietsstraten zien en kan je ontbrekende fietsstraten aanduiden. Om de kaart aan te passen, moet je je aanmelden met OpenStreetMap en helemaal inzoomen tot straatniveau.",
"description": "Een fietsstraat is een straat waar <ul><li><b>automobilisten geen fietsers mogen inhalen</b></li><li>Er een maximumsnelheid van <b>30km/u</b> geldt</li><li>Fietsers gemotoriseerde voortuigen links mogen inhalen</li><li>Fietsers nog steeds voorrang aan rechts moeten verlenen - ook aan auto's en voetgangers op het zebrapad</li></ul><br/><br/>Op deze open kaart kan je alle gekende fietsstraten zien en kan je ontbrekende fietsstraten aanduiden. Om de kaart aan te passen, moet je je aanmelden met OpenStreetMap en helemaal inzoomen tot straatniveau.",
"icon": "./assets/themes/cyclestreets/F111.svg",
"language": "nl",
"startLat": 51.2095,