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

7 files changed, 345 insertions, 222 deletions

diff --git a/fe/src/app.css b/fe/src/app.css
index 0d5fa90..de19b52 100644
--- a/fe/src/app.css
+++ b/fe/src/app.css
@@ -1,82 +1,87 @@
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
 
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 
-  --submit: #28a745;
+    --submit: #28a745;
 }
 
 a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
+    font-weight: 500;
+    color: #646cff;
+    text-decoration: inherit;
 }
+
 a:hover {
-  color: #535bf2;
+    color: #535bf2;
 }
 
 body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
 }
 
 h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
+    font-size: 3.2em;
+    line-height: 1.1;
 }
 
 .card {
-  padding: 2em;
+    padding: 2em;
 }
 
 #app {
-  flex-grow: 2;
-  max-width: 1280px;
-  margin: 0 auto;
+    flex-grow: 2;
+    max-width: 1280px;
+    margin: 0 auto;
 }
 
 button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+    cursor: pointer;
+    transition: border-color 0.25s;
 }
+
 button:hover {
-  border-color: #646cff;
+    border-color: #646cff;
 }
+
 button:focus,
 button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
+    outline: 4px auto -webkit-focus-ring-color;
 }
 
 @media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    a:hover {
+        color: #747bff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -97,7 +102,7 @@ button:focus-visible {
 }
 
 .form.input.group label {
-   margin-bottom: .5em;
+    margin-bottom: .5em;
 }
 
 .form.input.group input {
diff --git a/fe/src/lib/Card.svelte b/fe/src/lib/Card.svelte
index 0835940..d7cd900 100644
--- a/fe/src/lib/Card.svelte
+++ b/fe/src/lib/Card.svelte
@@ -1,22 +1,24 @@
 <script lang="ts">
-  export let title = "";
+    export let title = "";
+    export let height: number | undefined = undefined;
 </script>
 
 <div class="card">
-  {#if title}
-    <h2>{title}</h2>
-  {/if}
-  <slot />
+    {#if title}
+        <h2>{title}</h2>
+    {/if}
+    <slot />
 </div>
 
 <style>
-  .card {
-    background: #fff;
-    width: 16rem;
-    display: flex;
-    flex-direction: column;
-    align-items: left;
-    border: solid 2px #00000066;
-    border-radius: 0.25em;
-  }
+    .card {
+        background: #fff;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        border: solid 2px #00000066;
+        border-radius: 0.25em;
+        height: var(--height, fit-content);
+        overflow-y: var(--overflow, initial);
+    }
 </style>
diff --git a/fe/src/lib/Column.svelte b/fe/src/lib/Column.svelte
new file mode 100644
index 0000000..f036073
--- /dev/null
+++ b/fe/src/lib/Column.svelte
@@ -0,0 +1,13 @@
+<div class="column">
+    <slot />
+</div>
+
+<style>
+    .column {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        gap: var(--gap, 32px);
+        width: var(--width, initial);
+    }
+</style>
\ No newline at end of file
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 {
diff --git a/fe/src/lib/Layout.svelte b/fe/src/lib/Layout.svelte
index 94ce84d..f208f34 100644
--- a/fe/src/lib/Layout.svelte
+++ b/fe/src/lib/Layout.svelte
@@ -1,62 +1,70 @@
 <script>
-  import { authenticated, token } from "../stores/auth";
-  import PreferencesForm from "./PreferencesForm.svelte";
-  const logout = () => token.unauthenticate();
-  let open = false;
-
-  function showSettingsDialog() {
-    open = true;
-  }
-
-  function closeDialog() {
-    open = false;
-  }
+    import { authenticated, token } from "../stores/auth";
+    import PreferencesForm from "./PreferencesForm.svelte";
+    import { addFormOpen } from "../stores/forms";
+
+    const logout = () => token.unauthenticate();
+    let preferenceFormOpen = false;
+
+    function showPreferencesDialog() {
+        preferenceFormOpen = true;
+    }
+
+    function closePreferenceDialog() {
+        preferenceFormOpen = false;
+    }
+
+    function showAddDialog() {
+        addFormOpen.set(true);
+    }
 </script>
 
 <div class="layout">
-  {#if $authenticated}
-    <nav>
-      <div>
-        <h1>Water</h1>
-      </div>
-      <div>
-        <button on:click={showSettingsDialog}>Settings</button>
-        <button on:click={logout}>Logout</button>
-      </div>
-    </nav>
-    <PreferencesForm {open} on:close={closeDialog} />
-  {/if}
-  <div id="content">
-    <slot />
-  </div>
+    {#if $authenticated}
+        <nav>
+            <div>
+                <h1>Water</h1>
+            </div>
+            <div>
+                <button on:click={showAddDialog}>Log Water</button>
+                <button on:click={showPreferencesDialog}>Preference</button>
+                <button on:click={logout}>Logout</button>
+            </div>
+        </nav>
+        <PreferencesForm open={preferenceFormOpen} on:close={closePreferenceDialog} />
+    {/if}
+    <div id="content">
+        <slot />
+    </div>
 </div>
 
 <style>
-  .layout {
-    height: 100vh;
-  }
-  nav {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    height: 64px;
-    padding: 0 2em;
-  }
-
-  nav div {
-    width: fit-content;
-  }
-
-  nav div h1 {
-    font-size: 1.75em;
-  }
-
-  #content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 3em 0;
-  }
+    .layout {
+        height: 100vh;
+    }
+
+    nav {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        height: 64px;
+        padding: 0 2em;
+    }
+
+    nav div {
+        width: fit-content;
+    }
+
+    nav div h1 {
+        font-size: 1.75em;
+    }
+
+    #content {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        gap: 2em;
+        margin-top: 4em;
+    }
 </style>
diff --git a/fe/src/lib/Table.svelte b/fe/src/lib/Table.svelte
index 3a66e0d..d1cd7da 100644
--- a/fe/src/lib/Table.svelte
+++ b/fe/src/lib/Table.svelte
@@ -1,105 +1,113 @@
 <script lang="ts">
-  export let data: Array<any> | undefined = undefined;
-  export let nofooter: boolean = false;
-  export let noheader: boolean = false;
-  export let omit: string[] = ["id"];
-  export let title: string | undefined = undefined;
+    export let data: Array<any> | undefined = undefined;
+    export let nofooter: boolean = false;
+    export let noheader: boolean = false;
+    export let omit: string[] = ["id"];
+    export let title: string | undefined = undefined;
 
-  function getDataKeys(data: any[]): string[] {
-    if (!data || data.length === 0) return [];
-    return Object.keys(data[0])
-      .map((k) => k.split("_").join(" "))
-      .filter((k) => !omit.includes(k));
-  }
+    function getDataKeys(data: any[]): string[] {
+        if (!data || data.length === 0) return [];
+        return Object.keys(data[0])
+            .map((k) => k.split("_").join(" "))
+            .filter((k) => !omit.includes(k));
+    }
 
-  function getRow(row: Record<string, any>): Array<any> {
-    return Object.entries(row).filter((r) => !omit.includes(r[0]));
-  }
+    function getRow(row: Record<string, any>): Array<any> {
+        return Object.entries(row).filter((r) => !omit.includes(r[0]));
+    }
 
-  const formatter = new Intl.DateTimeFormat("en", {
-    year: "numeric",
-    month: "numeric",
-    day: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-    second: "2-digit",
-    timeZone: "America/New_York",
-  });
 
-  function formatDatum([key, value]: any[]) {
-    if (key === "date") {
-      const parsedDate = new Date(value);
-      return formatter.format(parsedDate);
-    }
+    let limitedData: Array<any> = [];
 
-    if (key === "user") {
-      return value["name"];
+    if (data && (data as any[]).length > 0) {
+        limitedData = (data as any[]).slice(0, 4);
     }
 
-    return value;
-  }
+    const formatter = new Intl.DateTimeFormat("en", {
+        year: "numeric",
+        month: "numeric",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+        second: "2-digit",
+        timeZone: "America/New_York"
+    });
+
+    function formatDatum([key, value]: any[]) {
+        if (key === "date") {
+            const parsedDate = new Date(value);
+            return formatter.format(parsedDate);
+        }
+
+        if (key === "user") {
+            return value["name"];
+        }
+
+        return value;
+    }
 </script>
 
 <table>
-  {#if title}
-    <h2>{title}</h2>
-  {/if}
-  {#if !noheader && data}
-    <thead>
-      <tr>
-        {#each getDataKeys(data) as header}
-          <th>{header}</th>
-        {/each}
-      </tr>
-    </thead>
-  {/if}
-  <tbody>
-    {#if data}
-      {#each data as row}
+    {#if title}
+        <h2>{title}</h2>
+    {/if}
+    {#if !noheader && data}
+        <thead>
         <tr>
-          {#each getRow(row) as datum}
-            <td>{formatDatum(datum)}</td>
-          {/each}
+            {#each getDataKeys(data) as header}
+                <th>{header}</th>
+            {/each}
         </tr>
-      {/each}
+        </thead>
+    {/if}
+    <tbody>
+    {#if data}
+        {#each limitedData as row}
+            <tr>
+                {#each getRow(row) as datum}
+                    <td>{formatDatum(datum)}</td>
+                {/each}
+            </tr>
+        {/each}
     {:else}
-      <tr> There is not data. </tr>
+        <tr> There is not data.</tr>
+    {/if}
+    </tbody>
+    {#if !nofooter}
+        <slot name="footer">
+            <tfoot>
+            <tr>
+                <td>Table Footer</td>
+            </tr>
+            </tfoot>
+        </slot>
     {/if}
-  </tbody>
-  {#if !nofooter}
-    <slot name="footer">
-      <tfoot>
-        <tr>
-          <td>Table Footer</td>
-        </tr>
-      </tfoot>
-    </slot>
-  {/if}
 </table>
 
 <style>
-  table {
-    padding: 16px;
-    margin: 8px;
-    border: solid 1px black;
-    border-collapse: collapse;
-  }
+    table {
+        padding: 16px;
+        margin: 8px;
+        border: solid 1px black;
+        border-collapse: collapse;
+        overflow-y: hidden;
+    }
 
-  th {
-    text-transform: capitalize;
-  }
+    th {
+        text-transform: capitalize;
+    }
 
-  thead tr {
-    background: rgba(0, 0, 23, 0.34);
-  }
+    thead tr {
+        background: rgba(0, 0, 23, 0.34);
+    }
 
-  tbody tr:nth-child(odd) {
-    background: rgba(0, 0, 23, 0.14);
-  }
+    tbody tr:nth-child(odd) {
+        background: rgba(0, 0, 23, 0.14);
+    }
 
-  th,
-  td {
-    padding: 1em;
-    border: 1px solid rgba(0, 0, 0, 1);
-  }
+    th,
+    td {
+        padding: 1em;
+        border: 1px solid rgba(0, 0, 0, 1);
+    }
 </style>
diff --git a/fe/src/stores/forms.ts b/fe/src/stores/forms.ts
new file mode 100644
index 0000000..daf9181
--- /dev/null
+++ b/fe/src/stores/forms.ts
@@ -0,0 +1,6 @@
+import type { Writable } from "svelte/store";
+import { writable } from "svelte/store";
+
+
+export const preferencesFormOpen: Writable<boolean> = writable<boolean>(false);
+export const addFormOpen: Writable<boolean> = writable<boolean>(false);
\ No newline at end of file