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

Merge master into translations

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-07-20 21:48:24 +02:00
commit a730345b16
77 changed files with 43519 additions and 1619 deletions
Download patch file Download diff file Expand all files Collapse all files

19
UI/Base/CheckBox.ts Normal file
View file

@ -0,0 +1,19 @@
import {UIElement} from "../UIElement";
import {UIEventSource} from "../UIEventSource";
export class CheckBox extends UIElement{
private data: UIEventSource<boolean>;
constructor(data: UIEventSource<boolean>) {
super(data);
this.data = data;
}
protected InnerRender(): string {
return "Current val: "+this.data.data;
}
}

12
UI/Base/VerticalCombine.ts
View file

@ -25,16 +25,4 @@ export class VerticalCombine extends UIElement {
}
return "<div class='"+this._className+"'>" + html + "</div>";
}
InnerUpdate(htmlElement: HTMLElement) {
for (const element of this._elements){
element.Update();
}
}
Activate() {
for (const element of this._elements){
element.Activate();
}
}
}

11
UI/CenterMessageBox.ts
View file

@ -39,13 +39,12 @@ export class CenterMessageBox extends UIElement {
if (this._centermessage.data != "") {
return this._centermessage.data;
}
if (this._zoomInMore.data) {
return "Zoom in om de data te zien en te bewerken";
} else if (this._queryRunning.data) {
return "Data wordt geladen...";
if (this._queryRunning.data) {
return "Data is loading...";
} else if (this._zoomInMore.data) {
return "Zoom in more to see the data";
}
return "Klaar!";
return "Done!";
}

25
UI/FeatureInfoBox.ts
View file

@ -41,12 +41,13 @@ export class FeatureInfoBox extends UIElement {
this._userDetails = userDetails;
this.ListenTo(userDetails);
const deps = {tags:this._tagsES , changes:this._changes}
this._infoboxes = [];
elementsToShow = elementsToShow ?? []
for (const tagRenderingOption of elementsToShow) {
this._infoboxes.push(
tagRenderingOption.construct(this._tagsES, this._changes));
tagRenderingOption.construct(deps));
}
title = title ?? new TagRenderingOptions(
@ -55,9 +56,9 @@ export class FeatureInfoBox extends UIElement {
}
)
this._title = new TagRenderingOptions(title.options).construct(this._tagsES, this._changes);
this._osmLink =new OsmLink().construct(this._tagsES, this._changes);
this._wikipedialink = new WikipediaLink().construct(this._tagsES, this._changes);
this._title = new TagRenderingOptions(title.options).construct(deps);
this._osmLink =new OsmLink().construct(deps);
this._wikipedialink = new WikipediaLink().construct(deps);
}
@ -113,19 +114,5 @@ export class FeatureInfoBox extends UIElement {
"" +
"</div>";
}
Activate() {
super.Activate();
for (const infobox of this._infoboxes) {
infobox.Activate();
}
}
Update() {
super.Update();
this._title.Update();
for (const infobox of this._infoboxes) {
infobox.Update();
}
}
}

6
UI/Image/ImageCarousel.ts
View file

