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

Lot's of small improvements

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-06-29 03:12:44 +02:00
parent 9bd37d9cde
commit 8bca006787
29 changed files with 375 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/AddButton.ts
View file

@ -58,7 +58,7 @@ export class AddButton extends UIElement {
basemap.map.on("mousemove", function(){
if (self.state.data === self.PLACING_POI) {
var icon = "crosshair";
let icon = "crosshair";
for (const option of self._options) {
if (option.name === self.curentAddSelection.data && option.icon !== undefined) {
icon = 'url("' + option.icon + '") 32 32 ,crosshair';

38
UI/Base/Button.ts Normal file
View file

@ -0,0 +1,38 @@
import {UIElement} from "../UIElement";
export class Button extends UIElement {
private _text: UIElement;
private _onclick: () => void;
private _clss: string;
constructor(text: UIElement, onclick: (() => void), clss: string = "") {
super(undefined);
this._text = text;
this._onclick = onclick;
if (clss !== "") {
this._clss = "class='" + clss + "'";
}else{
this._clss = "";
}
}
protected InnerRender(): string {
return "<form>" +
"<button id='button-"+this.id+"' type='button' "+this._clss+">" + this._text.Render() + "</button>" +
"</form>";
}
InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
const self = this;
console.log("Update for ", htmlElement)
document.getElementById("button-"+this.id).onclick = function(){
console.log("Clicked");
self._onclick();
}
}
}

4
UI/DropDownUI.ts → UI/Base/DropDownUI.ts
View file

@ -1,5 +1,5 @@
import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource";
import {UIEventSource} from "../UIEventSource";
import {UIElement} from "../UIElement";
export class DropDownUI extends UIElement {

2
UI/FixedUiElement.ts → UI/Base/FixedUiElement.ts
View file

@ -1,4 +1,4 @@
import {UIElement} from "./UIElement";
import {UIElement} from "../UIElement";
export class FixedUiElement extends UIElement {
private _html: string;

4
UI/UIRadioButton.ts → UI/Base/UIRadioButton.ts
View file

@ -1,5 +1,5 @@
import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource";
import {UIElement} from "../UIElement";
import {UIEventSource} from "../UIEventSource";
import {FixedUiElement} from "./FixedUiElement";
import $ from "jquery"

4
UI/VariableUIElement.ts → UI/Base/VariableUIElement.ts
View file

@ -1,5 +1,5 @@
import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource";
import {UIElement} from "../UIElement";
import {UIEventSource} from "../UIEventSource";
export class VariableUiElement extends UIElement {
private _html: UIEventSource<string>;

2
UI/VerticalCombine.ts → UI/Base/VerticalCombine.ts
View file

@ -1,4 +1,4 @@
import {UIElement} from "./UIElement";
import {UIElement} from "../UIElement";
export class VerticalCombine extends UIElement {
private _elements: UIElement[];

1
UI/CenterMessageBox.ts
View file

@ -1,6 +1,5 @@
import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource";
import {Helpers} from "../Helpers";
import {OsmConnection} from "../Logic/OsmConnection";
export class CenterMessageBox extends UIElement {

2
UI/FeatureInfoBox.ts
View file

@ -2,7 +2,6 @@ import {UIElement} from "./UIElement";
import {TagMapping, TagMappingOptions} from "./TagMapping";
import {Question, QuestionDefinition} from "../Logic/Question";
import {UIEventSource} from "./UIEventSource";
import {VerticalCombine} from "./VerticalCombine";
import {QuestionPicker} from "./QuestionPicker";
import {OsmImageUploadHandler} from "../Logic/OsmImageUploadHandler";
import {ImageCarousel} from "./Image/ImageCarousel";
@ -12,6 +11,7 @@ import {Img} from "./Img";
import {CommonTagMappings} from "../Layers/CommonTagMappings";
import {Tag} from "../Logic/TagsFilter";
import {ImageUploadFlow} from "./ImageUploadFlow";
import {VerticalCombine} from "./Base/VerticalCombine";
export class FeatureInfoBox extends UIElement {

21
UI/MessageBoxHandler.ts
View file

@ -3,8 +3,7 @@
*/
import {UIEventSource} from "./UIEventSource";
import {UIElement} from "./UIElement";
import {FixedUiElement} from "./FixedUiElement";
import {VariableUiElement} from "./VariableUIElement";
import {VariableUiElement} from "./Base/VariableUIElement";
export class MessageBoxHandler {
private _uielement: UIEventSource<() => UIElement>;
@ -15,8 +14,16 @@ export class MessageBoxHandler {
this.listenTo(uielement);
this.update();
window.onhashchange = function () {
if (location.hash === "") {
// No more element: back to the map!
uielement.setData(undefined);
onClear();
}
}
new VariableUiElement(new UIEventSource<string>("<h2>Naar de kaart</h2>"),
(htmlElement) => {
() => {
document.getElementById("to-the-map").onclick = function () {
uielement.setData(undefined);
onClear();
@ -24,6 +31,7 @@ export class MessageBoxHandler {
}
).AttachTo("to-the-map");
}
listenTo(uiEventSource: UIEventSource<any>) {
@ -33,14 +41,19 @@ export class MessageBoxHandler {
})
}
update() {
const wrapper = document.getElementById("messagesboxmobilewrapper");
const gen = this._uielement.data;
console.log("Generator: ", gen);
if (gen === undefined) {
wrapper.classList.add("hidden");
wrapper.classList.add("hidden")
if (location.hash !== "") {
location.hash = ""
}
return;
}
location.hash = "#element"
wrapper.classList.remove("hidden");
gen()
?.HideOnEmpty(true)

77
UI/SimpleAddUI.ts Normal file
View file

@ -0,0 +1,77 @@
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";
/**
* Asks to add a feature at the last clicked location, at least if zoom is sufficient
*/
export class SimpleAddUI extends UIElement {
private _zoomlevel: UIEventSource<{ zoom: number }>;
private _addButtons: UIElement[];
private _lastClickLocation: UIEventSource<{ lat: number; lon: number }>;
private _changes: Changes;
private _selectedElement: UIEventSource<any>;
constructor(zoomlevel: UIEventSource<{ zoom: number }>,
lastClickLocation: UIEventSource<{ lat: number, lon: number }>,
changes: Changes,
selectedElement: UIEventSource<any>,
addButtons: { name: string; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }[],
) {
super(zoomlevel);
this._zoomlevel = zoomlevel;
this._lastClickLocation = lastClickLocation;
this._changes = changes;
this._selectedElement = selectedElement;
this._addButtons = [];
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(new FixedUiElement("Voeg hier een " + option.name + " toe"),
this.CreatePoint(option));
this._addButtons.push(button);
}
}
private CreatePoint(option: { name: string; icon: string; tags: Tag[]; layerToAddTo: FilteredLayer }) {
const self = this;
return () => {
console.log("Creating a new ", option.name, " at last click location");
const loc = self._lastClickLocation.data;
let feature = self._changes.createElement(option.tags, loc.lat, loc.lon);
option.layerToAddTo.AddNewElement(feature);
self._selectedElement.setData(feature.properties);
}
}
protected InnerRender(): string {
const header = "<h2>Geen selectie</h2>" +
"Je klikte ergens waar er nog geen gezochte data is.<br/>"
if (this._zoomlevel.data.zoom < 19) {
return header + "Zoom verder in om een element toe te voegen."
}
var html = "";
for (const button of this._addButtons) {
// <button type='button'> looks SO retarded
// the default type of button is 'submit', which performs a POST and page reload
html += button.Render();
}
return header + html;
}
InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
for (const button of this._addButtons) {
button.Update();
}
}
}

2
UI/UIEventSource.ts
View file

@ -8,7 +8,7 @@ export class UIEventSource<T>{
}
public addCallback(callback: ((latestData) => void)) {
public addCallback(callback: ((latestData : T) => void)) {
this._callbacks.push(callback);
return this;
}

39
UI/UserBadge.ts
View file

@ -1,6 +1,8 @@
import {UIElement} from "./UIElement";
import {UserDetails} from "../Logic/OsmConnection";
import {UIEventSource} from "./UIEventSource";
import {Basemap} from "../Logic/Basemap";
import L from "leaflet";
/**
* Handles and updates the user badge
@ -8,13 +10,16 @@ import {UIEventSource} from "./UIEventSource";
export class UserBadge extends UIElement {
private _userDetails: UIEventSource<UserDetails>;
private _pendingChanges: UIElement;
private _basemap: Basemap;
constructor(userDetails: UIEventSource<UserDetails>,
pendingChanges : UIElement) {
pendingChanges: UIElement,
basemap: Basemap) {
super(userDetails);
this._userDetails = userDetails;
this._pendingChanges = pendingChanges;
this._basemap = basemap;
userDetails.addCallback(function () {
const profilePic = document.getElementById("profile-pic");
@ -33,13 +38,13 @@ export class UserBadge extends UIElement {
let messageSpan = "<span id='messages'>" +
" <a href='https://www.openstreetmap.org/messages/inbox' target='_blank'><img class='envelope' src='./assets/envelope.svg'/>" +
" <a href='https://www.openstreetmap.org/messages/inbox' target='_blank'><img class='small-userbadge-icon' src='./assets/envelope.svg' alt='msgs'>" +
user.totalMessages +
"</a></span>";
if (user.unreadMessages > 0) {
messageSpan = "<span id='messages' class='alert'>" +
" <a href='https://www.openstreetmap.org/messages/inbox' target='_blank'><img class='envelope' src='./assets/envelope.svg'/>" +
" <a href='https://www.openstreetmap.org/messages/inbox' target='_blank'><img class='small-userbadge-icon' src='./assets/envelope.svg' alt='msgs'/>" +
" " +
"" +
user.unreadMessages.toString() +
@ -51,16 +56,28 @@ export class UserBadge extends UIElement {
dryrun = " <span class='alert'>TESTING</span>";
}
return "<img id='profile-pic' src='" + user.img + "'/> " +
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],
iconAnchor: [10, 10]
});
L.marker([user.home.lat, user.home.lon], {icon: icon}).addTo(this._basemap.map);
}
return "<img id='profile-pic' src='" + user.img + "' alt='profile-pic'/> " +
"<div id='usertext'>" +
"<p id='username'>" +
"<a href='https://www.openstreetmap.org/user/" + user.name + "' target='_blank'>" + user.name + "</a>" +
dryrun +
"</p> " +
"<p id='userstats'>" +
home +
messageSpan +
"<span id='csCount'> " +
" <a href='https://www.openstreetmap.org/user/" + user.name + "/history' target='_blank'><img class='star' src='./assets/star.svg'/> " + user.csCount +
" <a href='https://www.openstreetmap.org/user/" + user.name + "/history' target='_blank'><img class='small-userbadge-icon' src='./assets/star.svg' alt='star'/> " + user.csCount +
"</a></span> " +
this._pendingChanges.Render() +
"</p>" +
@ -70,6 +87,18 @@ export class UserBadge extends UIElement {
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);
}
}
}
Activate() {