midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Merge branch 'master' of github.com:pietervdvn/MapComplete

Browse source
This commit is contained in:
Pieter Fiers 2020-07-30 09:33:09 +02:00
commit 416ececb64
55 changed files with 646 additions and 334 deletions
Download patch file Download diff file Expand all files Collapse all files

19
UI/Base/SubtleButton.ts
View file

@ -1,23 +1,36 @@
import {UIElement} from "../UIElement";
import Translations from "../i18n/Translations";
import Combine from "./Combine";
import {link} from "fs";
export class SubtleButton extends UIElement{
private imageUrl: string;
private message: UIElement;
private linkTo: { url: string, newTab?: boolean } = undefined;
constructor(imageUrl: string, message: string | UIElement) {
constructor(imageUrl: string, message: string | UIElement, linkTo: { url: string, newTab?: boolean } = undefined) {
super(undefined);
this.linkTo = linkTo;
this.message = Translations.W(message);
this.imageUrl = imageUrl;
}
InnerRender(): string {
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,
'</a>'
]).Render();
}
return new Combine([
'<span class="subtle-button">',
`<img src='${this.imageUrl}'>`,
this.imageUrl !== undefined ? `<img src='${this.imageUrl}'>` : "",
this.message,
'</span>'
]).Render();

7
UI/FeatureInfoBox.ts
View file

