import {Layout} from "./Customizations/Layout"; import Locale from "./UI/i18n/Locale"; 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 {UIEventSource} from "./UI/UIEventSource"; import {UIElement} from "./UI/UIElement"; import {MoreScreen} from "./UI/MoreScreen"; import {Tag} from "./Logic/TagsFilter"; import {FilteredLayer} from "./Logic/FilteredLayer"; import {FeatureInfoBox} from "./UI/FeatureInfoBox"; import {ElementStorage} from "./Logic/ElementStorage"; import {Changes} from "./Logic/Osm/Changes"; import {OsmConnection} from "./Logic/Osm/OsmConnection"; 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 {CustomLayersPanel} from "./Logic/CustomLayersPanel"; import {CustomLayout} from "./Logic/CustomLayers"; import {Preset} from "./Customizations/LayerDefinition"; 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.name === CustomLayout.NAME) { welcome = new CustomLayersPanel(); } const fullOptions = new TabbedComponent([ {header: ``, content: welcome}, {header: ``, content: Translations.t.general.openStreetMapIntro}, {header: ``, content: new ShareScreen()}, {header: ``, content: new MoreScreen()}, ]) 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"); let dontCloseYet = true; 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 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); checkbox.AttachTo("filter__selection"); State.state.bm.Location.addCallback(() => { checkbox.isEnabled.setData(false); }); }); } static InitLayers() { const flayers: FilteredLayer[] = [] const presets: Preset[] = []; let minZoom = 0; const state = State.state; for (const layer of state.layoutToUse.data.layers) { const generateInfo = (tagsES, feature) => { return new FeatureInfoBox( feature, tagsES, layer.title, layer.elementsToShow, ) }; minZoom = Math.max(minZoom, layer.minzoom); 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); flayer.isDisplayed.setData(true) } State.state.filteredLayers.setData(flayers); State.state.presets.setData(presets); } }