import {UIElement} from "../UI/UIElement"; import {State} from "../State"; import Translations from "../UI/i18n/Translations"; import {UIEventSource} from "./UIEventSource"; import {AllKnownLayouts} from "../Customizations/AllKnownLayouts"; import Combine from "../UI/Base/Combine"; import {Img} from "../UI/Img"; import {CheckBox} from "../UI/Input/CheckBox"; import {VerticalCombine} from "../UI/Base/VerticalCombine"; import {FixedUiElement} from "../UI/Base/FixedUiElement"; import {SubtleButton} from "../UI/Base/SubtleButton"; import {PersonalLayout} from "./PersonalLayout"; export class PersonalLayersPanel extends UIElement { private checkboxes: UIElement[] = []; private updateButton: UIElement; constructor() { super(State.state.favouriteLayers); this.ListenTo(State.state.osmConnection.userDetails); const t = Translations.t.favourite; const favs = State.state.favouriteLayers.data ?? []; this.updateButton = new SubtleButton("./assets/reload.svg", t.reload) .onClick(() => { State.state.layerUpdater.ForceRefresh(); State.state.layoutToUse.ping(); }) const controls = new Map>(); for (const layout of AllKnownLayouts.layoutsList) { if (layout.name === PersonalLayout.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); let name = layer.name; if(typeof (name) !== "string"){ name = name.InnerRender(); } const content = new Combine([ "", "", 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) => { const favs = State.state.favouriteLayers; if (isEnabled) { favs.data.push(layer.id); } else { favs.data.splice(favs.data.indexOf(layer.id), 1); } favs.ping(); }) this.checkboxes.push(cb); } State.state.favouriteLayers.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(); } }