diff options
Diffstat (limited to 'fe/src/lib/PreferencesForm.svelte')
-rw-r--r-- | fe/src/lib/PreferencesForm.svelte | 32 |
1 files changed, 19 insertions, 13 deletions
diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/PreferencesForm.svelte index 781866c..95e04c1 100644 --- a/fe/src/lib/PreferencesForm.svelte +++ b/fe/src/lib/PreferencesForm.svelte | |||
@@ -1,7 +1,8 @@ | |||
1 | <script lang="ts"> | 1 | <script lang="ts"> |
2 | import { preferences } from '../stores/auth'; | 2 | import { preferences } from '../stores/auth'; |
3 | import type { Size, Preference } from '../types'; | 3 | import type { Size, Preference } from '../types'; |
4 | export let open: boolean = true; | 4 | import { createEventDispatcher } from 'svelte'; |
5 | export let open: boolean; | ||
5 | 6 | ||
6 | let preference: Preference = { | 7 | let preference: Preference = { |
7 | color: "#00FF00", | 8 | color: "#00FF00", |
@@ -10,29 +11,29 @@ import type { Size, Preference } from '../types'; | |||
10 | unit: 'oz' | 11 | unit: 'oz' |
11 | } | 12 | } |
12 | } | 13 | } |
14 | |||
15 | const dispatch = createEventDispatcher(); | ||
13 | 16 | ||
14 | preferences.subscribe((value) => { | 17 | preferences.subscribe((value) => { |
15 | preference = value; | 18 | preference = value; |
16 | }); | 19 | }); |
17 | 20 | ||
18 | function onPreferencesSave(): void { | 21 | function onPreferencesSave(): void { |
19 | preferences.set(preferences); | 22 | preferences.set(preference); |
23 | dispatch('close') | ||
20 | } | 24 | } |
25 | |||
21 | </script> | 26 | </script> |
22 | <dialog {open}> | 27 | <dialog {open} on:submit|preventDefault={onPreferencesSave}> |
23 | <h2>User Preferences</h2> | 28 | <h2>User Preferences</h2> |
24 | <form method="dialog"> | 29 | <form method="dialog"> |
25 | <div class="form input group"> | 30 | <div class="form input group"> |
26 | <label>Color</label> | 31 | <label for="color">Color</label> |
27 | <input type="color" bind:value={preference.color}/> | 32 | <input id="color" name="color" type="color" bind:value={preference.color}/> |
28 | </div> | 33 | </div> |
29 | <div class="form input group"> | 34 | <div class="form input group"> |
30 | <label>Bottle Size</label> | 35 | <label for="size">Bottle Size</label> |
31 | <select bind:value={preference.size.size}> | 36 | <input id="size" name="size" type="number" min="8" max="48" step="8" 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 | </div> |
37 | <button type="submit">Save</button> | 38 | <button type="submit">Save</button> |
38 | </form> | 39 | </form> |
@@ -42,4 +43,9 @@ dialog { | |||
42 | background: white; | 43 | background: white; |
43 | color: black; | 44 | color: black; |
44 | } | 45 | } |
46 | |||
47 | input[type="color"] { | ||
48 | width: 100%; | ||
49 | height: 100%; | ||
50 | } | ||
45 | </style> | 51 | </style> |