:sparkles: Make all variable-types changeable from both home and editor

3 files changed, 79 insertions, 17 deletions

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