blob: 4261c642cf8cf66fbe48e41e881a9a54499970e9 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
<script>
import { openSocket } from "../../stores/socketStore";
import Toggle from "../../ComponentLib/Toggle.svelte";
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>
.wrapper {
width: 100%;
box-sizing: border-box;
border-radius: 15px;
margin-top: 15px;
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 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={name} bind:value={value.value} on:blur={setVar} />
{/if}
</div>
{/each}
</div>
|
