mapcomplete/UI/BigComponents/UserBadge.ts
Tobias 871f512c0d Move border custom css to Tailwind Class
- migrate custom css to Tailwind class
- introduce class-parameter for `AsImageElement`
- migrate width of login button to Tailwind class
2021-01-20 21:48:47 +01:00

144 lines
No EOL
4.3 KiB
TypeScript

/**
* Handles and updates the user badge
*/
import {UIEventSource} from "../../Logic/UIEventSource";
import {UIElement} from "../UIElement";
import {VariableUiElement} from "../Base/VariableUIElement";
import UserDetails from "../../Logic/Osm/OsmConnection";
import Svg from "../../Svg";
import State from "../../State";
import Combine from "../Base/Combine";
import {FixedUiElement} from "../Base/FixedUiElement";
import LanguagePicker from "../LanguagePicker";
import Translations from "../i18n/Translations";
import Link from "../Base/Link";
export default class UserBadge extends UIElement {
private _userDetails: UIEventSource<UserDetails>;
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 = (LanguagePicker.CreateLanguagePicker(State.state.layoutToUse.data.language) ?? new FixedUiElement(""))
.SetStyle("display:inline-block;width:min-content;");
this._loginButton = Translations.t.general.loginWithOpenStreetMap
.Clone()
.SetClass("userbadge-login pt-3 w-full")
.onClick(() => State.state.osmConnection.AttemptLogin());
this._logout =
Svg.logout_svg()
.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 Svg.home;
}
return "";
})
).onClick(() => {
const home = State.state.osmConnection.userDetails.data?.home;
if (home === undefined) {
return;
}
State.state.leafletMap.data.setView([home.lat, home.lon], 16);
});
}
InnerRender(): string {
const user = this._userDetails.data;
if (!user.loggedIn) {
return this._loginButton.Render();
}
let messageSpan: UIElement =
new Link(
new Combine([Svg.envelope, "" + user.totalMessages]),
'https://www.openstreetmap.org/messages/inbox',
true
)
if (user.unreadMessages > 0) {
messageSpan = new Link(
new Combine([Svg.envelope, "" + user.unreadMessages]),
'https://www.openstreetmap.org/messages/inbox',
true
).SetClass("alert")
}
let dryrun: UIElement = new FixedUiElement("");
if (user.dryRun) {
dryrun = new FixedUiElement("TESTING").SetClass("alert");
}
const settings =
new Link(Svg.gear_svg(),
`https://www.openstreetmap.org/user/${encodeURIComponent(user.name)}/account`,
true)
const userIcon = new Link(
new FixedUiElement(`<img id='profile-pic' src='${user.img}' alt='profile-pic'/>`),
`https://www.openstreetmap.org/user/${encodeURIComponent(user.name)}`,
true
);
const userName = new Link(
new FixedUiElement(user.name),
`https://www.openstreetmap.org/user/${user.name}`,
true);
const csCount =
new Link(
new Combine([Svg.star, "" + user.csCount]),
`https://www.openstreetmap.org/user/${user.name}/history`,
true);
const userStats = new Combine([
this._homeButton,
settings,
messageSpan,
csCount,
this._logout,
this._languagePicker])
.SetClass("userstats")
const usertext = new Combine([
userName,
dryrun,
userStats
]).SetClass("usertext")
return new Combine([
userIcon,
usertext,
]).Render()
}
}