mapcomplete/Customizations/Layout.ts

130 lines
4.6 KiB
TypeScript
Raw Normal View History

2020-07-05 18:59:47 +02:00
import {LayerDefinition} from "./LayerDefinition";
import {UIElement} from "../UI/UIElement";
2020-07-21 01:37:48 +02:00
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";
2020-07-05 18:59:47 +02:00
/**
* A layout is a collection of settings of the global view (thus: welcome text, title, selection of layers).
*/
export class Layout {
2020-07-05 18:59:47 +02:00
public name: string;
public icon: string = "./assets/logo.svg";
2020-07-20 12:39:43 +02:00
public title: UIElement;
public description: string | UIElement = Translations.t.general.about;
public socialImage: string = ""
2020-07-05 18:59:47 +02:00
public layers: LayerDefinition[];
2020-07-20 12:39:43 +02:00
public welcomeMessage: UIElement;
2020-07-21 01:37:48 +02:00
public gettingStartedPlzLogin: UIElement;
public welcomeBackMessage: UIElement;
public welcomeTail: UIElement;
2020-07-05 18:59:47 +02:00
public startzoom: number;
2020-07-21 00:07:04 +02:00
public supportedLanguages: string[];
2020-07-05 18:59:47 +02:00
public startLon: number;
public startLat: number;
public locationContains: string[];
2020-07-15 11:23:35 +02:00
/**
*
* @param name: The name used in the query string. If in the query "quests=<name>" is defined, it will select this layout
* @param title: Will be used in the <title> 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
*/
2020-07-05 18:59:47 +02:00
constructor(
name: string,
2020-07-21 00:07:04 +02:00
supportedLanguages: string[],
2020-07-20 12:39:43 +02:00
title: UIElement | string,
2020-07-05 18:59:47 +02:00
layers: LayerDefinition[],
startzoom: number,
startLat: number,
startLon: number,
2020-07-20 12:39:43 +02:00
welcomeMessage: UIElement | string,
gettingStartedPlzLogin: UIElement | string = Translations.t.general.getStarted,
welcomeBackMessage: UIElement | string = Translations.t.general.welcomeBack,
2020-07-21 01:37:48 +02:00
welcomeTail: UIElement | string = ""
2020-07-05 18:59:47 +02:00
) {
2020-07-21 00:07:04 +02:00
this.supportedLanguages = supportedLanguages;
2020-07-25 18:00:08 +02:00
this.title = Translations.W(title)
2020-07-05 18:59:47 +02:00
this.startLon = startLon;
this.startLat = startLat;
this.startzoom = startzoom;
this.name = name;
this.layers = layers;
this.welcomeMessage = Translations.W(welcomeMessage)
2020-07-21 01:37:48 +02:00
this.gettingStartedPlzLogin = Translations.W(gettingStartedPlzLogin);
this.welcomeBackMessage = Translations.W(welcomeBackMessage);
this.welcomeTail = Translations.W(welcomeTail);
2020-07-05 18:59:47 +02:00
}
}
export class WelcomeMessage extends UIElement {
private readonly layout: Layout;
private readonly userDetails: UIEventSource<UserDetails>;
2020-07-25 18:00:08 +02:00
private languagePicker: UIElement;
private osmConnection: OsmConnection;
private readonly description: UIElement;
private readonly plzLogIn: UIElement;
private readonly welcomeBack: UIElement;
private readonly tail: UIElement;
2020-07-25 18:00:08 +02:00
constructor(layout: Layout,
languagePicker: UIElement,
osmConnection: OsmConnection) {
super(osmConnection.userDetails);
2020-07-25 18:00:08 +02:00
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 {
2020-07-24 01:12:57 +02:00
return "<span id='welcomeMessage'>" +
this.description.Render() +
(this.userDetails.data.loggedIn ? this.welcomeBack : this.plzLogIn).Render() +
this.tail.Render() +
2020-07-25 18:00:08 +02:00
"<br/>" +
this.languagePicker.Render() +
2020-07-24 01:12:57 +02:00
"</span>"
;
/*
return new VariableUiElement(
this.userDetails.map((userdetails) => {
}),
function () {
}).ListenTo(Locale.language);*/
}
protected InnerUpdate(htmlElement: HTMLElement) {
this.osmConnection.registerActivateOsmAUthenticationClass()
}
2020-07-05 18:59:47 +02:00
}