basic checkbox implementation
This commit is contained in:
parent
00fb99defe
commit
0e3d9d930b
4 changed files with 38 additions and 10 deletions
|
@ -1,6 +1,7 @@
|
|||
import {UIElement} from "../UIElement";
|
||||
import {UIEventSource} from "../UIEventSource";
|
||||
import { FilteredLayer } from "../../Logic/FilteredLayer";
|
||||
import Translations from "../../UI/i18n/Translations";
|
||||
|
||||
|
||||
export class CheckBox extends UIElement{
|
||||
|
@ -24,9 +25,9 @@ export class CheckBox extends UIElement{
|
|||
|
||||
InnerRender(): string {
|
||||
if (this._data.data) {
|
||||
return this._showEnabled;
|
||||
return Translations.W(this._showEnabled).Render();
|
||||
} else {
|
||||
return this._showDisabled;
|
||||
return Translations.W(this._showDisabled).Render();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
31
UI/LayerSelection.ts
Normal file
31
UI/LayerSelection.ts
Normal 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>`;
|
||||
}
|
||||
|
||||
}
|
|
@ -55,7 +55,7 @@
|
|||
</button>
|
||||
<div class="filter__content">
|
||||
<p>Maplayers</p>
|
||||
<ul id="filter__layers"></ul>
|
||||
<div id="filter__selection" class="filter__layers"></div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
|
10
index.ts
10
index.ts
|
@ -32,6 +32,8 @@ import {DropDown} from "./UI/Input/DropDown";
|
|||
import {FixedInputElement} from "./UI/Input/FixedInputElement";
|
||||
import {FixedUiElement} from "./UI/Base/FixedUiElement";
|
||||
import ParkingType from "./Customizations/Questions/bike/ParkingType";
|
||||
import { LayerDefinition } from "./Customizations/LayerDefinition";
|
||||
import { LayerSelection } from "./UI/LayerSelection";
|
||||
|
||||
|
||||
// --------------------- Read the URL parameters -----------------
|
||||
|
@ -312,13 +314,7 @@ locationControl.ping();
|
|||
|
||||
// --------------- Setting up filter ui --------
|
||||
|
||||
for (let i = 0; i < flayers.length; i++) {
|
||||
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);
|
||||
}
|
||||
new LayerSelection(flayers).AttachTo("filter__selection");
|
||||
|
||||
// --------------- Setting up toggle button for filter ui --------
|
||||
|
||||
|
|
Loading…
Reference in a new issue