import {UIElement} from "./UIElement"; import {UserDetails} from "../Logic/OsmConnection"; import {UIEventSource} from "./UIEventSource"; import {Basemap} from "../Logic/Basemap"; import L from "leaflet"; import {FixedUiElement} from "./Base/FixedUiElement"; /** * Handles and updates the user badge */ export class UserBadge extends UIElement { private _userDetails: UIEventSource; private _pendingChanges: UIElement; private _logout: UIElement; private _basemap: Basemap; constructor(userDetails: UIEventSource, pendingChanges: UIElement, basemap: Basemap) { super(userDetails); this._userDetails = userDetails; this._pendingChanges = pendingChanges; this._basemap = basemap; this._logout = new FixedUiElement("logout") .onClick(() => { userDetails.data.osmConnection.LogOut(); }); userDetails.addCallback(function () { const profilePic = document.getElementById("profile-pic"); if (profilePic) { profilePic.onload = function () { profilePic.style.opacity = "1" }; } }); } protected InnerRender(): string { const user = this._userDetails.data; if (!user.loggedIn) { return "
Klik hier om aan te melden bij OSM
"; } let messageSpan = "" + " msgs" + user.totalMessages + ""; if (user.unreadMessages > 0) { messageSpan = "" + " msgs" + " " + "" + user.unreadMessages.toString() + ""; } let dryrun = ""; if (user.dryRun) { dryrun = " TESTING"; } let home = ""; if (user.home !== undefined) { home = "home "; 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); } const settings = "" + "settings" + " "; return "" + "profile-pic " + "" + "
" + "

" + "" + user.name + "" + dryrun + "

" + "

" + home + settings + messageSpan + " " + " star " + user.csCount + " " + this._logout.Render() + this._pendingChanges.Render() + "

" + "
"; } 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); } } this._logout.Update(); } Activate() { this._pendingChanges.Activate(); } }