diff options
Diffstat (limited to 'fe/src/lib/PreferencesForm.svelte')
-rw-r--r-- | fe/src/lib/PreferencesForm.svelte | 145 |
1 files changed, 106 insertions, 39 deletions
diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/PreferencesForm.svelte index 95e04c1..875393c 100644 --- a/fe/src/lib/PreferencesForm.svelte +++ b/fe/src/lib/PreferencesForm.svelte | |||
@@ -1,51 +1,118 @@ | |||
1 | <script lang="ts"> | 1 | <script lang="ts"> |
2 | import { preferences } from '../stores/auth'; | 2 | import { user, preferences, token } from "../stores/auth"; |
3 | import type { Size, Preference } from '../types'; | 3 | import { createEventDispatcher, onDestroy, onMount } from "svelte"; |
4 | import { createEventDispatcher } from 'svelte'; | 4 | import type { User } from "../types"; |
5 | export let open: boolean; | 5 | |
6 | 6 | export let open: boolean; | |
7 | let preference: Preference = { | 7 | |
8 | color: "#00FF00", | 8 | let sizes: Array<any>; |
9 | size: { | 9 | let selectedSize: number = 1; |
10 | size: 8, | 10 | let color: string = "#000000"; |
11 | unit: 'oz' | 11 | |
12 | } | 12 | const dispatch = createEventDispatcher(); |
13 | } | 13 | |
14 | 14 | const unsubscribe = preferences.subscribe( | |
15 | const dispatch = createEventDispatcher(); | 15 | (value: any) => { |
16 | 16 | console.log('update value: ', value); | |
17 | preferences.subscribe((value) => { | 17 | color = value.color; |
18 | preference = value; | 18 | selectedSize = value.size_id; |
19 | }, | ||
20 | ); | ||
21 | |||
22 | function closeDialog() { | ||
23 | dispatch("close"); | ||
24 | } | ||
25 | |||
26 | async function updateUserPreferences() { | ||
27 | const res = await fetch("http://localhost:8080/api/v1/user/preferences", { | ||
28 | method: "PATCH", | ||
29 | headers: { | ||
30 | Authorization: `Bearer ${$token}`, | ||
31 | }, | ||
32 | body: JSON.stringify($preferences), | ||
19 | }); | 33 | }); |
34 | } | ||
20 | 35 | ||
21 | function onPreferencesSave(): void { | 36 | async function getUserPreferences() { |
22 | preferences.set(preference); | 37 | const res = await fetch( |
23 | dispatch('close') | 38 | `http://localhost:8080/api/v1/user/${($user as User)!.id}/preferences`, |
24 | } | 39 | { |
40 | method: "GET", | ||
41 | headers: { | ||
42 | Authorization: `Bearer ${$token}`, | ||
43 | }, | ||
44 | }, | ||
45 | ); | ||
46 | const updatePreferences = await res.json(); | ||
47 | preferences.set(updatePreferences); | ||
48 | } | ||
25 | 49 | ||
50 | async function onPreferencesSave(): Promise<void> { | ||
51 | preferences.update((value) => ({ | ||
52 | ...value!, | ||
53 | size_id: selectedSize, | ||
54 | color: color, | ||
55 | })); | ||
56 | |||
57 | await updateUserPreferences(); | ||
58 | await getUserPreferences(); | ||
59 | |||
60 | dispatch("close"); | ||
61 | } | ||
62 | |||
63 | onMount(() => { | ||
64 | fetch("http://localhost:8080/api/v1/sizes", { | ||
65 | method: "GET", | ||
66 | headers: { | ||
67 | Authorization: `Bearer ${$token}`, | ||
68 | }, | ||
69 | }) | ||
70 | .then((res) => res.json()) | ||
71 | .then((val) => (sizes = val)); | ||
72 | }); | ||
73 | |||
74 | onDestroy(() => { | ||
75 | unsubscribe(); | ||
76 | }); | ||
26 | </script> | 77 | </script> |
78 | |||
27 | <dialog {open} on:submit|preventDefault={onPreferencesSave}> | 79 | <dialog {open} on:submit|preventDefault={onPreferencesSave}> |
28 | <h2>User Preferences</h2> | 80 | <h2>User Preferences</h2> |
29 | <form method="dialog"> | 81 | <form method="dialog"> |
30 | <div class="form input group"> | 82 | <div class="form input group"> |
31 | <label for="color">Color</label> | 83 | <label for="color">Color</label> |
32 | <input id="color" name="color" type="color" bind:value={preference.color}/> | 84 | <input |
33 | </div> | 85 | id="color" |
34 | <div class="form input group"> | 86 | name="color" |
35 | <label for="size">Bottle Size</label> | 87 | type="color" |
36 | <input id="size" name="size" type="number" min="8" max="48" step="8" bind:value={preference.size.size}/> | 88 | bind:value={color} |
37 | </div> | 89 | /> |
38 | <button type="submit">Save</button> | 90 | </div> |
39 | </form> | 91 | <div class="form input group"> |
92 | <label for="size">Bottle Size</label> | ||
93 | <select | ||
94 | bind:value={selectedSize} | ||
95 | > | ||
96 | {#if sizes} | ||
97 | {#each sizes as size} | ||
98 | <option value={size.id}>{size.size} {size.unit}</option> | ||
99 | {/each} | ||
100 | {/if} | ||
101 | </select> | ||
102 | </div> | ||
103 | <button on:click={closeDialog}>Cancel</button> | ||
104 | <button type="submit">Save</button> | ||
105 | </form> | ||
40 | </dialog> | 106 | </dialog> |
107 | |||
41 | <style> | 108 | <style> |
42 | dialog { | 109 | dialog { |
43 | background: white; | 110 | background: white; |
44 | color: black; | 111 | color: black; |
45 | } | 112 | } |
46 | 113 | ||
47 | input[type="color"] { | 114 | input[type="color"] { |
48 | width: 100%; | 115 | width: 4em; |
49 | height: 100%; | 116 | height: 4em; |
50 | } | 117 | } |
51 | </style> | 118 | </style> |