From 92bd6414e475083eba7636f4002b95a6f2eea172 Mon Sep 17 00:00:00 2001
From: AlexanderRebai <alexander.rebai@student.hogent.be>
Date: Mon, 18 Jul 2022 09:51:49 +0000
Subject: [PATCH] laatste versie levels

---
 index.css | 13 ++++++-------
 test.ts   | 33 +++++++++++++++------------------
 2 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/index.css b/index.css
index fa09d5984..f1a4ce83e 100644
--- a/index.css
+++ b/index.css
@@ -228,7 +228,7 @@ a {
   height: min-content;
 }
 
-/* alex */
+/* slider */
 input[type="range"].vertical {
   writing-mode: bt-lr; /* IE */
   -webkit-appearance: slider-vertical; /* Chromium */
@@ -236,14 +236,13 @@ input[type="range"].vertical {
   height: 310px;
   padding: 0 5px;
 }
-/* 
-.elevatorslider::-webkit-slider-thumb {
-  -webkit-appearance: none;
+
+/* .elevatorslider::-webkit-slider-thumb {
   appearance: none;
   width: 23px;
   height: 24px;
   border: 0;
-  background: url("../MapComplete/assets/svg/bug.svg");
+  background: url("/assets/svg/bug.svg") !important;
   cursor: pointer;
 }
 
@@ -251,9 +250,9 @@ input[type="range"].vertical {
   width: 23px;
   height: 25px;
   border: 0;
-  background: url("../MapComplete/assets/svg/bug.svg");
+  background: url("/assets/svg/bug.svg") !important;
   cursor: pointer;
-} */
+}  */
 
 .border-detail {
   border-color: var(--foreground-color);
diff --git a/test.ts b/test.ts
index 55d01a9ae..21ba35181 100644
--- a/test.ts
+++ b/test.ts
@@ -5,32 +5,29 @@ import { FixedUiElement } from "./UI/Base/FixedUiElement";
 import { VariableUiElement } from "./UI/Base/VariableUIElement";
 import { FixedInputElement } from "./UI/Input/FixedInputElement";
 import Slider from "./UI/Input/Slider";
-import Toggle from "./UI/Input/Toggle";
+import Toggle, { ClickableToggle } from "./UI/Input/Toggle";
 
 const testData = ["-1", "0", "0.5", "1", "1.5", "2"]
+let slider = new Slider(0, testData.length - 1);
 
-const values = testData.map((data) => new FixedUiElement(data).onClick(() => {
-  values.map((val) => {
-    val.RemoveClass("active bg-blue-200")
-    if (val.content === data) {
-      const options = {
-        value : new UIEventSource<number>(testData.indexOf(val.content)),
-      }
-      val.SetClass("active bg-blue-200")
-      const newSlider = new Slider(0, testData.length-1, options).SetClass("flex vertical m-4 elevatorslider");
-      new Combine([valCombine, newSlider]).SetClass("flex flex-row h-10").AttachTo("extradiv")
-      console.log(slider.GetValue())
+const toggleClass = "flex border-2 border-blue-500 rounded-full w-10 h-10 place-content-center items-center"
+
+const values = testData.map((data, i) => new ClickableToggle(
+  new FixedUiElement(data).SetClass("active bg-subtle " + toggleClass), new FixedUiElement(data).SetClass(toggleClass), slider.GetValue().sync(
+    (sliderVal) => {
+      return sliderVal === i
+    },
+    [],
+    (isSelected) => {
+      return isSelected ? i : slider.GetValue().data
     }
-  })
-}).SetClass("flex flex-column bg-slate-200 w-10 h-10 border-2 border-blue-500 border-solid rounded-full place-content-center items-center m-4"))
+  ))
+  .ToggleOnClick()
+  .SetClass("flex flex-column bg-slate-200 m-4 w-10 h-10"))
 
 const valCombine = new Combine(values.reverse())
-// valCombine.AttachTo("maindiv")
-
-const slider = new Slider(0, testData.length-1);
 
 slider.SetClass("flex vertical m-4 elevatorslider")
 
 new Combine([valCombine, slider]).SetClass("flex flex-row h-10").AttachTo("extradiv")
 
-console.log(slider)