62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
import {UIElement} from "./UIElement";
|
|
import {CheckBox} from "./Input/CheckBox";
|
|
import Combine from "./Base/Combine";
|
|
import {Img} from "./Img";
|
|
import {State} from "../State";
|
|
import Translations from "./i18n/Translations";
|
|
import {FixedUiElement} from "./Base/FixedUiElement";
|
|
import {VariableUiElement} from "./Base/VariableUIElement";
|
|
|
|
export class LayerSelection extends UIElement {
|
|
|
|
private readonly _checkboxes: UIElement[];
|
|
|
|
constructor() {
|
|
super(undefined);
|
|
this._checkboxes = [];
|
|
|
|
for (const layer of State.state.filteredLayers.data) {
|
|
const checkbox = Img.checkmark;
|
|
let icon : UIElement;
|
|
if (layer.layerDef.icon && layer.layerDef.icon !== "") {
|
|
icon = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${layer.layerDef.icon}">`);
|
|
}else{
|
|
icon = new FixedUiElement(Img.checkmark);
|
|
}
|
|
|
|
let iconUnselected : UIElement;
|
|
if (layer.layerDef.icon && layer.layerDef.icon !== "") {
|
|
iconUnselected = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${layer.layerDef.icon}">`);
|
|
}else{
|
|
iconUnselected = new FixedUiElement("");
|
|
}
|
|
iconUnselected.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.zoomInToSeeThisLayer
|
|
.SetClass("alert")
|
|
.Render();
|
|
}
|
|
return ""
|
|
}))
|
|
this._checkboxes.push(new CheckBox(
|
|
new Combine([icon, name, zoomStatus]),
|
|
new Combine([iconUnselected, "<del>",name,"</del>", zoomStatus]),
|
|
layer.isDisplayed)
|
|
.SetStyle("margin:0.3em;")
|
|
);
|
|
}
|
|
}
|
|
|
|
InnerRender(): string {
|
|
return new Combine(this._checkboxes)
|
|
.SetStyle("display:flex;flex-direction:column;")
|
|
.Render();
|
|
}
|
|
|
|
} |