diff options
Diffstat (limited to 'fe/src/lib')
-rw-r--r-- | fe/src/lib/Card.svelte | 5 | ||||
-rw-r--r-- | fe/src/lib/Column.svelte | 8 | ||||
-rw-r--r-- | fe/src/lib/DataView.svelte | 8 | ||||
-rw-r--r-- | fe/src/lib/Layout.svelte | 51 | ||||
-rw-r--r-- | fe/src/lib/Table.svelte | 10 | ||||
-rw-r--r-- | fe/src/lib/forms/AddForm.svelte | 25 | ||||
-rw-r--r-- | fe/src/lib/forms/LoginForm.svelte (renamed from fe/src/lib/LoginForm.svelte) | 6 | ||||
-rw-r--r-- | fe/src/lib/forms/PreferencesForm.svelte (renamed from fe/src/lib/PreferencesForm.svelte) | 10 | ||||
-rw-r--r-- | fe/src/lib/forms/index.ts | 10 |
9 files changed, 81 insertions, 52 deletions
diff --git a/fe/src/lib/Card.svelte b/fe/src/lib/Card.svelte index cd1e02c..0f29279 100644 --- a/fe/src/lib/Card.svelte +++ b/fe/src/lib/Card.svelte | |||
@@ -11,13 +11,12 @@ | |||
11 | 11 | ||
12 | <style> | 12 | <style> |
13 | .card { | 13 | .card { |
14 | background: #fff; | ||
15 | display: flex; | 14 | display: flex; |
16 | flex-direction: column; | 15 | flex-direction: column; |
17 | align-items: flex-start; | 16 | align-items: flex-start; |
18 | border: solid 2px #00000066; | 17 | border: solid 2px #00000066; |
19 | border-radius: 0.25em; | 18 | border-radius: 0.25em; |
20 | height: var(--height, fit-content); | 19 | height: var(--height, inherit); |
21 | overflow-y: var(--overflow, initial); | 20 | flex-grow: 2; |
22 | } | 21 | } |
23 | </style> | 22 | </style> |
diff --git a/fe/src/lib/Column.svelte b/fe/src/lib/Column.svelte index f036073..6902edf 100644 --- a/fe/src/lib/Column.svelte +++ b/fe/src/lib/Column.svelte | |||
@@ -7,7 +7,13 @@ | |||
7 | display: flex; | 7 | display: flex; |
8 | flex-direction: column; | 8 | flex-direction: column; |
9 | height: 100%; | 9 | height: 100%; |
10 | gap: var(--gap, 32px); | 10 | gap: var(--gap, 2em); |
11 | width: var(--width, initial); | 11 | width: var(--width, initial); |
12 | } | 12 | } |
13 | |||
14 | @media (min-width: 916px) { | ||
15 | .column { | ||
16 | flex-direction: column; | ||
17 | } | ||
18 | } | ||
13 | </style> \ No newline at end of file | 19 | </style> \ No newline at end of file |
diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte index ffc2fe8..1496239 100644 --- a/fe/src/lib/DataView.svelte +++ b/fe/src/lib/DataView.svelte | |||
@@ -205,12 +205,11 @@ | |||
205 | }); | 205 | }); |
206 | </script> | 206 | </script> |
207 | 207 | ||
208 | <Column --width="500px"> | 208 | <Column> |
209 | <Card --height="300px"> | 209 | <Card> |
210 | <!--<Chart />--> | ||
211 | <canvas bind:this={barCanvasRef} /> | 210 | <canvas bind:this={barCanvasRef} /> |
212 | </Card> | 211 | </Card> |
213 | <Card --height="300px"> | 212 | <Card> |
214 | <canvas bind:this={lineCanvasRef} /> | 213 | <canvas bind:this={lineCanvasRef} /> |
215 | </Card> | 214 | </Card> |
216 | </Column> | 215 | </Column> |
@@ -225,4 +224,3 @@ | |||
225 | {/await} | 224 | {/await} |
226 | </Card> | 225 | </Card> |
227 | </Column> | 226 | </Column> |
228 | <!-- <Chart /> --> | ||
diff --git a/fe/src/lib/Layout.svelte b/fe/src/lib/Layout.svelte index 2728dd3..26630d2 100644 --- a/fe/src/lib/Layout.svelte +++ b/fe/src/lib/Layout.svelte | |||
@@ -1,6 +1,6 @@ | |||
1 | <script> | 1 | <script> |
2 | import { authenticated, token, user, preferences } from "../stores/auth"; | 2 | import { authenticated, token, user, preferences } from "../stores/auth"; |
3 | import PreferencesForm from "./PreferencesForm.svelte"; | 3 | import { PreferencesForm, AddForm } from "./forms"; |
4 | import { addFormOpen } from "../stores/forms"; | 4 | import { addFormOpen } from "../stores/forms"; |
5 | 5 | ||
6 | const logout = () => { | 6 | const logout = () => { |
@@ -30,9 +30,18 @@ | |||
30 | <h1>Water</h1> | 30 | <h1>Water</h1> |
31 | </div> | 31 | </div> |
32 | <div> | 32 | <div> |
33 | <button on:click={showAddDialog}>Log Water</button> | 33 | <button on:click={showAddDialog}> |
34 | <button on:click={showPreferencesDialog}>Preference</button> | 34 | <span class="btn-icon">➕</span> |
35 | <button on:click={logout}>Logout</button> | 35 | <span class="btn-content">Log Water</span> |
36 | </button> | ||
37 | <button on:click={showPreferencesDialog}> | ||
38 | <span class="btn-icon">⚙</span> | ||
39 | <span class="btn-content">Preference</span> | ||
40 | </button> | ||
41 | <button on:click={logout}> | ||
42 | <span class="btn-icon">🔒</span> | ||
43 | <span class="btn-content">Logout</span> | ||
44 | </button> | ||
36 | </div> | 45 | </div> |
37 | </nav> | 46 | </nav> |
38 | <PreferencesForm open={preferenceFormOpen} on:close={closePreferenceDialog} /> | 47 | <PreferencesForm open={preferenceFormOpen} on:close={closePreferenceDialog} /> |
@@ -43,17 +52,30 @@ | |||
43 | </div> | 52 | </div> |
44 | 53 | ||
45 | <style> | 54 | <style> |
46 | .layout { | ||
47 | height: 100vh; | ||
48 | } | ||
49 | |||
50 | nav { | 55 | nav { |
51 | display: flex; | 56 | display: flex; |
52 | flex-direction: row; | 57 | flex-direction: row; |
53 | align-items: center; | 58 | align-items: center; |
54 | justify-content: space-between; | 59 | justify-content: space-between; |
55 | height: 64px; | 60 | height: 64px; |
56 | padding: 0 2em; | 61 | padding: 1em 0; |
62 | } | ||
63 | |||
64 | nav div button { | ||
65 | margin: 0 .5em; | ||
66 | } | ||
67 | |||
68 | nav div button:first-child { | ||
69 | margin-left: 0; | ||
70 | } | ||
71 | |||
72 | nav div button:last-child { | ||
73 | margin-right: 0; | ||
74 | } | ||
75 | |||
76 | |||
77 | nav .btn-content { | ||
78 | display: none; | ||
57 | } | 79 | } |
58 | 80 | ||
59 | nav div { | 81 | nav div { |
@@ -66,9 +88,16 @@ | |||
66 | 88 | ||
67 | #content { | 89 | #content { |
68 | display: flex; | 90 | display: flex; |
69 | flex-direction: row; | 91 | flex-direction: column; |
70 | justify-content: center; | 92 | justify-content: center; |
71 | gap: 2em; | 93 | gap: 2em; |
72 | margin-top: 4em; | 94 | margin-top: 1em; |
95 | } | ||
96 | |||
97 | @media (min-width: 916px) { | ||
98 | nav .btn-content { | ||
99 | display: inline; | ||
100 | margin-left: 1em; | ||
101 | } | ||
73 | } | 102 | } |
74 | </style> | 103 | </style> |
diff --git a/fe/src/lib/Table.svelte b/fe/src/lib/Table.svelte index 621157e..3ce3331 100644 --- a/fe/src/lib/Table.svelte +++ b/fe/src/lib/Table.svelte | |||
@@ -7,7 +7,7 @@ | |||
7 | 7 | ||
8 | export let sortBy: string = 'date'; | 8 | export let sortBy: string = 'date'; |
9 | 9 | ||
10 | type SortComparator = (a, b) => number | 10 | type SortComparator = (a:any , b:any) => number |
11 | 11 | ||
12 | function getDataKeys(data: any[]): string[] { | 12 | function getDataKeys(data: any[]): string[] { |
13 | if (!data || data.length === 0) return []; | 13 | if (!data || data.length === 0) return []; |
@@ -20,7 +20,7 @@ | |||
20 | return Object.entries(row).filter((r) => !omit.includes(r[0])); | 20 | return Object.entries(row).filter((r) => !omit.includes(r[0])); |
21 | } | 21 | } |
22 | 22 | ||
23 | function sort(arr: Array<Record<string, any>>, fn: SortComparator = (a , b) => new Date(b[sortBy]) - new Date(a[sortBy])) { | 23 | function sort(arr: Array<Record<string, any>>, fn: SortComparator = (a , b) => Date.parse(b[sortBy]) - Date.parse(a[sortBy])) { |
24 | return arr.sort(fn) | 24 | return arr.sort(fn) |
25 | } | 25 | } |
26 | 26 | ||
@@ -92,10 +92,7 @@ | |||
92 | border: solid 1px black; | 92 | border: solid 1px black; |
93 | border-collapse: collapse; | 93 | border-collapse: collapse; |
94 | overflow-y: hidden; | 94 | overflow-y: hidden; |
95 | } | 95 | width: calc(100% - 16px); |
96 | |||
97 | th { | ||
98 | text-transform: capitalize; | ||
99 | } | 96 | } |
100 | 97 | ||
101 | thead tr { | 98 | thead tr { |
@@ -108,6 +105,7 @@ | |||
108 | 105 | ||
109 | th, | 106 | th, |
110 | td { | 107 | td { |
108 | text-transform: capitalize; | ||
111 | padding: 1em; | 109 | padding: 1em; |
112 | border: 1px solid rgba(0, 0, 0, 1); | 110 | border: 1px solid rgba(0, 0, 0, 1); |
113 | } | 111 | } |
diff --git a/fe/src/lib/forms/AddForm.svelte b/fe/src/lib/forms/AddForm.svelte index f85cce6..bbc8356 100644 --- a/fe/src/lib/forms/AddForm.svelte +++ b/fe/src/lib/forms/AddForm.svelte | |||
@@ -11,21 +11,10 @@ | |||
11 | const statistic: Statistic = newStatistic(); | 11 | const statistic: Statistic = newStatistic(); |
12 | 12 | ||
13 | function newStatistic(): Statistic { | 13 | function newStatistic(): Statistic { |
14 | let now = new Date(), | 14 | let date = new Date().toString(); |
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 | 15 | ||
27 | return { | 16 | return { |
28 | user_id: $user!.uuid, | 17 | user_id: $user!.id, |
29 | date, | 18 | date, |
30 | quantity: 1 | 19 | quantity: 1 |
31 | }; | 20 | }; |
@@ -37,7 +26,7 @@ | |||
37 | 26 | ||
38 | async function handleSubmitStat() | 27 | async function handleSubmitStat() |
39 | { | 28 | { |
40 | const { date, quantity } = statistic; | 29 | const { user_id, date, quantity } = statistic; |
41 | await fetch(apiURL("stats"), { | 30 | await fetch(apiURL("stats"), { |
42 | method: "POST", | 31 | method: "POST", |
43 | headers: { | 32 | headers: { |
@@ -45,7 +34,7 @@ | |||
45 | }, | 34 | }, |
46 | body: JSON.stringify({ | 35 | body: JSON.stringify({ |
47 | date: new Date(date), | 36 | date: new Date(date), |
48 | user_id: 2, | 37 | user_id, |
49 | quantity | 38 | quantity |
50 | }) | 39 | }) |
51 | }); | 40 | }); |
@@ -54,12 +43,12 @@ | |||
54 | 43 | ||
55 | </script> | 44 | </script> |
56 | 45 | ||
57 | <dialog {open} on:submit={handleSubmitStat}> | 46 | <dialog id="addForm" {open} on:submit={handleSubmitStat}> |
58 | <h2>Add Water</h2> | 47 | <h2>Add Water</h2> |
59 | <form method="dialog"> | 48 | <form method="dialog"> |
60 | <div class="form input group"> | 49 | <div class="form input group"> |
61 | <label for="date">Date:</label> | 50 | <label for="date">Date:</label> |
62 | <input bind:value={statistic.date} id="date" name="date" type="date" /> | 51 | <input bind:value={statistic.date} id="date" name="date" type="datetime-local" /> |
63 | </div> | 52 | </div> |
64 | <div class="form input group"> | 53 | <div class="form input group"> |
65 | <label for="quantity">Quantity:</label> | 54 | <label for="quantity">Quantity:</label> |
@@ -75,4 +64,4 @@ | |||
75 | <button on:click={closeDialog}>Cancel</button> | 64 | <button on:click={closeDialog}>Cancel</button> |
76 | <button type="submit">Submit</button> | 65 | <button type="submit">Submit</button> |
77 | </form> | 66 | </form> |
78 | </dialog> \ No newline at end of file | 67 | </dialog> |
diff --git a/fe/src/lib/LoginForm.svelte b/fe/src/lib/forms/LoginForm.svelte index cf5febf..88d4479 100644 --- a/fe/src/lib/LoginForm.svelte +++ b/fe/src/lib/forms/LoginForm.svelte | |||
@@ -1,7 +1,7 @@ | |||
1 | <script lang="ts"> | 1 | <script lang="ts"> |
2 | import { token, user, preferences } from "../stores/auth"; | 2 | import { token, user, preferences } from "../../stores/auth"; |
3 | import Card from "./Card.svelte"; | 3 | import Card from "../Card.svelte"; |
4 | import { apiURL } from "../utils"; | 4 | import { apiURL } from "../../utils"; |
5 | 5 | ||
6 | let credentials: CredentialObject = { | 6 | let credentials: CredentialObject = { |
7 | username: "", | 7 | username: "", |
diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/forms/PreferencesForm.svelte index 74b8a63..79663d1 100644 --- a/fe/src/lib/PreferencesForm.svelte +++ b/fe/src/lib/forms/PreferencesForm.svelte | |||
@@ -1,8 +1,8 @@ | |||
1 | <script lang="ts"> | 1 | <script lang="ts"> |
2 | import { user, preferences, token } from "../stores/auth"; | 2 | import { user, preferences, token } from "../../stores/auth"; |
3 | import { createEventDispatcher, onDestroy, onMount } from "svelte"; | 3 | import { createEventDispatcher, onDestroy, onMount } from "svelte"; |
4 | import type { User } from "../types"; | 4 | import type { User } from "../../types"; |
5 | import { apiURL } from "../utils"; | 5 | import { apiURL } from "../../utils"; |
6 | 6 | ||
7 | export let open: boolean; | 7 | export let open: boolean; |
8 | 8 | ||
@@ -107,7 +107,7 @@ | |||
107 | </dialog> | 107 | </dialog> |
108 | 108 | ||
109 | <style> | 109 | <style> |
110 | dialog { | 110 | /* dialog { |
111 | background: white; | 111 | background: white; |
112 | color: black; | 112 | color: black; |
113 | } | 113 | } |
@@ -115,5 +115,5 @@ | |||
115 | input[type="color"] { | 115 | input[type="color"] { |
116 | width: 4em; | 116 | width: 4em; |
117 | height: 4em; | 117 | height: 4em; |
118 | } | 118 | } */ |
119 | </style> | 119 | </style> |
diff --git a/fe/src/lib/forms/index.ts b/fe/src/lib/forms/index.ts new file mode 100644 index 0000000..ac4e63b --- /dev/null +++ b/fe/src/lib/forms/index.ts | |||
@@ -0,0 +1,10 @@ | |||
1 | import AddForm from "./AddForm.svelte"; | ||
2 | import LoginForm from "./LoginForm.svelte"; | ||
3 | import PreferencesForm from "./PreferencesForm.svelte"; | ||
4 | |||
5 | |||
6 | export { | ||
7 | AddForm, | ||
8 | LoginForm, | ||
9 | PreferencesForm | ||
10 | }; \ No newline at end of file | ||