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> |
