mapcomplete/UI/LayerSelection.ts

58 lines
2.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";
import State from "../State";
import Translations from "./i18n/Translations";
2020-09-17 19:11:16 +02:00
import {FixedUiElement} from "./Base/FixedUiElement";
import {VariableUiElement} from "./Base/VariableUIElement";
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) {
2020-09-17 20:59:05 +02:00
let iconUrl = "./asets/checkbox.svg";
let iconUrlBlank = "";
2020-07-31 16:17:16 +02:00
if (layer.layerDef.icon && layer.layerDef.icon !== "") {
2020-09-17 20:59:05 +02:00
iconUrl = layer.layerDef.icon as string;
iconUrlBlank = layer.layerDef.icon as string;
2020-07-31 16:17:16 +02:00
}
2020-09-17 20:59:05 +02:00
const icon = new FixedUiElement(`<img style="height:2em;max-width: 2em;" src="${iconUrl}">`);
2020-09-17 19:11:16 +02:00
2020-09-17 20:59:05 +02:00
let iconUnselected: UIElement;
iconUnselected = new FixedUiElement(`<img style="height:2em;max-width: 2em; opacity:0.2;" src="${iconUrl}">`);
2020-09-17 19:11:16 +02:00
const name = Translations.WT(layer.layerDef.name).Clone()
2020-09-17 19:11:16 +02:00
.SetStyle("font-size:large;margin-left: 0.5em;");
2020-07-23 16:28:19 +02:00
2020-09-17 20:59:05 +02:00
2020-09-17 19:11:16 +02:00
const zoomStatus = new VariableUiElement(State.state.locationControl.map(location => {
2020-09-17 20:59:05 +02:00
if (location.zoom < layer.layerDef.minzoom) {
2020-09-17 19:11:16 +02:00
return Translations.t.general.zoomInToSeeThisLayer
.SetClass("alert")
2020-09-17 20:59:05 +02:00
.SetStyle("display: block ruby;width:min-content;")
2020-09-17 19:11:16 +02:00
.Render();
}
return ""
}))
2020-09-17 20:59:05 +02:00
const style = "display:flex;align-items:center;"
2020-07-31 16:17:16 +02:00
this._checkboxes.push(new CheckBox(
2020-09-17 20:59:05 +02:00
new Combine([icon, name, zoomStatus]).SetStyle(style),
new Combine([iconUnselected, "<del>", name, "</del>", zoomStatus]).SetStyle(style),
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
}
}