forked from MapComplete/MapComplete
New preset-system, better 'add new POI'-ui with small confirmation
This commit is contained in:
Pieter Vander Vennet
parent
c020955cdc
commit
8a1e171298
25 changed files with 317 additions and 80 deletions
|
|
@ -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."
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue