Replace userbadge with panel access to user information, add more information to user profile

2022-12-13 03:46:53 +01:00 · 2022-12-13 03:46:53 +01:00 · 6f018a2fd8
commit 6f018a2fd8
parent bc85c9bbe7
19 changed files with 398 additions and 174 deletions
--- a/UI/BigComponents/UserInformation.ts
+++ b/UI/BigComponents/UserInformation.ts
@ -0,0 +1,109 @@
+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"
+import LanguagePicker from "../LanguagePicker";
+import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
+
+class UserInformationMainPanel extends Combine {
+    constructor(osmConnection: OsmConnection, locationControl: UIEventSource<Loc>, layout: LayoutConfig) {
+        const t = Translations.t.userinfo;
+        const imgSize = "h-6 w-6"
+        const ud = osmConnection.userDetails;
+        super([
+
+            new VariableUiElement(ud.map(ud => {
+
+                    if (!ud?.loggedIn) {
+                        // Not logged in
+                        return new SubtleButton(
+                            Svg.login_svg(), "Login", {imgSize}
+                        ).onClick(osmConnection.AttemptLogin)
+                    }
+
+                    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
+                        ).SetClass("absolute block bg-subtle rounded-full p-2 bottom-2 right-2 w-min self-end")
+
+                        description = new Combine([
+                            new FixedUiElement(new Showdown.Converter().makeHtml(ud.description)).SetClass("link-underline"),
+                            editButton
+                        ]).SetClass("relative w-full m-2")
+
+                    } else {
+                        description = new Combine([
+                            t.noDescription, new SubtleButton(Svg.pencil_svg(), t.noDescriptionCallToAction, {imgSize})
+                        ]).SetClass("w-full m-2")
+                    }
+
+                    let panToHome: BaseUIElement;
+                    if (ud.home) {
+                        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([
+                        new Combine([img, description]).SetClass("flex border border-black rounded-md"),
+                new LanguagePicker(layout.language, Translations.t.general.pickLanguage.Clone()),
+
+                new SubtleButton(Svg.envelope_svg(), new Combine([t.gotoInbox,
+                                ud.unreadMessages == 0 ? undefined : t.newMessages.SetClass("alert block")
+                            ]),
+                            {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 SubtleButton(Svg.logout_svg(), Translations.t.general.logout, {imgSize}).onClick(osmConnection.LogOut)
+
+                    ])
+                }
+            )).SetClass("flex flex-col"),
+
+
+        ]);
+    }
+}
+
+export default class UserInformationPanel extends ScrollableFullScreen {
+    constructor(state: {
+        layoutToUse: LayoutConfig;
+        osmConnection: OsmConnection, locationControl: UIEventSource<Loc> }) {
+        const t = Translations.t.general;
+        super(
+            () => {
+                return new VariableUiElement(state.osmConnection.userDetails.map(ud => "Welcome " + ud.name))
+            },
+            () => {
+                return new UserInformationMainPanel(state.osmConnection, state.locationControl, state.layoutToUse)
+            },
+            "userinfo"
+        );
+    }
+}