mapcomplete/UI/BigComponents/UserInformation.ts

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

164 lines
6.4 KiB
TypeScript
Raw Normal View History

2022-12-16 13:45:07 +01:00
import ScrollableFullScreen from "../Base/ScrollableFullScreen"
import Translations from "../i18n/Translations"
import { OsmConnection } from "../../Logic/Osm/OsmConnection"
import Combine from "../Base/Combine"
import { SubtleButton } from "../Base/SubtleButton"
import Svg from "../../Svg"
import { VariableUiElement } from "../Base/VariableUIElement"
import Img from "../Base/Img"
import { FixedUiElement } from "../Base/FixedUiElement"
import Link from "../Base/Link"
import { UIEventSource } from "../../Logic/UIEventSource"
import Loc from "../../Models/Loc"
import BaseUIElement from "../BaseUIElement"
import Showdown from "showdown"
2022-12-16 13:45:07 +01:00
import LanguagePicker from "../LanguagePicker"
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
import Constants from "../../Models/Constants"
export class ImportViewerLinks extends VariableUiElement {
constructor(osmConnection: OsmConnection) {
super(
osmConnection.userDetails.map((ud) => {
if (ud.csCount < Constants.userJourney.importHelperUnlock) {
return undefined
}
return new Combine([
new SubtleButton(undefined, Translations.t.importHelper.title, {
url: "import_helper.html",
}),
new SubtleButton(Svg.note_svg(), Translations.t.importInspector.title, {
url: "import_viewer.html",
}),
])
})
)
}
}
class UserInformationMainPanel extends Combine {
2022-12-16 13:45:07 +01:00
constructor(
osmConnection: OsmConnection,
locationControl: UIEventSource<Loc>,
layout: LayoutConfig
) {
const t = Translations.t.userinfo
const imgSize = "h-6 w-6"
2022-12-16 13:45:07 +01:00
const ud = osmConnection.userDetails
super([
2022-12-16 13:45:07 +01:00
new VariableUiElement(
ud.map((ud) => {
if (!ud?.loggedIn) {
// Not logged in
2022-12-16 13:45:07 +01:00
return new SubtleButton(Svg.login_svg(), "Login", { imgSize }).onClick(
osmConnection.AttemptLogin
)
}
2022-12-16 13:45:07 +01:00
let img: Img = Svg.person_svg()
if (ud.img !== undefined) {
img = new Img(ud.img)
}
img.SetClass("rounded-full h-12 w-12 m-4")
let description: BaseUIElement = undefined
if (ud.description) {
const editButton = new Link(
Svg.pencil_svg().SetClass("h-4 w-4"),
"https://www.openstreetmap.org/profile/edit",
true
2022-12-16 13:45:07 +01:00
).SetClass(
"absolute block bg-subtle rounded-full p-2 bottom-2 right-2 w-min self-end"
)
description = new Combine([
2022-12-16 13:45:07 +01:00
new FixedUiElement(
new Showdown.Converter().makeHtml(ud.description)
).SetClass("link-underline"),
editButton,
]).SetClass("relative w-full m-2")
} else {
description = new Combine([
2022-12-16 13:45:07 +01:00
t.noDescription,
new SubtleButton(Svg.pencil_svg(), t.noDescriptionCallToAction, {
imgSize,
}),
]).SetClass("w-full m-2")
}
2022-12-16 13:45:07 +01:00
let panToHome: BaseUIElement
if (ud.home) {
2022-12-16 13:45:07 +01:00
panToHome = new SubtleButton(Svg.home_svg(), t.moveToHome, {
imgSize,
}).onClick(() => {
const home = ud?.home
if (home === undefined) {
return
}
locationControl.setData({ ...home, zoom: 16 })
})
}
return new Combine([
2022-12-16 13:45:07 +01:00
new Combine([img, description]).SetClass(
"flex border border-black rounded-md"
),
new LanguagePicker(
layout.language,
Translations.t.general.pickLanguage.Clone()
),
2022-12-16 13:45:07 +01:00
new SubtleButton(
Svg.envelope_svg(),
new Combine([
t.gotoInbox,
ud.unreadMessages == 0
? undefined
: t.newMessages.SetClass("alert block"),
]),
2022-12-16 13:45:07 +01:00
{ imgSize, url: `${ud.backend}/messages/inbox`, newTab: true }
),
new SubtleButton(Svg.gear_svg(), t.gotoSettings, {
imgSize,
url: `${ud.backend}/user/${encodeURIComponent(ud.name)}/account`,
newTab: true,
}),
panToHome,
new ImportViewerLinks(osmConnection),
2022-12-16 13:45:07 +01:00
new SubtleButton(Svg.logout_svg(), Translations.t.general.logout, {
imgSize,
2022-12-20 20:42:50 +01:00
}).onClick(() => {
osmConnection.LogOut()
}),
])
2022-12-16 13:45:07 +01:00
})
).SetClass("flex flex-col"),
])
}
}
export default class UserInformationPanel extends ScrollableFullScreen {
constructor(state: {
2022-12-16 13:45:07 +01:00
layoutToUse: LayoutConfig
osmConnection: OsmConnection
locationControl: UIEventSource<Loc>
}) {
2022-12-16 13:45:07 +01:00
const t = Translations.t.general
super(
() => {
2022-12-16 13:45:07 +01:00
return new VariableUiElement(
state.osmConnection.userDetails.map((ud) => "Welcome " + ud.name)
)
},
() => {
2022-12-16 13:45:07 +01:00
return new UserInformationMainPanel(
state.osmConnection,
state.locationControl,
state.layoutToUse
)
},
"userinfo"
2022-12-16 13:45:07 +01:00
)
}
}