import {UIElement} from "./UIElement"; import L from "leaflet"; import {FixedUiElement} from "./Base/FixedUiElement"; import {VariableUiElement} from "./Base/VariableUIElement"; import Translations from "./i18n/Translations"; import {UserDetails} from "../Logic/Osm/OsmConnection"; import {State} from "../State"; import {Utils} from "../Utils"; import {UIEventSource} from "../Logic/UIEventSource"; /** * Handles and updates the user badge */ export class UserBadge extends UIElement { private _userDetails: UIEventSource; private _logout: UIElement; private _homeButton: UIElement; private _languagePicker: UIElement; private _loginButton : UIElement; constructor() { super(State.state.osmConnection.userDetails); this._userDetails = State.state.osmConnection.userDetails; this._languagePicker = Utils.CreateLanguagePicker(); this._loginButton = Translations.t.general.loginWithOpenStreetMap.Clone().onClick(() => State.state.osmConnection.AttemptLogin()); this._logout = new FixedUiElement("logout") .onClick(() => { State.state.osmConnection.LogOut(); }); this._userDetails.addCallback(function () { const profilePic = document.getElementById("profile-pic"); if (profilePic) { profilePic.onload = function () { profilePic.style.opacity = "1" }; } }); this._homeButton = new VariableUiElement( this._userDetails.map((userinfo) => { if (userinfo.home) { return "home "; } return ""; }) ).onClick(() => { const home = State.state.osmConnection.userDetails.data?.home; if (home === undefined) { return; } State.state.bm.map.flyTo([home.lat, home.lon], 18); }); } InnerRender(): string { const user = this._userDetails.data; if (!user.loggedIn) { return this._loginButton.Render(); } let messageSpan = "" + " msgs" + user.totalMessages + ""; if (user.unreadMessages > 0) { messageSpan = "" + "msgs" + user.unreadMessages.toString() + ""; } let dryrun = ""; if (user.dryRun) { dryrun = " TESTING"; } 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); } const settings = "" + "settings" + " "; const userIcon = "profile-pic"; const userName = "

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

"; const csCount = " " + " star " + user.csCount + " "; const userStats = "
" + this._homeButton.Render() + settings + messageSpan + csCount + this._logout.Render() + this._languagePicker.Render() + "
"; return userIcon + "
" + userName + userStats + "
"; } }