basic checkbox implementation

UI/Base/CheckBox.ts

@@ -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();
         }
     }
     

UI/LayerSelection.ts

@@ -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>`;
+    }
+    
+}

index.html

@@ -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>

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++) {
+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 --------