mapcomplete/InitUiElements.ts

258 lines
9.7 KiB
TypeScript
Raw Normal View History

2020-07-29 15:05:19 +02:00
import Translations from "./UI/i18n/Translations";
import {TabbedComponent} from "./UI/Base/TabbedComponent";
import {ShareScreen} from "./UI/ShareScreen";
import {FixedUiElement} from "./UI/Base/FixedUiElement";
import {CheckBox} from "./UI/Input/CheckBox";
import Combine from "./UI/Base/Combine";
import {UIElement} from "./UI/UIElement";
2020-07-29 15:48:21 +02:00
import {MoreScreen} from "./UI/MoreScreen";
2020-07-30 00:59:08 +02:00
import {FilteredLayer} from "./Logic/FilteredLayer";
import {FeatureInfoBox} from "./UI/FeatureInfoBox";
2020-07-31 04:58:58 +02:00
import {BaseLayers, Basemap} from "./Logic/Leaflet/Basemap";
import {State} from "./State";
import {WelcomeMessage} from "./UI/WelcomeMessage";
2020-07-31 04:58:58 +02:00
import {Img} from "./UI/Img";
import {DropDown} from "./UI/Input/DropDown";
import {LayerSelection} from "./UI/LayerSelection";
2020-07-31 16:17:16 +02:00
import {Preset} from "./Customizations/LayerDefinition";
2020-07-31 17:38:03 +02:00
import {VariableUiElement} from "./UI/Base/VariableUIElement";
import {LayerUpdater} from "./Logic/LayerUpdater";
import {UIEventSource} from "./Logic/UIEventSource";
import {QueryParameters} from "./Logic/Web/QueryParameters";
import {PersonalLayout} from "./Logic/PersonalLayout";
import {PersonalLayersPanel} from "./Logic/PersonalLayersPanel";
import Locale from "./UI/i18n/Locale";
2020-07-29 15:05:19 +02:00
export class InitUiElements {
2020-07-30 00:59:08 +02:00
static OnlyIf(featureSwitch: UIEventSource<boolean>, callback: () => void) {
2020-07-29 15:05:19 +02:00
featureSwitch.addCallback(() => {
2020-07-30 00:59:08 +02:00
if (featureSwitch.data) {
callback();
2020-07-29 15:05:19 +02:00
}
});
2020-07-30 00:59:08 +02:00
if (featureSwitch.data) {
2020-07-29 15:05:19 +02:00
callback();
}
}
private static CreateWelcomePane() {
2020-07-29 15:05:19 +02:00
const layoutToUse = State.state.layoutToUse.data;
2020-07-31 16:17:16 +02:00
let welcome: UIElement = new WelcomeMessage();
if (layoutToUse.id === PersonalLayout.NAME) {
welcome = new PersonalLayersPanel();
2020-07-31 16:17:16 +02:00
}
2020-08-07 00:45:33 +02:00
const tabs = [
{header: Img.AsImageElement(layoutToUse.icon), content: welcome},
{header: `<img src='./assets/osm-logo.svg'>`, content: Translations.t.general.openStreetMapIntro},
2020-08-07 00:45:33 +02:00
]
if (State.state.featureSwitchShareScreen.data) {
tabs.push({header: `<img src='./assets/share.svg'>`, content: new ShareScreen()});
2020-08-07 00:45:33 +02:00
}
2020-09-05 01:40:43 +02:00
if (State.state.featureSwitchMoreQuests.data) {
2020-08-25 00:20:20 +02:00
tabs.push({
2020-09-05 01:40:43 +02:00
header: `<img src='./assets/add.svg'>`,
content: new VariableUiElement(State.state.osmConnection.userDetails.map(userdetails => {
if(userdetails.csCount < State.userJourney.moreScreenUnlock){
return "";
}
return new MoreScreen().Render()
}, [Locale.language]))
2020-08-25 00:20:20 +02:00
});
2020-08-07 00:45:33 +02:00
}
2020-09-05 01:40:43 +02:00
tabs.push({
header: `<img src='./assets/help.svg'>`,
content: new VariableUiElement(State.state.osmConnection.userDetails.map(userdetails => {
if (userdetails.csCount < State.userJourney.mapCompleteHelpUnlock) {
return ""
}
return Translations.t.general.aboutMapcomplete.Render();
}, [Locale.language]))
}
);
2020-07-29 15:05:19 +02:00
2020-09-05 01:40:43 +02:00
const fullOptions = new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab);
fullOptions.ListenTo(State.state.osmConnection.userDetails);
2020-07-29 15:48:21 +02:00
return fullOptions;
}
static InitWelcomeMessage() {
2020-07-29 15:48:21 +02:00
const fullOptions = this.CreateWelcomePane();
2020-07-29 15:48:21 +02:00
2020-07-29 15:05:19 +02:00
const help = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/help.svg' alt='help'></div>`);
const close = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/close.svg' alt='close'></div>`);
const checkbox = new CheckBox(
2020-07-29 15:05:19 +02:00
new Combine([
"<span class='collapse-button'>", close, "</span>",
"<span id='welcomeMessage'>", fullOptions.onClick(() => {
}), "</span>"]),
new Combine(["<span class='open-button'>", help, "</span>"])
, true
).AttachTo("messagesbox");
const openedTime = new Date().getTime();
State.state.locationControl.addCallback(() => {
if (new Date().getTime() - openedTime < 15 * 1000) {
// Don't autoclose the first 15 secs
return;
}
checkbox.isEnabled.setData(false);
})
2020-07-29 15:05:19 +02:00
const fullOptions2 = this.CreateWelcomePane();
State.state.fullScreenMessage.setData(fullOptions2)
new FixedUiElement(`<div class='collapse-button-img shadow'><img src='assets/help.svg' alt='help'></div>`).onClick(() => {
State.state.fullScreenMessage.setData(fullOptions2)
2020-07-29 15:05:19 +02:00
}).AttachTo("help-button-mobile");
2020-07-30 00:59:08 +02:00
}
static CreateLanguagePicker(label: string | UIElement = "") {
if (State.state.layoutToUse.data.supportedLanguages.length <= 1) {
return undefined;
}
return new DropDown(label, State.state.layoutToUse.data.supportedLanguages.map(lang => {
return {value: lang, shown: lang}
}
), Locale.language);
}
2020-07-30 00:59:08 +02:00
2020-07-31 16:17:16 +02:00
static InitLayerSelection() {
2020-07-31 04:58:58 +02:00
const closedFilterButton = `<button id="filter__button" class="filter__button shadow">${Img.closedFilterButton}</button>`;
const openFilterButton = `<button id="filter__button" class="filter__button">${Img.openFilterButton}</button>`;
let baseLayerOptions = BaseLayers.baseLayers.map((layer) => {
return {value: layer, shown: layer.name}
});
const backgroundMapPicker = new Combine([new DropDown(`Background map`, baseLayerOptions, State.state.bm.CurrentLayer), openFilterButton]);
2020-07-31 16:17:16 +02:00
const layerSelection = new Combine([`<p class="filter__label">Maplayers</p>`, new LayerSelection()]);
2020-07-31 04:58:58 +02:00
let layerControl = backgroundMapPicker;
2020-07-31 16:17:16 +02:00
if (State.state.filteredLayers.data.length > 1) {
2020-07-31 04:58:58 +02:00
layerControl = new Combine([layerSelection, backgroundMapPicker]);
}
InitUiElements.OnlyIf(State.state.featureSwitchLayers, () => {
const checkbox = new CheckBox(layerControl, closedFilterButton,
QueryParameters.GetQueryParameter("layer-control-toggle", "false")
.map((str) => str !== "false", [], b => "" + b)
);
2020-07-31 04:58:58 +02:00
checkbox.AttachTo("filter__selection");
State.state.bm.Location.addCallback(() => {
checkbox.isEnabled.setData(false);
});
});
}
2020-07-31 17:38:03 +02:00
static InitBaseMap(){
const bm = new Basemap("leafletDiv", State.state.locationControl, new VariableUiElement(
2020-07-31 17:38:03 +02:00
State.state.locationControl.map((location) => {
2020-08-13 09:27:55 +02:00
const mapComplete = `<a href='https://github.com/pietervdvn/MapComplete' target='_blank'>Mapcomplete ${State.vNumber}</a> <a href='https://github.com/pietervdvn/MapComplete/issues' target='_blank'><img src='./assets/bug.svg' alt='Report bug' class='small-userbadge-icon'></a>`;
2020-07-31 17:38:03 +02:00
let editHere = "";
if (location !== undefined) {
editHere = " | " +
"<a href='https://www.openstreetmap.org/edit?editor=id#map=" + location.zoom + "/" + location.lat + "/" + location.lon + "' target='_blank'>" +
"<img src='./assets/pencil.svg' alt='edit here' class='small-userbadge-icon'>" +
"</a>"
}
return mapComplete + editHere;
})
));
State.state.bm = bm;
2020-07-31 17:38:03 +02:00
State.state.layerUpdater = new LayerUpdater(State.state);
const queryParam = QueryParameters.GetQueryParameter("background", State.state.layoutToUse.data.defaultBackground);
const queryParamMapped: UIEventSource<{ id: string, name: string, layer: any }> =
queryParam.map<{ id: string, name: string, layer: any }>((id) => {
for (const layer of BaseLayers.baseLayers) {
if (layer.id === id) {
return layer;
}
}
return undefined;
}, [], (layerInfo) => {
return layerInfo.id
});
queryParamMapped.syncWith(bm.CurrentLayer);
2020-07-31 17:38:03 +02:00
}
2020-07-30 00:59:08 +02:00
2020-07-31 16:17:16 +02:00
static InitLayers() {
2020-07-30 00:59:08 +02:00
const flayers: FilteredLayer[] = []
2020-07-31 16:17:16 +02:00
const presets: Preset[] = [];
2020-07-30 00:59:08 +02:00
const state = State.state;
for (const layer of state.layoutToUse.data.layers) {
if (typeof (layer) === "string") {
throw "Layer " + layer + " was not substituted";
}
2020-07-30 00:59:08 +02:00
const generateInfo = (tagsES, feature) => {
return new FeatureInfoBox(
feature,
tagsES,
layer.title,
layer.elementsToShow,
)
};
for (const preset of layer.presets ?? []) {
if (preset.icon === undefined) {
const tags = {};
for (const tag of preset.tags) {
const k = tag.key;
if (typeof (k) === "string") {
tags[k] = tag.value;
}
}
preset.icon = layer.style(tags)?.icon?.iconUrl;
}
2020-07-31 16:17:16 +02:00
presets.push(preset);
2020-07-30 00:59:08 +02:00
}
2020-07-31 16:17:16 +02:00
const flayer: FilteredLayer = FilteredLayer.fromDefinition(layer, generateInfo);
2020-07-30 00:59:08 +02:00
flayers.push(flayer);
QueryParameters.GetQueryParameter("layer-" + layer.id, "true")
.map<boolean>((str) => str !== "false", [], (b) => b.toString())
.syncWith(
flayer.isDisplayed
)
2020-07-30 00:59:08 +02:00
}
2020-07-31 16:17:16 +02:00
State.state.filteredLayers.setData(flayers);
State.state.presets.setData(presets);
2020-07-29 15:05:19 +02:00
}
}