import {UIElement} from "../UI/UIElement"; import {State} from "../State"; import Translations from "../UI/i18n/Translations"; import {UIEventSource} from "../UI/UIEventSource"; import {AllKnownLayouts} from "../Customizations/AllKnownLayouts"; import Combine from "../UI/Base/Combine"; import {Img} from "../UI/Img"; import {CheckBox} from "../UI/Input/CheckBox"; import {CustomLayersState} from "./CustomLayersState"; import {VerticalCombine} from "../UI/Base/VerticalCombine"; import {FixedUiElement} from "../UI/Base/FixedUiElement"; import {CustomLayout} from "./CustomLayers"; import {SubtleButton} from "../UI/Base/SubtleButton"; export class CustomLayersPanel extends UIElement { private checkboxes: UIElement[] = []; private updateButton : UIElement; constructor() { super(State.state.favourteLayers); this.ListenTo(State.state.osmConnection.userDetails); const t = Translations.t.favourite; const favs = State.state.favourteLayers.data; this.updateButton = new SubtleButton("./assets/reload.svg", t.reload) .onClick(() => { State.state.layerUpdater.ForceRefresh(); CustomLayersState.InitFavouriteLayers(State.state); State.state.layoutToUse.ping(); }) const controls = new Map>(); for (const layout of AllKnownLayouts.layoutsList) { if(layout.name === CustomLayout.NAME){ continue; } if (layout.hideFromOverview && State.state.osmConnection.userDetails.data.name !== "Pieter Vander Vennet") { continue } const header = new Combine([ `
`, "", layout.title, "
", layout.description ?? "", "
", ], 'custom-layer-panel-header') this.checkboxes.push(header); for (const layer of layout.layers) { const image = (layer.icon ? `` : Img.checkmark); const noimage = (layer.icon ? `` : Img.no_checkmark); const content = new Combine([ "", "", layer.name ?? "", " ", layer.description !== undefined ? new Combine(["
", layer.description]) : "", "
"]) const cb = new CheckBox( new Combine([ image, content ]), new Combine([ "", noimage, "", "", content, "" ]), controls[layer.id] ?? (favs.indexOf(layer.id) >= 0) ); cb.clss = "custom-layer-checkbox" controls[layer.id] = cb.isEnabled; cb.isEnabled.addCallback((isEnabled) => { if (isEnabled) { CustomLayersState.AddFavouriteLayer(layer.id) } else { CustomLayersState.RemoveFavouriteLayer(layer.id); } }) this.checkboxes.push(cb); } State.state.favourteLayers.addCallback((layers) => { for (const layerId of layers) { controls[layerId]?.setData(true); } }) } } InnerRender(): string { const t = Translations.t.favourite; const userDetails = State.state.osmConnection.userDetails.data; if(!userDetails.loggedIn){ return t.loginNeeded.Render(); } return new Combine([ t.panelIntro, this.updateButton, ...this.checkboxes ], "custom-layer-panel").Render(); } }