diff options
Diffstat (limited to 'fe/src/lib/DataView.svelte')
-rw-r--r-- | fe/src/lib/DataView.svelte | 67 |
1 files changed, 63 insertions, 4 deletions
diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte index cd7b042..dc8acae 100644 --- a/fe/src/lib/DataView.svelte +++ b/fe/src/lib/DataView.svelte | |||
@@ -1,11 +1,24 @@ | |||
1 | <script lang='ts'> | 1 | <script lang='ts'> |
2 | import { onMount } from 'svelte'; | 2 | import { onMount } from 'svelte'; |
3 | import { token } from '../stores/auth' | 3 | import type { Preference } from '../types'; |
4 | import { token, user, preferences } from '../stores/auth' | ||
4 | import Table from './Table.svelte'; | 5 | import Table from './Table.svelte'; |
6 | import PreferencesForm from './PreferencesForm.svelte'; | ||
7 | |||
8 | const formatter = new Intl.DateTimeFormat( | ||
9 | 'en', | ||
10 | { | ||
11 | year: 'numeric', | ||
12 | month: '2-digit', | ||
13 | day: '2-digit' | ||
14 | } | ||
15 | ); | ||
5 | 16 | ||
6 | let json; | 17 | let json; |
7 | let showAddForm: boolean = false; | 18 | let showAddForm: boolean = false; |
8 | 19 | ||
20 | let statistic: Statistic = newStatistic(); | ||
21 | |||
9 | async function fetchData() { | 22 | async function fetchData() { |
10 | const res = await fetch('http://localhost:8080/api/v1/stats/', { | 23 | const res = await fetch('http://localhost:8080/api/v1/stats/', { |
11 | method: "GET", | 24 | method: "GET", |
@@ -40,7 +53,32 @@ function handleClick() { | |||
40 | } | 53 | } |
41 | 54 | ||
42 | function handleAddDialogSubmit (e) { | 55 | function handleAddDialogSubmit (e) { |
43 | console.log(e.keyCode) | 56 | console.log(statistic); |
57 | showAddForm = false; | ||
58 | } | ||
59 | |||
60 | function closeDialog () { | ||
61 | showAddForm = false; | ||
62 | } | ||
63 | |||
64 | function newStatistic (): Statistic { | ||
65 | let now = new Date(), month, day, year; | ||
66 | |||
67 | month = `${now.getMonth() + 1}`; | ||
68 | day = `${now.getDate()}`; | ||
69 | year = now.getFullYear(); | ||
70 | if (month.length < 2) | ||
71 | month = '0' + month; | ||
72 | if (day.length < 2) | ||
73 | day = '0' + day; | ||
74 | |||
75 | const date = [year, month, day].join('-'); | ||
76 | |||
77 | return { | ||
78 | user_id: $user.uuid, | ||
79 | date, | ||
80 | quantity: 1 | ||
81 | } | ||
44 | } | 82 | } |
45 | 83 | ||
46 | onMount(() => { | 84 | onMount(() => { |
@@ -50,10 +88,19 @@ onMount(() => { | |||
50 | </script> | 88 | </script> |
51 | <div> | 89 | <div> |
52 | <button on:click={submitStat}>Add Stat Test</button> | 90 | <button on:click={submitStat}>Add Stat Test</button> |
91 | <PreferencesForm /> | ||
53 | <dialog open={showAddForm} on:submit={handleAddDialogSubmit}> | 92 | <dialog open={showAddForm} on:submit={handleAddDialogSubmit}> |
93 | <h2>Add Water</h2> | ||
54 | <form method="dialog"> | 94 | <form method="dialog"> |
55 | <input name="date" type="date" /> | 95 | <div class='form input group'> |
56 | <input name="quantity" type="number" min="0" autocomplete="off"/> | 96 | <label for="date">Date:</label> |
97 | <input bind:value={statistic.date} id="date" name="date" type="date" /> | ||
98 | </div> | ||
99 | <div class='form input group'> | ||
100 | <label for="quantity">Quantity:</label> | ||
101 | <input bind:value={statistic.quantity} id="quantity" name="quantity" type="number" min="0" autocomplete="off"/> | ||
102 | </div> | ||
103 | <button on:click={closeDialog}>Cancel</button> | ||
57 | <button type="submit">Submit</button> | 104 | <button type="submit">Submit</button> |
58 | </form> | 105 | </form> |
59 | </dialog> | 106 | </dialog> |
@@ -65,3 +112,15 @@ onMount(() => { | |||
65 | {/await} | 112 | {/await} |
66 | <!-- <Chart /> --> | 113 | <!-- <Chart /> --> |
67 | </div> | 114 | </div> |
115 | |||
116 | <style> | ||
117 | dialog { | ||
118 | background: red; | ||
119 | box-shadow: 0 20px 5em 10px rgba(0,0,0,0.8); | ||
120 | } | ||
121 | dialog::backdrop { | ||
122 | padding: 20px; | ||
123 | box-shadow: 20px 20px rgba(0,0,0,0.8); | ||
124 | background-color: red; | ||
125 | } | ||
126 | </style> | ||