forked from MapComplete/MapComplete
Merge latest master
This commit is contained in:
commit
63b4fe0ee1
24 changed files with 324 additions and 171 deletions
19
UI/Base/CheckBox.ts
Normal file
19
UI/Base/CheckBox.ts
Normal 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;
|
||||
}
|
||||
|
||||
}
|
|
@ -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!";
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 + "' " +
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>";
|
||||
}
|
||||
|
||||
}
|
|
@ -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.");
|
||||
});
|
||||
|
||||
}
|
||||
|
|
|
@ -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 = "";
|
||||
|
|
|
@ -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>";
|
||||
}
|
||||
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue