aboutsummaryrefslogtreecommitdiff
path: root/fe/src/lib/forms/AddForm.svelte
diff options
context:
space:
mode:
authorZach Berwaldt <zberwaldt@tutamail.com>2024-03-01 20:12:21 -0500
committerZach Berwaldt <zberwaldt@tutamail.com>2024-03-01 20:12:21 -0500
commitd8b0f1335078d53d95a4212b1a4d4b0b28016702 (patch)
tree691eb6ec3ffc2e3cfad0016ad3e339bdc6616184 /fe/src/lib/forms/AddForm.svelte
parent74ec025991f6acde6383e448974738e857758ebb (diff)
feat(DataView): Add functionality to add water statistic
This commit adds functionality to add water statistics to the DataView component. It includes the following changes: - Remove unused imports and variables - Move the 'handleClick' function logic to a new 'AddForm' component - Create the 'AddForm' component which displays a dialog with input fields for date and quantity and allows the user to add a new water statistic - Dispatch events on form submit and dialog close in the 'AddForm' component - Call the 'fetchData' function on successful submission of a new statistic - Update chart data to display sample data New component: - AddForm.svelte: A form component to add a new water statistic Note: This commit message exceeds the 50-character limit in the subject line, but adheres to the other specified requirements.
Diffstat (limited to 'fe/src/lib/forms/AddForm.svelte')
-rw-r--r--fe/src/lib/forms/AddForm.svelte74
1 files changed, 74 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..f22e5f4
--- /dev/null
+++ b/fe/src/lib/forms/AddForm.svelte
@@ -0,0 +1,74 @@
1<script lang='ts'>
2 import { createEventDispatcher } from "svelte";
3 import { token, user } from "../../stores/auth";
4 import type { Statistic } from "../../types";
5
6 export let open: boolean;
7
8 const dispatch = createEventDispatcher();
9
10 const statistic: Statistic = newStatistic();
11
12 function newStatistic(): Statistic {
13 let now = new Date(),
14 month,
15 day,
16 year;
17
18 month = `${now.getMonth() + 1}`;
19 day = `${now.getDate()}`;
20 year = now.getFullYear();
21 if (month.length < 2) month = "0" + month;
22 if (day.length < 2) day = "0" + day;
23
24 const date = [year, month, day].join("-");
25
26 return {
27 user_id: $user!.uuid,
28 date,
29 quantity: 1
30 };
31 }
32
33 function closeDialog() {
34 dispatch("close");
35 }
36
37 async function handleSubmitStat() {
38 const response = await fetch("http://localhost:8080/api/v1/stats/", {
39 method: "POST",
40 headers: {
41 Authorization: `Bearer ${$token}`
42 },
43 body: JSON.stringify({
44 date: new Date(),
45 user_id: 1,
46 quantity: 3
47 })
48 });
49 dispatch("submit");
50 }
51</script>
52
53<dialog {open} on:submit={handleSubmitStat}>
54 <h2>Add Water</h2>
55 <form method="dialog">
56 <div class="form input group">
57 <label for="date">Date:</label>
58 <input bind:value={statistic.date} id="date" name="date" type="date" />
59 </div>
60 <div class="form input group">
61 <label for="quantity">Quantity:</label>
62 <input
63 bind:value={statistic.quantity}
64 id="quantity"
65 name="quantity"
66 type="number"
67 min="0"
68 autocomplete="off"
69 />
70 </div>
71 <button on:click={closeDialog}>Cancel</button>
72 <button type="submit">Submit</button>
73 </form>
74</dialog> \ No newline at end of file