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.svelte45
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">
2import { preferences } from '../stores/auth';
3import 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>
41dialog {
42 background: white;
43 color: black;
44}
45</style>