mapcomplete/UI/BigComponents/UserBadge.ts

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

125 lines
5 KiB
TypeScript
Raw Normal View History

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"
2021-06-12 02:58:32 +02:00
import Toggle from "../Input/Toggle"
import Img from "../Base/Img"
import MapState from "../../Logic/State/MapState"
2022-02-15 15:42:09 +01:00
import { LoginToggle } from "../Popup/LoginButton"
2022-02-15 15:42:09 +01:00
export default class UserBadge extends LoginToggle {
constructor(state: MapState) {
const userDetails = state.osmConnection.userDetails
const logout = Svg.logout_svg().onClick(() => {
state.osmConnection.LogOut()
2020-11-05 12:28:02 +01:00
})
2022-09-08 21:40:48 +02:00
const userBadge = new VariableUiElement(
userDetails.map((user) => {
2021-06-12 02:58:32 +02:00
{
const homeButton = new VariableUiElement(
userDetails.map((userinfo) => {
if (userinfo.home) {
2022-02-01 19:02:46 +01:00
return Svg.home_svg()
2022-09-08 21:40:48 +02:00
}
2021-06-12 02:58:32 +02:00
return " "
2022-09-08 21:40:48 +02:00
})
2021-06-12 02:58:32 +02:00
).onClick(() => {
const home = state.osmConnection.userDetails.data?.home
2021-06-12 02:58:32 +02:00
if (home === undefined) {
2022-09-08 21:40:48 +02:00
return
2021-06-12 02:58:32 +02:00
}
state.leafletMap.data?.setView([home.lat, home.lon], 16)
})
const linkStyle = "flex items-baseline"
const languagePicker = (
new LanguagePicker(state.layoutToUse.language, "") ?? new FixedUiElement("")
2021-06-12 02:58:32 +02:00
).SetStyle("width:min-content;")
2020-06-24 00:35:19 +02:00
2021-06-12 02:58:32 +02:00
let messageSpan = new Link(
new Combine([Svg.envelope, "" + user.totalMessages]).SetClass(linkStyle),
`${user.backend}/messages/inbox`,
2021-06-12 02:58:32 +02:00
true
)
const csCount = new Link(
new Combine([Svg.star, "" + user.csCount]).SetClass(linkStyle),
`${user.backend}/user/${user.name}/history`,
2021-06-12 02:58:32 +02:00
true
)
2021-06-12 02:58:32 +02:00
if (user.unreadMessages > 0) {
messageSpan = new Link(
new Combine([Svg.envelope, "" + user.unreadMessages]),
2021-07-08 14:55:21 +02:00
`${user.backend}/messages/inbox`,
2022-09-08 21:40:48 +02:00
true
2021-06-12 02:58:32 +02:00
).SetClass("alert")
2022-09-08 21:40:48 +02:00
}
2021-06-12 02:58:32 +02:00
let dryrun = new Toggle(
new FixedUiElement("TESTING").SetClass("alert font-xs p-0 max-h-4"),
undefined,
state.featureSwitchIsTesting
2022-09-08 21:40:48 +02:00
)
2021-06-12 02:58:32 +02:00
const settings = new Link(
2022-09-08 21:40:48 +02:00
Svg.gear,
`${user.backend}/user/${encodeURIComponent(user.name)}/account`,
2022-09-08 21:40:48 +02:00
true
)
2021-06-12 02:58:32 +02:00
const userName = new Link(
new FixedUiElement(user.name),
`${user.backend}/user/${user.name}`,
2022-09-08 21:40:48 +02:00
true
2021-06-12 02:58:32 +02:00
)
const userStats = new Combine([
homeButton,
2022-09-08 21:40:48 +02:00
settings,
2021-06-12 02:58:32 +02:00
messageSpan,
2022-09-08 21:40:48 +02:00
csCount,
2021-06-12 02:58:32 +02:00
languagePicker,
2022-09-08 21:40:48 +02:00
logout,
2021-06-12 02:58:32 +02:00
]).SetClass("userstats")
2022-09-08 21:40:48 +02:00
2021-06-12 02:58:32 +02:00
const usertext = new Combine([
new Combine([userName, dryrun]).SetClass("flex justify-end w-full"),
2021-06-12 02:58:32 +02:00
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)
2022-09-08 21:40:48 +02:00
)
.SetClass(
"rounded-full opacity-0 m-0 p-0 duration-500 w-16 min-width-16 h16 float-left"
2022-09-08 21:40:48 +02:00
)
.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")
}
})
2021-06-12 02:58:32 +02:00
return new Combine([usertext, userIcon]).SetClass("h-16 flex bg-white")
2020-07-20 09:57:19 +02:00
}
})
2022-09-08 21:40:48 +02:00
)
2020-07-20 09:57:19 +02:00
2021-06-12 02:58:32 +02:00
super(
2022-02-15 15:42:09 +01:00
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
2021-06-12 02:58:32 +02:00
)
2020-06-24 00:35:19 +02:00
}
}