forked from MapComplete/MapComplete
124 lines
5 KiB
TypeScript
124 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"
|
|
import { LoginToggle } from "../Popup/LoginButton"
|
|
|
|
export default class UserBadge extends LoginToggle {
|
|
constructor(state: MapState) {
|
|
const userDetails = state.osmConnection.userDetails
|
|
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_svg()
|
|
}
|
|
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 = (
|
|
new LanguagePicker(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 Toggle(
|
|
new FixedUiElement("TESTING").SetClass("alert font-xs p-0 max-h-4"),
|
|
undefined,
|
|
state.featureSwitchIsTesting
|
|
)
|
|
|
|
const settings = new Link(
|
|
Svg.gear,
|
|
`${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")
|
|
}
|
|
})
|
|
)
|
|
|
|
super(
|
|
new Combine([
|
|
userBadge.SetClass("inline-block m-0 w-full").SetStyle("pointer-events: all"),
|
|
]).SetClass("shadow rounded-full h-min overflow-hidden block w-full md:w-max"),
|
|
Translations.t.general.loginWithOpenStreetMap,
|
|
state
|
|
)
|
|
}
|
|
}
|