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"; 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; 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 layers = this._config.data.layers; for (let i = 0; i < layers.length; i++) { tabs.push({ header: "", content: new LayerPanelWithPreview(this._config, this.languages, i, userDetails) }); } tabs.push({ header: "", 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( "./assets/layersAdd.svg", "Add a new layer" ).onClick(() => { self._config.data.layers.push(GenerateEmpty.createEmptyLayer()) self._config.ping(); }), "

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(); } }