forked from MapComplete/MapComplete
141 lines
5 KiB
TypeScript
141 lines
5 KiB
TypeScript
import {VariableUiElement} from "../Base/VariableUIElement";
|
|
import Svg from "../../Svg";
|
|
import Combine from "../Base/Combine";
|
|
import {FixedUiElement} from "../Base/FixedUiElement";
|
|
import LanguagePicker from "../LanguagePicker";
|
|
import Translations from "../i18n/Translations";
|
|
import Link from "../Base/Link";
|
|
import Toggle from "../Input/Toggle";
|
|
import Img from "../Base/Img";
|
|
import MapState from "../../Logic/State/MapState";
|
|
|
|
export default class UserBadge extends Toggle {
|
|
|
|
constructor(state: MapState) {
|
|
|
|
|
|
const userDetails = state.osmConnection.userDetails;
|
|
|
|
const loginButton = Translations.t.general.loginWithOpenStreetMap
|
|
.Clone()
|
|
.SetClass("userbadge-login inline-flex justify-center items-center w-full h-full text-lg font-bold min-w-[20em]")
|
|
.onClick(() => state.osmConnection.AttemptLogin());
|
|
|
|
|
|
const logout =
|
|
Svg.logout_svg()
|
|
.onClick(() => {
|
|
state.osmConnection.LogOut();
|
|
});
|
|
|
|
|
|
const userBadge = new VariableUiElement(userDetails.map(user => {
|
|
{
|
|
const homeButton = new VariableUiElement(
|
|
userDetails.map((userinfo) => {
|
|
if (userinfo.home) {
|
|
return Svg.home_ui();
|
|
}
|
|
return " ";
|
|
})
|
|
).onClick(() => {
|
|
const home = state.osmConnection.userDetails.data?.home;
|
|
if (home === undefined) {
|
|
return;
|
|
}
|
|
state.leafletMap.data.setView([home.lat, home.lon], 16);
|
|
});
|
|
|
|
const linkStyle = "flex items-baseline"
|
|
const languagePicker = (LanguagePicker.CreateLanguagePicker(state.layoutToUse.language) ?? new FixedUiElement(""))
|
|
.SetStyle("width:min-content;");
|
|
|
|
let messageSpan =
|
|
new Link(
|
|
new Combine([Svg.envelope, "" + user.totalMessages]).SetClass(linkStyle),
|
|
`${user.backend}/messages/inbox`,
|
|
true
|
|
)
|
|
|
|
|
|
const csCount =
|
|
new Link(
|
|
new Combine([Svg.star, "" + user.csCount]).SetClass(linkStyle),
|
|
`${user.backend}/user/${user.name}/history`,
|
|
true);
|
|
|
|
|
|
if (user.unreadMessages > 0) {
|
|
messageSpan = new Link(
|
|
new Combine([Svg.envelope, "" + user.unreadMessages]),
|
|
`${user.backend}/messages/inbox`,
|
|
true
|
|
).SetClass("alert")
|
|
}
|
|
|
|
let dryrun = new FixedUiElement("");
|
|
if (user.dryRun) {
|
|
dryrun = new FixedUiElement("TESTING").SetClass("alert font-xs p-0 max-h-4");
|
|
}
|
|
|
|
const settings =
|
|
new Link(Svg.gear_svg(),
|
|
`${user.backend}/user/${encodeURIComponent(user.name)}/account`,
|
|
true)
|
|
|
|
|
|
const userName = new Link(
|
|
new FixedUiElement(user.name),
|
|
`${user.backend}/user/${user.name}`,
|
|
true);
|
|
|
|
|
|
const userStats = new Combine([
|
|
homeButton,
|
|
settings,
|
|
messageSpan,
|
|
csCount,
|
|
languagePicker,
|
|
logout
|
|
])
|
|
.SetClass("userstats")
|
|
|
|
const usertext = new Combine([
|
|
new Combine([userName, dryrun]).SetClass("flex justify-end w-full"),
|
|
userStats
|
|
]).SetClass("flex flex-col sm:w-auto sm:pl-2 overflow-hidden w-0")
|
|
const userIcon =
|
|
(user.img === undefined ? Svg.osm_logo_ui() : new Img(user.img)).SetClass("rounded-full opacity-0 m-0 p-0 duration-500 w-16 min-width-16 h16 float-left")
|
|
.onClick(() => {
|
|
if (usertext.HasClass("w-0")) {
|
|
usertext.RemoveClass("w-0")
|
|
usertext.SetClass("w-min pl-2")
|
|
} else {
|
|
usertext.RemoveClass("w-min")
|
|
usertext.RemoveClass("pl-2")
|
|
usertext.SetClass("w-0")
|
|
}
|
|
})
|
|
|
|
return new Combine([
|
|
usertext,
|
|
userIcon,
|
|
]).SetClass("h-16 flex bg-white")
|
|
|
|
}
|
|
}));
|
|
|
|
userBadge.SetClass("inline-block m-0 w-full").SetStyle("pointer-events: all")
|
|
super(
|
|
userBadge,
|
|
loginButton,
|
|
state.osmConnection.isLoggedIn
|
|
)
|
|
|
|
|
|
this.SetClass("shadow rounded-full h-min overflow-hidden block w-full md:w-max")
|
|
|
|
}
|
|
|
|
|
|
}
|