aboutsummaryrefslogtreecommitdiff
path: root/fe/src/lib/PreferencesForm.svelte
diff options
context:
space:
mode:
Diffstat (limited to 'fe/src/lib/PreferencesForm.svelte')
-rw-r--r--fe/src/lib/PreferencesForm.svelte32
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">
2import { preferences } from '../stores/auth'; 2 import { preferences } from '../stores/auth';
3import 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
47input[type="color"] {
48 width: 100%;
49 height: 100%;
50}
45</style> 51</style>