import {UIEventSource} from "../../Logic/UIEventSource"; import {UIElement} from "../UIElement"; import {VariableUiElement} from "../Base/VariableUIElement"; import State from "../../State"; import CheckBox from "../Input/CheckBox"; import Combine from "../Base/Combine"; import {FixedUiElement} from "../Base/FixedUiElement"; import Translations from "../i18n/Translations"; /** * Shows the panel with all layers and a toggle for each of them */ export default class LayerSelection extends UIElement { private readonly _checkboxes: UIElement[]; constructor() { super(undefined); this._checkboxes = []; for (const layer of State.state.filteredLayers.data) { const leafletStyle = layer.layerDef.GenerateLeafletStyle( new UIEventSource({id: "node/-1"}), false) const leafletHtml = leafletStyle.icon.html; const icon = new FixedUiElement(leafletHtml.Render()) .SetClass("single-layer-selection-toggle") let iconUnselected: UIElement = new FixedUiElement(leafletHtml.Render()) .SetClass("single-layer-selection-toggle") .SetStyle("opacity:0.2;"); const name = Translations.WT(layer.layerDef.name).Clone() .SetStyle("font-size:large;margin-left: 0.5em;"); const zoomStatus = new VariableUiElement(State.state.locationControl.map(location => { if (location.zoom < layer.layerDef.minzoom) { return Translations.t.general.layerSelection.zoomInToSeeThisLayer .SetClass("alert") .SetStyle("display: block ruby;width:min-content;") .Render(); } return "" })) const style = "display:flex;align-items:center;flex-wrap:wrap;" this._checkboxes.push(new CheckBox( new Combine([icon, name, zoomStatus]).SetStyle(style), new Combine([iconUnselected, "", name, "", zoomStatus]).SetStyle(style), layer.isDisplayed) .SetStyle("margin:0.3em;") ); } } InnerRender(): string { return new Combine(this._checkboxes) .SetStyle("display:flex;flex-direction:column;") .Render(); } }