basic checkbox implementation

This commit is contained in:
Bavo Vanderghote 2020-07-22 11:49:01 +02:00
parent 00fb99defe
commit 0e3d9d930b
4 changed files with 38 additions and 10 deletions

View file

@ -1,6 +1,7 @@
import {UIElement} from "../UIElement"; import {UIElement} from "../UIElement";
import {UIEventSource} from "../UIEventSource"; import {UIEventSource} from "../UIEventSource";
import { FilteredLayer } from "../../Logic/FilteredLayer"; import { FilteredLayer } from "../../Logic/FilteredLayer";
import Translations from "../../UI/i18n/Translations";
export class CheckBox extends UIElement{ export class CheckBox extends UIElement{
@ -24,9 +25,9 @@ export class CheckBox extends UIElement{
InnerRender(): string { InnerRender(): string {
if (this._data.data) { if (this._data.data) {
return this._showEnabled; return Translations.W(this._showEnabled).Render();
} else { } else {
return this._showDisabled; return Translations.W(this._showDisabled).Render();
} }
} }

31
UI/LayerSelection.ts Normal file
View file

@ -0,0 +1,31 @@
import { UIElement } from "./UIElement";
import { FilteredLayer } from "../Logic/FilteredLayer";
import { CheckBox } from "./Base/CheckBox";
export class LayerSelection extends UIElement{
private readonly _checkboxes: UIElement[];
constructor(layers: FilteredLayer[]) {
super(undefined);
this._checkboxes = [];
for (const layer of layers) {
this._checkboxes.push(new CheckBox(layer.isDisplayed, `isEnabled ${layer.layerDef.name}`, `isDisabled ${layer.layerDef.name}`));
}
}
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>`;
}
}

View file

@ -55,7 +55,7 @@
</button> </button>
<div class="filter__content"> <div class="filter__content">
<p>Maplayers</p> <p>Maplayers</p>
<ul id="filter__layers"></ul> <div id="filter__selection" class="filter__layers"></div>
</div> </div>
<!-- </div> --> <!-- </div> -->
</div> </div>

View file

@ -32,6 +32,8 @@ import {DropDown} from "./UI/Input/DropDown";
import {FixedInputElement} from "./UI/Input/FixedInputElement"; import {FixedInputElement} from "./UI/Input/FixedInputElement";
import {FixedUiElement} from "./UI/Base/FixedUiElement"; import {FixedUiElement} from "./UI/Base/FixedUiElement";
import ParkingType from "./Customizations/Questions/bike/ParkingType"; import ParkingType from "./Customizations/Questions/bike/ParkingType";
import { LayerDefinition } from "./Customizations/LayerDefinition";
import { LayerSelection } from "./UI/LayerSelection";
// --------------------- Read the URL parameters ----------------- // --------------------- Read the URL parameters -----------------
@ -312,13 +314,7 @@ locationControl.ping();
// --------------- Setting up filter ui -------- // --------------- Setting up filter ui --------
for (let i = 0; i < flayers.length; i++) { new LayerSelection(flayers).AttachTo("filter__selection");
const listItem = document.createElement(`li`);
listItem.setAttribute(`id`,`${flayers[i].name}`)
document.querySelector(`#filter__layers`).appendChild(listItem);
new CheckBox(flayers[i].isDisplayed, flayers[i])
.AttachTo(flayers[i].name);
}
// --------------- Setting up toggle button for filter ui -------- // --------------- Setting up toggle button for filter ui --------