Merge latest master

This commit is contained in:
Pieter Vander Vennet 2020-07-20 21:52:13 +02:00
commit 63b4fe0ee1
24 changed files with 324 additions and 171 deletions

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;
}
}

View file

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

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 {

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,11 @@ export class ImageUploadFlow extends UIElement {
this._uploadOptions = uploadOptions;
this.ListenTo(this._isUploading);
const licensePicker = new DropDown("Jouw foto wordt gepubliceerd ",
const licensePicker = new DropDown("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 +42,37 @@ export class ImageUploadFlow extends UIElement {
this._selectedLicence = licensePicker.GetValue();
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]
})
);
}
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 + "' " +

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);

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>";
}
}

View file

@ -9,7 +9,7 @@ import {VariableUiElement} from "./Base/VariableUIElement";
export class SearchAndGo extends UIElement {
private _placeholder = new UIEventSource("Zoek naar een locatie...")
private _placeholder = new UIEventSource("Search a location...")
private _searchField = new TextField<string>({
placeholder: new VariableUiElement(this._placeholder),
fromString: str => str,
@ -41,7 +41,7 @@ export class SearchAndGo extends UIElement {
private RunSearch() {
const searchString = this._searchField.GetValue().data;
this._searchField.Clear();
this._placeholder.setData("Bezig met zoeken...");
this._placeholder.setData("Searching...");
const self = this;
Geocoding.Search(searchString, this._map, (result) => {
@ -56,10 +56,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.");
});
}

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 {
}
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 = "";

View file

@ -61,7 +61,7 @@ export class UserBadge extends UIElement {
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>";
}