New preset-system, better 'add new POI'-ui with small confirmation
This commit is contained in:
parent
c020955cdc
commit
8a1e171298
25 changed files with 317 additions and 80 deletions
|
@ -12,6 +12,7 @@ import {Widths} from "./Layers/Widths";
|
|||
import {StreetWidth} from "./Layouts/StreetWidth";
|
||||
import {NatureReserves} from "./Layers/NatureReserves";
|
||||
import {Natuurpunt} from "./Layouts/Natuurpunt";
|
||||
import Translations from "../UI/i18n/Translations";
|
||||
|
||||
export class AllKnownLayouts {
|
||||
public static allSets = AllKnownLayouts.AllLayouts();
|
||||
|
@ -36,6 +37,7 @@ export class AllKnownLayouts {
|
|||
const knownKeys = []
|
||||
for (const layout of layouts) {
|
||||
for (const layer of layout.layers) {
|
||||
console.log("Adding ", Translations.W(layer.name).InnerRender());
|
||||
const key = layer.overpassFilter.asOverpass().join("");
|
||||
if (knownKeys.indexOf(key) >= 0) {
|
||||
continue;
|
||||
|
|
|
@ -13,7 +13,7 @@ export class LayerDefinition {
|
|||
|
||||
|
||||
/**
|
||||
* This name is shown in the 'add XXX button'
|
||||
* This name is used in the 'hide or show this layer'-buttons
|
||||
*/
|
||||
name: string | UIElement;
|
||||
|
||||
|
@ -26,7 +26,12 @@ export class LayerDefinition {
|
|||
* These tags are added whenever a new point is added by the user on the map.
|
||||
* This is the ideal place to add extra info, such as "fixme=added by MapComplete, geometry should be checked"
|
||||
*/
|
||||
newElementTags: Tag[]
|
||||
presets: {
|
||||
tags: Tag[],
|
||||
title: string | UIElement,
|
||||
description?: string | UIElement,
|
||||
icon: string
|
||||
}[]
|
||||
/**
|
||||
* Not really used anymore
|
||||
* This is meant to serve as icon in the buttons
|
||||
|
@ -91,9 +96,14 @@ export class LayerDefinition {
|
|||
static WAYHANDLING_CENTER_AND_WAY = 2;
|
||||
|
||||
constructor(options: {
|
||||
name: string | UIElement,
|
||||
name: string,
|
||||
description: string | UIElement,
|
||||
newElementTags: Tag[],
|
||||
presets: {
|
||||
tags: Tag[],
|
||||
title: string | UIElement,
|
||||
description?: string | UIElement,
|
||||
icon: string
|
||||
}[],
|
||||
icon: string,
|
||||
minzoom: number,
|
||||
overpassFilter: TagsFilter,
|
||||
|
@ -112,7 +122,7 @@ export class LayerDefinition {
|
|||
this.name = options.name;
|
||||
this.description = options.description;
|
||||
this.maxAllowedOverlapPercentage = options.maxAllowedOverlapPercentage ?? 0;
|
||||
this.newElementTags = options.newElementTags;
|
||||
this.presets = options.presets;
|
||||
this.icon = options.icon;
|
||||
this.minzoom = options.minzoom;
|
||||
this.overpassFilter = options.overpassFilter;
|
||||
|
|
|
@ -35,10 +35,18 @@ export default class BikeCafes extends LayerDefinition {
|
|||
new Tag("pub", "cycling")
|
||||
])
|
||||
])
|
||||
this.newElementTags = [
|
||||
new Tag("amenity", "pub"),
|
||||
new Tag("pub", "cycling"),
|
||||
];
|
||||
|
||||
this.presets = [
|
||||
{
|
||||
title: Translations.t.cyclofix.cafe.title,
|
||||
icon: "/assets/bike/cafe.svg",
|
||||
tags : [
|
||||
new Tag("amenity", "pub"),
|
||||
new Tag("pub", "cycling"),
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
this.maxAllowedOverlapPercentage = 10;
|
||||
|
||||
this.minzoom = 13;
|
||||
|
|
|
@ -40,7 +40,7 @@ export default class BikeOtherShops extends LayerDefinition {
|
|||
anyValueExcept("shop", "bicycle"),
|
||||
this.hasBikeServices
|
||||
])
|
||||
this.newElementTags = undefined
|
||||
this.presets = []
|
||||
this.maxAllowedOverlapPercentage = 10
|
||||
this.wayHandling = LayerDefinition.WAYHANDLING_CENTER_AND_WAY
|
||||
|
||||
|
|
|
@ -19,9 +19,14 @@ export default class BikeParkings extends LayerDefinition {
|
|||
this.name = Translations.t.cyclofix.parking.name;
|
||||
this.icon = "./assets/bike/parking.svg";
|
||||
this.overpassFilter = new Tag("amenity", "bicycle_parking");
|
||||
this.newElementTags = [
|
||||
new Tag("amenity", "bicycle_parking"),
|
||||
];
|
||||
this.presets = [{
|
||||
title: Translations.t.cyclofix.parking.title,
|
||||
icon: "/assets/bike/parking.svg",
|
||||
tags: [
|
||||
new Tag("amenity", "bicycle_parking"),
|
||||
]
|
||||
}];
|
||||
|
||||
this.maxAllowedOverlapPercentage = 10;
|
||||
|
||||
this.minzoom = 13;
|
||||
|
|
|
@ -24,9 +24,13 @@ export default class BikeShops extends LayerDefinition {
|
|||
this.name = Translations.t.cyclofix.shop.name
|
||||
this.icon = "./assets/bike/repair_shop.svg"
|
||||
this.overpassFilter = new Tag("shop", "bicycle");
|
||||
this.newElementTags = [
|
||||
new Tag("shop", "bicycle"),
|
||||
]
|
||||
this.presets = [{
|
||||
title: Translations.t.cyclofix.shop.title,
|
||||
icon: "/assets/bike/repair_shop.svg",
|
||||
tags: [
|
||||
new Tag("shop", "bicycle"),
|
||||
]
|
||||
}]
|
||||
this.maxAllowedOverlapPercentage = 10
|
||||
this.wayHandling = LayerDefinition.WAYHANDLING_CENTER_AND_WAY
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import {LayerDefinition} from "../LayerDefinition";
|
||||
import {And, Tag, TagsFilter, Or} from "../../Logic/TagsFilter";
|
||||
import {And, Tag, TagsFilter, Or, Not} from "../../Logic/TagsFilter";
|
||||
import BikeStationChain from "../Questions/bike/StationChain";
|
||||
import BikeStationPumpTools from "../Questions/bike/StationPumpTools";
|
||||
import BikeStationStand from "../Questions/bike/StationStand";
|
||||
|
@ -16,10 +16,14 @@ import { TagRenderingOptions } from "../TagRendering";
|
|||
|
||||
|
||||
export default class BikeStations extends LayerDefinition {
|
||||
private readonly repairStation = new Tag("amenity", "bicycle_repair_station");
|
||||
private readonly pump = new Tag("service:bicycle:pump", "yes");
|
||||
private readonly nopump = new Tag("service:bicycle:pump", "no");
|
||||
private readonly pumpOperationalAny = new Tag("service:bicycle:pump:operational_status", "yes");
|
||||
private readonly pumpOperationalOk = new Or([new Tag("service:bicycle:pump:operational_status", "yes"), new Tag("service:bicycle:pump:operational_status", "operational"), new Tag("service:bicycle:pump:operational_status", "ok"), new Tag("service:bicycle:pump:operational_status", "")]);
|
||||
private readonly tools = new Tag("service:bicycle:tools", "yes");
|
||||
private readonly notools = new Tag("service:bicycle:tools", "no");
|
||||
|
||||
private readonly to = Translations.t.cyclofix.station
|
||||
|
||||
constructor() {
|
||||
|
@ -27,13 +31,30 @@ export default class BikeStations extends LayerDefinition {
|
|||
this.name = Translations.t.cyclofix.station.name;
|
||||
this.icon = "./assets/bike/repair_station_pump.svg";
|
||||
|
||||
this.overpassFilter = new And([
|
||||
new Tag("amenity", "bicycle_repair_station")
|
||||
]);
|
||||
const tr = Translations.t.cyclofix.station
|
||||
this.overpassFilter = this.repairStation;
|
||||
this.presets = [
|
||||
{
|
||||
title: tr.titlePump,
|
||||
description: tr.services.pump,
|
||||
icon: "/assets/bike/pump.svg",
|
||||
tags: [this.repairStation, this.pump, this.notools]
|
||||
},
|
||||
{
|
||||
title: tr.titleRepair,
|
||||
description: tr.services.tools,
|
||||
icon: "/assets/bike/repair_station.svg",
|
||||
tags: [this.repairStation, this.tools, this.nopump]
|
||||
},
|
||||
{
|
||||
title: tr.titlePumpAndRepair,
|
||||
description: tr.services.both,
|
||||
icon: "/assets/bike/repair_station_pump.svg",
|
||||
tags: [this.repairStation, this.tools, this.nopump]
|
||||
},
|
||||
|
||||
]
|
||||
|
||||
this.newElementTags = [
|
||||
new Tag("amenity", "bicycle_repair_station")
|
||||
];
|
||||
this.maxAllowedOverlapPercentage = 10;
|
||||
|
||||
this.minzoom = 13;
|
||||
|
|
|
@ -18,7 +18,13 @@ export class Birdhide extends LayerDefinition {
|
|||
icon: "assets/nature/birdhide.svg",
|
||||
minzoom: 12,
|
||||
wayHandling: LayerDefinition.WAYHANDLING_CENTER_AND_WAY,
|
||||
newElementTags: [Birdhide.birdhide],
|
||||
presets: [
|
||||
{
|
||||
title: "Vogelkijkplaats",
|
||||
icon: "/assets/nature/birdhide.svg",
|
||||
tags: [Birdhide.birdhide]
|
||||
}
|
||||
],
|
||||
style(tags: any): { color: string; icon: any } {
|
||||
return {color: "", icon: undefined};
|
||||
},
|
||||
|
|
|
@ -12,7 +12,12 @@ export class Bookcases extends LayerDefinition {
|
|||
super();
|
||||
|
||||
this.name = "boekenkast";
|
||||
this.newElementTags = [new Tag("amenity", "public_bookcase")];
|
||||
this.presets = [{
|
||||
tags: [new Tag("amenity", "public_bookcase")],
|
||||
description: "Add a new bookcase here",
|
||||
title: Translations.t.bookcases.bookcase,
|
||||
icon: "/assets/bookcase.svg"
|
||||
}];
|
||||
this.icon = "./assets/bookcase.svg";
|
||||
this.overpassFilter = new Tag("amenity", "public_bookcase");
|
||||
this.minzoom = 11;
|
||||
|
|
|
@ -22,10 +22,15 @@ export class Bos extends LayerDefinition {
|
|||
);
|
||||
|
||||
|
||||
this.newElementTags = [
|
||||
new Tag("landuse", "forest"),
|
||||
new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")
|
||||
];
|
||||
this.presets = [{
|
||||
title: "Bos",
|
||||
description: "Voeg een ontbrekend bos toe aan de kaart",
|
||||
icon: undefined,
|
||||
tags: [
|
||||
new Tag("landuse", "forest"),
|
||||
new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")
|
||||
]
|
||||
}];
|
||||
this.maxAllowedOverlapPercentage = 10;
|
||||
|
||||
this.minzoom = 13;
|
||||
|
|
|
@ -21,9 +21,11 @@ export class DrinkingWater extends LayerDefinition {
|
|||
]);
|
||||
|
||||
|
||||
this.newElementTags = [
|
||||
new Tag("amenity", "drinking_water"),
|
||||
];
|
||||
this.presets = [{
|
||||
title: Translations.t.cyclofix.drinking_water.title,
|
||||
icon: "/assets/bike/drinking_water.svg",
|
||||
tags: [new Tag("amenity", "drinking_water")]
|
||||
}];
|
||||
this.maxAllowedOverlapPercentage = 10;
|
||||
this.wayHandling = LayerDefinition.WAYHANDLING_CENTER_AND_WAY
|
||||
|
||||
|
|
|
@ -15,6 +15,16 @@ export class GhostBike extends LayerDefinition {
|
|||
this.description = "A <b>ghost bike</b> is a memorial for a cyclist who died in a traffic accident," +
|
||||
" in the form of a white bicycle placed permanently near the accident location.";
|
||||
|
||||
|
||||
this.presets = [
|
||||
{
|
||||
title: "Ghost bike",
|
||||
description: "Add a missing ghost bike to the map",
|
||||
icon: "/assets/bike/ghost.svg",
|
||||
tags: [new Tag("historic", "memorial"), new Tag("memorial", "ghost_bike")]
|
||||
}
|
||||
]
|
||||
|
||||
this.elementsToShow = [
|
||||
new FixedText(this.description),
|
||||
new ImageCarouselWithUploadConstructor(),
|
||||
|
|
|
@ -8,7 +8,7 @@ export class GrbToFix extends LayerDefinition {
|
|||
super();
|
||||
|
||||
this.name = "grb";
|
||||
this.newElementTags = undefined;
|
||||
this.presets = [];
|
||||
this.icon = "./assets/star.svg";
|
||||
this.overpassFilter = new Regex("fixme", "GRB");
|
||||
this.minzoom = 13;
|
||||
|
|
|
@ -11,7 +11,16 @@ export class InformationBoard extends LayerDefinition {
|
|||
description: "Een informatiebord of kaart",
|
||||
minzoom: 12,
|
||||
overpassFilter: new Tag("tourism", "information"),
|
||||
newElementTags: [new Tag("tourism", "information")],
|
||||
presets: [{
|
||||
title: "Informatiebord",
|
||||
icon: "/assets/nature/info.png",
|
||||
tags: [new Tag("tourism", "information")]
|
||||
},
|
||||
{
|
||||
title: "Kaart",
|
||||
icon: "/assets/map.svg",
|
||||
tags: [new Tag("tourism", "information"), new Tag("information", "map")]
|
||||
}],
|
||||
maxAllowedOverlapPercentage: 0,
|
||||
icon: "assets/nature/info.png",
|
||||
});
|
||||
|
|
|
@ -12,16 +12,19 @@ export class Map extends LayerDefinition {
|
|||
this.minzoom = 12;
|
||||
|
||||
this.overpassFilter = new Tag("information", "map");
|
||||
this.newElementTags = [new Tag("tourism", "information"), new Tag("information", "map")];
|
||||
this.presets = [{
|
||||
title: "Map",
|
||||
icon: "/assets/map.svg",
|
||||
tags: [new Tag("tourism", "information"), new Tag("information", "map")]
|
||||
}];
|
||||
|
||||
|
||||
|
||||
const isOsmSource = new Tag("map_source", "OpenStreetMap");
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
this.style = (properties) => {
|
||||
let icon = "assets/map.svg";
|
||||
if(isOsmSource.matchesProperties(properties)){
|
||||
if (isOsmSource.matchesProperties(properties)) {
|
||||
icon = "assets/osm-logo-white-bg.svg";
|
||||
|
||||
const attr = properties["map_source:attribution"];
|
||||
|
|
|
@ -18,20 +18,26 @@ export class NatureReserves extends LayerDefinition {
|
|||
new Or([new Tag("leisure", "nature_reserve"), new Tag("boundary", "protected_area")]);
|
||||
this.maxAllowedOverlapPercentage = 10;
|
||||
|
||||
this.newElementTags = [new Tag("leisure", "nature_reserve"),
|
||||
new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")]
|
||||
this.presets = [{
|
||||
title: "Natuurreservaat",
|
||||
description: "Voeg een ontbrekend, erkend natuurreservaat toe, bv. een gebied dat beheerd wordt door het ANB of natuurpunt",
|
||||
icon: undefined,
|
||||
tags: [new Tag("leisure", "nature_reserve"),
|
||||
new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")]
|
||||
}
|
||||
];
|
||||
this.minzoom = 13;
|
||||
this.title = new NameInline("natuurreservaat");
|
||||
this.style = this.generateStyleFunction();
|
||||
this.elementsToShow = [
|
||||
new ImageCarouselWithUploadConstructor(),
|
||||
/* new TagRenderingOptions({
|
||||
freeform: {
|
||||
key: "_surface",
|
||||
renderTemplate: "{_surface}m²",
|
||||
template: "$$$"
|
||||
}
|
||||
}),*/
|
||||
/* new TagRenderingOptions({
|
||||
freeform: {
|
||||
key: "_surface",
|
||||
renderTemplate: "{_surface}m²",
|
||||
template: "$$$"
|
||||
}
|
||||
}),*/
|
||||
new NameQuestion(),
|
||||
new AccessTag(),
|
||||
new OperatorTag(),
|
||||
|
|
|
@ -50,8 +50,14 @@ export class Park extends LayerDefinition {
|
|||
this.icon = undefined;
|
||||
this.overpassFilter =
|
||||
new Or([new Tag("leisure", "park"), new Tag("landuse", "village_green")]);
|
||||
this.newElementTags = [new Tag("leisure", "park"),
|
||||
new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")];
|
||||
this.presets = [{
|
||||
title: "Park",
|
||||
description: "Voeg een ontbrekend park toe. Een park is een groene ruimte die openbaar is." +
|
||||
"Typisch vind je er banken, vuilbakken, standbeelden, ... ",
|
||||
icon: undefined,
|
||||
tags: [new Tag("leisure", "park"),
|
||||
new Tag("fixme", "Toegevoegd met MapComplete, geometry nog uit te tekenen")]
|
||||
}];
|
||||
this.maxAllowedOverlapPercentage = 25;
|
||||
|
||||
this.minzoom = 13;
|
||||
|
|
|
@ -11,12 +11,18 @@ export class Viewpoint extends LayerDefinition {
|
|||
super({
|
||||
name: "Bezienswaardigheid",
|
||||
description: "Wil je een foto toevoegen van iets dat geen park, bos of natuurgebied is? Dit kan hiermee",
|
||||
newElementTags: [new Tag("tourism", "viewpoint"), new Tag("fixme", "Added with mapcomplete. This viewpoint should probably me merged with some existing feature")],
|
||||
presets: [{
|
||||
title: "Bezienswaardigheid (andere)",
|
||||
description: "Wens je een foto toe te voegen dat geen park, bos of (erkend) natuurreservaat is? Dit kan hiermee",
|
||||
icon: "/assets/viewpoint.svg",
|
||||
tags: [new Tag("tourism", "viewpoint"),
|
||||
new Tag("fixme", "Added with mapcomplete. This viewpoint should probably me merged with some existing feature")]
|
||||
}],
|
||||
icon: "assets/viewpoint.svg",
|
||||
wayHandling: LayerDefinition.WAYHANDLING_CENTER_ONLY,
|
||||
style: tags => {
|
||||
return {
|
||||
color: undefined, icon:{
|
||||
color: undefined, icon: {
|
||||
iconUrl: "assets/viewpoint.svg",
|
||||
iconSize: [20, 20]
|
||||
}
|
||||
|
|
|
@ -54,7 +54,7 @@ export class InitUiElements {
|
|||
|
||||
const help = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/help.svg' alt='help'></div>`);
|
||||
const close = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/close.svg' alt='close'></div>`);
|
||||
new CheckBox(
|
||||
const checkbox = new CheckBox(
|
||||
new Combine([
|
||||
"<span class='collapse-button'>", close, "</span>",
|
||||
"<span id='welcomeMessage'>", fullOptions.onClick(() => {
|
||||
|
@ -62,6 +62,14 @@ export class InitUiElements {
|
|||
new Combine(["<span class='open-button'>", help, "</span>"])
|
||||
, true
|
||||
).AttachTo("messagesbox");
|
||||
let dontCloseYet = true;
|
||||
bm.Location.addCallback(() => {
|
||||
if(dontCloseYet){
|
||||
dontCloseYet = false;
|
||||
return;
|
||||
}
|
||||
checkbox.isEnabled.setData(false);
|
||||
})
|
||||
|
||||
|
||||
const fullOptions2 = this.CreateWelcomePane(layoutToUse, osmConnection, bm);
|
||||
|
|
|
@ -17,7 +17,7 @@ export class SubtleButton extends UIElement{
|
|||
InnerRender(): string {
|
||||
return new Combine([
|
||||
'<span class="subtle-button">',
|
||||
`<img src='${this.imageUrl}'>`,
|
||||
this.imageUrl !== undefined ? `<img src='${this.imageUrl}'>` : "",
|
||||
this.message,
|
||||
'</span>'
|
||||
]).Render();
|
||||
|
|
|
@ -8,6 +8,16 @@ import {Button} from "./Base/Button";
|
|||
import {UserDetails} from "../Logic/OsmConnection";
|
||||
import Translations from "./i18n/Translations";
|
||||
import Combine from "./Base/Combine";
|
||||
import {SubtleButton} from "./Base/SubtleButton";
|
||||
import {VerticalCombine} from "./Base/VerticalCombine";
|
||||
|
||||
interface Preset {
|
||||
description: string | UIElement,
|
||||
name: string | UIElement,
|
||||
icon: string,
|
||||
tags: Tag[],
|
||||
layerToAddTo: FilteredLayer
|
||||
}
|
||||
|
||||
/**
|
||||
* Asks to add a feature at the last clicked location, at least if zoom is sufficient
|
||||
|
@ -17,17 +27,22 @@ export class SimpleAddUI extends UIElement {
|
|||
private _addButtons: UIElement[];
|
||||
private _lastClickLocation: UIEventSource<{ lat: number; lon: number }>;
|
||||
private _changes: Changes;
|
||||
private _selectedElement: UIEventSource<{feature: any}>;
|
||||
private _selectedElement: UIEventSource<{ feature: any }>;
|
||||
private _dataIsLoading: UIEventSource<boolean>;
|
||||
private _userDetails: UIEventSource<UserDetails>;
|
||||
|
||||
private _confirmPreset: UIEventSource<Preset>
|
||||
= new UIEventSource<Preset>(undefined);
|
||||
private confirmButton: UIElement = undefined;
|
||||
private cancelButton: UIElement;
|
||||
|
||||
constructor(zoomlevel: UIEventSource<{ zoom: number }>,
|
||||
lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
|
||||
changes: Changes,
|
||||
selectedElement: UIEventSource<{feature: any}>,
|
||||
selectedElement: UIEventSource<{ feature: any }>,
|
||||
dataIsLoading: UIEventSource<boolean>,
|
||||
userDetails: UIEventSource<UserDetails>,
|
||||
addButtons: { name: UIElement; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }[],
|
||||
addButtons: { description: string | UIElement, name: string | UIElement; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }[],
|
||||
) {
|
||||
super(zoomlevel);
|
||||
this._zoomlevel = zoomlevel;
|
||||
|
@ -39,18 +54,47 @@ export class SimpleAddUI extends UIElement {
|
|||
this.ListenTo(userDetails);
|
||||
this.ListenTo(dataIsLoading);
|
||||
this._addButtons = [];
|
||||
this.ListenTo(this._confirmPreset);
|
||||
this.clss = "add-ui"
|
||||
|
||||
const self = this;
|
||||
for (const option of addButtons) {
|
||||
// <button type='button'> looks SO retarded
|
||||
// the default type of button is 'submit', which performs a POST and page reload
|
||||
const button =
|
||||
new Button(Translations.t.general.add.addNew.Subs({category: option.name}),
|
||||
this.CreatePoint(option));
|
||||
new SubtleButton(
|
||||
option.icon,
|
||||
new Combine([
|
||||
"<b>",
|
||||
option.name,
|
||||
"</b><br/>",
|
||||
option.description !== undefined ? option.description : ""])
|
||||
).onClick(
|
||||
() => {
|
||||
self.confirmButton = new SubtleButton(option.icon,
|
||||
new Combine([
|
||||
"<b>",
|
||||
option.name,
|
||||
"</b><br/>",
|
||||
option.description !== undefined ? option.description : ""]));
|
||||
self.confirmButton.onClick(self.CreatePoint(option));
|
||||
self._confirmPreset.setData(option);
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
this._addButtons.push(button);
|
||||
}
|
||||
|
||||
this.cancelButton = new SubtleButton(
|
||||
"/assets/close.svg",
|
||||
Translations.t.general.cancel
|
||||
).onClick(() => {
|
||||
self._confirmPreset.setData(undefined);
|
||||
})
|
||||
}
|
||||
|
||||
private CreatePoint(option: {icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }) {
|
||||
private CreatePoint(option: { tags: Tag[]; layerToAddTo: FilteredLayer }) {
|
||||
const self = this;
|
||||
return () => {
|
||||
|
||||
|
@ -62,12 +106,49 @@ export class SimpleAddUI extends UIElement {
|
|||
}
|
||||
|
||||
InnerRender(): string {
|
||||
const header = Translations.t.general.add.header;
|
||||
|
||||
|
||||
|
||||
if (this._confirmPreset.data !== undefined) {
|
||||
|
||||
|
||||
return new Combine([
|
||||
Translations.t.general.add.confirmIntro.Subs({title: this._confirmPreset.data.name}),
|
||||
this._userDetails.data.dryRun ? "<span class='alert'>TESTING - changes won't be saved</span>":"",
|
||||
this.confirmButton,
|
||||
this.cancelButton
|
||||
|
||||
]).Render();
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
let header: UIElement = Translations.t.general.add.header;
|
||||
|
||||
if (!this._userDetails.data.loggedIn) {
|
||||
return new Combine([header, Translations.t.general.add.pleaseLogin]).Render()
|
||||
}
|
||||
|
||||
if (this._userDetails.data.unreadMessages > 0) {
|
||||
return new Combine([header, "<span class='alert'>",
|
||||
Translations.t.general.readYourMessages,
|
||||
"</span>"]).Render();
|
||||
}
|
||||
|
||||
if (this._userDetails.data.dryRun) {
|
||||
header = new Combine([header,
|
||||
"<span class='alert'>",
|
||||
"Test mode - changes won't be saved",
|
||||
"</span>"
|
||||
]);
|
||||
}
|
||||
|
||||
if (this._userDetails.data.csCount < 5) {
|
||||
return new Combine([header, "<span class='alert'>",
|
||||
Translations.t.general.fewChangesBefore,
|
||||
"</span>"]).Render();
|
||||
}
|
||||
|
||||
if (this._zoomlevel.data.zoom < 19) {
|
||||
return new Combine([header, Translations.t.general.add.zoomInFurther]).Render()
|
||||
}
|
||||
|
@ -76,10 +157,13 @@ export class SimpleAddUI extends UIElement {
|
|||
return new Combine([header, Translations.t.general.add.stillLoading]).Render()
|
||||
}
|
||||
|
||||
|
||||
var html = "";
|
||||
for (const button of this._addButtons) {
|
||||
html += button.Render();
|
||||
}
|
||||
|
||||
|
||||
return header.Render() + html;
|
||||
}
|
||||
|
||||
|
|
|
@ -7,6 +7,7 @@ export abstract class UIElement extends UIEventSource<string>{
|
|||
|
||||
public readonly id: string;
|
||||
public readonly _source: UIEventSource<any>;
|
||||
public clss : string = ""
|
||||
|
||||
private _hideIfEmpty = false;
|
||||
|
||||
|
@ -103,7 +104,7 @@ export abstract class UIElement extends UIEventSource<string>{
|
|||
}
|
||||
|
||||
Render(): string {
|
||||
return "<span class='uielement' id='" + this.id + "'>" + this.InnerRender() + "</span>"
|
||||
return `<span class='uielement ${this.clss}' id='${this.id}'>${this.InnerRender()}</span>`
|
||||
}
|
||||
|
||||
AttachTo(divId: string) {
|
||||
|
|
|
@ -282,9 +282,9 @@ export default class Translations {
|
|||
fr: "Il y a seulement une pompe"
|
||||
}),
|
||||
tools: new T({
|
||||
en: "There are only tools (screwdrivers, pliers...) aanwezig",
|
||||
en: "There are only tools (screwdrivers, pliers...) present",
|
||||
nl: "Er is enkel gereedschap aanwezig (schroevendraaier, tang...)",
|
||||
fr: "Il y a seulement des outils (tournevis, pinces..."
|
||||
fr: "Il y a seulement des outils (tournevis, pinces...)"
|
||||
}),
|
||||
both: new T({
|
||||
en: "There are both tools and a pump present",
|
||||
|
@ -298,9 +298,17 @@ export default class Translations {
|
|||
nl: "Heeft dit herstelpunt een haak of standaard om je fiets op te hangen/zetten?",
|
||||
fr: "Est-ce que cette station vélo à un crochet pour suspendre son velo ou une accroche pour l'élevé?"
|
||||
}),
|
||||
yes: new T({en: "There is a hook or stand", nl: "Er is een haak of standaard", fr: "Oui il y a un crochet ou une accroche"}),
|
||||
no: new T({en: "There is no hook or stand", nl: "Er is geen haak of standaard", fr: "Non il n'y pas de crochet ou d'accroche"}),
|
||||
}
|
||||
yes: new T({
|
||||
en: "There is a hook or stand",
|
||||
nl: "Er is een haak of standaard",
|
||||
fr: "Oui il y a un crochet ou une accroche"
|
||||
}),
|
||||
no: new T({
|
||||
en: "There is no hook or stand",
|
||||
nl: "Er is geen haak of standaard",
|
||||
fr: "Non il n'y pas de crochet ou d'accroche"
|
||||
}),
|
||||
},
|
||||
},
|
||||
shop: {
|
||||
name: new T({en: "bike repair/shop", nl: "fietszaak", fr: "magasin ou réparateur de vélo"}),
|
||||
|
@ -702,6 +710,10 @@ export default class Translations {
|
|||
stillLoading: new T({
|
||||
en: "The data is still loading. Please wait a bit before you add a new point",
|
||||
nl: "De data wordt nog geladen. Nog even geduld en dan kan je een punt toevoegen."
|
||||
}),
|
||||
confirmIntro: new T({
|
||||
en: "<h3>Add a {title} here?</h3>The point you create here will be visible for everyone. Please, only add things on to the map if they truly exist. A lot of applications use this data.",
|
||||
nl: "<h3>Voeg hier een {title} toe?</h3>Het punt dat je hier toevoegt, is zichtbaar voor iedereen. Veel applicaties gebruiken deze data, voeg dus enkel punten toe die echt bestaan."
|
||||
})
|
||||
},
|
||||
pickLanguage: new T({
|
||||
|
@ -768,13 +780,21 @@ export default class Translations {
|
|||
})
|
||||
},
|
||||
morescreen: {
|
||||
intro:new T({
|
||||
en:"<h3>More quests</h3>Do you enjoy collecting geodata? <br/>There are more layers available.",
|
||||
intro: new T({
|
||||
en: "<h3>More quests</h3>Do you enjoy collecting geodata? <br/>There are more layers available.",
|
||||
}),
|
||||
streetcomplete: new T({
|
||||
en: "Another, similar application is <a href='https://play.google.com/store/apps/details?id=de.westnordost.streetcomplete' target='_blank'>StreetComplete</a>"
|
||||
})
|
||||
}
|
||||
},
|
||||
readYourMessages: new T({
|
||||
en: "Please, read all your OpenStreetMap-messages before adding a new point.",
|
||||
nl: "Gelieve eerst je berichten op OpenStreetMap te lezen alvorens nieuwe punten toe te voegen."
|
||||
}),
|
||||
fewChangesBefore: new T({
|
||||
en: "Please, answer a few questions of existing points before adding a new point.",
|
||||
nl: "Gelieve eerst enkele vragen van bestaande punten te beantwoorden vooraleer zelf punten toe te voegen."
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1212,3 +1212,8 @@ form {
|
|||
margin-right: 0.5em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
.add-ui {
|
||||
font-size: large;
|
||||
}
|
27
index.ts
27
index.ts
|
@ -182,7 +182,8 @@ const bm = new Basemap("leafletDiv", locationControl, new VariableUiElement(
|
|||
|
||||
// ------------- Setup the layers -------------------------------
|
||||
const addButtons: {
|
||||
name: UIElement,
|
||||
name: string | UIElement,
|
||||
description: string | UIElement,
|
||||
icon: string,
|
||||
tags: Tag[],
|
||||
layerToAddTo: FilteredLayer
|
||||
|
@ -211,13 +212,17 @@ for (const layer of layoutToUse.layers) {
|
|||
|
||||
const flayer = FilteredLayer.fromDefinition(layer, bm, allElements, changes, osmConnection.userDetails, selectedElement, generateInfo);
|
||||
|
||||
const addButton = {
|
||||
name: Translations.W(layer.name),
|
||||
icon: layer.icon,
|
||||
tags: layer.newElementTags,
|
||||
layerToAddTo: flayer
|
||||
for (const preset of layer.presets) {
|
||||
|
||||
const addButton = {
|
||||
name: preset.title,
|
||||
description: preset.description,
|
||||
icon: preset.icon,
|
||||
tags: preset.tags,
|
||||
layerToAddTo: flayer
|
||||
}
|
||||
addButtons.push(addButton);
|
||||
}
|
||||
addButtons.push(addButton);
|
||||
flayers.push(flayer);
|
||||
}
|
||||
|
||||
|
@ -240,7 +245,13 @@ if (flayers.length > 1) {
|
|||
}
|
||||
|
||||
InitUiElements.OnlyIf(featureSwitchLayers, () => {
|
||||
new CheckBox(layerControl, closedFilterButton).AttachTo("filter__selection");
|
||||
|
||||
const checkbox = new CheckBox(layerControl, closedFilterButton);
|
||||
checkbox.AttachTo("filter__selection");
|
||||
bm.Location.addCallback(() => {
|
||||
checkbox.isEnabled.setData(false);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue