mapcomplete/UI/UserBadge.ts

128 lines
4.8 KiB
TypeScript
Raw Normal View History

2020-06-24 00:35:19 +02:00
import {UIElement} from "./UIElement";
import {UIEventSource} from "./UIEventSource";
2020-06-29 03:12:44 +02:00
import L from "leaflet";
import {FixedUiElement} from "./Base/FixedUiElement";
2020-07-20 09:57:19 +02:00
import {VariableUiElement} from "./Base/VariableUIElement";
2020-07-21 00:07:04 +02:00
import Translations from "./i18n/Translations";
2020-07-30 00:59:08 +02:00
import {UserDetails} from "../Logic/Osm/OsmConnection";
import {State} from "../State";
import {PendingChanges} from "./PendingChanges";
2020-07-31 04:58:58 +02:00
import {Utils} from "../Utils";
// @ts-ignore
import {UIEventSource} from "../Logic/UIEventSource";
2020-06-24 00:35:19 +02:00
/**
* Handles and updates the user badge
*/
export class UserBadge extends UIElement {
private _userDetails: UIEventSource<UserDetails>;
private _pendingChanges: UIElement;
private _logout: UIElement;
2020-07-20 09:57:19 +02:00
private _homeButton: UIElement;
2020-07-21 00:07:04 +02:00
private _languagePicker: UIElement;
2020-06-24 00:35:19 +02:00
2020-07-31 18:38:14 +02:00
private _loginButton : UIElement;
2020-06-24 00:35:19 +02:00
constructor() {
super(State.state.osmConnection.userDetails);
this._userDetails = State.state.osmConnection.userDetails;
this._pendingChanges = new PendingChanges();
2020-07-31 04:58:58 +02:00
this._languagePicker = Utils.CreateLanguagePicker();
2020-07-31 18:38:14 +02:00
this._loginButton = Translations.t.general.loginWithOpenStreetMap.Clone().onClick(() => State.state.osmConnection.AttemptLogin());
2020-07-01 17:51:55 +02:00
this._logout = new FixedUiElement("<img src='assets/logout.svg' class='small-userbadge-icon' alt='logout'>")
.onClick(() => {
State.state.osmConnection.LogOut();
2020-07-01 17:51:55 +02:00
});
2020-06-24 00:35:19 +02:00
this._userDetails.addCallback(function () {
2020-06-24 00:35:19 +02:00
const profilePic = document.getElementById("profile-pic");
2020-07-01 17:51:55 +02:00
if (profilePic) {
profilePic.onload = function () {
profilePic.style.opacity = "1"
};
}
2020-06-24 00:35:19 +02:00
});
2020-07-20 09:57:19 +02:00
this._homeButton = new VariableUiElement(
this._userDetails.map((userinfo) => {
2020-07-20 09:57:19 +02:00
if (userinfo.home) {
return "<img id='home' src='./assets/home.svg' alt='home' class='small-userbadge-icon'> ";
}
return "";
})
).onClick(() => {
const home = State.state.osmConnection.userDetails.data?.home;
2020-07-20 09:57:19 +02:00
if (home === undefined) {
return;
}
State.state.bm.map.flyTo([home.lat, home.lon], 18);
2020-07-20 09:57:19 +02:00
});
2020-06-24 00:35:19 +02:00
}
2020-07-20 18:24:00 +02:00
InnerRender(): string {
2020-06-24 00:35:19 +02:00
const user = this._userDetails.data;
if (!user.loggedIn) {
2020-07-31 18:38:14 +02:00
return this._loginButton.Render();
2020-06-24 00:35:19 +02:00
}
let messageSpan = "<span id='messages'>" +
2020-06-29 03:12:44 +02:00
" <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'>" +
2020-07-23 16:28:19 +02:00
"<a href='https://www.openstreetmap.org/messages/inbox' target='_blank'><img class='small-userbadge-icon' src='./assets/envelope.svg' alt='msgs'/>" +
user.unreadMessages.toString() +
"</a></span>";
}
let dryrun = "";
if (user.dryRun) {
dryrun = " <span class='alert'>TESTING</span>";
}
2020-06-24 00:35:19 +02:00
2020-06-29 03:12:44 +02:00
if (user.home !== undefined) {
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(State.state.bm.map);
2020-06-29 03:12:44 +02:00
}
2020-06-29 03:40:19 +02:00
const settings =
"<a href='https://www.openstreetmap.org/user/" + encodeURIComponent(user.name) + "/account' target='_blank'>" +
"<img class='small-userbadge-icon' src='./assets/gear.svg' alt='settings'>" +
"</a> ";
2020-07-23 16:00:49 +02:00
const userIcon = "<a href='https://www.openstreetmap.org/user/" + encodeURIComponent(user.name) + "' target='_blank'><img id='profile-pic' src='" + user.img + "' alt='profile-pic'/></a>";
const userName = "<p id='username'>" +
"<a href='https://www.openstreetmap.org/user/" + user.name + "' target='_blank'>" + user.name + "</a>" +
2020-07-23 16:00:49 +02:00
dryrun + "</p>";
const csCount = "<span id='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> ";
const userStats = "<div id='userstats'>" +
2020-07-20 09:57:19 +02:00
this._homeButton.Render() +
2020-06-29 03:40:19 +02:00
settings +
messageSpan +
2020-07-23 16:00:49 +02:00
csCount +
2020-07-01 17:51:55 +02:00
this._logout.Render() +
this._pendingChanges.Render() +
2020-07-23 16:00:49 +02:00
this._languagePicker.Render() +
2020-06-24 00:35:19 +02:00
"</div>";
2020-07-23 16:00:49 +02:00
return userIcon + "<div id='usertext'>" + userName + userStats + "</div>";
2020-06-24 00:35:19 +02:00
}
}