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"; import {MoreScreen} from "./UI/MoreScreen"; import {FilteredLayer} from "./Logic/FilteredLayer"; import {FeatureInfoBox} from "./UI/FeatureInfoBox"; import {BaseLayers, Basemap} from "./Logic/Leaflet/Basemap"; import {State} from "./State"; import {WelcomeMessage} from "./UI/WelcomeMessage"; import {Img} from "./UI/Img"; import {DropDown} from "./UI/Input/DropDown"; import {LayerSelection} from "./UI/LayerSelection"; import {Preset} from "./Customizations/LayerDefinition"; 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"; export class InitUiElements { static OnlyIf(featureSwitch: UIEventSource, callback: () => void) { featureSwitch.addCallback(() => { if (featureSwitch.data) { callback(); } }); if (featureSwitch.data) { callback(); } } private static CreateWelcomePane() { const layoutToUse = State.state.layoutToUse.data; let welcome: UIElement = new WelcomeMessage(); if (layoutToUse.id === PersonalLayout.NAME) { welcome = new PersonalLayersPanel(); } const tabs = [ {header: Img.AsImageElement(layoutToUse.icon), content: welcome}, {header: ``, content: Translations.t.general.openStreetMapIntro}, ] if (State.state.featureSwitchShareScreen.data) { tabs.push({header: ``, content: new ShareScreen()}); } if (State.state.featureSwitchMoreQuests.data){ tabs.push({ header: `` , content: new MoreScreen() }); } const fullOptions = new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab); return fullOptions; } static InitWelcomeMessage() { const fullOptions = this.CreateWelcomePane(); const help = new FixedUiElement(`
help
`); const close = new FixedUiElement(`
close
`); const checkbox = new CheckBox( new Combine([ "", close, "", "", fullOptions.onClick(() => { }), ""]), new Combine(["", help, ""]) , 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); }) const fullOptions2 = this.CreateWelcomePane(); State.state.fullScreenMessage.setData(fullOptions2) new FixedUiElement(`
help
`).onClick(() => { State.state.fullScreenMessage.setData(fullOptions2) }).AttachTo("help-button-mobile"); } static CreateLanguagePicker(label: string | UIElement = "") { return new DropDown(label, State.state.layoutToUse.data.supportedLanguages.map(lang => { return {value: lang, shown: lang} } ), Locale.language); } static InitLayerSelection() { const closedFilterButton = ``; const openFilterButton = ``; 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]); const layerSelection = new Combine([`

Maplayers

`, new LayerSelection()]); let layerControl = backgroundMapPicker; if (State.state.filteredLayers.data.length > 1) { 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) ); checkbox.AttachTo("filter__selection"); State.state.bm.Location.addCallback(() => { checkbox.isEnabled.setData(false); }); }); } static InitBaseMap(){ const bm = new Basemap("leafletDiv", State.state.locationControl, new VariableUiElement( State.state.locationControl.map((location) => { const mapComplete = `Mapcomplete ${State.vNumber} Report bug`; let editHere = ""; if (location !== undefined) { editHere = " | " + "" + "edit here" + "" } return mapComplete + editHere; }) )); State.state.bm = bm; 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); } static InitLayers() { const flayers: FilteredLayer[] = [] const presets: Preset[] = []; const state = State.state; for (const layer of state.layoutToUse.data.layers) { if(typeof (layer) === "string"){ throw "Layer "+layer+" was not substituted"; } 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; } presets.push(preset); } const flayer: FilteredLayer = FilteredLayer.fromDefinition(layer, generateInfo); flayers.push(flayer); QueryParameters.GetQueryParameter("layer-" + layer.id, "true") .map((str) => str !== "false", [], (b) => b.toString()) .syncWith( flayer.isDisplayed ) } State.state.filteredLayers.setData(flayers); State.state.presets.setData(presets); } }