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.svelte145
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>
42dialog { 109 dialog {
43 background: white; 110 background: white;
44 color: black; 111 color: black;
45} 112 }
46 113
47input[type="color"] { 114 input[type="color"] {
48 width: 100%; 115 width: 4em;
49 height: 100%; 116 height: 4em;
50} 117 }
51</style> 118</style>