import {LayerDefinition} from "./LayerDefinition"; import {UIElement} from "../UI/UIElement"; import {FixedUiElement} from "../UI/Base/FixedUiElement"; import Translation from "../UI/i18n/Translation"; import Translations from "../UI/i18n/Translations"; import Locale from "../UI/i18n/Locale"; import {VariableUiElement} from "../UI/Base/VariableUIElement"; import {OsmConnection, UserDetails} from "../Logic/OsmConnection"; import {UIEventSource} from "../UI/UIEventSource"; /** * A layout is a collection of settings of the global view (thus: welcome text, title, selection of layers). */ export class Layout { public name: string; public icon: string = "./assets/logo.svg"; public title: UIElement; public description: string | UIElement; public socialImage: string = "" public layers: LayerDefinition[]; public welcomeMessage: UIElement; public gettingStartedPlzLogin: UIElement; public welcomeBackMessage: UIElement; public welcomeTail: UIElement; public startzoom: number; public supportedLanguages: string[]; public startLon: number; public startLat: number; public locationContains: string[]; public enableAdd: boolean = true; public enableUserBadge: boolean = true; public enableSearch: boolean = true; public enableLayers: boolean = true; public hideFromOverview : boolean = false; /** * * @param name: The name used in the query string. If in the query "quests=" is defined, it will select this layout * @param title: Will be used in the of the page * @param layers: The layers to show, a list of LayerDefinitions * @param startzoom: The initial starting zoom of the map * @param startLat:The initial starting latitude of the map * @param startLon: the initial starting longitude of the map * @param welcomeMessage: This message is shown in the collapsable box on the left * @param gettingStartedPlzLogin: This is shown below the welcomemessage and wrapped in a login link. * @param welcomeBackMessage: This is shown when the user is logged in * @param welcomeTail: This text is shown below the login message. It is ideal for extra help */ constructor( name: string, supportedLanguages: string[], title: UIElement | string, layers: LayerDefinition[], startzoom: number, startLat: number, startLon: number, welcomeMessage: UIElement | string, gettingStartedPlzLogin: UIElement | string = Translations.t.general.getStarted, welcomeBackMessage: UIElement | string = Translations.t.general.welcomeBack, welcomeTail: UIElement | string = "" ) { this.supportedLanguages = supportedLanguages; this.title = Translations.W(title) this.startLon = startLon; this.startLat = startLat; this.startzoom = startzoom; this.name = name; this.layers = layers; this.welcomeMessage = Translations.W(welcomeMessage) this.gettingStartedPlzLogin = Translations.W(gettingStartedPlzLogin); this.welcomeBackMessage = Translations.W(welcomeBackMessage); this.welcomeTail = Translations.W(welcomeTail); } } export class WelcomeMessage extends UIElement { private readonly layout: Layout; private readonly userDetails: UIEventSource<UserDetails>; private languagePicker: UIElement; private osmConnection: OsmConnection; private readonly description: UIElement; private readonly plzLogIn: UIElement; private readonly welcomeBack: UIElement; private readonly tail: UIElement; constructor(layout: Layout, languagePicker: UIElement, osmConnection: OsmConnection) { super(osmConnection.userDetails); this.languagePicker = languagePicker; this.ListenTo(Locale.language); this.osmConnection = osmConnection; this.layout = layout; this.userDetails = osmConnection.userDetails; this.description = layout.welcomeMessage; this.plzLogIn = layout.gettingStartedPlzLogin; this.welcomeBack = layout.welcomeBackMessage; this.tail = layout.welcomeTail; } InnerRender(): string { return "<span>" + this.description.Render() + (this.userDetails.data.loggedIn ? this.welcomeBack : this.plzLogIn).Render() + this.tail.Render() + "<br/>" + this.languagePicker.Render() + "</span>"; } protected InnerUpdate(htmlElement: HTMLElement) { this.osmConnection.registerActivateOsmAUthenticationClass() } }