@ -23,10 +23,10 @@ export class ImageCarouselConstructor implements TagDependantUIElementConstructo
return 0;
}
construct(tags: UIEventSource<any>, changes: Changes): TagDependantUIElement {
return new ImageCarousel(tags, changes);
construct(dependencies: { tags: UIEventSource<any>, changes: Changes }): TagDependantUIElement {
return new ImageCarousel(dependencies.tags, dependencies.changes);
}
}
export class ImageCarousel extends TagDependantUIElement {

10
UI/Image/ImageCarouselWithUpload.ts
View file

@ -19,8 +19,8 @@ export class ImageCarouselWithUploadConstructor implements TagDependantUIElement
return 0;
}
construct(tags: UIEventSource<any>, changes: Changes): TagDependantUIElement {
return new ImageCarouselWithUpload(tags, changes);
construct(dependencies): TagDependantUIElement {
return new ImageCarouselWithUpload(dependencies);
}
}
@ -28,8 +28,10 @@ class ImageCarouselWithUpload extends TagDependantUIElement {
private _imageElement: ImageCarousel;
private _pictureUploader: ImageUploadFlow;
constructor(tags: UIEventSource<any>, changes: Changes) {
super(tags);
constructor(dependencies: {tags: UIEventSource<any>, changes: Changes}) {
super(dependencies.tags);
const tags = dependencies.tags;
const changes = dependencies.changes;
this._imageElement = new ImageCarousel(tags, changes);
const userDetails = changes.login.userDetails;
const license = changes.login.GetPreference( "mapcomplete-pictures-license");

46
UI/ImageUploadFlow.ts
View file

@ -9,7 +9,6 @@ import {VariableUiElement} from "./Base/VariableUIElement";
export class ImageUploadFlow extends UIElement {
private _licensePicker: UIElement;
private _selectedLicence: UIEventSource<string>;
private _licenseExplanation: UIElement;
private _isUploading: UIEventSource<number> = new UIEventSource<number>(0)
private _uploadOptions: (license: string) => { title: string; description: string; handleURL: (url: string) => void; allDone: (() => void) };
private _userdetails: UIEventSource<UserDetails>;
@ -31,12 +30,12 @@ export class ImageUploadFlow extends UIElement {
this._uploadOptions = uploadOptions;
this.ListenTo(this._isUploading);
const licensePicker = new DropDownUI("Jouw foto wordt gepubliceerd ",
const licensePicker = new DropDownUI("The picture is published ",
[
{value: "CC0", shown: "in het publiek domein"},
{value: "CC-BY-SA 4.0", shown: "onder een CC-BY-SA-licentie"},
{value: "CC-BY 4.0", shown: "onder een CC-BY-licentie"}
{value: "CC0", shown: "in the public domain"},
{value: "CC-BY-SA 4.0", shown: "with a CC-BY-SA license"},
{value: "CC-BY 4.0", shown: "with a CC-BY license"}
],
preferedLicense
);
@ -44,48 +43,37 @@ export class ImageUploadFlow extends UIElement {
this._selectedLicence = licensePicker.selectedElement;
const licenseExplanations = {
"CC-BY-SA 4.0":
"<b>Creative Commonse met naamsvermelding en gelijk delen</b><br/>" +
"Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden én ze afgeleide werken met deze licentie en attributie delen.",
"CC-BY 4.0":
"<b>Creative Commonse met naamsvermelding</b> <br/>" +
"Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden",
"CC0":
"<b>Geen copyright</b><br/> Je foto mag door iedereen voor alles gebruikt worden"
}
this._licenseExplanation = new VariableUiElement(
this._selectedLicence.map((license) => {
return licenseExplanations[license]
})
);
}
protected InnerRender(): string {
if (!this._userdetails.data.loggedIn) {
return "<div class='activate-osm-authentication'>Gelieve je aan te melden om een foto toe te voegen of vragen te beantwoorden</div>";
return "<div class='activate-osm-authentication'>Please log in to add a picture</div>";
}
let uploadingMessage = "";
if (this._isUploading.data == 1) {
return "<b>Bezig met een foto te uploaden...</b>"
uploadingMessage = "<b>Uploading a picture...</b>"
}
if (this._isUploading.data > 0) {
return "<b>Bezig met uploaden, nog " + this._isUploading.data + " foto's te gaan...</b>"
uploadingMessage = "<b>Uploading multiple pictures, " + this._isUploading.data + " left...</b>"
}
return "" +
"<div class='imageflow'>" +
"<label for='fileselector-" + this.id + "'>" +
"<div class='imageflow-file-input-wrapper'>" +
"<img src='./assets/camera-plus.svg' alt='upload image'/> " +
"<span class='imageflow-add-picture'>Voeg foto toe</span>" +
"<div class='break'></div>"+
"<span class='imageflow-add-picture'>Add a picture</span>" +
"<div class='break'></div>" +
"</div>" +
this._licensePicker.Render() +
this._licensePicker.Render() + "<br/>" +
uploadingMessage +
"</label>" +
"<input id='fileselector-" + this.id + "' " +

2
UI/MessageBoxHandler.ts
View file

@ -22,7 +22,7 @@ export class MessageBoxHandler {
}
}
new VariableUiElement(new UIEventSource<string>("<h2>Naar de kaart</h2>"),
new VariableUiElement(new UIEventSource<string>("<h2>Return to the map</h2>"),
() => {
document.getElementById("to-the-map").onclick = function () {
uielement.setData(undefined);

18
UI/PendingChanges.ts
View file

@ -1,20 +1,24 @@
import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource";
import {Changes} from "../Logic/Changes";
export class PendingChanges extends UIElement {
private _pendingChangesCount: UIEventSource<number>;
private _countdown: UIEventSource<number>;
private _isSaving: UIEventSource<boolean>;
constructor(pendingChangesCount: UIEventSource<number>,
countdown: UIEventSource<number>,
isSaving: UIEventSource<boolean>) {
super(pendingChangesCount);
this.ListenTo(isSaving);
constructor(changes: Changes,
countdown: UIEventSource<number>) {
super(changes.pendingChangesES);
this.ListenTo(changes.isSaving);
this.ListenTo(countdown);
this._pendingChangesCount = pendingChangesCount;
this._pendingChangesCount = changes.pendingChangesES;
this._countdown = countdown;
this._isSaving = isSaving;
this._isSaving = changes.isSaving;
this.onClick(() => {
changes.uploadAll();
})
}
protected InnerRender(): string {

5
UI/QuestionPicker.ts
View file

@ -43,10 +43,5 @@ export class QuestionPicker extends UIElement {
highestQ.CreateHtml(this.source).Render() +
"</div>";
}
InnerUpdate(htmlElement: HTMLElement) {
}
Activate() {
}
}

2
UI/SaveButton.ts
View file

@ -19,7 +19,7 @@ export class SaveButton extends UIElement {
) {
return "<span class='save-non-active'>Opslaan</span>"
}
return "<span class='save'>Opslaan</span>";
return "<span class='save'>Save</span>";
}
}

10
UI/SearchAndGo.ts
View file

@ -8,8 +8,8 @@ import {Basemap} from "../Logic/Basemap";
export class SearchAndGo extends UIElement {
private _placeholder = new UIEventSource("Zoek naar een locatie...")
private _searchField = new TextField(this._placeholder);
private _placeholder = new UIEventSource("Search a location...")
private _searchField = new TextField(this._placeholder, undefined);
private _foundEntries = new UIEventSource([]);
private _map: Basemap;
@ -35,7 +35,7 @@ export class SearchAndGo extends UIElement {
private RunSearch() {
const searchString = this._searchField.value.data;
this._searchField.Clear();
this._placeholder.setData("Bezig met zoeken...");
this._placeholder.setData("Searching...");
const self = this;
Geocoding.Search(searchString, this._map, (result) => {
@ -50,10 +50,10 @@ export class SearchAndGo extends UIElement {
[bb[1], bb[3]]
]
self._map.map.fitBounds(bounds);
this._placeholder.setData("Zoek naar een locatie...");
this._placeholder.setData("Search a location...");
},
() => {
this._placeholder.setData("Niets gevonden: er ging iets mis");
this._placeholder.setData("Something went wrong. Try again.");
});
}

12
UI/SimpleAddUI.ts
View file

@ -42,7 +42,7 @@ export class SimpleAddUI extends UIElement {
// <button type='button'> looks SO retarded
// the default type of button is 'submit', which performs a POST and page reload
const button =
new Button(new FixedUiElement("Voeg hier een " + option.name + " toe"),
new Button(new FixedUiElement("Add a " + option.name + " here"),
this.CreatePoint(option));
this._addButtons.push(button);
}
@ -61,18 +61,18 @@ export class SimpleAddUI extends UIElement {
}
protected InnerRender(): string {
const header = "<h2>Geen selectie</h2>" +
"Je klikte ergens waar er nog geen gezochte data is.<br/>";
const header = "<h2>No data here</h2>" +
"You clicked somewhere where no data is known yet.<br/>";
if (!this._userDetails.data.loggedIn) {
return header + "<a class='activate-osm-authentication'>Gelieve je aan te melden om een nieuw punt toe te voegen</a>"
return header + "<a class='activate-osm-authentication'>Please log in to add a new point</a>"
}
if (this._zoomlevel.data.zoom < 19) {
return header + "Zoom verder in om een element toe te voegen.";
return header + "Zoom in further to add a point.";
}
if (this._dataIsLoading.data) {
return header + "De data is nog aan het laden. Nog even geduld, dan kan je een punt toevoegen";
return header + "The data is still loading. Please wait a bit before you add a new point";
}
var html = "";

43
UI/UIElement.ts
View file

@ -1,4 +1,5 @@
import {UIEventSource} from "./UIEventSource";
import instantiate = WebAssembly.instantiate;
export abstract class UIElement {
@ -58,20 +59,22 @@ export abstract class UIElement {
}
element.style.pointerEvents = "all";
element.style.cursor = "pointer";
/*
const childs = element.children;
for (let i = 0; i < childs.length; i++) {
const ch = childs[i];
console.log(ch);
ch.style.cursor = "pointer";
ch.onclick = () => {
self._onClick();
}
ch.style.pointerEvents = "all";
}*/
}
this.InnerUpdate(element);
for (const i in this) {
const child = this[i];
if (child instanceof UIElement) {
child.Update();
} else if (child instanceof Array) {
for (const ch of child) {
if (ch instanceof UIElement) {
ch.Update();
}
}
}
}
}
HideOnEmpty(hide : boolean){
@ -89,7 +92,7 @@ export abstract class UIElement {
AttachTo(divId: string) {
let element = document.getElementById(divId);
if(element === null){
if (element === null) {
console.log("SEVERE: could not attach UIElement to ", divId);
return;
}
@ -99,7 +102,21 @@ export abstract class UIElement {
}
protected abstract InnerRender(): string;
public Activate(): void {};
public Activate(): void {
for (const i in this) {
const child = this[i];
if (child instanceof UIElement) {
child.Activate();
} else if (child instanceof Array) {
for (const ch of child) {
if (ch instanceof UIElement) {
ch.Activate();
}
}
}
}
};
public IsEmpty(): boolean {
return this.InnerRender() === "";

43
UI/UserBadge.ts
View file

@ -4,6 +4,7 @@ import {UIEventSource} from "./UIEventSource";
import {Basemap} from "../Logic/Basemap";
import L from "leaflet";
import {FixedUiElement} from "./Base/FixedUiElement";
import {VariableUiElement} from "./Base/VariableUIElement";
/**
* Handles and updates the user badge
@ -13,6 +14,7 @@ export class UserBadge extends UIElement {
private _pendingChanges: UIElement;
private _logout: UIElement;
private _basemap: Basemap;
private _homeButton: UIElement;
constructor(userDetails: UIEventSource<UserDetails>,
@ -38,12 +40,27 @@ export class UserBadge extends UIElement {
}
});
this._homeButton = new VariableUiElement(
userDetails.map((userinfo) => {
if (userinfo.home) {
return "<img id='home' src='./assets/home.svg' alt='home' class='small-userbadge-icon'> ";
}
return "";
})
).onClick(() => {
const home = userDetails.data?.home;
if (home === undefined) {
return;
}
basemap.map.flyTo([home.lat, home.lon], 18);
});
}
protected InnerRender(): string {
const user = this._userDetails.data;
if (!user.loggedIn) {
return "<div class='activate-osm-authentication'>Klik hier om aan te melden bij OSM</div>";
return "<div class='activate-osm-authentication'>Login with OpenStreetMap</div>";
}
@ -66,9 +83,7 @@ export class UserBadge extends UIElement {
dryrun = " <span class='alert'>TESTING</span>";
}
let home = "";
if (user.home !== undefined) {
home = "<img id='home' src='./assets/home.svg' alt='home' class='small-userbadge-icon'> ";
const icon = L.icon({
iconUrl: 'assets/home.svg',
iconSize: [20, 20],
@ -91,7 +106,7 @@ export class UserBadge extends UIElement {
dryrun +
"</p> " +
"<p id='userstats'>" +
home +
this._homeButton.Render() +
settings +
messageSpan +
"<span id='csCount'> " +
@ -104,25 +119,5 @@ export class UserBadge extends UIElement {
"</div>";
}
InnerUpdate(htmlElement: HTMLElement) {
this._pendingChanges.Update();
var btn = document.getElementById("home");
if (btn) {
const self = this;
btn.onclick = function () {
const home = self._userDetails?.data?.home;
if (home === undefined) {
return;
}
self._basemap.map.flyTo([home.lat, home.lon], 18);
}
}
this._logout.Update();
}
Activate() {
this._pendingChanges.Activate();
}
}