From 8fab2d03bce82e4dee798ebffb1e93c557f62a4b Mon Sep 17 00:00:00 2001
From: Zach Berwaldt <zberwaldt@tutamail.com>
Date: Thu, 7 Mar 2024 23:16:22 -0500
Subject: 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.
---
 fe/src/http.ts             | 60 ++++++++++++++++++++++++++++++++++++++++++++++
 fe/src/lib/DataView.svelte | 53 +++++++++++++++++++++++++++++++++++-----
 fe/src/lib/Table.svelte    | 13 +++++-----
 3 files changed, 114 insertions(+), 12 deletions(-)
 create mode 100644 fe/src/http.ts

(limited to 'fe/src')

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 @@
+export default class HttpClient {
+    private static instance: HttpClient;
+    baseURL: string;
+    
+    private constructor(baseURL: string) {
+        this.baseURL = baseURL;
+    }
+    
+    private getURL(endpoint: string): URL {
+        return new URL(endpoint, this.baseURL)
+    }
+
+    public static getInstance(): HttpClient {
+        if (!HttpClient.instance) {
+            const baseUrl = import.meta.env?.VITE_API_BASE_URL ?? 'http://localhost:8080/api/v1';
+            HttpClient.instance = new HttpClient(baseUrl);
+        }
+
+        return HttpClient.instance;
+    }
+
+    async get({ endpoint }: IHttpParameters): Promise<Response> {
+        const url = this.getURL(endpoint);
+        const response = await fetch(url, {
+            method: 'GET',
+            headers: headers,
+        });
+        return response.json();
+    }
+
+    async post({ endpoint }: IHttpParameters): Promise<Response> {
+        const url = this.getURL(endpoint);
+        const response = await fetch(url, {
+            method: 'POST',
+            body: JSON.stringify(body),
+            headers: headers,
+        });
+        return response.json();
+    }
+    
+    async patch({ endpoint, authenticated, headers }: IHttpParameters): Promise<Response> {
+        const url = this.getURL(endpoint);
+        if (authenticated) {
+            
+        }
+        const response: Response = await fetch(url)
+    }
+    
+    async delete({ endpoint, authenticated }: IHttpParameters): Promise<Response> {
+        const url = this.getURL(endpoint);
+        if (authenticated) { }
+        const response = await fetch()
+    }
+}
+
+interface IHttpParameters {
+    endpoint: string;
+    authenticated: boolean;
+    headers: Headers
+}
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 @@
 <script lang="ts">
     import { onDestroy, onMount } from "svelte";
+    import HttpClient from "../http";
     import { token } from "../stores/auth";
     import { addFormOpen } from "../stores/forms";
     import Table from "./Table.svelte";
@@ -36,7 +37,7 @@
     }
 
     async function fetchDailyUserStatistics() {
-        const res = await fetch("http://localhost:8080/api/v1/stats/totals/", {
+        const res = await fetch("http://localhost:8080/api/v1/stats/daily/", {
             method: "GET",
             headers: {
                 Authorization: `Bearer ${$token}`
@@ -99,9 +100,29 @@
             },
             options: {
                 responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    y: {
+                        suggestedMax: 30,
+                        beginAtZero: true,
+                        ticks: {
+                            autoSkip: true,
+                            stepSize: 5
+                        }
+                    }
+                },
                 plugins: {
                     legend: {
                         display: false
+                    },
+                    title: {
+                        display: true,
+                        text: "Weekly Breakdown"
+                    },
+                    subtitle: {
+                        display: true,
+                        text: "Water consumption over the last week",
+                        padding: {bottom: 10}
                     }
                 }
             }
@@ -127,9 +148,29 @@
             },
             options: {
                 responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        suggestedMax: 10,
+                        ticks: {
+                            autoSkip: true,
+                            stepSize: 1
+                        }
+                    }
+                },
                 plugins: {
                     legend: {
                         display: false
+                    },
+                    title: {
+                        display: true,
+                        text: "Daily Total"
+                    },
+                    subtitle: {
+                        display: true,
+                        text: "Water Drank Today",
+                        padding: {bottom: 10}
                     }
                 }
             }
@@ -137,13 +178,13 @@
     }
 
     function updateWeeklyTotalsChart(result) {
-        [,lastSevenDaysData] = result;
+        [, lastSevenDaysData] = result;
         lineChart.data.datasets[0].data = lastSevenDaysData;
         lineChart.update();
     }
 
     function updateDailyUserTotalsChart(result) {
-        [,userTotalsData] = result;
+        [, userTotalsData] = result;
         barChart.data.datasets[0].data = userTotalsData;
         barChart.update();
     }
@@ -163,10 +204,10 @@
 </script>
 
 <Column --width="500px">
-    <Card>
-        <canvas bind:this={barCanvasRef} width="" />
+    <Card --height="300px">
+        <canvas bind:this={barCanvasRef} />
     </Card>
-    <Card>
+    <Card --height="300px">
         <canvas bind:this={lineCanvasRef} />
     </Card>
 </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 @@
     export let omit: string[] = ["id"];
     export let title: string | undefined = undefined;
 
+    export let sortBy: string = 'date';
+
+    type SortComparator = (a, b) => number
+
     function getDataKeys(data: any[]): string[] {
         if (!data || data.length === 0) return [];
         return Object.keys(data[0])
@@ -16,11 +20,8 @@
         return Object.entries(row).filter((r) => !omit.includes(r[0]));
     }
 
-
-    let limitedData: Array<any> = [];
-
-    if (data && (data as any[]).length > 0) {
-        limitedData = (data as any[]).slice(0, 4);
+    function sort(arr: Array<Record<string, any>>, fn: SortComparator = (a , b) => new Date(b[sortBy]) - new Date(a[sortBy])) {
+        return arr.sort(fn)
     }
 
     const formatter = new Intl.DateTimeFormat("en", {
@@ -62,7 +63,7 @@
     {/if}
     <tbody>
     {#if data}
-        {#each limitedData as row}
+        {#each sort(data) as row}
             <tr>
                 {#each getRow(row) as datum}
                     <td>{formatDatum(datum)}</td>
-- 
cgit v1.1