From f243dc8d7527cde3d5b5a4f6e659cf7604f5ae2a Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakobste@uio.no>
Date: Thu, 21 Oct 2021 14:12:12 +0200
Subject: :sparkles: Make all variable-types changeable from both home and
 editor

---
 src_frontend/Components/Editor/Controls.svelte | 28 +++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

(limited to 'src_frontend/Components/Editor/Controls.svelte')

diff --git a/src_frontend/Components/Editor/Controls.svelte b/src_frontend/Components/Editor/Controls.svelte
index 302aa7a..4b5c8b6 100644
--- a/src_frontend/Components/Editor/Controls.svelte
+++ b/src_frontend/Components/Editor/Controls.svelte
@@ -13,12 +13,17 @@
     }
     function setPower() { openSocket.emit("power:set", power_on); }
     function setVar(ev) {
-        openSocket.emit("var:set", ev.target.id, ev.target.value);
+        if (ev.target.type == "checkbox") {
+            openSocket.emit("var:set", ev.target.id, ev.target.checked);
+        } else {
+            openSocket.emit("var:set", ev.target.id, ev.target.value);
+        }
     }
 
     openSocket.on("power", (power) => power_on = power);
     openSocket.on("brightness", (value) => brightnessValue = value);
     openSocket.on("vars", (vars) => variables = vars);
+    openSocket.on("vars", (vars) => console.log(vars));
     openSocket.on("var", (name, value) => {
         name = name.replace("variable/", "");
         if (value.value == null) {
@@ -27,6 +32,7 @@
             variables[name] = value;
         }
         variables = variables;
+        console.log(variables);
     });
 
     onMount(() => {
@@ -75,9 +81,25 @@
     </div>
 
     {#each Object.entries(variables) as [name, value]}
-    <div>
-        <label for="{name}"><PrettyVar varText={name} /></label>
+    <div class:var-group={["BOOL", "TRIGGER"].includes(value.type)}>
+    <label for="{name}"><PrettyVar varText={name} /></label>
+        {#if value.type == "INT"}
+        <div class="var-group">
+            <input type="range" id="{name}" bind:value={value.value} on:change={setVar} min={value.min} max={value.max} />
+            {value.value}
+        </div>
+        {:else if value.type == "FLOAT"}
+        <div class="var-group">
+            <input type="range" id="{name}" bind:value={value.value} on:change={setVar} min={value.min} max={value.max} step={value.step} />
+            {value.value}
+        </div>
+        {:else if value.type == "BOOL"}
+            <input type="checkbox" id="{name}" bind:checked={value.value} on:change={setVar} />
+        {:else if value.type == "TRIGGER"}
+            <button type="button" id="{name}" value="true" on:click={setVar}>Trigger</button>
+        {:else}
         <input type="text" id="{name}" bind:value={value.value} on:blur={setVar} />
+        {/if}
     </div>
     {/each}
 </div>
\ No newline at end of file
-- 
cgit v1.2.3