mapcomplete/UI/LayerSelection.ts

40 lines
1.2 KiB
TypeScript
Raw Normal View History

import {UIElement} from "./UIElement";
import {CheckBox} from "./Input/CheckBox";
2020-07-22 11:56:40 +02:00
import Combine from "./Base/Combine";
2020-07-29 15:05:19 +02:00
import {Img} from "./Img";
2020-07-31 16:17:16 +02:00
import {State} from "../State";
import Translations from "./i18n/Translations";
2020-07-22 11:49:01 +02:00
2020-07-31 16:17:16 +02:00
export class LayerSelection extends UIElement {
2020-07-22 11:49:01 +02:00
private readonly _checkboxes: UIElement[];
2020-07-31 16:17:16 +02:00
constructor() {
super(undefined);
this._checkboxes = [];
for (const layer of State.state.filteredLayers.data) {
const checkbox = Img.checkmark;
let icon = "";
2020-07-31 16:17:16 +02:00
if (layer.layerDef.icon && layer.layerDef.icon !== "") {
icon = `<img width="20" height="20" src="${layer.layerDef.icon}">`
2020-07-31 16:17:16 +02:00
}
const name = Translations.WT(layer.layerDef.name).Clone()
.SetStyle("font-size:large;");
2020-07-23 16:28:19 +02:00
2020-07-31 16:17:16 +02:00
this._checkboxes.push(new CheckBox(
new Combine([checkbox, icon, name]),
new Combine([Img.no_checkmark, icon, name]),
layer.isDisplayed)
.SetStyle("margin:0.3em;")
);
}
2020-07-22 11:49:01 +02:00
}
InnerRender(): string {
return new Combine(this._checkboxes)
.SetStyle("display:flex;flex-direction:column;")
.Render();
2020-07-22 11:49:01 +02:00
}
}