diff options
author | Zach Berwaldt <zberwaldt@tutamail.com> | 2024-03-07 23:16:22 -0500 |
---|---|---|
committer | Zach Berwaldt <zberwaldt@tutamail.com> | 2024-03-07 23:16:22 -0500 |
commit | 8fab2d03bce82e4dee798ebffb1e93c557f62a4b (patch) | |
tree | 3d1c769e5f0a1791f45b549b96df30e7f66b7a67 /fe | |
parent | 831b6f0167b9c1747d128b4a5a648d4de42ff0a9 (diff) |
feat: Update authentication route and add comments to exported members
- The authentication route in the API has been updated to use a new router setup function.
- Comments have been added to all exported members of the `auth.go` module in the internal controllers package.
Diffstat (limited to 'fe')
-rw-r--r-- | fe/src/http.ts | 60 | ||||
-rw-r--r-- | fe/src/lib/DataView.svelte | 53 | ||||
-rw-r--r-- | fe/src/lib/Table.svelte | 13 |
3 files changed, 114 insertions, 12 deletions
diff --git a/fe/src/http.ts b/fe/src/http.ts new file mode 100644 index 0000000..cc5a906 --- /dev/null +++ b/fe/src/http.ts | |||
@@ -0,0 +1,60 @@ | |||
1 | export default class HttpClient { | ||
2 | private static instance: HttpClient; | ||
3 | baseURL: string; | ||
4 | |||
5 | private constructor(baseURL: string) { | ||
6 | this.baseURL = baseURL; | ||
7 | } | ||
8 | |||
9 | private getURL(endpoint: string): URL { | ||
10 | return new URL(endpoint, this.baseURL) | ||
11 | } | ||
12 | |||
13 | public static getInstance(): HttpClient { | ||
14 | if (!HttpClient.instance) { | ||
15 | const baseUrl = import.meta.env?.VITE_API_BASE_URL ?? 'http://localhost:8080/api/v1'; | ||
16 | HttpClient.instance = new HttpClient(baseUrl); | ||
17 | } | ||
18 | |||
19 | return HttpClient.instance; | ||
20 | } | ||
21 | |||
22 | async get({ endpoint }: IHttpParameters): Promise<Response> { | ||
23 | const url = this.getURL(endpoint); | ||
24 | const response = await fetch(url, { | ||
25 | method: 'GET', | ||
26 | headers: headers, | ||
27 | }); | ||
28 | return response.json(); | ||
29 | } | ||
30 | |||
31 | async post({ endpoint }: IHttpParameters): Promise<Response> { | ||
32 | const url = this.getURL(endpoint); | ||
33 | const response = await fetch(url, { | ||
34 | method: 'POST', | ||
35 | body: JSON.stringify(body), | ||
36 | headers: headers, | ||
37 | }); | ||
38 | return response.json(); | ||
39 | } | ||
40 | |||
41 | async patch({ endpoint, authenticated, headers }: IHttpParameters): Promise<Response> { | ||
42 | const url = this.getURL(endpoint); | ||
43 | if (authenticated) { | ||
44 | |||
45 | } | ||
46 | const response: Response = await fetch(url) | ||
47 | } | ||
48 | |||
49 | async delete({ endpoint, authenticated }: IHttpParameters): Promise<Response> { | ||
50 | const url = this.getURL(endpoint); | ||
51 | if (authenticated) { } | ||
52 | const response = await fetch() | ||
53 | } | ||
54 | } | ||
55 | |||
56 | interface IHttpParameters { | ||
57 | endpoint: string; | ||
58 | authenticated: boolean; | ||
59 | headers: Headers | ||
60 | } | ||
diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte index 7d62a43..0a6b81b 100644 --- a/fe/src/lib/DataView.svelte +++ b/fe/src/lib/DataView.svelte | |||
@@ -1,5 +1,6 @@ | |||
1 | <script lang="ts"> | 1 | <script lang="ts"> |
2 | import { onDestroy, onMount } from "svelte"; | 2 | import { onDestroy, onMount } from "svelte"; |
3 | import HttpClient from "../http"; | ||
3 | import { token } from "../stores/auth"; | 4 | import { token } from "../stores/auth"; |
4 | import { addFormOpen } from "../stores/forms"; | 5 | import { addFormOpen } from "../stores/forms"; |
5 | import Table from "./Table.svelte"; | 6 | import Table from "./Table.svelte"; |
@@ -36,7 +37,7 @@ | |||
36 | } | 37 | } |
37 | 38 | ||
38 | async function fetchDailyUserStatistics() { | 39 | async function fetchDailyUserStatistics() { |
39 | const res = await fetch("http://localhost:8080/api/v1/stats/totals/", { | 40 | const res = await fetch("http://localhost:8080/api/v1/stats/daily/", { |
40 | method: "GET", | 41 | method: "GET", |
41 | headers: { | 42 | headers: { |
42 | Authorization: `Bearer ${$token}` | 43 | Authorization: `Bearer ${$token}` |
@@ -99,9 +100,29 @@ | |||
99 | }, | 100 | }, |
100 | options: { | 101 | options: { |
101 | responsive: true, | 102 | responsive: true, |
103 | maintainAspectRatio: false, | ||
104 | scales: { | ||
105 | y: { | ||
106 | suggestedMax: 30, | ||
107 | beginAtZero: true, | ||
108 | ticks: { | ||
109 | autoSkip: true, | ||
110 | stepSize: 5 | ||
111 | } | ||
112 | } | ||
113 | }, | ||
102 | plugins: { | 114 | plugins: { |
103 | legend: { | 115 | legend: { |
104 | display: false | 116 | display: false |
117 | }, | ||
118 | title: { | ||
119 | display: true, | ||
120 | text: "Weekly Breakdown" | ||
121 | }, | ||
122 | subtitle: { | ||
123 | display: true, | ||
124 | text: "Water consumption over the last week", | ||
125 | padding: {bottom: 10} | ||
105 | } | 126 | } |
106 | } | 127 | } |
107 | } | 128 | } |
@@ -127,9 +148,29 @@ | |||
127 | }, | 148 | }, |
128 | options: { | 149 | options: { |
129 | responsive: true, | 150 | responsive: true, |
151 | maintainAspectRatio: false, | ||
152 | scales: { | ||
153 | y: { | ||
154 | beginAtZero: true, | ||
155 | suggestedMax: 10, | ||
156 | ticks: { | ||
157 | autoSkip: true, | ||
158 | stepSize: 1 | ||
159 | } | ||
160 | } | ||
161 | }, | ||
130 | plugins: { | 162 | plugins: { |
131 | legend: { | 163 | legend: { |
132 | display: false | 164 | display: false |
165 | }, | ||
166 | title: { | ||
167 | display: true, | ||
168 | text: "Daily Total" | ||
169 | }, | ||
170 | subtitle: { | ||
171 | display: true, | ||
172 | text: "Water Drank Today", | ||
173 | padding: {bottom: 10} | ||
133 | } | 174 | } |
134 | } | 175 | } |
135 | } | 176 | } |
@@ -137,13 +178,13 @@ | |||
137 | } | 178 | } |
138 | 179 | ||
139 | function updateWeeklyTotalsChart(result) { | 180 | function updateWeeklyTotalsChart(result) { |
140 | [,lastSevenDaysData] = result; | 181 | [, lastSevenDaysData] = result; |
141 | lineChart.data.datasets[0].data = lastSevenDaysData; | 182 | lineChart.data.datasets[0].data = lastSevenDaysData; |
142 | lineChart.update(); | 183 | lineChart.update(); |
143 | } | 184 | } |
144 | 185 | ||
145 | function updateDailyUserTotalsChart(result) { | 186 | function updateDailyUserTotalsChart(result) { |
146 | [,userTotalsData] = result; | 187 | [, userTotalsData] = result; |
147 | barChart.data.datasets[0].data = userTotalsData; | 188 | barChart.data.datasets[0].data = userTotalsData; |
148 | barChart.update(); | 189 | barChart.update(); |
149 | } | 190 | } |
@@ -163,10 +204,10 @@ | |||
163 | </script> | 204 | </script> |
164 | 205 | ||
165 | <Column --width="500px"> | 206 | <Column --width="500px"> |
166 | <Card> | 207 | <Card --height="300px"> |
167 | <canvas bind:this={barCanvasRef} width="" /> | 208 | <canvas bind:this={barCanvasRef} /> |
168 | </Card> | 209 | </Card> |
169 | <Card> | 210 | <Card --height="300px"> |
170 | <canvas bind:this={lineCanvasRef} /> | 211 | <canvas bind:this={lineCanvasRef} /> |
171 | </Card> | 212 | </Card> |
172 | </Column> | 213 | </Column> |
diff --git a/fe/src/lib/Table.svelte b/fe/src/lib/Table.svelte index d1cd7da..621157e 100644 --- a/fe/src/lib/Table.svelte +++ b/fe/src/lib/Table.svelte | |||
@@ -5,6 +5,10 @@ | |||
5 | export let omit: string[] = ["id"]; | 5 | export let omit: string[] = ["id"]; |
6 | export let title: string | undefined = undefined; | 6 | export let title: string | undefined = undefined; |
7 | 7 | ||
8 | export let sortBy: string = 'date'; | ||
9 | |||
10 | type SortComparator = (a, b) => number | ||
11 | |||
8 | function getDataKeys(data: any[]): string[] { | 12 | function getDataKeys(data: any[]): string[] { |
9 | if (!data || data.length === 0) return []; | 13 | if (!data || data.length === 0) return []; |
10 | return Object.keys(data[0]) | 14 | return Object.keys(data[0]) |
@@ -16,11 +20,8 @@ | |||
16 | return Object.entries(row).filter((r) => !omit.includes(r[0])); | 20 | return Object.entries(row).filter((r) => !omit.includes(r[0])); |
17 | } | 21 | } |
18 | 22 | ||
19 | 23 | function sort(arr: Array<Record<string, any>>, fn: SortComparator = (a , b) => new Date(b[sortBy]) - new Date(a[sortBy])) { | |
20 | let limitedData: Array<any> = []; | 24 | return arr.sort(fn) |
21 | |||
22 | if (data && (data as any[]).length > 0) { | ||
23 | limitedData = (data as any[]).slice(0, 4); | ||
24 | } | 25 | } |
25 | 26 | ||
26 | const formatter = new Intl.DateTimeFormat("en", { | 27 | const formatter = new Intl.DateTimeFormat("en", { |
@@ -62,7 +63,7 @@ | |||
62 | {/if} | 63 | {/if} |
63 | <tbody> | 64 | <tbody> |
64 | {#if data} | 65 | {#if data} |
65 | {#each limitedData as row} | 66 | {#each sort(data) as row} |
66 | <tr> | 67 | <tr> |
67 | {#each getRow(row) as datum} | 68 | {#each getRow(row) as datum} |
68 | <td>{formatDatum(datum)}</td> | 69 | <td>{formatDatum(datum)}</td> |