import {UIElement} from "./UIElement"; import * as 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 {UIEventSource} from "../Logic/UIEventSource"; import Combine from "./Base/Combine"; import Locale from "./i18n/Locale"; /** * 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 = (Locale.CreateLanguagePicker(State.state.layoutToUse.data.supportedLanguages) ?? new FixedUiElement("")) .SetStyle("display:inline-block;width:min-content;"); this._loginButton = Translations.t.general.loginWithOpenStreetMap .Clone() .SetClass("userbadge-login") .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 = new FixedUiElement("TESTING").SetClass("alert").Render(); } 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 = new Combine(["
", this._homeButton, settings, messageSpan, csCount, this._logout, this._languagePicker, "
"]).Render(); return userIcon + "
" + userName + userStats + "
"; } }