mapcomplete/UI/UserBadge.ts

144 lines
4.3 KiB
TypeScript
Raw Normal View History

2020-06-24 00:35:19 +02:00
import {UIElement} from "./UIElement";
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 {UIEventSource} from "../Logic/UIEventSource";
import Combine from "./Base/Combine";
2020-11-05 12:28:02 +01:00
import Svg from "../Svg";
import Link from "./Base/Link";
2020-11-06 01:58:26 +01:00
import LanguagePicker from "./LanguagePicker";
2020-06-24 00:35:19 +02:00
/**
* Handles and updates the user badge
*/
export class UserBadge extends UIElement {
private _userDetails: UIEventSource<UserDetails>;
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;
2020-11-11 16:23:49 +01:00
this._languagePicker = (LanguagePicker.CreateLanguagePicker(State.state.layoutToUse.data.language) ?? new FixedUiElement(""))
2020-09-21 23:35:15 +02:00
.SetStyle("display:inline-block;width:min-content;");
2020-11-05 12:28:02 +01:00
this._loginButton = Translations.t.general.loginWithOpenStreetMap
.Clone()
.SetClass("userbadge-login")
.onClick(() => State.state.osmConnection.AttemptLogin());
2020-11-05 12:28:02 +01:00
this._logout =
Svg.logout_svg()
2020-11-05 12:28:02 +01:00
.onClick(() => {
State.state.osmConnection.LogOut();
});
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 Svg.home;
2020-07-20 09:57:19 +02:00
}
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.setView([home.lat, home.lon], 16);
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
}
2020-11-05 12:28:02 +01:00
let messageSpan: UIElement =
new Link(
new Combine([Svg.envelope, "" + user.totalMessages]),
2020-11-05 12:28:02 +01:00
'https://www.openstreetmap.org/messages/inbox',
true
)
if (user.unreadMessages > 0) {
2020-11-05 12:28:02 +01:00
messageSpan = new Link(
new Combine([Svg.envelope, "" + user.unreadMessages]),
2020-11-05 12:28:02 +01:00
'https://www.openstreetmap.org/messages/inbox',
true
).SetClass("alert")
}
2020-11-05 12:28:02 +01:00
let dryrun: UIElement = new FixedUiElement("");
if (user.dryRun) {
2020-11-05 12:28:02 +01:00
dryrun = new FixedUiElement("TESTING").SetClass("alert");
}
2020-06-24 00:35:19 +02:00
2020-06-29 03:40:19 +02:00
const settings =
new Link(Svg.gear_svg(),
2020-11-05 12:28:02 +01:00
`https://www.openstreetmap.org/user/${encodeURIComponent(user.name)}/account`,
true)
2020-06-29 03:40:19 +02:00
2020-07-23 16:00:49 +02:00
2020-11-05 12:28:02 +01:00
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
);
2020-07-23 16:00:49 +02:00
2020-11-05 12:28:02 +01:00
const userName = new Link(
new FixedUiElement(user.name),
2020-11-18 12:50:06 +01:00
`https://www.openstreetmap.org/user/${user.name}`,
2020-11-05 12:28:02 +01:00
true);
2020-07-23 16:00:49 +02:00
2020-11-05 12:28:02 +01:00
const csCount =
new Link(
new Combine([Svg.star, "" + user.csCount]),
2020-11-05 12:28:02 +01:00
`https://www.openstreetmap.org/user/${user.name}/history`,
true);
const userStats = new Combine([
this._homeButton,
settings,
messageSpan,
csCount,
this._logout,
2020-11-05 12:28:02 +01:00
this._languagePicker])
.SetClass("userstats")
const usertext = new Combine([
userName,
dryrun,
userStats
]).SetClass("usertext")
return new Combine([
userIcon,
usertext,
]).Render()
2020-07-23 16:00:49 +02:00
2020-06-24 00:35:19 +02:00
}
}