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

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