mapcomplete/UI/LayerSelection.ts

46 lines
1.5 KiB
TypeScript
Raw Normal View History

2020-07-22 11:49:01 +02:00
import { UIElement } from "./UIElement";
import { FilteredLayer } from "../Logic/FilteredLayer";
import { CheckBox } from "./Base/CheckBox";
2020-07-22 11:56:40 +02:00
import Combine from "./Base/Combine";
2020-07-22 11:49:01 +02:00
export class LayerSelection extends UIElement{
private readonly _checkboxes: UIElement[];
constructor(layers: FilteredLayer[]) {
super(undefined);
this._checkboxes = [];
2020-07-23 14:46:25 +02:00
2020-07-22 11:49:01 +02:00
for (const layer of layers) {
2020-07-22 11:56:40 +02:00
this._checkboxes.push(new CheckBox(
2020-07-22 13:33:26 +02:00
new Combine([
`<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2020-07-22 14:57:35 +02:00
<path d="M3 7.28571L10.8261 15L23 3" stroke="#003B8B" stroke-width="4" stroke-linejoin="round"/>
2020-07-22 13:33:26 +02:00
</svg>`,
2020-07-23 14:46:25 +02:00
`<img width="20" height="20" src="${layer.layerDef.icon}" alt="">`,
2020-07-22 13:33:26 +02:00
layer.layerDef.name]),
new Combine([
`<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2020-07-22 14:57:35 +02:00
<path d="M3 7.28571L10.8261 15L23 3" stroke="#ffffff" stroke-width="4" stroke-linejoin="round"/>
2020-07-22 13:33:26 +02:00
</svg>`,
2020-07-23 14:46:25 +02:00
`<img width="20" height="20" src="${layer.layerDef.icon}" alt="">`,
2020-07-22 13:33:26 +02:00
layer.layerDef.name]),
2020-07-22 12:05:29 +02:00
layer.isDisplayed));
2020-07-22 11:49:01 +02:00
}
}
InnerRender(): string {
let html = ``;
for (const checkBox of this._checkboxes) {
const checkBoxHTML = checkBox.Render();
const checkBoxListItem = `<li>${checkBoxHTML}</li>`;
html = html + checkBoxListItem;
}
return `<ul>${html}</ul>`;
}
}