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

Add presets to custom theme generator, fix simpleAddUI

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-09-03 03:16:43 +02:00
parent 9a420efa98
commit 3d05999f85
10 changed files with 90 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
Logic/UIEventSource.ts
View file

@ -8,11 +8,16 @@ export class UIEventSource<T>{
}
public addCallback(callback: ((latestData : T) => void)) : UIEventSource<T>{
public addCallback(callback: ((latestData: T) => void)): UIEventSource<T> {
this._callbacks.push(callback);
return this;
}
public addCallbackAndRun(callback: ((latestData: T) => void)): UIEventSource<T> {
callback(this.data);
return this.addCallback(callback);
}
public setData(t: T): UIEventSource<T> {
if (this.data === t) {
return;
@ -68,9 +73,7 @@ export class UIEventSource<T>{
})
}
return newSource;
}

7
State.ts
View file

@ -238,12 +238,9 @@ export class State {
}).ping()
this.layoutToUse.map((layoutToUse) => {
if (layoutToUse === undefined) {
return "MapComplete";
}
return Translations.W(layoutToUse.title).InnerRender()
return Translations.WT(layoutToUse?.title)?.txt ?? "MapComplete"
}, [Locale.language]
).addCallback((title) => {
).addCallbackAndRun((title) => {
document.title = title
});

2
UI/CustomGenerator/AllLayersPanel.ts
View file

@ -44,7 +44,7 @@ export default class AllLayersPanel extends UIElement {
"<h2>Layer editor</h2>",
"In this tab page, you can add and edit the layers of the theme. Click the layers above or add a new layer to get started.",
new SubtleButton(
"./assets/add.svg",
"./assets/layersAdd.svg",
"Add a new layer"
).onClick(() => {
self._config.data.layers.push(GenerateEmpty.createEmptyLayer())

11
UI/CustomGenerator/LayerPanel.ts
View file

@ -15,6 +15,7 @@ import {DropDown} from "../Input/DropDown";
import {TagRenderingConfigJson} from "../../Customizations/JSON/TagRenderingConfigJson";
import {MultiInput} from "../Input/MultiInput";
import {LayerConfigJson} from "../../Customizations/JSON/LayerConfigJson";
import PresetInputPanel from "./PresetInputPanel";
/**
* Shows the configuration for a single layer
@ -32,6 +33,7 @@ export default class LayerPanel extends UIElement {
public readonly selectedTagRendering: UIEventSource<TagRenderingPanel>
= new UIEventSource<TagRenderingPanel>(undefined);
private tagRenderings: UIElement;
private presetsPanel: UIElement;
constructor(config: UIEventSource<LayoutConfigJson>,
languages: UIEventSource<string[]>,
@ -122,6 +124,12 @@ export default class LayerPanel extends UIElement {
}
)
const presetPanel = new MultiInput("Add a preset",
() => ({tags: [], title: {}}),
() => new PresetInputPanel(currentlySelected, languages));
this.presetsPanel = presetPanel;
new SingleSetting(config, presetPanel, ["layers", index, "presets"], "Presets", "")
function loadTagRenderings() {
const values = (config.data.layers[index] as LayerConfigJson).tagRenderings;
const renderings: TagRenderingConfigJson[] = [];
@ -205,6 +213,9 @@ export default class LayerPanel extends UIElement {
"<h2>Popup contents</h2>",
this.titleRendering,
this.tagRenderings,
"<h2>Presets</h2>",
"Does this theme support adding a new point?<br/>If this should be the case, add a preset. Make sure that the preset tags do match the overpass-tags, otherwise it might seem like the newly added points dissapear ",
this.presetsPanel,
"<h2>Map rendering options</h2>",
this.mapRendering,
"<h2>Layer delete</h2>",

4
UI/CustomGenerator/LayerPanelWithPreview.ts
View file

@ -5,10 +5,6 @@ import LayerPanel from "./LayerPanel";
import HelpText from "../../Customizations/HelpText";
import {MultiTagInput} from "../Input/MultiTagInput";
import {FromJSON} from "../../Customizations/JSON/FromJSON";
import {VariableUiElement} from "../Base/VariableUIElement";
import TagRenderingPanel from "./TagRenderingPanel";
import {TagRenderingConfigJson} from "../../Customizations/JSON/TagRenderingConfigJson";
import {FixedUiElement} from "../Base/FixedUiElement";
import Combine from "../Base/Combine";
import PageSplit from "../Base/PageSplit";
import TagRenderingPreview from "./TagRenderingPreview";

58
UI/CustomGenerator/PresetInputPanel.ts Normal file
View file

@ -0,0 +1,58 @@
import {InputElement} from "../Input/InputElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import {UIElement} from "../UIElement";
import {MultiTagInput} from "../Input/MultiTagInput";
import SettingsTable from "./SettingsTable";
import SingleSetting from "./SingleSetting";
import MultiLingualTextFields from "../Input/MultiLingualTextFields";
import Combine from "../Base/Combine";
export default class PresetInputPanel extends InputElement<{
title: string | any,
tags: string[],
description?: string | any
}> {
private readonly _value: UIEventSource<{
title: string | any,
tags: string[],
description?: string | any
}>;
private readonly panel: UIElement;
constructor(currentlySelected: UIEventSource<SingleSetting<any>>, languages: UIEventSource<string[]>) {
super();
this._value = new UIEventSource({tags: [], title: {}});
const self = this;
function s(input: InputElement<any>, path: string, name: string, description: string){
return new SingleSetting(self._value, input, path, name, description)
}
this.panel = new SettingsTable([
s(new MultiTagInput(), "tags","Preset tags","These tags will be applied on the newly created point"),
s(new MultiLingualTextFields(languages), "title","Preset title","This little text is shown in bold on the 'create new point'-button" ),
s(new MultiLingualTextFields(languages), "description","Description", "This text is shown in the button as description when creating a new point")
], currentlySelected);
}
InnerRender(): string {
return new Combine([this.panel]).Render();
}
GetValue(): UIEventSource<{
title: string | any,
tags: string[],
description?: string | any
}> {
return this._value;
}
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
IsValid(t: any): boolean {
return false;
}
}

6
UI/SimpleAddUI.ts
View file

@ -93,6 +93,7 @@ export class SimpleAddUI extends UIElement {
description: preset.description,
icon: icon
});
self.Update();
}
)
@ -127,11 +128,6 @@ export class SimpleAddUI extends UIElement {
if (this._confirmPreset.data !== undefined) {
if(userDetails.data.dryRun){
// this.CreatePoint(this._confirmPreset.data.tags, this._confirmPreset.data.layerToAddTo)();
// return "";
}
let tagInfo = "";
const csCount = State.state.osmConnection.userDetails.data.csCount;
if (csCount > State.userJourney.tagsVisibleAt) {

3
Utils.ts
View file

@ -56,6 +56,9 @@ export class Utils {
}
public static EllipsesAfter(str : string, l : number = 100){
if(str === undefined){
return undefined;
}
if(str.length <= l){
return str;
}

7
index.ts
View file

@ -170,6 +170,9 @@ function updateFavs() {
for (const layouts of State.state.installedThemes.data) {
for (const layer of layouts.layout.layers) {
if (typeof layer === "string") {
continue;
}
if (layer.id === fav) {
layoutToUse.layers.push(layer);
}
@ -200,7 +203,9 @@ State.state.selectedElement.addCallback((feature) => {
const data = feature.feature.properties;
// Which is the applicable set?
for (const layer of layoutToUse.layers) {
if (typeof layer === "string") {
continue;
}
const applicable = layer.overpassFilter.matches(TagUtils.proprtiesToKV(data));
if (applicable) {
// This layer is the layer that gives the questions

19
test.ts
View file

@ -1,19 +1,4 @@
import TagRenderingPanel from "./UI/CustomGenerator/TagRenderingPanel";
import {UIEventSource} from "./Logic/UIEventSource";
import {TextField} from "./UI/Input/TextField";
import {VariableUiElement} from "./UI/Base/VariableUIElement";
import SettingsTable from "./UI/CustomGenerator/SettingsTable";
import SingleSetting from "./UI/CustomGenerator/SingleSetting";
import {MultiInput} from "./UI/Input/MultiInput";
import BikeCafes from "./Customizations/Layers/BikeCafes";
const config = new UIEventSource({})
const languages = new UIEventSource(["en","nl"]);
new MultiInput(
() => "Add a tag rendering",
() => new TagRenderingPanel(
)
)
console.log(JSON.stringify(new BikeCafes()))