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/ComponentLib/Toggle.svelte            | 50 +++++++++++++++++
 src_frontend/Components/Editor/Controls.svelte     | 28 ++++++++--
 .../MainControls/ControlComponents.svelte          |  6 ++-
 .../Components/MainControls/ControlOthers.svelte   | 62 +++++++++++++++++-----
 4 files changed, 129 insertions(+), 17 deletions(-)
 create mode 100644 src_frontend/ComponentLib/Toggle.svelte

(limited to 'src_frontend')

diff --git a/src_frontend/ComponentLib/Toggle.svelte b/src_frontend/ComponentLib/Toggle.svelte
new file mode 100644
index 0000000..bd24273
--- /dev/null
+++ b/src_frontend/ComponentLib/Toggle.svelte
@@ -0,0 +1,50 @@
+<script>
+    export let checked = false;
+    export let id;
+</script>
+
+<style>
+.toggle {
+    --width: 40px;
+    --height: calc(var(--width) / 2);
+    --border-radius: calc(var(--height) / 2);
+
+    display: inline-block;
+    cursor: pointer;
+}
+.toggle__input {
+    display: none;
+}
+.toggle__fill {
+    position: relative;
+    width: var(--width);
+    height: var(--height);
+    border-radius: var(--border-radius);
+    background: #dddddd;
+    transition: background 0.2s;
+}
+.toggle__fill::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: var(--height);
+    width: var(--height);
+    background: #ffffff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+    border-radius: var(--border-radius);
+    transition: transform 0.2s;
+}
+.toggle__input:checked ~ .toggle__fill {
+    background: #009578;
+}
+
+.toggle__input:checked ~ .toggle__fill::after {
+    transform: translateX(var(--height));
+}
+</style>
+
+<label class="toggle" for="{id}">
+    <input class="toggle__input" id="{id}" name="{id}" type="checkbox" bind:checked={checked} on:change>
+    <div class="toggle__fill"></div>
+</label>
\ No newline at end of file
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
diff --git a/src_frontend/Components/MainControls/ControlComponents.svelte b/src_frontend/Components/MainControls/ControlComponents.svelte
index 71c522a..f12ccbb 100644
--- a/src_frontend/Components/MainControls/ControlComponents.svelte
+++ b/src_frontend/Components/MainControls/ControlComponents.svelte
@@ -59,7 +59,7 @@
                 if (value.value == null) {
                     delete variables[name];
                 } else {
-                    variables[name] = value.value;
+                    variables[name] = value;
                 }
                 variables = variables;
         }
@@ -143,5 +143,7 @@
     {#if Object.keys(colorVariables).length > 0}
         <ControlColors on:change={setColor} bind:colorVariables={colorVariables} />
     {/if}
-    <ControlOthers />
+    {#if Object.keys(variables).length > 0}
+    <ControlOthers bind:variables={variables} />
+    {/if}
 </div>
\ No newline at end of file
diff --git a/src_frontend/Components/MainControls/ControlOthers.svelte b/src_frontend/Components/MainControls/ControlOthers.svelte
index 390daf9..4261c64 100644
--- a/src_frontend/Components/MainControls/ControlOthers.svelte
+++ b/src_frontend/Components/MainControls/ControlOthers.svelte
@@ -1,13 +1,16 @@
 <script>
+	import { openSocket } from "../../stores/socketStore";
+    import Toggle from "../../ComponentLib/Toggle.svelte";
 
-    // This is a list of variables that we can change
-    export let variables = [
-        {id: 1, name: "Speed", type: "range", value: 20, min: 0, max: 100},
-        {id: 2, name: "Tingle intensity", type: "range", value: 40, min: 0, max: 255},
-        {id: 3, name: "Amount of tingle", type: "range", value: 90, min: 0, max: 100},
-        {id: 4, name: "Variable of unknown type", type: "date", value: "January"}
-    ];
+    export let variables = {};
 
+    function setVar(ev) {
+        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);
+        }
+    };
 </script>
 
 <style>
@@ -19,18 +22,53 @@
         padding: 15px;
         text-align: left;
     }
+    label {
+        width: 100%;
+    }
+    .var-group {
+        display: flex;
+        margin-top: 5px;
+    }
     input {
         width: 100%;
     }
+    button {
+        width: 100%;
+        padding: 10px;
+        background-color: var(--grey-300);
+        border: none;
+        border-radius: 15px;
+        margin-top: 5px;
+    }
+    button:hover { filter: brightness(0.9); }
+    button:active { filter: brightness(0.85); }
+
 </style>
 
 <div class="wrapper drop-shadow">
-    {#each variables as variable}
-        <label for={variable.id}>{variable.name}</label>
-        {#if variable.type == "range"}
-            <input type="range" id={variable.id} min={variable.min} max={variable.max} value={variable.value}>
+    {#each Object.entries(variables) as [name, value]}
+    <div class:var-group={["BOOL"].includes(value.type)}>
+        {#if !["TRIGGER"].includes(value.type)}
+        <label for={name}>{name}</label>
+        {/if}
+
+        {#if value.type == "INT"}
+        <div class="var-group">
+            <input type="range" id={name} min={value.min} max={value.max} bind:value={value.value} on:change={setVar}>
+            {value.value}
+        </div>
+        {:else if value.type == "FLOAT"}
+        <div class="var-group">
+            <input type="range" id={name} min={value.min} max={value.max} step={value.step} bind:value={value.value} on:change={setVar}>
+            {value.value}
+        </div>
+        {:else if value.type == "BOOL"}
+        <Toggle 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 {name}</button>
         {:else}
-            <input type="text" id={variable.id} value={variable.value} />
+            <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