import {UIElement} from "../UIElement"; import {TabbedComponent} from "../Base/TabbedComponent"; import {SubtleButton} from "../Base/SubtleButton"; import {UIEventSource} from "../../Logic/UIEventSource"; import {LayoutConfigJson} from "../../Customizations/JSON/LayoutConfigJson"; import Combine from "../Base/Combine"; import {GenerateEmpty} from "./GenerateEmpty"; import LayerPanelWithPreview from "./LayerPanelWithPreview"; import UserDetails from "../../Logic/Osm/OsmConnection"; import {MultiInput} from "../Input/MultiInput"; import TagRenderingPanel from "./TagRenderingPanel"; import SingleSetting from "./SingleSetting"; import {VariableUiElement} from "../Base/VariableUIElement"; import AvailableBaseLayers from "../../Logic/Actors/AvailableBaseLayers"; import {DropDown} from "../Input/DropDown"; import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig"; import Svg from "../../Svg"; export default class AllLayersPanel extends UIElement { private panel: UIElement; private readonly _config: UIEventSource; private readonly languages: UIEventSource; private readonly userDetails: UserDetails; private readonly currentlySelected: UIEventSource>; constructor(config: UIEventSource, languages: UIEventSource, userDetails: UserDetails) { super(undefined); this.userDetails = userDetails; this._config = config; this.languages = languages; this.createPanels(userDetails); const self = this; this.dumbMode = false; config.map(config => config.layers.length).addCallback(() => self.createPanels(userDetails)); } private createPanels(userDetails: UserDetails) { const self = this; const tabs = []; const roamingTags = new MultiInput("Add a tagrendering", () => GenerateEmpty.createEmptyTagRendering(), () => { return new TagRenderingPanel(self.languages, self.currentlySelected, self.userDetails) }, undefined, {allowMovement: true}); new SingleSetting(this._config, roamingTags, "roamingRenderings", "Roaming Renderings", "These tagrenderings are shown everywhere"); const backgroundLayers = AvailableBaseLayers.layerOverview.map(baselayer => ({shown: baselayer.name, value: baselayer.id})); const dropDown = new DropDown("Choose the default background layer", [{value: "osm",shown:"OpenStreetMap (default)"}, ...backgroundLayers]) new SingleSetting(self._config, dropDown, "defaultBackgroundId", "Default background layer", "Selects the background layer that is used by default. If this layer is not available at the given point, OSM-Carto will be ued"); const layers = this._config.data.layers; for (let i = 0; i < layers.length; i++) { tabs.push({ header: new VariableUiElement(this._config.map((config: LayoutConfigJson) => { const layer = config.layers[i]; if (typeof layer !== "string") { try { const iconTagRendering = new TagRenderingConfig(layer.icon, "icon") const icon = iconTagRendering.GetRenderValue({"id": "node/-1"}).txt; return `` } catch (e) { return Svg.bug_img // Nothing to do here } } return Svg.help_img; })), content: new LayerPanelWithPreview(this._config, this.languages, i, userDetails) }); } tabs.push({ header: Svg.layersAdd_img, content: new Combine([ "

Layer editor

", "In this tab page, you can add and edit the layers of the theme. Click the layers above or add a new layer to get started.", new SubtleButton( Svg.layersAdd_ui(), "Add a new layer" ).onClick(() => { self._config.data.layers.push(GenerateEmpty.createEmptyLayer()) self._config.ping(); }), "

Default background layer

", dropDown, "

TagRenderings for every layer

", "Define tag renderings and questions here that should be shown on every layer of the theme.", roamingTags ] ), }) this.panel = new TabbedComponent(tabs, new UIEventSource(Math.max(0, layers.length - 1))); this.Update(); } InnerRender(): string { return this.panel.Render(); } }