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