diff options
| author | Zach Berwaldt <zberwaldt@tutamail.com> | 2024-03-06 21:53:07 -0500 |
|---|---|---|
| committer | Zach Berwaldt <zberwaldt@tutamail.com> | 2024-03-06 21:53:07 -0500 |
| commit | 5fa57845052655883120ba4d19a85d8756fb8d8c (patch) | |
| tree | d2d5ad1dd3fd8d9acaca9ced09612b50218f06b0 /fe | |
| parent | cf2113e77edabf8e3a632c7b76c769752039ba88 (diff) | |
[FEAT] Refactor API main file and models
This commit refactors the `main.go` file in the API directory, as well as the related models in the `models.go` file. The changes include:
- Reordering imports and removing unnecessary imports
- Fixing error messages to be more descriptive
- Handling database connections more efficiently with deferred closures
- Handling errors and returning appropriate error responses
- Adding proper JSON bindings for POST requests
- Adding new views in the database scripts for aggregated statistics and daily user statistics
No changes were made to imports and requires.
Diffstat (limited to 'fe')
| -rw-r--r-- | fe/src/lib/DataView.svelte | 130 | ||||
| -rw-r--r-- | fe/src/lib/forms/AddForm.svelte | 13 |
2 files changed, 77 insertions, 66 deletions
diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte index 2b1b8b9..7d62a43 100644 --- a/fe/src/lib/DataView.svelte +++ b/fe/src/lib/DataView.svelte | |||
| @@ -9,8 +9,6 @@ | |||
| 9 | import AddForm from "./forms/AddForm.svelte"; | 9 | import AddForm from "./forms/AddForm.svelte"; |
| 10 | 10 | ||
| 11 | let json: Promise<any>; | 11 | let json: Promise<any>; |
| 12 | let totals: Promise<any>; | ||
| 13 | let userStats: Promise<any>; | ||
| 14 | 12 | ||
| 15 | let barCanvasRef: HTMLCanvasElement; | 13 | let barCanvasRef: HTMLCanvasElement; |
| 16 | let lineCanvasRef: HTMLCanvasElement; | 14 | let lineCanvasRef: HTMLCanvasElement; |
| @@ -18,6 +16,10 @@ | |||
| 18 | let lineChart: any; | 16 | let lineChart: any; |
| 19 | 17 | ||
| 20 | let lastSevenDays: string[]; | 18 | let lastSevenDays: string[]; |
| 19 | let lastSevenDaysData: number[]; | ||
| 20 | |||
| 21 | let userTotalsLabels: string[]; | ||
| 22 | let userTotalsData: number[]; | ||
| 21 | 23 | ||
| 22 | async function fetchData() { | 24 | async function fetchData() { |
| 23 | const res = await fetch("http://localhost:8080/api/v1/stats/", { | 25 | const res = await fetch("http://localhost:8080/api/v1/stats/", { |
| @@ -33,24 +35,27 @@ | |||
| 33 | } | 35 | } |
| 34 | } | 36 | } |
| 35 | 37 | ||
| 36 | async function fetchTotals() { | 38 | async function fetchDailyUserStatistics() { |
| 37 | const res = await fetch("http://localhost:8080/api/v1/stats/totals/", { | 39 | const res = await fetch("http://localhost:8080/api/v1/stats/totals/", { |
| 38 | method: 'GET', | 40 | method: "GET", |
| 39 | mode: 'no-cors', | ||
| 40 | headers: { | 41 | headers: { |
| 41 | Authorization: `Bearer ${$token}` | 42 | Authorization: `Bearer ${$token}` |
| 42 | } | 43 | } |
| 43 | }); | 44 | }); |
| 44 | 45 | ||
| 45 | if (res.ok) { | 46 | if (res.ok) { |
| 46 | totals = res.json(); | 47 | const json = await res.json(); |
| 48 | let labels = json.map(d => d.name); | ||
| 49 | let data = json.map(d => d.total); | ||
| 50 | return [labels, data]; | ||
| 47 | } else { | 51 | } else { |
| 48 | throw new Error("There was a problem with your request"); | 52 | throw new Error("There was a problem with your request"); |
| 49 | } | 53 | } |
| 54 | |||
| 50 | } | 55 | } |
| 51 | 56 | ||
| 52 | async function fetchStatsForUser() { | 57 | async function fetchWeeklyTotals() { |
| 53 | const res = await fetch("http://localhost:8080/api/v1/stats/user/1aa668f3-7527-4a67-9c24-fdf307542eeb", { | 58 | const res = await fetch("http://localhost:8080/api/v1/stats/weekly/", { |
| 54 | method: "GET", | 59 | method: "GET", |
| 55 | headers: { | 60 | headers: { |
| 56 | Authorization: `Bearer ${$token}` | 61 | Authorization: `Bearer ${$token}` |
| @@ -58,22 +63,15 @@ | |||
| 58 | }); | 63 | }); |
| 59 | 64 | ||
| 60 | if (res.ok) { | 65 | if (res.ok) { |
| 61 | userStats = res.json(); | 66 | const json = await res.json(); |
| 67 | let labels = json.map(d => d.date); | ||
| 68 | let data = json.map(d => d.total); | ||
| 69 | return [labels, data]; | ||
| 62 | } else { | 70 | } else { |
| 63 | throw new Error("There was a problem with your request"); | 71 | throw new Error("There was a problem with your request"); |
| 64 | } | 72 | } |
| 65 | } | 73 | } |
| 66 | 74 | ||
| 67 | function getLastSevenDays() { | ||
| 68 | const result = []; | ||
| 69 | for (let i = 0; i < 7; i++) { | ||
| 70 | let d = new Date(); | ||
| 71 | d.setDate(d.getDate() - i); | ||
| 72 | result.push(d.toISOString().substring(0, 10)); | ||
| 73 | } | ||
| 74 | return result; | ||
| 75 | } | ||
| 76 | |||
| 77 | function closeDialog() { | 75 | function closeDialog() { |
| 78 | addFormOpen.set(false); | 76 | addFormOpen.set(false); |
| 79 | } | 77 | } |
| @@ -81,61 +79,79 @@ | |||
| 81 | function onStatisticAdd() { | 79 | function onStatisticAdd() { |
| 82 | closeDialog(); | 80 | closeDialog(); |
| 83 | fetchData(); | 81 | fetchData(); |
| 82 | fetchWeeklyTotals().then(updateWeeklyTotalsChart).catch(err => console.error(err)); | ||
| 83 | fetchDailyUserStatistics().then(updateDailyUserTotalsChart).catch(err => console.error(err)); | ||
| 84 | } | 84 | } |
| 85 | 85 | ||
| 86 | onMount(() => { | 86 | function setupWeeklyTotalsChart(result) { |
| 87 | fetchData(); | 87 | [lastSevenDays, lastSevenDaysData] = result; |
| 88 | // fetchTotals(); | 88 | lineChart = new Chart(lineCanvasRef, { |
| 89 | fetchStatsForUser(); | 89 | type: "line", |
| 90 | lastSevenDays = getLastSevenDays(); | ||
| 91 | barChart = new Chart(barCanvasRef, { | ||
| 92 | type: "bar", | ||
| 93 | data: { | 90 | data: { |
| 94 | labels: lastSevenDays, | 91 | labels: lastSevenDays, |
| 95 | datasets: [ | 92 | datasets: [ |
| 96 | { | 93 | { |
| 97 | label: "Zach", | 94 | label: "Totals", |
| 98 | data: [1, 2, 8, 2, 5, 5, 1], | 95 | data: lastSevenDaysData, |
| 99 | backgroundColor: "rgba(255, 192, 192, 0.2)", | 96 | backgroundColor: "rgba(255, 192, 192, 0.2)" |
| 100 | borderColor: "rgba(75, 192, 192, 1)", | ||
| 101 | borderWidth: 1 | ||
| 102 | }, { | ||
| 103 | label: "Parker", | ||
| 104 | data: [6, 1, 1, 4, 3, 5, 1], | ||
| 105 | backgroundColor: "rgba(75, 192, 192, 0.2)", | ||
| 106 | borderColor: "rgba(75, 192, 192, 1)", | ||
| 107 | borderWidth: 1 | ||
| 108 | } | 97 | } |
| 109 | ] | 98 | ] |
| 110 | }, | 99 | }, |
| 111 | options: { | 100 | options: { |
| 112 | responsive: true | 101 | responsive: true, |
| 102 | plugins: { | ||
| 103 | legend: { | ||
| 104 | display: false | ||
| 105 | } | ||
| 106 | } | ||
| 113 | } | 107 | } |
| 114 | }); | 108 | }); |
| 115 | lineChart = new Chart(lineCanvasRef, { | 109 | } |
| 116 | type: "line", | 110 | |
| 111 | function setupDailyUserTotalsChart(result) { | ||
| 112 | [userTotalsLabels, userTotalsData] = result; | ||
| 113 | |||
| 114 | barChart = new Chart(barCanvasRef, { | ||
| 115 | type: "bar", | ||
| 117 | data: { | 116 | data: { |
| 118 | labels: lastSevenDays, | 117 | labels: userTotalsLabels, |
| 119 | datasets: [ | 118 | datasets: [ |
| 120 | { | 119 | { |
| 121 | label: "Zach", | 120 | data: userTotalsData, |
| 122 | data: [1, 2, 8, 2, 5, 5, 1], | 121 | backgroundColor: [ |
| 123 | backgroundColor: "rgba(255, 192, 192, 0.2)", | 122 | "#330000", |
| 124 | borderColor: "rgba(75, 192, 192, 1)", | 123 | "rgba(100, 200, 192, 0.2)" |
| 125 | borderWidth: 1 | 124 | ] |
| 126 | }, { | ||
| 127 | label: "Parker", | ||
| 128 | data: [6, 1, 1, 4, 3, 5, 1], | ||
| 129 | backgroundColor: "rgba(75, 192, 192, 0.2)", | ||
| 130 | borderColor: "rgba(75, 192, 192, 1)", | ||
| 131 | borderWidth: 1 | ||
| 132 | } | 125 | } |
| 133 | ] | 126 | ] |
| 134 | }, | 127 | }, |
| 135 | options: { | 128 | options: { |
| 136 | responsive: true | 129 | responsive: true, |
| 130 | plugins: { | ||
| 131 | legend: { | ||
| 132 | display: false | ||
| 133 | } | ||
| 134 | } | ||
| 137 | } | 135 | } |
| 138 | }); | 136 | }); |
| 137 | } | ||
| 138 | |||
| 139 | function updateWeeklyTotalsChart(result) { | ||
| 140 | [,lastSevenDaysData] = result; | ||
| 141 | lineChart.data.datasets[0].data = lastSevenDaysData; | ||
| 142 | lineChart.update(); | ||
| 143 | } | ||
| 144 | |||
| 145 | function updateDailyUserTotalsChart(result) { | ||
| 146 | [,userTotalsData] = result; | ||
| 147 | barChart.data.datasets[0].data = userTotalsData; | ||
| 148 | barChart.update(); | ||
| 149 | } | ||
| 150 | |||
| 151 | onMount(() => { | ||
| 152 | fetchData(); | ||
| 153 | fetchWeeklyTotals().then(setupWeeklyTotalsChart); | ||
| 154 | fetchDailyUserStatistics().then(setupDailyUserTotalsChart); | ||
| 139 | }); | 155 | }); |
| 140 | 156 | ||
| 141 | onDestroy(() => { | 157 | onDestroy(() => { |
| @@ -164,14 +180,6 @@ | |||
| 164 | <p>{error}</p> | 180 | <p>{error}</p> |
| 165 | {/await} | 181 | {/await} |
| 166 | </Card> | 182 | </Card> |
| 167 | <Card> | ||
| 168 | <button on:click={() => fetchTotals()}>Get totals</button> | ||
| 169 | {#await totals then data} | ||
| 170 | {JSON.stringify(data)} | ||
| 171 | {:catch error} | ||
| 172 | <p>{error}</p> | ||
| 173 | {/await} | ||
| 174 | </Card> | ||
| 175 | </Column> | 183 | </Column> |
| 176 | <!-- <Chart /> --> | 184 | <!-- <Chart /> --> |
| 177 | 185 | ||
diff --git a/fe/src/lib/forms/AddForm.svelte b/fe/src/lib/forms/AddForm.svelte index f22e5f4..4520b1b 100644 --- a/fe/src/lib/forms/AddForm.svelte +++ b/fe/src/lib/forms/AddForm.svelte | |||
| @@ -34,20 +34,23 @@ | |||
| 34 | dispatch("close"); | 34 | dispatch("close"); |
| 35 | } | 35 | } |
| 36 | 36 | ||
| 37 | async function handleSubmitStat() { | 37 | async function handleSubmitStat() |
| 38 | const response = await fetch("http://localhost:8080/api/v1/stats/", { | 38 | { |
| 39 | const { date, quantity } = statistic; | ||
| 40 | await fetch("http://localhost:8080/api/v1/stats/", { | ||
| 39 | method: "POST", | 41 | method: "POST", |
| 40 | headers: { | 42 | headers: { |
| 41 | Authorization: `Bearer ${$token}` | 43 | Authorization: `Bearer ${$token}` |
| 42 | }, | 44 | }, |
| 43 | body: JSON.stringify({ | 45 | body: JSON.stringify({ |
| 44 | date: new Date(), | 46 | date: new Date(date), |
| 45 | user_id: 1, | 47 | user_id: 2, |
| 46 | quantity: 3 | 48 | quantity |
| 47 | }) | 49 | }) |
| 48 | }); | 50 | }); |
| 49 | dispatch("submit"); | 51 | dispatch("submit"); |
| 50 | } | 52 | } |
| 53 | |||
| 51 | </script> | 54 | </script> |
| 52 | 55 | ||
| 53 | <dialog {open} on:submit={handleSubmitStat}> | 56 | <dialog {open} on:submit={handleSubmitStat}> |
