From 3eafb413a48cde60dea8a7355ee621c6acca952f Mon Sep 17 00:00:00 2001
From: Doog <157747121+doogongithub@users.noreply.github.com>
Date: Wed, 21 Feb 2024 22:07:27 -0500
Subject: first commit

---
 fe/src/lib/Card.svelte    | 22 ++++++++++++++++++++++
 fe/src/lib/Counter.svelte | 10 ++++++++++
 fe/src/lib/Table.svelte   | 41 +++++++++++++++++++++++++++++++++++++++++
 fe/src/lib/errors.ts      |  7 +++++++
 fe/src/lib/utils.ts       |  9 +++++++++
 5 files changed, 89 insertions(+)
 create mode 100644 fe/src/lib/Card.svelte
 create mode 100644 fe/src/lib/Counter.svelte
 create mode 100644 fe/src/lib/Table.svelte
 create mode 100644 fe/src/lib/errors.ts
 create mode 100644 fe/src/lib/utils.ts

(limited to 'fe/src/lib')

diff --git a/fe/src/lib/Card.svelte b/fe/src/lib/Card.svelte
new file mode 100644
index 0000000..feb5bcc
--- /dev/null
+++ b/fe/src/lib/Card.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+export let title;
+</script>
+
+<div class="card">
+    {#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;
+}
+</style>
diff --git a/fe/src/lib/Counter.svelte b/fe/src/lib/Counter.svelte
new file mode 100644
index 0000000..979b4df
--- /dev/null
+++ b/fe/src/lib/Counter.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  let count: number = 0
+  const increment = () => {
+    count += 1
+  }
+</script>
+
+<button on:click={increment}>
+  count is {count}
+</button>
diff --git a/fe/src/lib/Table.svelte b/fe/src/lib/Table.svelte
new file mode 100644
index 0000000..2df9f8c
--- /dev/null
+++ b/fe/src/lib/Table.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    export let data;
+    export let nofooter: boolean = false;
+    export let noheader: boolean = false;
+    export let title: string;
+</script>
+<table>
+    {#if title}
+    <h2>{title}</h2>
+    {/if}
+    {#if !noheader}
+    <thead>
+        <tr>
+            <th>
+                Data Header
+            </th>
+        </tr>
+    </thead>
+    {/if}
+    <tbody>
+        <tr>
+            <td>Data</td>
+        </tr>
+    </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;
+}
+</style>
diff --git a/fe/src/lib/errors.ts b/fe/src/lib/errors.ts
new file mode 100644
index 0000000..0663d63
--- /dev/null
+++ b/fe/src/lib/errors.ts
@@ -0,0 +1,7 @@
+export class UnauthorizedError extends Error {
+    constructor (message?: string , options?: ErrorOptions) {
+        super(message, options);
+    }
+}
+
+
diff --git a/fe/src/lib/utils.ts b/fe/src/lib/utils.ts
new file mode 100644
index 0000000..c5501ae
--- /dev/null
+++ b/fe/src/lib/utils.ts
@@ -0,0 +1,9 @@
+export function processFormInput(form) {
+    const formData = new FormData(form);
+    const data = {};
+    for (let field of formData) {
+        const [key, value] = field;
+        data[key] = value;
+    }
+    return data;
+}
-- 
cgit v1.1


From e37c73e33a4aaf7fb8d25b5af03627f20bcda19f Mon Sep 17 00:00:00 2001
From: Doog <157747121+doogongithub@users.noreply.github.com>
Date: Sat, 24 Feb 2024 20:08:35 -0500
Subject: add gitignore

---
 fe/src/lib/DataView.svelte  | 67 +++++++++++++++++++++++++++++++++++++++++++++
 fe/src/lib/Layout.svelte    | 57 ++++++++++++++++++++++++++++++++++++++
 fe/src/lib/LoginForm.svelte | 64 +++++++++++++++++++++++++++++++++++++++++++
 fe/src/lib/Table.svelte     | 61 +++++++++++++++++++++++++++++++++++------
 4 files changed, 241 insertions(+), 8 deletions(-)
 create mode 100644 fe/src/lib/DataView.svelte
 create mode 100644 fe/src/lib/Layout.svelte
 create mode 100644 fe/src/lib/LoginForm.svelte

(limited to 'fe/src/lib')

diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
new file mode 100644
index 0000000..cd7b042
--- /dev/null
+++ b/fe/src/lib/DataView.svelte
@@ -0,0 +1,67 @@
+<script lang='ts'>
+import { onMount } from 'svelte';
+import { token } from '../stores/auth'
+import Table from './Table.svelte';
+
+let json;
+let showAddForm: boolean = false;
+
+async function fetchData() {
+    const res = await fetch('http://localhost:8080/api/v1/stats/', {
+        method: "GET",
+        headers: {
+            'Authorization': `Bearer ${$token}`
+        }
+    });
+    if (res.ok) {
+        json = res.json();
+    } else {
+        throw new Error('There was a problem with your request');
+    }
+}
+
+async function submitStat() {
+    const response = await fetch('http://localhost:8080/api/v1/stats/', {
+        method: "POST",
+        headers: {
+            'Authorization': `Bearer ${$token}`
+        },
+        body: JSON.stringify({
+            date: new Date,
+            user_id: 1,
+            quantity: 3
+        })
+    });
+    fetchData();
+}
+
+function handleClick() {
+    showAddForm = true;
+}
+
+function handleAddDialogSubmit (e) {
+    console.log(e.keyCode)
+}
+
+onMount(() => {
+    fetchData();
+});
+
+</script>
+<div>
+    <button on:click={submitStat}>Add Stat Test</button>
+    <dialog open={showAddForm} on:submit={handleAddDialogSubmit}>
+        <form method="dialog">
+            <input name="date" type="date" />
+            <input name="quantity" type="number" min="0" autocomplete="off"/>
+            <button type="submit">Submit</button>
+        </form>
+    </dialog>
+    <button on:click={handleClick}>Add</button>
+    {#await json then data}
+        <Table {data} nofooter />
+    {:catch error}
+        <p>{error}</p>
+    {/await}
+    <!-- <Chart /> -->
+</div>
diff --git a/fe/src/lib/Layout.svelte b/fe/src/lib/Layout.svelte
new file mode 100644
index 0000000..f349632
--- /dev/null
+++ b/fe/src/lib/Layout.svelte
@@ -0,0 +1,57 @@
+<script>
+import { authenticated, token } from '../stores/auth';
+
+const logout = () => token.unauthenticate();
+
+function showSettingsDialog() {
+    console.log('show settings');
+}
+
+</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>
+    {/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;
+}
+</style>
diff --git a/fe/src/lib/LoginForm.svelte b/fe/src/lib/LoginForm.svelte
new file mode 100644
index 0000000..22c0faf
--- /dev/null
+++ b/fe/src/lib/LoginForm.svelte
@@ -0,0 +1,64 @@
+<script lang='ts'>
+import { token } from '../stores/auth';
+import Card from './Card.svelte';
+
+let user = {
+    username: '',
+    password: ''
+}
+
+let error;
+
+interface CredentialObject {
+    username: string;
+    password: string;
+}
+
+function prepareCredentials ({ username, password }: CredentialObject): string {
+    return btoa(`${username}:${password}`);
+}
+
+async function onSubmit (e) {
+    if (!user.username || !user.password) {
+        error = 'please enter your username and password';
+        return;
+    }
+   const auth = prepareCredentials(user);
+
+   const response = await fetch('http://localhost:8080/api/v1/auth', {
+        method: 'POST',
+        headers: {
+            'Authorization': `Basic ${auth}`,
+        },
+   });
+
+    if (response.status === 401) {
+        error = "Your username or password is wrong";
+        return;
+    }
+
+    if (response.ok) {
+        const { token: apiToken } = await response.json();
+        token.authenticate(apiToken);
+    }
+
+    error = null;
+}
+</script>
+
+<Card>
+    <form class="form" on:submit|preventDefault={onSubmit}>
+        <div class='form input group'>
+            <label for="username">Username</label>
+            <input bind:value={user.username} id="username" name='username' type="text" autocomplete="username" />
+        </div>
+        <div class='form input group'>
+            <label for="password">Password</label>
+            <input bind:value={user.password} id="password" name='password' type="password" autocomplete="current-password"/>
+        </div>
+        {#if error}
+            <p class="error">{error}</p>
+        {/if}
+        <button type="submit">Log in</button>
+    </form>
+</Card>
diff --git a/fe/src/lib/Table.svelte b/fe/src/lib/Table.svelte
index 2df9f8c..5572280 100644
--- a/fe/src/lib/Table.svelte
+++ b/fe/src/lib/Table.svelte
@@ -1,8 +1,38 @@
 <script lang="ts">
-    export let data;
-    export let nofooter: boolean = false;
-    export let noheader: boolean = false;
-    export let title: string;
+import {afterUpdate} from 'svelte';
+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 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);
+    }
+    return value;
+}
+
 </script>
 <table>
     {#if title}
@@ -11,16 +41,27 @@
     {#if !noheader}
     <thead>
         <tr>
-            <th>
-                Data Header
-            </th>
+            {#each getDataKeys(data) as header}
+                <th>{header}</th>
+            {/each}
         </tr>
     </thead>
     {/if}
     <tbody>
+        {#if data}
+        {#each data as row}
         <tr>
-            <td>Data</td>
+            {#each getRow(row) as datum}
+            
+            <td>{formatDatum(datum)}</td>
+            {/each}
         </tr>
+        {/each}
+        {:else}
+        <tr>
+            There is not data.
+        </tr>   
+        {/if}
     </tbody>
     {#if !nofooter}
     <slot name="footer">
@@ -38,4 +79,8 @@ table {
     margin: 8px;
     border: solid 1px black;
 }
+
+th {
+    text-transform: capitalize;
+}
 </style>
-- 
cgit v1.1


From 9f9a33cbf55d38987a66b709284d2bb4ffea0fe9 Mon Sep 17 00:00:00 2001
From: Doog <157747121+doogongithub@users.noreply.github.com>
Date: Thu, 29 Feb 2024 20:13:48 -0500
Subject: modify api, build additional FE components, add types

---
 fe/src/lib/DataView.svelte        | 67 ++++++++++++++++++++++++++++++++++++---
 fe/src/lib/LoginForm.svelte       | 16 ++++++----
 fe/src/lib/PreferencesForm.svelte | 45 ++++++++++++++++++++++++++
 fe/src/lib/Table.svelte           | 19 +++++++++++
 4 files changed, 136 insertions(+), 11 deletions(-)
 create mode 100644 fe/src/lib/PreferencesForm.svelte

(limited to 'fe/src/lib')

diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index cd7b042..dc8acae 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -1,11 +1,24 @@
 <script lang='ts'>
 import { onMount } from 'svelte';
-import { token } from '../stores/auth'
+import type { Preference } from '../types';
+import { token, user, preferences } from '../stores/auth'
 import Table from './Table.svelte';
+import PreferencesForm from './PreferencesForm.svelte';
+
+const formatter = new Intl.DateTimeFormat(
+    'en',
+    {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+    }
+);
 
 let json;
 let showAddForm: boolean = false;
 
+let statistic: Statistic = newStatistic();
+
 async function fetchData() {
     const res = await fetch('http://localhost:8080/api/v1/stats/', {
         method: "GET",
@@ -40,7 +53,32 @@ function handleClick() {
 }
 
 function handleAddDialogSubmit (e) {
-    console.log(e.keyCode)
+    console.log(statistic);
+    showAddForm = false;
+}
+
+function closeDialog () {
+    showAddForm = false;
+}
+
+function newStatistic (): Statistic {
+    let now = new Date(), month, day, year;
+
+    month = `${now.getMonth() + 1}`;
+    day = `${now.getDate()}`;
+    year = now.getFullYear();
+    if (month.length < 2)
+        month = '0' + month;
+    if (day.length < 2)
+        day = '0' + day;
+
+    const date = [year, month, day].join('-');
+
+    return {
+        user_id: $user.uuid,
+        date,
+        quantity: 1
+    }
 }
 
 onMount(() => {
@@ -50,10 +88,19 @@ onMount(() => {
 </script>
 <div>
     <button on:click={submitStat}>Add Stat Test</button>
+    <PreferencesForm />
     <dialog open={showAddForm} on:submit={handleAddDialogSubmit}>
+        <h2>Add Water</h2>
         <form method="dialog">
-            <input name="date" type="date" />
-            <input name="quantity" type="number" min="0" autocomplete="off"/>
+            <div class='form input group'>
+                <label for="date">Date:</label>
+                <input bind:value={statistic.date} id="date" name="date" type="date" />
+            </div>
+            <div class='form input group'>
+                <label for="quantity">Quantity:</label>
+                <input bind:value={statistic.quantity} id="quantity" name="quantity" type="number" min="0" autocomplete="off"/>
+            </div>
+            <button on:click={closeDialog}>Cancel</button>
             <button type="submit">Submit</button>
         </form>
     </dialog>
@@ -65,3 +112,15 @@ onMount(() => {
     {/await}
     <!-- <Chart /> -->
 </div>
+
+<style>
+dialog {
+    background: red;
+    box-shadow: 0 20px 5em 10px rgba(0,0,0,0.8);
+}
+dialog::backdrop {
+    padding: 20px;
+    box-shadow: 20px 20px rgba(0,0,0,0.8);
+    background-color: red;
+}
+</style>
diff --git a/fe/src/lib/LoginForm.svelte b/fe/src/lib/LoginForm.svelte
index 22c0faf..499a457 100644
--- a/fe/src/lib/LoginForm.svelte
+++ b/fe/src/lib/LoginForm.svelte
@@ -1,8 +1,8 @@
 <script lang='ts'>
-import { token } from '../stores/auth';
+import { token, user, preferences } from '../stores/auth';
 import Card from './Card.svelte';
 
-let user = {
+let credentials: CredentialObject = {
     username: '',
     password: ''
 }
@@ -19,11 +19,11 @@ function prepareCredentials ({ username, password }: CredentialObject): string {
 }
 
 async function onSubmit (e) {
-    if (!user.username || !user.password) {
+    if (!credentials.username || !credentials.password) {
         error = 'please enter your username and password';
         return;
     }
-   const auth = prepareCredentials(user);
+   const auth = prepareCredentials(credentials);
 
    const response = await fetch('http://localhost:8080/api/v1/auth', {
         method: 'POST',
@@ -38,7 +38,9 @@ async function onSubmit (e) {
     }
 
     if (response.ok) {
-        const { token: apiToken } = await response.json();
+        const { token: apiToken, user: userData, preferences: userPreferences } = await response.json();
+        user.setUser(userData);
+        preferences.set(userPreferences);
         token.authenticate(apiToken);
     }
 
@@ -50,11 +52,11 @@ async function onSubmit (e) {
     <form class="form" on:submit|preventDefault={onSubmit}>
         <div class='form input group'>
             <label for="username">Username</label>
-            <input bind:value={user.username} id="username" name='username' type="text" autocomplete="username" />
+            <input bind:value={credentials.username} id="username" name='username' type="text" autocomplete="username" />
         </div>
         <div class='form input group'>
             <label for="password">Password</label>
-            <input bind:value={user.password} id="password" name='password' type="password" autocomplete="current-password"/>
+            <input bind:value={credentials.password} id="password" name='password' type="password" autocomplete="current-password"/>
         </div>
         {#if error}
             <p class="error">{error}</p>
diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/PreferencesForm.svelte
new file mode 100644
index 0000000..781866c
--- /dev/null
+++ b/fe/src/lib/PreferencesForm.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+import { preferences } from '../stores/auth';
+import type { Size, Preference } from '../types';
+   export let open: boolean = true; 
+
+    let preference: Preference = {
+        color: "#00FF00",
+        size: {
+            size: 8,
+            unit: 'oz'
+        }
+    }
+    
+    preferences.subscribe((value) => {
+        preference = value;
+    });
+
+    function onPreferencesSave(): void {
+        preferences.set(preferences);
+    }
+</script>
+<dialog {open}>
+    <h2>User Preferences</h2>
+    <form method="dialog">
+        <div class="form input group">
+            <label>Color</label>
+            <input type="color" bind:value={preference.color}/>
+        </div>
+        <div class="form input group">
+            <label>Bottle Size</label>
+            <select bind:value={preference.size.size}>
+                {#each [8,16,24,32,40,48] as size}
+                    <option>{ size }</option>
+                {/each}
+            </select>
+        </div>
+        <button type="submit">Save</button>
+    </form>
+</dialog>
+<style>
+dialog {
+    background: white;
+    color: black;
+}
+</style>
diff --git a/fe/src/lib/Table.svelte b/fe/src/lib/Table.svelte
index 5572280..4b81800 100644
--- a/fe/src/lib/Table.svelte
+++ b/fe/src/lib/Table.svelte
@@ -30,6 +30,11 @@ function formatDatum([key, value]: any[]) {
         const parsedDate = new Date(value);
         return formatter.format(parsedDate);
     }
+
+    if (key === 'user') {
+        return value['name'];
+    }
+
     return value;
 }
 
@@ -78,9 +83,23 @@ table {
     padding: 16px;
     margin: 8px;
     border: solid 1px black;
+    border-collapse: collapse;
 }
 
 th {
     text-transform: capitalize;
 }
+
+thead tr {
+    background: rgba(0,0,23, 0.34);
+}
+
+tbody tr:nth-child(odd) {
+   background: rgba(0,0,23,0.14); 
+}
+
+th, td {
+    padding: 1em;
+    border: 1px solid rgba(0,0,0, 1);
+}
 </style>
-- 
cgit v1.1


From afeffe31bd7d0f8333627a972e1d32e64a325b5b Mon Sep 17 00:00:00 2001
From: Zach Berwaldt <zberwaldt@tutamail.com>
Date: Fri, 1 Mar 2024 18:17:42 -0500
Subject: reformat fe

---
 fe/src/lib/Card.svelte            |  14 +--
 fe/src/lib/Counter.svelte         |  10 ---
 fe/src/lib/DataView.svelte        | 177 +++++++++++++++++++-------------------
 fe/src/lib/Layout.svelte          |  77 +++++++++--------
 fe/src/lib/LoginForm.svelte       | 105 +++++++++++++---------
 fe/src/lib/PreferencesForm.svelte |  32 ++++---
 fe/src/lib/Table.svelte           | 138 ++++++++++++++---------------
 fe/src/lib/errors.ts              |   6 +-
 fe/src/lib/utils.ts               |  16 ++--
 9 files changed, 296 insertions(+), 279 deletions(-)
 delete mode 100644 fe/src/lib/Counter.svelte

(limited to 'fe/src/lib')

diff --git a/fe/src/lib/Card.svelte b/fe/src/lib/Card.svelte
index feb5bcc..0835940 100644
--- a/fe/src/lib/Card.svelte
+++ b/fe/src/lib/Card.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-export let title;
+  export let title = "";
 </script>
 
 <div class="card">
-    {#if title}
-        <h2>{title}</h2>
-    {/if}
-    <slot />   
+  {#if title}
+    <h2>{title}</h2>
+  {/if}
+  <slot />
 </div>
 
 <style>
-.card {
+  .card {
     background: #fff;
     width: 16rem;
     display: flex;
@@ -18,5 +18,5 @@ export let title;
     align-items: left;
     border: solid 2px #00000066;
     border-radius: 0.25em;
-}
+  }
 </style>
diff --git a/fe/src/lib/Counter.svelte b/fe/src/lib/Counter.svelte
deleted file mode 100644
index 979b4df..0000000
--- a/fe/src/lib/Counter.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  let count: number = 0
-  const increment = () => {
-    count += 1
-  }
-</script>
-
-<button on:click={increment}>
-  count is {count}
-</button>
diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index dc8acae..1458c9a 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -1,126 +1,123 @@
-<script lang='ts'>
-import { onMount } from 'svelte';
-import type { Preference } from '../types';
-import { token, user, preferences } from '../stores/auth'
-import Table from './Table.svelte';
-import PreferencesForm from './PreferencesForm.svelte';
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { Statistic } from "../types";
+  import { token, user } from "../stores/auth";
+  import Table from "./Table.svelte";
 
-const formatter = new Intl.DateTimeFormat(
-    'en',
-    {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit'
-    }
-);
-
-let json;
-let showAddForm: boolean = false;
+  let json: Promise<any>;
+  let showAddForm: boolean = false;
 
-let statistic: Statistic = newStatistic();
+  let statistic: Statistic = newStatistic();
 
-async function fetchData() {
-    const res = await fetch('http://localhost:8080/api/v1/stats/', {
-        method: "GET",
-        headers: {
-            'Authorization': `Bearer ${$token}`
-        }
+  async function fetchData() {
+    const res = await fetch("http://localhost:8080/api/v1/stats/", {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${$token}`,
+      },
     });
     if (res.ok) {
-        json = res.json();
+      json = res.json();
     } else {
-        throw new Error('There was a problem with your request');
+      throw new Error("There was a problem with your request");
     }
-}
+  }
 
-async function submitStat() {
-    const response = await fetch('http://localhost:8080/api/v1/stats/', {
-        method: "POST",
-        headers: {
-            'Authorization': `Bearer ${$token}`
-        },
-        body: JSON.stringify({
-            date: new Date,
-            user_id: 1,
-            quantity: 3
-        })
+  async function submitStat() {
+    const response = await fetch("http://localhost:8080/api/v1/stats/", {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${$token}`,
+      },
+      body: JSON.stringify({
+        date: new Date(),
+        user_id: 1,
+        quantity: 3,
+      }),
     });
     fetchData();
-}
+  }
 
-function handleClick() {
+  function handleClick() {
     showAddForm = true;
-}
+  }
 
-function handleAddDialogSubmit (e) {
+  function handleAddDialogSubmit(e: Event) {
     console.log(statistic);
     showAddForm = false;
-}
+  }
 
-function closeDialog () {
+  function closeDialog() {
     showAddForm = false;
-}
+  }
 
-function newStatistic (): Statistic {
-    let now = new Date(), month, day, year;
+  function newStatistic(): Statistic {
+    let now = new Date(),
+      month,
+      day,
+      year;
 
     month = `${now.getMonth() + 1}`;
     day = `${now.getDate()}`;
     year = now.getFullYear();
-    if (month.length < 2)
-        month = '0' + month;
-    if (day.length < 2)
-        day = '0' + day;
+    if (month.length < 2) month = "0" + month;
+    if (day.length < 2) day = "0" + day;
 
-    const date = [year, month, day].join('-');
+    const date = [year, month, day].join("-");
 
     return {
-        user_id: $user.uuid,
-        date,
-        quantity: 1
-    }
-}
+      user_id: $user!.uuid,
+      date,
+      quantity: 1,
+    };
+  }
 
-onMount(() => {
+  onMount(() => {
     fetchData();
-});
-
+  });
 </script>
+
 <div>
-    <button on:click={submitStat}>Add Stat Test</button>
-    <PreferencesForm />
-    <dialog open={showAddForm} on:submit={handleAddDialogSubmit}>
-        <h2>Add Water</h2>
-        <form method="dialog">
-            <div class='form input group'>
-                <label for="date">Date:</label>
-                <input bind:value={statistic.date} id="date" name="date" type="date" />
-            </div>
-            <div class='form input group'>
-                <label for="quantity">Quantity:</label>
-                <input bind:value={statistic.quantity} id="quantity" name="quantity" type="number" min="0" autocomplete="off"/>
-            </div>
-            <button on:click={closeDialog}>Cancel</button>
-            <button type="submit">Submit</button>
-        </form>
-    </dialog>
-    <button on:click={handleClick}>Add</button>
-    {#await json then data}
-        <Table {data} nofooter />
-    {:catch error}
-        <p>{error}</p>
-    {/await}
-    <!-- <Chart /> -->
+  <button on:click={submitStat}>Add Stat Test</button>
+  <dialog open={showAddForm} on:submit={handleAddDialogSubmit}>
+    <h2>Add Water</h2>
+    <form method="dialog">
+      <div class="form input group">
+        <label for="date">Date:</label>
+        <input bind:value={statistic.date} id="date" name="date" type="date" />
+      </div>
+      <div class="form input group">
+        <label for="quantity">Quantity:</label>
+        <input
+          bind:value={statistic.quantity}
+          id="quantity"
+          name="quantity"
+          type="number"
+          min="0"
+          autocomplete="off"
+        />
+      </div>
+      <button on:click={closeDialog}>Cancel</button>
+      <button type="submit">Submit</button>
+    </form>
+  </dialog>
+  <button on:click={handleClick}>Add</button>
+  {#await json then data}
+    <Table {data} nofooter />
+  {:catch error}
+    <p>{error}</p>
+  {/await}
+  <!-- <Chart /> -->
 </div>
 
 <style>
-dialog {
+  dialog {
     background: red;
-    box-shadow: 0 20px 5em 10px rgba(0,0,0,0.8);
-}
-dialog::backdrop {
+    box-shadow: 0 20px 5em 10px rgba(0, 0, 0, 0.8);
+  }
+  dialog::backdrop {
     padding: 20px;
-    box-shadow: 20px 20px rgba(0,0,0,0.8);
+    box-shadow: 20px 20px rgba(0, 0, 0, 0.8);
     background-color: red;
-}
+  }
 </style>
diff --git a/fe/src/lib/Layout.svelte b/fe/src/lib/Layout.svelte
index f349632..94ce84d 100644
--- a/fe/src/lib/Layout.svelte
+++ b/fe/src/lib/Layout.svelte
@@ -1,57 +1,62 @@
 <script>
-import { authenticated, token } from '../stores/auth';
-
-const logout = () => token.unauthenticate();
-
-function showSettingsDialog() {
-    console.log('show settings');
-}
-
+  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;
+  }
 </script>
 
 <div class="layout">
-    {#if $authenticated}
+  {#if $authenticated}
     <nav>
-        <div>
-            <h1>Water</h1>
-        </div>
-        <div>
-            <button on:click={showSettingsDialog}>Settings</button>
-            <button on:click={logout}>Logout</button>
-        </div>
+      <div>
+        <h1>Water</h1>
+      </div>
+      <div>
+        <button on:click={showSettingsDialog}>Settings</button>
+        <button on:click={logout}>Logout</button>
+      </div>
     </nav>
-    {/if}
-    <div id="content">
-        <slot />
-    </div>
+    <PreferencesForm {open} on:close={closeDialog} />
+  {/if}
+  <div id="content">
+    <slot />
+  </div>
 </div>
 
 <style>
-.layout {
+  .layout {
     height: 100vh;
-}
-nav {
-   display: flex;
-   flex-direction: row;
-   align-items: center;
-   justify-content: space-between;
-   height: 64px;
-   padding: 0 2em;
-}
+  }
+  nav {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    height: 64px;
+    padding: 0 2em;
+  }
 
-nav div {
+  nav div {
     width: fit-content;
-}
+  }
 
-nav div h1 {
+  nav div h1 {
     font-size: 1.75em;
-}
+  }
 
-#content {
+  #content {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 3em 0;
-}
+  }
 </style>
diff --git a/fe/src/lib/LoginForm.svelte b/fe/src/lib/LoginForm.svelte
index 499a457..bf6d9ad 100644
--- a/fe/src/lib/LoginForm.svelte
+++ b/fe/src/lib/LoginForm.svelte
@@ -1,66 +1,85 @@
-<script lang='ts'>
-import { token, user, preferences } from '../stores/auth';
-import Card from './Card.svelte';
+<script lang="ts">
+  import { token, user, preferences } from "../stores/auth";
+  import Card from "./Card.svelte";
 
-let credentials: CredentialObject = {
-    username: '',
-    password: ''
-}
+  let credentials: CredentialObject = {
+    username: "",
+    password: "",
+  };
 
-let error;
+  let error: string | null = null;
 
-interface CredentialObject {
+  interface CredentialObject {
     username: string;
     password: string;
-}
+  }
 
-function prepareCredentials ({ username, password }: CredentialObject): string {
+  function prepareCredentials({
+    username,
+    password,
+  }: CredentialObject): string {
     return btoa(`${username}:${password}`);
-}
+  }
 
-async function onSubmit (e) {
+  async function onSubmit(e: Event) {
     if (!credentials.username || !credentials.password) {
-        error = 'please enter your username and password';
-        return;
+      error = "please enter your username and password";
+      return;
     }
-   const auth = prepareCredentials(credentials);
+    const auth = prepareCredentials(credentials);
 
-   const response = await fetch('http://localhost:8080/api/v1/auth', {
-        method: 'POST',
-        headers: {
-            'Authorization': `Basic ${auth}`,
-        },
-   });
+    const response = await fetch("http://localhost:8080/api/v1/auth", {
+      method: "POST",
+      headers: {
+        Authorization: `Basic ${auth}`,
+      },
+    });
 
     if (response.status === 401) {
-        error = "Your username or password is wrong";
-        return;
+      error = "Your username or password is wrong";
+      return;
     }
 
     if (response.ok) {
-        const { token: apiToken, user: userData, preferences: userPreferences } = await response.json();
-        user.setUser(userData);
-        preferences.set(userPreferences);
-        token.authenticate(apiToken);
+      const {
+        token: apiToken,
+        user: userData,
+        preferences: userPreferences,
+      } = await response.json();
+      user.setUser(userData);
+      preferences.set(userPreferences);
+      token.authenticate(apiToken);
     }
 
     error = null;
-}
+  }
 </script>
 
 <Card>
-    <form class="form" on:submit|preventDefault={onSubmit}>
-        <div class='form input group'>
-            <label for="username">Username</label>
-            <input bind:value={credentials.username} id="username" name='username' type="text" autocomplete="username" />
-        </div>
-        <div class='form input group'>
-            <label for="password">Password</label>
-            <input bind:value={credentials.password} id="password" name='password' type="password" autocomplete="current-password"/>
-        </div>
-        {#if error}
-            <p class="error">{error}</p>
-        {/if}
-        <button type="submit">Log in</button>
-    </form>
+  <form class="form" on:submit|preventDefault={onSubmit}>
+    <div class="form input group">
+      <label for="username">Username</label>
+      <input
+        bind:value={credentials.username}
+        id="username"
+        name="username"
+        type="text"
+        autocomplete="username"
+      />
+    </div>
+    <div class="form input group">
+      <label for="password">Password</label>
+      <input
+        bind:value={credentials.password}
+        id="password"
+        name="password"
+        type="password"
+        autocomplete="current-password"
+      />
+    </div>
+    {#if error}
+      <p class="error">{error}</p>
+    {/if}
+    <button type="submit">Log in</button>
+  </form>
 </Card>
diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/PreferencesForm.svelte
index 781866c..95e04c1 100644
--- a/fe/src/lib/PreferencesForm.svelte
+++ b/fe/src/lib/PreferencesForm.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-import { preferences } from '../stores/auth';
-import type { Size, Preference } from '../types';
-   export let open: boolean = true; 
+    import { preferences } from '../stores/auth';
+    import type { Size, Preference } from '../types';
+    import { createEventDispatcher } from 'svelte';
+   export let open: boolean; 
 
     let preference: Preference = {
         color: "#00FF00",
@@ -10,29 +11,29 @@ import type { Size, Preference } from '../types';
             unit: 'oz'
         }
     }
+
+    const dispatch = createEventDispatcher();
     
     preferences.subscribe((value) => {
         preference = value;
     });
 
     function onPreferencesSave(): void {
-        preferences.set(preferences);
+        preferences.set(preference);
+        dispatch('close')
     }
+
 </script>
-<dialog {open}>
+<dialog {open} on:submit|preventDefault={onPreferencesSave}>
     <h2>User Preferences</h2>
     <form method="dialog">
         <div class="form input group">
-            <label>Color</label>
-            <input type="color" bind:value={preference.color}/>
+            <label for="color">Color</label>
+            <input id="color" name="color" type="color" bind:value={preference.color}/>
         </div>
         <div class="form input group">
-            <label>Bottle Size</label>
-            <select bind:value={preference.size.size}>
-                {#each [8,16,24,32,40,48] as size}
-                    <option>{ size }</option>
-                {/each}
-            </select>
+            <label for="size">Bottle Size</label>
+            <input id="size" name="size" type="number" min="8" max="48" step="8" bind:value={preference.size.size}/>
         </div>
         <button type="submit">Save</button>
     </form>
@@ -42,4 +43,9 @@ dialog {
     background: white;
     color: black;
 }
+
+input[type="color"] {
+   width: 100%;
+   height: 100%;
+}
 </style>
diff --git a/fe/src/lib/Table.svelte b/fe/src/lib/Table.svelte
index 4b81800..3a66e0d 100644
--- a/fe/src/lib/Table.svelte
+++ b/fe/src/lib/Table.svelte
@@ -1,105 +1,105 @@
 <script lang="ts">
-import {afterUpdate} from 'svelte';
-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[] {
+  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));
-}
+    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"
-});
+  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);
+  function formatDatum([key, value]: any[]) {
+    if (key === "date") {
+      const parsedDate = new Date(value);
+      return formatter.format(parsedDate);
     }
 
-    if (key === 'user') {
-        return value['name'];
+    if (key === "user") {
+      return value["name"];
     }
 
     return value;
-}
-
+  }
 </script>
+
 <table>
-    {#if title}
+  {#if title}
     <h2>{title}</h2>
-    {/if}
-    {#if !noheader}
+  {/if}
+  {#if !noheader && data}
     <thead>
-        <tr>
-            {#each getDataKeys(data) as header}
-                <th>{header}</th>
-            {/each}
-        </tr>
+      <tr>
+        {#each getDataKeys(data) as header}
+          <th>{header}</th>
+        {/each}
+      </tr>
     </thead>
-    {/if}
-    <tbody>
-        {#if data}
-        {#each data as row}
+  {/if}
+  <tbody>
+    {#if data}
+      {#each data as row}
         <tr>
-            {#each getRow(row) as datum}
-            
+          {#each getRow(row) as datum}
             <td>{formatDatum(datum)}</td>
-            {/each}
+          {/each}
         </tr>
-        {/each}
-        {:else}
-        <tr>
-            There is not data.
-        </tr>   
-        {/if}
-    </tbody>
-    {#if !nofooter}
+      {/each}
+    {:else}
+      <tr> There is not data. </tr>
+    {/if}
+  </tbody>
+  {#if !nofooter}
     <slot name="footer">
-       <tfoot>
+      <tfoot>
         <tr>
-            <td>Table Footer</td>
+          <td>Table Footer</td>
         </tr>
-       </tfoot>
+      </tfoot>
     </slot>
-    {/if}
+  {/if}
 </table>
+
 <style>
-table {
+  table {
     padding: 16px;
     margin: 8px;
     border: solid 1px black;
     border-collapse: collapse;
-}
+  }
 
-th {
+  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 {
+  th,
+  td {
     padding: 1em;
-    border: 1px solid rgba(0,0,0, 1);
-}
+    border: 1px solid rgba(0, 0, 0, 1);
+  }
 </style>
diff --git a/fe/src/lib/errors.ts b/fe/src/lib/errors.ts
index 0663d63..d44bec5 100644
--- a/fe/src/lib/errors.ts
+++ b/fe/src/lib/errors.ts
@@ -1,7 +1,7 @@
 export class UnauthorizedError extends Error {
-    constructor (message?: string , options?: ErrorOptions) {
-        super(message, options);
-    }
+  constructor(message?: string, options?: ErrorOptions) {
+    super(message, options);
+  }
 }
 
 
diff --git a/fe/src/lib/utils.ts b/fe/src/lib/utils.ts
index c5501ae..22d4e9a 100644
--- a/fe/src/lib/utils.ts
+++ b/fe/src/lib/utils.ts
@@ -1,9 +1,9 @@
-export function processFormInput(form) {
-    const formData = new FormData(form);
-    const data = {};
-    for (let field of formData) {
-        const [key, value] = field;
-        data[key] = value;
-    }
-    return data;
+export function processFormInput(form: HTMLFormElement) {
+  const formData = new FormData(form);
+  const data: Record<string, any> = {};
+  for (let field of formData) {
+    const [key, value] = field;
+    data[key] = value;
+  }
+  return data;
 }
-- 
cgit v1.1


From 74ec025991f6acde6383e448974738e857758ebb Mon Sep 17 00:00:00 2001
From: Zach Berwaldt <zberwaldt@tutamail.com>
Date: Fri, 1 Mar 2024 18:50:51 -0500
Subject: Add dependencies, refine dataview

---
 fe/src/lib/DataView.svelte | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

(limited to 'fe/src/lib')

diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index 1458c9a..00ee21a 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { onDestroy, onMount } from "svelte";
   import type { Statistic } from "../types";
   import { token, user } from "../stores/auth";
   import Table from "./Table.svelte";
+  import Chart from 'chart.js/auto';
 
   let json: Promise<any>;
   let showAddForm: boolean = false;
 
+  let canvasRef: HTMLCanvasElement;
+  let chart: any;
+
   let statistic: Statistic = newStatistic();
 
   async function fetchData() {
@@ -74,6 +78,26 @@
 
   onMount(() => {
     fetchData();
+    chart = new Chart(canvasRef, {
+        type: 'bar',
+        data: {
+            labels: ['one', 'two'],
+            datasets: [
+                {
+                    label: 'Water',
+                    data: [1, 2],
+                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                    borderColor: 'rgba(75, 192, 192, 1)',
+                    borderWidth: 1
+                }
+            ]
+        }
+    });
+  });
+
+  onDestroy(() => {
+    if (chart) chart.destroy();
+    chart = null;
   });
 </script>
 
@@ -102,6 +126,7 @@
     </form>
   </dialog>
   <button on:click={handleClick}>Add</button>
+  <canvas bind:this={canvasRef} />
   {#await json then data}
     <Table {data} nofooter />
   {:catch error}
-- 
cgit v1.1


From d8b0f1335078d53d95a4212b1a4d4b0b28016702 Mon Sep 17 00:00:00 2001
From: Zach Berwaldt <zberwaldt@tutamail.com>
Date: Fri, 1 Mar 2024 20:12:21 -0500
Subject: feat(DataView): Add functionality to add water statistic

This commit adds functionality to add water statistics to the DataView component. It includes the following changes:
- Remove unused imports and variables
- Move the 'handleClick' function logic to a new 'AddForm' component
- Create the 'AddForm' component which displays a dialog with input fields for date and quantity and allows the user to add a new water statistic
- Dispatch events on form submit and dialog close in the 'AddForm' component
- Call the 'fetchData' function on successful submission of a new statistic
- Update chart data to display sample data

New component:
- AddForm.svelte: A form component to add a new water statistic

Note: This commit message exceeds the 50-character limit in the subject line, but adheres to the other specified requirements.
---
 fe/src/lib/DataView.svelte      | 206 +++++++++++++++-------------------------
 fe/src/lib/forms/AddForm.svelte |  74 +++++++++++++++
 2 files changed, 148 insertions(+), 132 deletions(-)
 create mode 100644 fe/src/lib/forms/AddForm.svelte

(limited to 'fe/src/lib')

diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index 00ee21a..7f368c6 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -1,148 +1,90 @@
 <script lang="ts">
-  import { onDestroy, onMount } from "svelte";
-  import type { Statistic } from "../types";
-  import { token, user } from "../stores/auth";
-  import Table from "./Table.svelte";
-  import Chart from 'chart.js/auto';
-
-  let json: Promise<any>;
-  let showAddForm: boolean = false;
+    import { onDestroy, onMount } from "svelte";
+    import { token } from "../stores/auth";
+    import Table from "./Table.svelte";
+    import Chart from "chart.js/auto";
+    import AddForm from "./forms/AddForm.svelte";
+
+    let open: boolean = false;
+
+    let json: Promise<any>;
+
+    let canvasRef: HTMLCanvasElement;
+    let chart: any;
+
+    async function fetchData() {
+        const res = await fetch("http://localhost:8080/api/v1/stats/", {
+            method: "GET",
+            headers: {
+                Authorization: `Bearer ${$token}`
+            }
+        });
+        if (res.ok) {
+            json = res.json();
+        } else {
+            throw new Error("There was a problem with your request");
+        }
+    }
 
-  let canvasRef: HTMLCanvasElement;
-  let chart: any;
+    function handleClick() {
+        open = true;
+    }
 
-  let statistic: Statistic = newStatistic();
+    function closeDialog() {
+        open = false;
+    }
 
-  async function fetchData() {
-    const res = await fetch("http://localhost:8080/api/v1/stats/", {
-      method: "GET",
-      headers: {
-        Authorization: `Bearer ${$token}`,
-      },
-    });
-    if (res.ok) {
-      json = res.json();
-    } else {
-      throw new Error("There was a problem with your request");
+    function onStatisticAdd() {
+        open = false;
+        fetchData();
     }
-  }
 
-  async function submitStat() {
-    const response = await fetch("http://localhost:8080/api/v1/stats/", {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${$token}`,
-      },
-      body: JSON.stringify({
-        date: new Date(),
-        user_id: 1,
-        quantity: 3,
-      }),
+    onMount(() => {
+        fetchData();
+        chart = new Chart(canvasRef, {
+            type: "bar",
+            data: {
+                labels: ["one", "two"],
+                datasets: [
+                    {
+                        label: "Water",
+                        data: [1, 2],
+                        backgroundColor: "rgba(75, 192, 192, 0.2)",
+                        borderColor: "rgba(75, 192, 192, 1)",
+                        borderWidth: 1
+                    }
+                ]
+            }
+        });
     });
-    fetchData();
-  }
-
-  function handleClick() {
-    showAddForm = true;
-  }
-
-  function handleAddDialogSubmit(e: Event) {
-    console.log(statistic);
-    showAddForm = false;
-  }
-
-  function closeDialog() {
-    showAddForm = false;
-  }
 
-  function newStatistic(): Statistic {
-    let now = new Date(),
-      month,
-      day,
-      year;
-
-    month = `${now.getMonth() + 1}`;
-    day = `${now.getDate()}`;
-    year = now.getFullYear();
-    if (month.length < 2) month = "0" + month;
-    if (day.length < 2) day = "0" + day;
-
-    const date = [year, month, day].join("-");
-
-    return {
-      user_id: $user!.uuid,
-      date,
-      quantity: 1,
-    };
-  }
-
-  onMount(() => {
-    fetchData();
-    chart = new Chart(canvasRef, {
-        type: 'bar',
-        data: {
-            labels: ['one', 'two'],
-            datasets: [
-                {
-                    label: 'Water',
-                    data: [1, 2],
-                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
-                    borderColor: 'rgba(75, 192, 192, 1)',
-                    borderWidth: 1
-                }
-            ]
-        }
+    onDestroy(() => {
+        if (chart) chart.destroy();
+        chart = null;
     });
-  });
-
-  onDestroy(() => {
-    if (chart) chart.destroy();
-    chart = null;
-  });
 </script>
 
 <div>
-  <button on:click={submitStat}>Add Stat Test</button>
-  <dialog open={showAddForm} on:submit={handleAddDialogSubmit}>
-    <h2>Add Water</h2>
-    <form method="dialog">
-      <div class="form input group">
-        <label for="date">Date:</label>
-        <input bind:value={statistic.date} id="date" name="date" type="date" />
-      </div>
-      <div class="form input group">
-        <label for="quantity">Quantity:</label>
-        <input
-          bind:value={statistic.quantity}
-          id="quantity"
-          name="quantity"
-          type="number"
-          min="0"
-          autocomplete="off"
-        />
-      </div>
-      <button on:click={closeDialog}>Cancel</button>
-      <button type="submit">Submit</button>
-    </form>
-  </dialog>
-  <button on:click={handleClick}>Add</button>
-  <canvas bind:this={canvasRef} />
-  {#await json then data}
-    <Table {data} nofooter />
-  {:catch error}
-    <p>{error}</p>
-  {/await}
-  <!-- <Chart /> -->
+    <button on:click={handleClick}>Add</button>
+    <canvas bind:this={canvasRef} />
+    <AddForm {open} on:submit={onStatisticAdd} on:close={closeDialog} />
+    {#await json then data}
+        <Table {data} nofooter />
+    {:catch error}
+        <p>{error}</p>
+    {/await}
+    <!-- <Chart /> -->
 </div>
 
 <style>
-  dialog {
-    background: red;
-    box-shadow: 0 20px 5em 10px rgba(0, 0, 0, 0.8);
-  }
-  dialog::backdrop {
-    padding: 20px;
-    box-shadow: 20px 20px rgba(0, 0, 0, 0.8);
-    background-color: red;
-  }
+    dialog {
+        background: red;
+        box-shadow: 0 20px 5em 10px rgba(0, 0, 0, 0.8);
+    }
+
+    dialog::backdrop {
+        padding: 20px;
+        box-shadow: 20px 20px rgba(0, 0, 0, 0.8);
+        background-color: red;
+    }
 </style>
diff --git a/fe/src/lib/forms/AddForm.svelte b/fe/src/lib/forms/AddForm.svelte
new file mode 100644
index 0000000..f22e5f4
--- /dev/null
+++ b/fe/src/lib/forms/AddForm.svelte
@@ -0,0 +1,74 @@
+<script lang='ts'>
+    import { createEventDispatcher } from "svelte";
+    import { token, user } from "../../stores/auth";
+    import type { Statistic } from "../../types";
+
+    export let open: boolean;
+
+    const dispatch = createEventDispatcher();
+
+    const statistic: Statistic = newStatistic();
+
+    function newStatistic(): Statistic {
+        let now = new Date(),
+            month,
+            day,
+            year;
+
+        month = `${now.getMonth() + 1}`;
+        day = `${now.getDate()}`;
+        year = now.getFullYear();
+        if (month.length < 2) month = "0" + month;
+        if (day.length < 2) day = "0" + day;
+
+        const date = [year, month, day].join("-");
+
+        return {
+            user_id: $user!.uuid,
+            date,
+            quantity: 1
+        };
+    }
+
+    function closeDialog() {
+        dispatch("close");
+    }
+
+    async function handleSubmitStat() {
+        const response = await fetch("http://localhost:8080/api/v1/stats/", {
+            method: "POST",
+            headers: {
+                Authorization: `Bearer ${$token}`
+            },
+            body: JSON.stringify({
+                date: new Date(),
+                user_id: 1,
+                quantity: 3
+            })
+        });
+        dispatch("submit");
+    }
+</script>
+
+<dialog {open} on:submit={handleSubmitStat}>
+    <h2>Add Water</h2>
+    <form method="dialog">
+        <div class="form input group">
+            <label for="date">Date:</label>
+            <input bind:value={statistic.date} id="date" name="date" type="date" />
+        </div>
+        <div class="form input group">
+            <label for="quantity">Quantity:</label>
+            <input
+                bind:value={statistic.quantity}
+                id="quantity"
+                name="quantity"
+                type="number"
+                min="0"
+                autocomplete="off"
+            />
+        </div>
+        <button on:click={closeDialog}>Cancel</button>
+        <button type="submit">Submit</button>
+    </form>
+</dialog>
\ No newline at end of file
-- 
cgit v1.1


From 326f186d67017f87e631a1fbcdf3f184cbc42d7d Mon Sep 17 00:00:00 2001
From: Zach Berwaldt <zberwaldt@tutamail.com>
Date: Fri, 1 Mar 2024 20:26:42 -0500
Subject: feat: Add last seven days labels to chart

In the `DataView.svelte` component, the last seven days are now included as labels in the chart. This allows users to easily visualize data for the past week. The `getLastSevenDays` function generates an array of string values representing the dates in ISO format. This array is assigned to the `lastSevenDays` variable, which is then used as the labels in the chart's dataset.
---
 fe/src/lib/DataView.svelte | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

(limited to 'fe/src/lib')

diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index 7f368c6..5182a85 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -12,6 +12,8 @@
     let canvasRef: HTMLCanvasElement;
     let chart: any;
 
+    let lastSevenDays: string[];
+
     async function fetchData() {
         const res = await fetch("http://localhost:8080/api/v1/stats/", {
             method: "GET",
@@ -26,6 +28,16 @@
         }
     }
 
+    function getLastSevenDays() {
+        const result = [];
+        for (let i = 0; i < 7; i++) {
+            let d = new Date();
+            d.setDate(d.getDate() - i);
+            result.push(d.toISOString().substring(0, 10));
+        }
+        return result;
+    }
+
     function handleClick() {
         open = true;
     }
@@ -41,14 +53,21 @@
 
     onMount(() => {
         fetchData();
+        lastSevenDays = getLastSevenDays();
         chart = new Chart(canvasRef, {
             type: "bar",
             data: {
-                labels: ["one", "two"],
+                labels: lastSevenDays,
                 datasets: [
                     {
-                        label: "Water",
-                        data: [1, 2],
+                        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
@@ -66,8 +85,8 @@
 
 <div>
     <button on:click={handleClick}>Add</button>
-    <canvas bind:this={canvasRef} />
     <AddForm {open} on:submit={onStatisticAdd} on:close={closeDialog} />
+    <canvas bind:this={canvasRef} />
     {#await json then data}
         <Table {data} nofooter />
     {:catch error}
-- 
cgit v1.1


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/Card.svelte     |  30 ++++----
 fe/src/lib/Column.svelte   |  13 ++++
 fe/src/lib/DataView.svelte | 129 +++++++++++++++++++++++++++-------
 fe/src/lib/Layout.svelte   | 116 ++++++++++++++++--------------
 fe/src/lib/Table.svelte    | 172 ++++++++++++++++++++++++---------------------
 5 files changed, 286 insertions(+), 174 deletions(-)
 create mode 100644 fe/src/lib/Column.svelte

(limited to 'fe/src/lib')

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>
-- 
cgit v1.1


From 5fa57845052655883120ba4d19a85d8756fb8d8c Mon Sep 17 00:00:00 2001
From: Zach Berwaldt <zberwaldt@tutamail.com>
Date: Wed, 6 Mar 2024 21:53:07 -0500
Subject: [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.
---
 fe/src/lib/DataView.svelte      | 130 +++++++++++++++++++++-------------------
 fe/src/lib/forms/AddForm.svelte |  13 ++--
 2 files changed, 77 insertions(+), 66 deletions(-)

(limited to 'fe/src/lib')

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 @@
     import AddForm from "./forms/AddForm.svelte";
 
     let json: Promise<any>;
-    let totals: Promise<any>;
-    let userStats: Promise<any>;
 
     let barCanvasRef: HTMLCanvasElement;
     let lineCanvasRef: HTMLCanvasElement;
@@ -18,6 +16,10 @@
     let lineChart: any;
 
     let lastSevenDays: string[];
+    let lastSevenDaysData: number[];
+
+    let userTotalsLabels: string[];
+    let userTotalsData: number[];
 
     async function fetchData() {
         const res = await fetch("http://localhost:8080/api/v1/stats/", {
@@ -33,24 +35,27 @@
         }
     }
 
-    async function fetchTotals() {
+    async function fetchDailyUserStatistics() {
         const res = await fetch("http://localhost:8080/api/v1/stats/totals/", {
-            method: 'GET',
-            mode: 'no-cors',
+            method: "GET",
             headers: {
                 Authorization: `Bearer ${$token}`
             }
         });
 
         if (res.ok) {
-            totals = res.json();
+            const json = await res.json();
+            let labels = json.map(d => d.name);
+            let data = json.map(d => d.total);
+            return [labels, data];
         } 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", {
+    async function fetchWeeklyTotals() {
+        const res = await fetch("http://localhost:8080/api/v1/stats/weekly/", {
             method: "GET",
             headers: {
                 Authorization: `Bearer ${$token}`
@@ -58,22 +63,15 @@
         });
 
         if (res.ok) {
-            userStats = res.json();
+            const json = await res.json();
+            let labels = json.map(d => d.date);
+            let data = json.map(d => d.total);
+            return [labels, data];
         } else {
             throw new Error("There was a problem with your request");
         }
     }
 
-    function getLastSevenDays() {
-        const result = [];
-        for (let i = 0; i < 7; i++) {
-            let d = new Date();
-            d.setDate(d.getDate() - i);
-            result.push(d.toISOString().substring(0, 10));
-        }
-        return result;
-    }
-
     function closeDialog() {
         addFormOpen.set(false);
     }
@@ -81,61 +79,79 @@
     function onStatisticAdd() {
         closeDialog();
         fetchData();
+        fetchWeeklyTotals().then(updateWeeklyTotalsChart).catch(err => console.error(err));
+        fetchDailyUserStatistics().then(updateDailyUserTotalsChart).catch(err => console.error(err));
     }
 
-    onMount(() => {
-        fetchData();
-//        fetchTotals();
-        fetchStatsForUser();
-        lastSevenDays = getLastSevenDays();
-        barChart = new Chart(barCanvasRef, {
-            type: "bar",
+    function setupWeeklyTotalsChart(result) {
+        [lastSevenDays, lastSevenDaysData] = result;
+        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
+                        label: "Totals",
+                        data: lastSevenDaysData,
+                        backgroundColor: "rgba(255, 192, 192, 0.2)"
                     }
                 ]
             },
             options: {
-                responsive: true
+                responsive: true,
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                }
             }
         });
-        lineChart = new Chart(lineCanvasRef, {
-            type: "line",
+    }
+
+    function setupDailyUserTotalsChart(result) {
+        [userTotalsLabels, userTotalsData] = result;
+
+        barChart = new Chart(barCanvasRef, {
+            type: "bar",
             data: {
-                labels: lastSevenDays,
+                labels: userTotalsLabels,
                 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
+                        data: userTotalsData,
+                        backgroundColor: [
+                            "#330000",
+                            "rgba(100, 200, 192, 0.2)"
+                        ]
                     }
                 ]
             },
             options: {
-                responsive: true
+                responsive: true,
+                plugins: {
+                    legend: {
+                        display: false
+                    }
+                }
             }
         });
+    }
+
+    function updateWeeklyTotalsChart(result) {
+        [,lastSevenDaysData] = result;
+        lineChart.data.datasets[0].data = lastSevenDaysData;
+        lineChart.update();
+    }
+
+    function updateDailyUserTotalsChart(result) {
+        [,userTotalsData] = result;
+        barChart.data.datasets[0].data = userTotalsData;
+        barChart.update();
+    }
+
+    onMount(() => {
+        fetchData();
+        fetchWeeklyTotals().then(setupWeeklyTotalsChart);
+        fetchDailyUserStatistics().then(setupDailyUserTotalsChart);
     });
 
     onDestroy(() => {
@@ -164,14 +180,6 @@
             <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 /> -->
 
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 @@
         dispatch("close");
     }
 
-    async function handleSubmitStat() {
-        const response = await fetch("http://localhost:8080/api/v1/stats/", {
+    async function handleSubmitStat()
+    {
+        const { date, quantity } = statistic;
+        await fetch("http://localhost:8080/api/v1/stats/", {
             method: "POST",
             headers: {
                 Authorization: `Bearer ${$token}`
             },
             body: JSON.stringify({
-                date: new Date(),
-                user_id: 1,
-                quantity: 3
+                date: new Date(date),
+                user_id: 2,
+                quantity
             })
         });
         dispatch("submit");
     }
+
 </script>
 
 <dialog {open} on:submit={handleSubmitStat}>
-- 
cgit v1.1


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/lib/DataView.svelte | 53 ++++++++++++++++++++++++++++++++++++++++------
 fe/src/lib/Table.svelte    | 13 ++++++------
 2 files changed, 54 insertions(+), 12 deletions(-)

(limited to 'fe/src/lib')

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


From 9cae9c1d2a0b4f7fa72f3075541b9ffafe1a7275 Mon Sep 17 00:00:00 2001
From: Zach Berwaldt <zberwaldt@tutamail.com>
Date: Fri, 15 Mar 2024 18:49:43 -0400
Subject: Add routes for preference, clean up and add types

---
 fe/src/lib/Card.svelte            |   1 -
 fe/src/lib/Chart.svelte           |  63 +++++++++++++++++
 fe/src/lib/DataView.svelte        |  40 ++++-------
 fe/src/lib/Layout.svelte          |   8 ++-
 fe/src/lib/LoginForm.svelte       |   2 +-
 fe/src/lib/PreferencesForm.svelte | 145 ++++++++++++++++++++++++++++----------
 fe/src/lib/errors.ts              |   6 +-
 fe/src/lib/utils.ts               |   2 +-
 8 files changed, 193 insertions(+), 74 deletions(-)
 create mode 100644 fe/src/lib/Chart.svelte

(limited to 'fe/src/lib')

diff --git a/fe/src/lib/Card.svelte b/fe/src/lib/Card.svelte
index d7cd900..cd1e02c 100644
--- a/fe/src/lib/Card.svelte
+++ b/fe/src/lib/Card.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     export let title = "";
-    export let height: number | undefined = undefined;
 </script>
 
 <div class="card">
diff --git a/fe/src/lib/Chart.svelte b/fe/src/lib/Chart.svelte
new file mode 100644
index 0000000..b19d932
--- /dev/null
+++ b/fe/src/lib/Chart.svelte
@@ -0,0 +1,63 @@
+<script lang="ts">
+import { onDestroy } from "svelte";
+import ChartJS from "chart.js/auto";
+
+export let data;
+export let labels;
+export let type = 'bar';
+
+let ref: HTMLCanvasElement;
+let chart
+
+function setupChart(result) {
+    [labels, data] = result;
+    chart = new ChartJS(ref, {
+        type,
+        data: {
+            labels,
+            datasets: [
+                {
+                    label: "Totals",
+                    data,
+                    backgroundColor: "rgba(255, 192, 192, 0.2)"
+                }
+            ]
+        },
+        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}
+                }
+            }
+        }
+    });
+    
+    onDestroy(() => {
+        if (chart) chart.destroy();
+        chart = null;
+    })
+}
+</script>
+
+<canvas bind:this={ref} />
\ No newline at end of file
diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index 0a6b81b..5e81a5a 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
     import { onDestroy, onMount } from "svelte";
-    import HttpClient from "../http";
+    import http from "../http";
     import { token } from "../stores/auth";
     import { addFormOpen } from "../stores/forms";
     import Table from "./Table.svelte";
-    import Chart from "chart.js/auto";
+    import ChartJS from "chart.js/auto";
+    import Chart from './Chart.svelte'
     import Card from "./Card.svelte";
     import Column from "./Column.svelte";
     import AddForm from "./forms/AddForm.svelte";
@@ -46,8 +47,8 @@
 
         if (res.ok) {
             const json = await res.json();
-            let labels = json.map(d => d.name);
-            let data = json.map(d => d.total);
+            let labels = json.map((d: any) => d.name);
+            let data = json.map((d: any) => d.total);
             return [labels, data];
         } else {
             throw new Error("There was a problem with your request");
@@ -65,8 +66,8 @@
 
         if (res.ok) {
             const json = await res.json();
-            let labels = json.map(d => d.date);
-            let data = json.map(d => d.total);
+            let labels = json.map((d: any) => d.date);
+            let data = json.map((d: any) => d.total);
             return [labels, data];
         } else {
             throw new Error("There was a problem with your request");
@@ -84,9 +85,9 @@
         fetchDailyUserStatistics().then(updateDailyUserTotalsChart).catch(err => console.error(err));
     }
 
-    function setupWeeklyTotalsChart(result) {
+    function setupWeeklyTotalsChart(result: any) {
         [lastSevenDays, lastSevenDaysData] = result;
-        lineChart = new Chart(lineCanvasRef, {
+        lineChart = new ChartJS(lineCanvasRef, {
             type: "line",
             data: {
                 labels: lastSevenDays,
@@ -129,10 +130,10 @@
         });
     }
 
-    function setupDailyUserTotalsChart(result) {
+    function setupDailyUserTotalsChart(result: any) {
         [userTotalsLabels, userTotalsData] = result;
 
-        barChart = new Chart(barCanvasRef, {
+        barChart = new ChartJS(barCanvasRef, {
             type: "bar",
             data: {
                 labels: userTotalsLabels,
@@ -177,13 +178,13 @@
         });
     }
 
-    function updateWeeklyTotalsChart(result) {
+    function updateWeeklyTotalsChart(result: any) {
         [, lastSevenDaysData] = result;
         lineChart.data.datasets[0].data = lastSevenDaysData;
         lineChart.update();
     }
 
-    function updateDailyUserTotalsChart(result) {
+    function updateDailyUserTotalsChart(result: any) {
         [, userTotalsData] = result;
         barChart.data.datasets[0].data = userTotalsData;
         barChart.update();
@@ -205,6 +206,7 @@
 
 <Column --width="500px">
     <Card --height="300px">
+        <!--<Chart />-->
         <canvas bind:this={barCanvasRef} />
     </Card>
     <Card --height="300px">
@@ -223,17 +225,3 @@
     </Card>
 </Column>
 <!-- <Chart /> -->
-
-
-<style>
-    dialog {
-        background: red;
-        box-shadow: 0 20px 5em 10px rgba(0, 0, 0, 0.8);
-    }
-
-    dialog::backdrop {
-        padding: 20px;
-        box-shadow: 20px 20px rgba(0, 0, 0, 0.8);
-        background-color: red;
-    }
-</style>
diff --git a/fe/src/lib/Layout.svelte b/fe/src/lib/Layout.svelte
index f208f34..2728dd3 100644
--- a/fe/src/lib/Layout.svelte
+++ b/fe/src/lib/Layout.svelte
@@ -1,9 +1,13 @@
 <script>
-    import { authenticated, token } from "../stores/auth";
+    import { authenticated, token, user, preferences } from "../stores/auth";
     import PreferencesForm from "./PreferencesForm.svelte";
     import { addFormOpen } from "../stores/forms";
 
-    const logout = () => token.unauthenticate();
+    const logout = () => { 
+        preferences.reset();
+        user.reset();
+        token.unauthenticate();
+    }
     let preferenceFormOpen = false;
 
     function showPreferencesDialog() {
diff --git a/fe/src/lib/LoginForm.svelte b/fe/src/lib/LoginForm.svelte
index bf6d9ad..8c3c288 100644
--- a/fe/src/lib/LoginForm.svelte
+++ b/fe/src/lib/LoginForm.svelte
@@ -47,7 +47,7 @@
         preferences: userPreferences,
       } = await response.json();
       user.setUser(userData);
-      preferences.set(userPreferences);
+      preferences.setPreference(userPreferences);
       token.authenticate(apiToken);
     }
 
diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/PreferencesForm.svelte
index 95e04c1..875393c 100644
--- a/fe/src/lib/PreferencesForm.svelte
+++ b/fe/src/lib/PreferencesForm.svelte
@@ -1,51 +1,118 @@
 <script lang="ts">
-    import { preferences } from '../stores/auth';
-    import type { Size, Preference } from '../types';
-    import { createEventDispatcher } from 'svelte';
-   export let open: boolean; 
-
-    let preference: Preference = {
-        color: "#00FF00",
-        size: {
-            size: 8,
-            unit: 'oz'
-        }
-    }
-
-    const dispatch = createEventDispatcher();
-    
-    preferences.subscribe((value) => {
-        preference = value;
+  import { user, preferences, token } from "../stores/auth";
+  import { createEventDispatcher, onDestroy, onMount } from "svelte";
+  import type { User } from "../types";
+
+  export let open: boolean;
+
+  let sizes: Array<any>;
+  let selectedSize: number = 1;
+  let color: string = "#000000";
+
+  const dispatch = createEventDispatcher();
+
+  const unsubscribe = preferences.subscribe(
+    (value: any) => {
+        console.log('update value: ', value);
+      color = value.color;
+      selectedSize = value.size_id;
+    },
+  );
+
+  function closeDialog() {
+    dispatch("close");
+  }
+
+  async function updateUserPreferences() {
+    const res = await fetch("http://localhost:8080/api/v1/user/preferences", {
+      method: "PATCH",
+      headers: {
+        Authorization: `Bearer ${$token}`,
+      },
+      body: JSON.stringify($preferences),
     });
+  }
 
-    function onPreferencesSave(): void {
-        preferences.set(preference);
-        dispatch('close')
-    }
+  async function getUserPreferences() {
+    const res = await fetch(
+      `http://localhost:8080/api/v1/user/${($user as User)!.id}/preferences`,
+      {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${$token}`,
+        },
+      },
+    );
+    const updatePreferences = await res.json();
+    preferences.set(updatePreferences);
+  }
 
+  async function onPreferencesSave(): Promise<void> {
+    preferences.update((value) => ({
+      ...value!,
+      size_id: selectedSize,
+      color: color,
+    }));
+
+    await updateUserPreferences();
+    await getUserPreferences();
+
+    dispatch("close");
+  }
+
+  onMount(() => {
+    fetch("http://localhost:8080/api/v1/sizes", {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${$token}`,
+      },
+    })
+      .then((res) => res.json())
+      .then((val) => (sizes = val));
+  });
+
+  onDestroy(() => {
+    unsubscribe();
+  });
 </script>
+
 <dialog {open} on:submit|preventDefault={onPreferencesSave}>
-    <h2>User Preferences</h2>
-    <form method="dialog">
-        <div class="form input group">
-            <label for="color">Color</label>
-            <input id="color" name="color" type="color" bind:value={preference.color}/>
-        </div>
-        <div class="form input group">
-            <label for="size">Bottle Size</label>
-            <input id="size" name="size" type="number" min="8" max="48" step="8" bind:value={preference.size.size}/>
-        </div>
-        <button type="submit">Save</button>
-    </form>
+  <h2>User Preferences</h2>
+  <form method="dialog">
+    <div class="form input group">
+      <label for="color">Color</label>
+      <input
+        id="color"
+        name="color"
+        type="color"
+        bind:value={color}
+      />
+    </div>
+    <div class="form input group">
+      <label for="size">Bottle Size</label>
+      <select
+        bind:value={selectedSize}
+      >
+        {#if sizes}
+          {#each sizes as size}
+            <option value={size.id}>{size.size} {size.unit}</option>
+          {/each}
+        {/if}
+      </select>
+    </div>
+    <button on:click={closeDialog}>Cancel</button>
+    <button type="submit">Save</button>
+  </form>
 </dialog>
+
 <style>
-dialog {
+  dialog {
     background: white;
     color: black;
-}
+  }
 
-input[type="color"] {
-   width: 100%;
-   height: 100%;
-}
+  input[type="color"] {
+    width: 4em;
+    height: 4em;
+  }
 </style>
diff --git a/fe/src/lib/errors.ts b/fe/src/lib/errors.ts
index d44bec5..81f7145 100644
--- a/fe/src/lib/errors.ts
+++ b/fe/src/lib/errors.ts
@@ -1,7 +1,5 @@
 export class UnauthorizedError extends Error {
-  constructor(message?: string, options?: ErrorOptions) {
-    super(message, options);
+  constructor(message?: string) {
+    super(message);
   }
 }
-
-
diff --git a/fe/src/lib/utils.ts b/fe/src/lib/utils.ts
index 22d4e9a..e78556c 100644
--- a/fe/src/lib/utils.ts
+++ b/fe/src/lib/utils.ts
@@ -1,5 +1,5 @@
 export function processFormInput(form: HTMLFormElement) {
-  const formData = new FormData(form);
+  const formData: FormData = new FormData(form);
   const data: Record<string, any> = {};
   for (let field of formData) {
     const [key, value] = field;
-- 
cgit v1.1


From c4e5776f9e174fe6bf91721649c0541a9fb310ae Mon Sep 17 00:00:00 2001
From: Zach Berwaldt <zberwaldt@tutamail.com>
Date: Fri, 15 Mar 2024 21:41:12 -0400
Subject: add env samples, move files

---
 fe/src/lib/errors.ts | 5 -----
 fe/src/lib/utils.ts  | 9 ---------
 2 files changed, 14 deletions(-)
 delete mode 100644 fe/src/lib/errors.ts
 delete mode 100644 fe/src/lib/utils.ts

(limited to 'fe/src/lib')

diff --git a/fe/src/lib/errors.ts b/fe/src/lib/errors.ts
deleted file mode 100644
index 81f7145..0000000
--- a/fe/src/lib/errors.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export class UnauthorizedError extends Error {
-  constructor(message?: string) {
-    super(message);
-  }
-}
diff --git a/fe/src/lib/utils.ts b/fe/src/lib/utils.ts
deleted file mode 100644
index e78556c..0000000
--- a/fe/src/lib/utils.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export function processFormInput(form: HTMLFormElement) {
-  const formData: FormData = new FormData(form);
-  const data: Record<string, any> = {};
-  for (let field of formData) {
-    const [key, value] = field;
-    data[key] = value;
-  }
-  return data;
-}
-- 
cgit v1.1


From fd1332a3df191577e91c6d846a8b5db1747099fd Mon Sep 17 00:00:00 2001
From: Zach Berwaldt <zberwaldt@tutamail.com>
Date: Fri, 15 Mar 2024 22:00:10 -0400
Subject: cleanup

---
 fe/src/lib/DataView.svelte        |  7 ++++---
 fe/src/lib/LoginForm.svelte       |  3 ++-
 fe/src/lib/PreferencesForm.svelte | 15 ++++++++-------
 fe/src/lib/forms/AddForm.svelte   |  3 ++-
 4 files changed, 16 insertions(+), 12 deletions(-)

(limited to 'fe/src/lib')

diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index 5e81a5a..ffc2fe8 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -9,6 +9,7 @@
     import Card from "./Card.svelte";
     import Column from "./Column.svelte";
     import AddForm from "./forms/AddForm.svelte";
+    import { apiURL } from "../utils";
 
     let json: Promise<any>;
 
@@ -24,7 +25,7 @@
     let userTotalsData: number[];
 
     async function fetchData() {
-        const res = await fetch("http://localhost:8080/api/v1/stats/", {
+        const res = await fetch(apiURL("stats"), {
             method: "GET",
             headers: {
                 Authorization: `Bearer ${$token}`
@@ -38,7 +39,7 @@
     }
 
     async function fetchDailyUserStatistics() {
-        const res = await fetch("http://localhost:8080/api/v1/stats/daily/", {
+        const res = await fetch(apiURL("stats/daily"), {
             method: "GET",
             headers: {
                 Authorization: `Bearer ${$token}`
@@ -57,7 +58,7 @@
     }
 
     async function fetchWeeklyTotals() {
-        const res = await fetch("http://localhost:8080/api/v1/stats/weekly/", {
+        const res = await fetch(apiURL("stats/weekly"), {
             method: "GET",
             headers: {
                 Authorization: `Bearer ${$token}`
diff --git a/fe/src/lib/LoginForm.svelte b/fe/src/lib/LoginForm.svelte
index 8c3c288..cf5febf 100644
--- a/fe/src/lib/LoginForm.svelte
+++ b/fe/src/lib/LoginForm.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { token, user, preferences } from "../stores/auth";
   import Card from "./Card.svelte";
+  import { apiURL } from "../utils";
 
   let credentials: CredentialObject = {
     username: "",
@@ -28,7 +29,7 @@
     }
     const auth = prepareCredentials(credentials);
 
-    const response = await fetch("http://localhost:8080/api/v1/auth", {
+    const response = await fetch(apiURL("auth"), {
       method: "POST",
       headers: {
         Authorization: `Basic ${auth}`,
diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/PreferencesForm.svelte
index 875393c..74b8a63 100644
--- a/fe/src/lib/PreferencesForm.svelte
+++ b/fe/src/lib/PreferencesForm.svelte
@@ -2,6 +2,7 @@
   import { user, preferences, token } from "../stores/auth";
   import { createEventDispatcher, onDestroy, onMount } from "svelte";
   import type { User } from "../types";
+  import { apiURL } from "../utils";
 
   export let open: boolean;
 
@@ -13,9 +14,10 @@
 
   const unsubscribe = preferences.subscribe(
     (value: any) => {
-        console.log('update value: ', value);
-      color = value.color;
-      selectedSize = value.size_id;
+      if (value) {
+        color = value.color;
+        selectedSize = value.size_id;
+      }
     },
   );
 
@@ -24,7 +26,7 @@
   }
 
   async function updateUserPreferences() {
-    const res = await fetch("http://localhost:8080/api/v1/user/preferences", {
+    const res = await fetch(apiURL("user/preferences"), {
       method: "PATCH",
       headers: {
         Authorization: `Bearer ${$token}`,
@@ -34,8 +36,7 @@
   }
 
   async function getUserPreferences() {
-    const res = await fetch(
-      `http://localhost:8080/api/v1/user/${($user as User)!.id}/preferences`,
+    const res = await fetch(apiURL(`user/${($user as User)!.id}/preferences`),
       {
         method: "GET",
         headers: {
@@ -61,7 +62,7 @@
   }
 
   onMount(() => {
-    fetch("http://localhost:8080/api/v1/sizes", {
+    fetch(apiURL("sizes"), {
       method: "GET",
       headers: {
         Authorization: `Bearer ${$token}`,
diff --git a/fe/src/lib/forms/AddForm.svelte b/fe/src/lib/forms/AddForm.svelte
index 4520b1b..f85cce6 100644
--- a/fe/src/lib/forms/AddForm.svelte
+++ b/fe/src/lib/forms/AddForm.svelte
@@ -2,6 +2,7 @@
     import { createEventDispatcher } from "svelte";
     import { token, user } from "../../stores/auth";
     import type { Statistic } from "../../types";
+    import { apiURL } from "../../utils";
 
     export let open: boolean;
 
@@ -37,7 +38,7 @@
     async function handleSubmitStat()
     {
         const { date, quantity } = statistic;
-        await fetch("http://localhost:8080/api/v1/stats/", {
+        await fetch(apiURL("stats"), {
             method: "POST",
             headers: {
                 Authorization: `Bearer ${$token}`
-- 
cgit v1.1