From 0e3d9d930b8ca7ae46d8d96c663570d204bcba49 Mon Sep 17 00:00:00 2001
From: Bavo Vanderghote <bavovanderghote@Bavos-MacBook-Pro.local>
Date: Wed, 22 Jul 2020 11:49:01 +0200
Subject: [PATCH] basic checkbox implementation

---
 UI/Base/CheckBox.ts  |  5 +++--
 UI/LayerSelection.ts | 31 +++++++++++++++++++++++++++++++
 index.html           |  2 +-
 index.ts             | 10 +++-------
 4 files changed, 38 insertions(+), 10 deletions(-)
 create mode 100644 UI/LayerSelection.ts

diff --git a/UI/Base/CheckBox.ts b/UI/Base/CheckBox.ts
index fcf52cd..ba8085e 100644
--- a/UI/Base/CheckBox.ts
+++ b/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();
         }
     }
     
diff --git a/UI/LayerSelection.ts b/UI/LayerSelection.ts
new file mode 100644
index 0000000..973b26e
--- /dev/null
+++ b/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>`;
+    }
+    
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index bb7c26e..328fddc 100644
--- a/index.html
+++ b/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>
diff --git a/index.ts b/index.ts
index 022e0c2..30798b2 100644
--- a/index.ts
+++ b/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 --------