@ -1,10 +1,6 @@
import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource";
import {QuestionPicker} from "./QuestionPicker";
import {OsmImageUploadHandler} from "../Logic/OsmImageUploadHandler";
import {ImageCarousel} from "./Image/ImageCarousel";
import {Changes} from "../Logic/Changes";
import {UserDetails} from "../Logic/OsmConnection";
import {VerticalCombine} from "./Base/VerticalCombine";
import {TagRenderingOptions} from "../Customizations/TagRendering";
import {OsmLink} from "../Customizations/Questions/OsmLink";
@ -12,6 +8,8 @@ import {WikipediaLink} from "../Customizations/Questions/WikipediaLink";
import {And} from "../Logic/TagsFilter";
import {TagDependantUIElement, TagDependantUIElementConstructor} from "../Customizations/UIElementConstructor";
import Translations from "./i18n/Translations";
import {Changes} from "../Logic/Osm/Changes";
import {UserDetails} from "../Logic/Osm/OsmConnection";
export class FeatureInfoBox extends UIElement {
@ -33,7 +31,6 @@ export class FeatureInfoBox extends UIElement {
private _infoboxes: TagDependantUIElement[];
private _questions: QuestionPicker;
private _oneSkipped = Translations.t.general.oneSkippedQuestion.Clone();
private _someSkipped = Translations.t.general.skippedQuestions.Clone();

4
UI/Image/ImageCarousel.ts
View file

@ -4,11 +4,11 @@ import {UIEventSource} from "../UIEventSource";
import {SlideShow} from "../SlideShow";
import {FixedUiElement} from "../Base/FixedUiElement";
import {VerticalCombine} from "../Base/VerticalCombine";
import {Changes} from "../../Logic/Changes";
import {VariableUiElement} from "../Base/VariableUIElement";
import {ConfirmDialog} from "../ConfirmDialog";
import {UserDetails} from "../../Logic/OsmConnection";
import {TagDependantUIElement, TagDependantUIElementConstructor} from "../../Customizations/UIElementConstructor";
import {Changes} from "../../Logic/Osm/Changes";
import {UserDetails} from "../../Logic/Osm/OsmConnection";
export class ImageCarouselConstructor implements TagDependantUIElementConstructor{
IsKnown(properties: any): boolean {

5
UI/Image/ImageCarouselWithUpload.ts
View file

@ -1,10 +1,9 @@
import {TagDependantUIElement, TagDependantUIElementConstructor} from "../../Customizations/UIElementConstructor";
import {ImageCarousel} from "./ImageCarousel";
import {OsmImageUploadHandler} from "../../Logic/OsmImageUploadHandler";
import {UIEventSource} from "../UIEventSource";
import {Changes} from "../../Logic/Changes";
import {UserDetails} from "../../Logic/OsmConnection";
import {ImageUploadFlow} from "../ImageUploadFlow";
import {Changes} from "../../Logic/Osm/Changes";
import {OsmImageUploadHandler} from "../../Logic/Osm/OsmImageUploadHandler";
export class ImageCarouselWithUploadConstructor implements TagDependantUIElementConstructor{
IsKnown(properties: any): boolean {

2
UI/LayerSelection.ts
View file

@ -26,7 +26,7 @@ export class LayerSelection extends UIElement{
this._checkboxes.push(new CheckBox(
new Combine([checkbox, icon, name]),
new Combine([
Img.checkmark,
Img.no_checkmark,
icon,
layer.layerDef.name]),
layer.isDisplayed));

13
UI/MoreScreen.ts
View file

@ -13,9 +13,11 @@ import {SubtleButton} from "./Base/SubtleButton";
export class MoreScreen extends UIElement {
private currentLocation: UIEventSource<{ zoom: number, lat: number, lon: number }>;
private currentLayout: string;
constructor(currentLocation: UIEventSource<{ zoom: number, lat: number, lon: number }>) {
constructor(currentLayout: string, currentLocation: UIEventSource<{ zoom: number, lat: number, lon: number }>) {
super(currentLocation);
this.currentLayout = currentLayout;
this.currentLocation = currentLocation;
}
@ -28,22 +30,21 @@ export class MoreScreen extends UIElement {
if (layout.hideFromOverview) {
continue
}
if (layout.name === this.currentLayout) {
continue;
}
const linkText =
`https://pietervdvn.github.io/MapComplete/${layout.name}.html?z=${this.currentLocation.data.zoom}&lat=${this.currentLocation.data.lat}&lon=${this.currentLocation.data.lon}`
const link =
new SubtleButton(layout.icon,
new Combine([
`<a href="${linkText}" target="_blank">`,
"<div>",
"<b>",
Translations.W(layout.title),
"</b>",
"<br/>",
Translations.W(layout.description),
"</div>",
"</a>"
]));
]), {url: linkText, newTab: false});
els.push(link)
}

2
UI/PendingChanges.ts
View file

@ -1,6 +1,6 @@
import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource";
import {Changes} from "../Logic/Changes";
import {Changes} from "../Logic/Osm/Changes";
export class PendingChanges extends UIElement {
private _pendingChangesCount: UIEventSource<number>;

47
UI/QuestionPicker.ts
View file

@ -1,47 +0,0 @@
import {UIElement} from "./UIElement";
import {Question} from "../Logic/Question";
import {UIEventSource} from "./UIEventSource";
export class QuestionPicker extends UIElement {
private readonly _questions: Question[];
private readonly tags: any;
private source: UIEventSource<any>;
constructor(questions: Question[],
tags: UIEventSource<any>) {
super(tags);
this._questions = questions;
this.tags = tags.data;
this.source = tags;
}
protected InnerRender(): string {
let t = this.tags;
let highestPriority = Number.MIN_VALUE;
let highestQ: Question;
for (const q of this._questions) {
if (!q.Applicable(t)) {
continue;
}
const priority = q.question.severity;
if (priority > highestPriority) {
highestPriority = priority;
highestQ = q;
}
}
if (highestQ === undefined) {
return "Er zijn geen vragen meer!";
}
return "<div class='question'>" +
highestQ.CreateHtml(this.source).Render() +
"</div>";
}
}

16
UI/SearchAndGo.ts
View file

@ -1,13 +1,13 @@
import {UIElement} from "./UIElement";
import {TextField} from "./Input/TextField";
import {UIEventSource} from "./UIEventSource";
import {FixedUiElement} from "./Base/FixedUiElement";
import {Geocoding} from "../Logic/Geocoding";
import {Basemap} from "../Logic/Basemap";
import {VariableUiElement} from "./Base/VariableUIElement";
import Translation from "./i18n/Translation";
import Locale from "./i18n/Locale";
import {UIEventSource} from "./UIEventSource";
import {UIElement} from "./UIElement";
import Translation from "./i18n/Translation";
import {VariableUiElement} from "./Base/VariableUIElement";
import {FixedUiElement} from "./Base/FixedUiElement";
import {TextField} from "./Input/TextField";
import {Geocoding} from "../Logic/Osm/Geocoding";
import Translations from "./i18n/Translations";
import {Basemap} from "../Logic/Leaflet/Basemap";
export class SearchAndGo extends UIElement {

119
UI/SimpleAddUI.ts
View file

@ -2,12 +2,23 @@ import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource";
import {Tag} from "../Logic/TagsFilter";
import {FilteredLayer} from "../Logic/FilteredLayer";
import {Changes} from "../Logic/Changes";
import {FixedUiElement} from "./Base/FixedUiElement";
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";
import Locale from "./i18n/Locale";
import {Changes} from "../Logic/Osm/Changes";
import {UserDetails} from "../Logic/Osm/OsmConnection";
export 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,19 +28,27 @@ 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;
private goToInboxButton: UIElement = new SubtleButton("./assets/envelope.svg",
Translations.t.general.goToInbox, {url:"https://www.openstreetmap.org/messages/inbox", newTab: false});
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.ListenTo(Locale.language);
this._zoomlevel = zoomlevel;
this._lastClickLocation = lastClickLocation;
this._changes = changes;
@ -39,18 +58,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 +110,60 @@ export class SimpleAddUI extends UIElement {
}
InnerRender(): string {
const header = Translations.t.general.add.header;
if (this._confirmPreset.data !== undefined) {
if(this._userDetails.data.dryRun){
this.CreatePoint(this._confirmPreset.data)();
return;
}
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 === undefined){
return header.Render();
}
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>",
this.goToInboxButton
]).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 +172,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;
}

3
UI/UIElement.ts
View file

@ -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) {

4
UI/UserBadge.ts
View file

@ -1,11 +1,11 @@
import {UIElement} from "./UIElement";
import {UserDetails} from "../Logic/OsmConnection";
import {UIEventSource} from "./UIEventSource";
import {Basemap} from "../Logic/Basemap";
import L from "leaflet";
import {FixedUiElement} from "./Base/FixedUiElement";
import {VariableUiElement} from "./Base/VariableUIElement";
import Translations from "./i18n/Translations";
import {UserDetails} from "../Logic/Osm/OsmConnection";
import {Basemap} from "../Logic/Leaflet/Basemap";
/**
* Handles and updates the user badge

59
UI/i18n/Translations.ts
View file

@ -136,12 +136,12 @@ export default class Translations {
}),
yes: new T({
en: "This parking has room for cargo bikes",
nl: "Deze parking is overdekt (er is een afdak)",
nl: "Deze parking heeft plaats voor bakfietsen",
fr: "TODO: fr"
}),
designated: new T({
en: "This parking has designated (official) spots for cargo bikes.",
nl: "Deze parking is overdekt (er is een afdak)",
nl: "Er zijn speciale plaatsen voorzien voor bakfietsen",
fr: "TODO: fr"
}),
no: new T({
@ -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"}),
@ -418,8 +426,8 @@ export default class Translations {
}
},
cafe: {
name: new T({en: "bike cafe", nl: "fietscafé", fr: "TODO: fr"}),
title: new T({en: "Bike cafe", nl: "fietscafé", fr: "TODO: fr"}),
name: new T({en: "Bike cafe", nl: "Fietscafé", fr: "TODO: fr"}),
title: new T({en: "Bike cafe", nl: "Fietscafé", fr: "TODO: fr"}),
qName: {
question: new T({en: "What is the name of this bike cafe?", nl: "Wat is de naam van dit fietscafé?", fr: "TODO: fr"}),
render: new T({en: "This bike cafe is called {name}", nl: "Dit fietscafé heet <b>{name}</b>", fr: "TODO: fr"}),
@ -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({
@ -736,7 +748,16 @@ export default class Translations {
websiteIs: new T({
en: "Website: <a href='{website}' target='_blank'>{website}</a>",
nl: "Website: <a href='{website}' target='_blank'>{website}</a>"
})
}),
emailOf: new T({
en: "What is the email address of {category}?",
nl: "Wat is het email-adres van {category}?"
}
),
emailIs: new T({
en: "The email address of this {category} is <a href='mailto:{email}' target='_blank'>{email}</a>",
nl: "Het email-adres van {category} is <a href='mailto:{email}' target='_blank'>{email}</a>"
}),
},
openStreetMapIntro: new T({
@ -768,13 +789,25 @@ 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."
}),
goToInbox: new T({
en: "Open inbox",
nl: "Ga naar de berichten"
})
}
}