diff options
Diffstat (limited to 'fe/src/lib/forms/AddForm.svelte')
-rw-r--r-- | fe/src/lib/forms/AddForm.svelte | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/fe/src/lib/forms/AddForm.svelte b/fe/src/lib/forms/AddForm.svelte new file mode 100644 index 0000000..f85cce6 --- /dev/null +++ b/fe/src/lib/forms/AddForm.svelte | |||
@@ -0,0 +1,78 @@ | |||
1 | <script lang='ts'> | ||
2 | import { createEventDispatcher } from "svelte"; | ||
3 | import { token, user } from "../../stores/auth"; | ||
4 | import type { Statistic } from "../../types"; | ||
5 | import { apiURL } from "../../utils"; | ||
6 | |||
7 | export let open: boolean; | ||
8 | |||
9 | const dispatch = createEventDispatcher(); | ||
10 | |||
11 | const statistic: Statistic = newStatistic(); | ||
12 | |||
13 | function newStatistic(): Statistic { | ||
14 | let now = new Date(), | ||
15 | month, | ||
16 | day, | ||
17 | year; | ||
18 | |||
19 | month = `${now.getMonth() + 1}`; | ||
20 | day = `${now.getDate()}`; | ||
21 | year = now.getFullYear(); | ||
22 | if (month.length < 2) month = "0" + month; | ||
23 | if (day.length < 2) day = "0" + day; | ||
24 | |||
25 | const date = [year, month, day].join("-"); | ||
26 | |||
27 | return { | ||
28 | user_id: $user!.uuid, | ||
29 | date, | ||
30 | quantity: 1 | ||
31 | }; | ||
32 | } | ||
33 | |||
34 | function closeDialog() { | ||
35 | dispatch("close"); | ||
36 | } | ||
37 | |||
38 | async function handleSubmitStat() | ||
39 | { | ||
40 | const { date, quantity } = statistic; | ||
41 | await fetch(apiURL("stats"), { | ||
42 | method: "POST", | ||
43 | headers: { | ||
44 | Authorization: `Bearer ${$token}` | ||
45 | }, | ||
46 | body: JSON.stringify({ | ||
47 | date: new Date(date), | ||
48 | user_id: 2, | ||
49 | quantity | ||
50 | }) | ||
51 | }); | ||
52 | dispatch("submit"); | ||
53 | } | ||
54 | |||
55 | </script> | ||
56 | |||
57 | <dialog {open} on:submit={handleSubmitStat}> | ||
58 | <h2>Add Water</h2> | ||
59 | <form method="dialog"> | ||
60 | <div class="form input group"> | ||
61 | <label for="date">Date:</label> | ||
62 | <input bind:value={statistic.date} id="date" name="date" type="date" /> | ||
63 | </div> | ||
64 | <div class="form input group"> | ||
65 | <label for="quantity">Quantity:</label> | ||
66 | <input | ||
67 | bind:value={statistic.quantity} | ||
68 | id="quantity" | ||
69 | name="quantity" | ||
70 | type="number" | ||
71 | min="0" | ||
72 | autocomplete="off" | ||
73 | /> | ||
74 | </div> | ||
75 | <button on:click={closeDialog}>Cancel</button> | ||
76 | <button type="submit">Submit</button> | ||
77 | </form> | ||
78 | </dialog> \ No newline at end of file | ||