diff options
Diffstat (limited to 'fe/src/lib/PreferencesForm.svelte')
-rw-r--r-- | fe/src/lib/PreferencesForm.svelte | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/PreferencesForm.svelte new file mode 100644 index 0000000..781866c --- /dev/null +++ b/fe/src/lib/PreferencesForm.svelte | |||
@@ -0,0 +1,45 @@ | |||
1 | <script lang="ts"> | ||
2 | import { preferences } from '../stores/auth'; | ||
3 | import type { Size, Preference } from '../types'; | ||
4 | export let open: boolean = true; | ||
5 | |||
6 | let preference: Preference = { | ||
7 | color: "#00FF00", | ||
8 | size: { | ||
9 | size: 8, | ||
10 | unit: 'oz' | ||
11 | } | ||
12 | } | ||
13 | |||
14 | preferences.subscribe((value) => { | ||
15 | preference = value; | ||
16 | }); | ||
17 | |||
18 | function onPreferencesSave(): void { | ||
19 | preferences.set(preferences); | ||
20 | } | ||
21 | </script> | ||
22 | <dialog {open}> | ||
23 | <h2>User Preferences</h2> | ||
24 | <form method="dialog"> | ||
25 | <div class="form input group"> | ||
26 | <label>Color</label> | ||
27 | <input type="color" bind:value={preference.color}/> | ||
28 | </div> | ||
29 | <div class="form input group"> | ||
30 | <label>Bottle Size</label> | ||
31 | <select bind:value={preference.size.size}> | ||
32 | {#each [8,16,24,32,40,48] as size} | ||
33 | <option>{ size }</option> | ||
34 | {/each} | ||
35 | </select> | ||
36 | </div> | ||
37 | <button type="submit">Save</button> | ||
38 | </form> | ||
39 | </dialog> | ||
40 | <style> | ||
41 | dialog { | ||
42 | background: white; | ||
43 | color: black; | ||
44 | } | ||
45 | </style> | ||