mapcomplete/UI/BigComponents/ThemeIntroductionPanel.ts

59 lines
1.9 KiB
TypeScript
Raw Normal View History

import Locale from "../i18n/Locale";
import {UIElement} from "../UIElement";
import State from "../../State";
import Combine from "../Base/Combine";
import LanguagePicker from "../LanguagePicker";
import Translations from "../i18n/Translations";
2021-01-07 04:50:12 +01:00
import {VariableUiElement} from "../Base/VariableUIElement";
2021-01-07 04:50:12 +01:00
export default class ThemeIntroductionPanel extends UIElement {
private languagePicker: UIElement;
private readonly description: UIElement;
private readonly plzLogIn: UIElement;
private readonly welcomeBack: UIElement;
private readonly tail: UIElement;
2021-01-07 04:50:12 +01:00
private readonly loginStatus: UIElement;
constructor() {
super(State.state.osmConnection.userDetails);
this.ListenTo(Locale.language);
2020-11-11 16:23:49 +01:00
this.languagePicker = LanguagePicker.CreateLanguagePicker(State.state.layoutToUse.data.language, Translations.t.general.pickLanguage);
const layout = State.state.layoutToUse.data;
2021-03-04 13:35:03 +01:00
this.description = layout.description
this.plzLogIn =
2020-11-11 16:23:49 +01:00
Translations.t.general.loginWithOpenStreetMap
.onClick(() => {
State.state.osmConnection.AttemptLogin()
});
2020-11-11 16:23:49 +01:00
this.welcomeBack = Translations.t.general.welcomeBack;
this.tail = layout.descriptionTail;
2021-01-07 04:50:12 +01:00
this.loginStatus = new VariableUiElement(
State.state.osmConnection.userDetails.map(
userdetails => {
if (State.state.featureSwitchUserbadge.data) {
return "";
}
return (userdetails.loggedIn ? this.welcomeBack : this.plzLogIn).Render();
}
)
)
}
InnerRender(): string {
return new Combine([
this.description,
"<br/><br/>",
2021-01-07 04:50:12 +01:00
this.loginStatus,
this.tail,
"<br/>",
2020-12-14 01:14:22 +01:00
this.languagePicker
]).Render()
}
2020-11-24 14:36:43 +01:00
}