From 7bdce37fd3f18e2712e18c4e2c64cac69af0aca1 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakob.stendahl@outlook.com>
Date: Sun, 19 Sep 2021 19:43:11 +0200
Subject: :boom: Introduce new UI based on svelte, and rewrite a lot of the
 node app and the NeoRuntime

---
 .../Components/MainControls/ControlOthers.svelte   | 36 ++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src_frontend/Components/MainControls/ControlOthers.svelte

(limited to 'src_frontend/Components/MainControls/ControlOthers.svelte')

diff --git a/src_frontend/Components/MainControls/ControlOthers.svelte b/src_frontend/Components/MainControls/ControlOthers.svelte
new file mode 100644
index 0000000..862a4f5
--- /dev/null
+++ b/src_frontend/Components/MainControls/ControlOthers.svelte
@@ -0,0 +1,36 @@
+<script>
+
+    // This is a list of variables that we can change
+    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"}
+    ];
+
+</script>
+
+<style>
+    .wrapper {
+        width: 100%;
+        box-sizing: border-box;
+        border-radius: 15px;
+        margin-top: 15px;
+        padding: 15px;
+        text-align: left;
+    }
+    input {
+        width: 100%;
+    }
+</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}>
+        {:else}
+            <input type="text" id={variable.id} value={variable.value} />
+        {/if}
+    {/each}
+</div>
\ No newline at end of file
-- 
cgit v1.2.3