From cf2113e77edabf8e3a632c7b76c769752039ba88 Mon Sep 17 00:00:00 2001
From: Zach Berwaldt <zberwaldt@tutamail.com>
Date: Sat, 2 Mar 2024 16:52:55 -0500
Subject: feat: Add API logging

Add logging to the API to keep track of specific requests and headers. Also added CORS middleware to handle OPTIONS requests.

---

The commit adds logging functionality to the API and includes a middleware function to handle CORS OPTIONS requests. This will allow us to track specific requests and headers received by the API.

[API/main.go](/api/main.go):
- Added import for the 'log' package
- Added logging statements to print the request headers and "_I am here_" message
- Removed unnecessary newlines and comments

[fe/src/app.css](/fe/src/app.css):
- Added a new style for button hover effects

[fe/src/lib/Card.svelte](/fe/src/lib/Card.svelte):
- Added a new `height` prop to the Card component

[fe/src/lib/Column.svelte](/fe/src/lib/Column.svelte):
- Added a new CSS class for column layout
- Set the width and gap using CSS variables

[fe/src/lib/DataView.svelte](/fe/src/lib/DataView.svelte):
- Updated the 'fetchData' function to also fetch 'totals' and 'userStats' data
- Added canvas references and chart variables for bar and line charts
- Added a new 'getLastSevenDays' function to calculate the labels for the charts
- Updated the 'onMount' function to initialize the bar and line charts using the canvas references and data
- Updated the 'onDestroy' function to destroy the bar and line charts
- Added a new 'addFormOpen' store and imported it
- Added a new 'onClick' handler for the Add button to open the AddForm modal
- Updated the layout and added Card components to display the bar and line charts and the JSON data
- Added a new 'fetchTotals' function to fetch data for the 'totals' section
- Added a new 'fetchStatsForUser' function to fetch data for the 'userStats' section

[fe/src/lib/Layout.svelte](/fe/src/lib/Layout.svelte):
- Added a new 'preferenceFormOpen' variable and initialized it to 'false'
- Added a new 'showPreferencesDialog' function to set 'preferenceFormOpen' to 'true'
- Added a new 'closePreferenceDialog' function to set 'preferenceFormOpen' to 'false'
- Added a new 'showAddDialog' function to open the AddForm modal
---
 fe/src/lib/DataView.svelte | 129 ++++++++++++++++++++++++++++++++++++---------
 1 file changed, 105 insertions(+), 24 deletions(-)

(limited to 'fe/src/lib/DataView.svelte')

diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index 5182a85..2b1b8b9 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -1,16 +1,21 @@
 <script lang="ts">
     import { onDestroy, onMount } from "svelte";
     import { token } from "../stores/auth";
+    import { addFormOpen } from "../stores/forms";
     import Table from "./Table.svelte";
     import Chart from "chart.js/auto";
+    import Card from "./Card.svelte";
+    import Column from "./Column.svelte";
     import AddForm from "./forms/AddForm.svelte";
 
-    let open: boolean = false;
-
     let json: Promise<any>;
+    let totals: Promise<any>;
+    let userStats: Promise<any>;
 
-    let canvasRef: HTMLCanvasElement;
-    let chart: any;
+    let barCanvasRef: HTMLCanvasElement;
+    let lineCanvasRef: HTMLCanvasElement;
+    let barChart: any;
+    let lineChart: any;
 
     let lastSevenDays: string[];
 
@@ -28,6 +33,37 @@
         }
     }
 
+    async function fetchTotals() {
+        const res = await fetch("http://localhost:8080/api/v1/stats/totals/", {
+            method: 'GET',
+            mode: 'no-cors',
+            headers: {
+                Authorization: `Bearer ${$token}`
+            }
+        });
+
+        if (res.ok) {
+            totals = res.json();
+        } else {
+            throw new Error("There was a problem with your request");
+        }
+    }
+
+    async function fetchStatsForUser() {
+        const res = await fetch("http://localhost:8080/api/v1/stats/user/1aa668f3-7527-4a67-9c24-fdf307542eeb", {
+            method: "GET",
+            headers: {
+                Authorization: `Bearer ${$token}`
+            }
+        });
+
+        if (res.ok) {
+            userStats = res.json();
+        } else {
+            throw new Error("There was a problem with your request");
+        }
+    }
+
     function getLastSevenDays() {
         const result = [];
         for (let i = 0; i < 7; i++) {
@@ -38,23 +74,21 @@
         return result;
     }
 
-    function handleClick() {
-        open = true;
-    }
-
     function closeDialog() {
-        open = false;
+        addFormOpen.set(false);
     }
 
     function onStatisticAdd() {
-        open = false;
+        closeDialog();
         fetchData();
     }
 
     onMount(() => {
         fetchData();
+//        fetchTotals();
+        fetchStatsForUser();
         lastSevenDays = getLastSevenDays();
-        chart = new Chart(canvasRef, {
+        barChart = new Chart(barCanvasRef, {
             type: "bar",
             data: {
                 labels: lastSevenDays,
@@ -73,27 +107,74 @@
                         borderWidth: 1
                     }
                 ]
+            },
+            options: {
+                responsive: true
+            }
+        });
+        lineChart = new Chart(lineCanvasRef, {
+            type: "line",
+            data: {
+                labels: lastSevenDays,
+                datasets: [
+                    {
+                        label: "Zach",
+                        data: [1, 2, 8, 2, 5, 5, 1],
+                        backgroundColor: "rgba(255, 192, 192, 0.2)",
+                        borderColor: "rgba(75, 192, 192, 1)",
+                        borderWidth: 1
+                    }, {
+                        label: "Parker",
+                        data: [6, 1, 1, 4, 3, 5, 1],
+                        backgroundColor: "rgba(75, 192, 192, 0.2)",
+                        borderColor: "rgba(75, 192, 192, 1)",
+                        borderWidth: 1
+                    }
+                ]
+            },
+            options: {
+                responsive: true
             }
         });
     });
 
     onDestroy(() => {
-        if (chart) chart.destroy();
-        chart = null;
+        if (barChart) barChart.destroy();
+        if (lineChart) lineChart.destroy();
+        barChart = null;
+        lineChart = null;
     });
 </script>
 
-<div>
-    <button on:click={handleClick}>Add</button>
-    <AddForm {open} on:submit={onStatisticAdd} on:close={closeDialog} />
-    <canvas bind:this={canvasRef} />
-    {#await json then data}
-        <Table {data} nofooter />
-    {:catch error}
-        <p>{error}</p>
-    {/await}
-    <!-- <Chart /> -->
-</div>
+<Column --width="500px">
+    <Card>
+        <canvas bind:this={barCanvasRef} width="" />
+    </Card>
+    <Card>
+        <canvas bind:this={lineCanvasRef} />
+    </Card>
+</Column>
+
+<AddForm open={$addFormOpen} on:submit={onStatisticAdd} on:close={closeDialog} />
+<Column>
+    <Card>
+        {#await json then data}
+            <Table {data} nofooter />
+        {:catch error}
+            <p>{error}</p>
+        {/await}
+    </Card>
+    <Card>
+        <button on:click={() => fetchTotals()}>Get totals</button>
+        {#await totals then data}
+            {JSON.stringify(data)}
+        {:catch error}
+            <p>{error}</p>
+        {/await}
+    </Card>
+</Column>
+<!-- <Chart /> -->
+
 
 <style>
     dialog {
-- 
cgit v1.1