From eb51bdbfef8c2aacf0fdfde279a40de7f74c8d86 Mon Sep 17 00:00:00 2001
From: Zach Berwaldt <zberwaldt@tutamail.com>
Date: Mon, 18 Mar 2024 21:27:24 -0400
Subject: clean up, add better error handling

---
 fe/src/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'fe/src')

diff --git a/fe/src/utils.ts b/fe/src/utils.ts
index 9fddf41..41c733d 100644
--- a/fe/src/utils.ts
+++ b/fe/src/utils.ts
@@ -10,5 +10,5 @@ export function processFormInput(form: HTMLFormElement) {
 
 export function apiURL (path: string): string {
   const baseUrl = import.meta.env?.VITE_API_BASE_URL ?? "http://localhost:8080/api/v1";
-  return `${baseUrl}${path}`
+  return `${baseUrl}/${path}`
 }
-- 
cgit v1.1


From fd6f6f169f9ff9a1247228fb34dc9654a9584915 Mon Sep 17 00:00:00 2001
From: Zach Berwaldt <zberwaldt@tutamail.com>
Date: Thu, 21 Mar 2024 11:23:42 -0400
Subject: fix bugs, redo layout, reorg.

---
 fe/src/App.svelte                       |   2 +-
 fe/src/app.css                          |  53 +++++---------
 fe/src/lib/Card.svelte                  |   5 +-
 fe/src/lib/Column.svelte                |   8 ++-
 fe/src/lib/DataView.svelte              |   8 +--
 fe/src/lib/Layout.svelte                |  51 +++++++++++---
 fe/src/lib/LoginForm.svelte             |  86 -----------------------
 fe/src/lib/PreferencesForm.svelte       | 119 --------------------------------
 fe/src/lib/Table.svelte                 |  10 ++-
 fe/src/lib/forms/AddForm.svelte         |  25 ++-----
 fe/src/lib/forms/LoginForm.svelte       |  86 +++++++++++++++++++++++
 fe/src/lib/forms/PreferencesForm.svelte | 119 ++++++++++++++++++++++++++++++++
 fe/src/lib/forms/index.ts               |  10 +++
 fe/src/types.ts                         |   2 +-
 14 files changed, 297 insertions(+), 287 deletions(-)
 delete mode 100644 fe/src/lib/LoginForm.svelte
 delete mode 100644 fe/src/lib/PreferencesForm.svelte
 create mode 100644 fe/src/lib/forms/LoginForm.svelte
 create mode 100644 fe/src/lib/forms/PreferencesForm.svelte
 create mode 100644 fe/src/lib/forms/index.ts

(limited to 'fe/src')

diff --git a/fe/src/App.svelte b/fe/src/App.svelte
index 25d53dc..11eb217 100644
--- a/fe/src/App.svelte
+++ b/fe/src/App.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import Layout from "./lib/Layout.svelte";
-  import LoginForm from "./lib/LoginForm.svelte";
+  import { LoginForm } from './lib/forms';
   import DataView from "./lib/DataView.svelte";
   import { authenticated } from "./stores/auth";
 </script>
diff --git a/fe/src/app.css b/fe/src/app.css
index c24c713..be7d15c 100644
--- a/fe/src/app.css
+++ b/fe/src/app.css
@@ -5,48 +5,34 @@
 
     color-scheme: light dark;
     color: rgba(255, 255, 255, 0.87);
-    background-color: #242424;
+    background-color: var(--background);
+    width: 100vw;
 
     font-synthesis: none;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 
-    --submit: #28a745;
+    --background: #242424;
 }
 
-a {
-    font-weight: 500;
-    color: #646cff;
-    text-decoration: inherit;
-}
+@media (min-width: 916px) {
+    :root {
+        width: unset;
+    }
 
-a:hover {
-    color: #535bf2;
+    #content div.column:first-child {
+        flex-direction: row;
+        height: 300px;
+    }
 }
 
 body {
     margin: 0;
-    display: flex;
-    place-items: center;
-    min-width: 320px;
-    min-height: 100vh;
+    padding: 0 2em 2em;
 }
 
-h1 {
-    font-size: 3.2em;
-    line-height: 1.1;
-}
 
-.card {
-    padding: 2em;
-}
-
-#app {
-    flex-grow: 2;
-    max-width: 1280px;
-    margin: 0 auto;
-}
 
 button {
     border-radius: 8px;
@@ -56,6 +42,7 @@ button {
     font-weight: 500;
     font-family: inherit;
     background-color: #1a1a1a;
+    color: inherit;
     cursor: pointer;
     transition: border-color 0.25s;
 }
@@ -64,10 +51,6 @@ button:hover {
     border-color: #646cff;
 }
 
-button:focus,
-button:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
-}
 
 @media (prefers-color-scheme: light) {
     :root {
@@ -84,12 +67,6 @@ button:focus-visible {
     }
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        color: #000;
-    }
-}
-
 .form {
     display: flex;
     flex-direction: column;
@@ -118,3 +95,7 @@ button:focus-visible {
     background: var(--submit);
     color: #fff;
 }
+
+dialog {
+    top: 8em;
+}
diff --git a/fe/src/lib/Card.svelte b/fe/src/lib/Card.svelte
index cd1e02c..0f29279 100644
--- a/fe/src/lib/Card.svelte
+++ b/fe/src/lib/Card.svelte
@@ -11,13 +11,12 @@
 
 <style>
     .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);
+        height: var(--height, inherit);
+        flex-grow: 2;
     }
 </style>
diff --git a/fe/src/lib/Column.svelte b/fe/src/lib/Column.svelte
index f036073..6902edf 100644
--- a/fe/src/lib/Column.svelte
+++ b/fe/src/lib/Column.svelte
@@ -7,7 +7,13 @@
         display: flex;
         flex-direction: column;
         height: 100%;
-        gap: var(--gap, 32px);
+        gap: var(--gap, 2em);
         width: var(--width, initial);
     }
+
+    @media (min-width: 916px) {
+        .column {
+            flex-direction: column;
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index ffc2fe8..1496239 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -205,12 +205,11 @@
     });
 </script>
 
-<Column --width="500px">
-    <Card --height="300px">
-        <!--<Chart />-->
+<Column>
+    <Card>
         <canvas bind:this={barCanvasRef} />
     </Card>
-    <Card --height="300px">
+    <Card>
         <canvas bind:this={lineCanvasRef} />
     </Card>
 </Column>
@@ -225,4 +224,3 @@
         {/await}
     </Card>
 </Column>
-<!-- <Chart /> -->
diff --git a/fe/src/lib/Layout.svelte b/fe/src/lib/Layout.svelte
index 2728dd3..26630d2 100644
--- a/fe/src/lib/Layout.svelte
+++ b/fe/src/lib/Layout.svelte
@@ -1,6 +1,6 @@
 <script>
     import { authenticated, token, user, preferences } from "../stores/auth";
-    import PreferencesForm from "./PreferencesForm.svelte";
+    import { PreferencesForm, AddForm } from "./forms";
     import { addFormOpen } from "../stores/forms";
 
     const logout = () => { 
@@ -30,9 +30,18 @@
                 <h1>Water</h1>
             </div>
             <div>
-                <button on:click={showAddDialog}>Log Water</button>
-                <button on:click={showPreferencesDialog}>Preference</button>
-                <button on:click={logout}>Logout</button>
+                <button on:click={showAddDialog}>
+                    <span class="btn-icon">➕</span>
+                    <span class="btn-content">Log Water</span>
+                </button>
+                <button on:click={showPreferencesDialog}>
+                    <span class="btn-icon">⚙</span>
+                    <span class="btn-content">Preference</span>
+                </button>
+                <button on:click={logout}>
+                    <span class="btn-icon">🔒</span>
+                    <span class="btn-content">Logout</span>
+                </button>
             </div>
         </nav>
         <PreferencesForm open={preferenceFormOpen} on:close={closePreferenceDialog} />
@@ -43,17 +52,30 @@
 </div>
 
 <style>
-    .layout {
-        height: 100vh;
-    }
-
     nav {
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
         height: 64px;
-        padding: 0 2em;
+        padding: 1em 0;
+    }
+
+    nav div button {
+        margin: 0 .5em;
+    }
+
+    nav div button:first-child {
+        margin-left: 0;
+    }
+
+    nav div button:last-child {
+        margin-right: 0;
+    }
+
+
+    nav .btn-content {
+        display: none;
     }
 
     nav div {
@@ -66,9 +88,16 @@
 
     #content {
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
         justify-content: center;
         gap: 2em;
-        margin-top: 4em;
+        margin-top: 1em;
+    }
+
+    @media (min-width: 916px) {
+        nav .btn-content {
+            display: inline;
+            margin-left: 1em;
+        }
     }
 </style>
diff --git a/fe/src/lib/LoginForm.svelte b/fe/src/lib/LoginForm.svelte
deleted file mode 100644
index cf5febf..0000000
--- a/fe/src/lib/LoginForm.svelte
+++ /dev/null
@@ -1,86 +0,0 @@
-<script lang="ts">
-  import { token, user, preferences } from "../stores/auth";
-  import Card from "./Card.svelte";
-  import { apiURL } from "../utils";
-
-  let credentials: CredentialObject = {
-    username: "",
-    password: "",
-  };
-
-  let error: string | null = null;
-
-  interface CredentialObject {
-    username: string;
-    password: string;
-  }
-
-  function prepareCredentials({
-    username,
-    password,
-  }: CredentialObject): string {
-    return btoa(`${username}:${password}`);
-  }
-
-  async function onSubmit(e: Event) {
-    if (!credentials.username || !credentials.password) {
-      error = "please enter your username and password";
-      return;
-    }
-    const auth = prepareCredentials(credentials);
-
-    const response = await fetch(apiURL("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,
-        user: userData,
-        preferences: userPreferences,
-      } = await response.json();
-      user.setUser(userData);
-      preferences.setPreference(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>
-</Card>
diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/PreferencesForm.svelte
deleted file mode 100644
index 74b8a63..0000000
--- a/fe/src/lib/PreferencesForm.svelte
+++ /dev/null
@@ -1,119 +0,0 @@
-<script lang="ts">
-  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;
-
-  let sizes: Array<any>;
-  let selectedSize: number = 1;
-  let color: string = "#000000";
-
-  const dispatch = createEventDispatcher();
-
-  const unsubscribe = preferences.subscribe(
-    (value: any) => {
-      if (value) {
-        color = value.color;
-        selectedSize = value.size_id;
-      }
-    },
-  );
-
-  function closeDialog() {
-    dispatch("close");
-  }
-
-  async function updateUserPreferences() {
-    const res = await fetch(apiURL("user/preferences"), {
-      method: "PATCH",
-      headers: {
-        Authorization: `Bearer ${$token}`,
-      },
-      body: JSON.stringify($preferences),
-    });
-  }
-
-  async function getUserPreferences() {
-    const res = await fetch(apiURL(`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(apiURL("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={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 {
-    background: white;
-    color: black;
-  }
-
-  input[type="color"] {
-    width: 4em;
-    height: 4em;
-  }
-</style>
diff --git a/fe/src/lib/Table.svelte b/fe/src/lib/Table.svelte
index 621157e..3ce3331 100644
--- a/fe/src/lib/Table.svelte
+++ b/fe/src/lib/Table.svelte
@@ -7,7 +7,7 @@
 
     export let sortBy: string = 'date';
 
-    type SortComparator = (a, b) => number
+    type SortComparator = (a:any , b:any) => number
 
     function getDataKeys(data: any[]): string[] {
         if (!data || data.length === 0) return [];
@@ -20,7 +20,7 @@
         return Object.entries(row).filter((r) => !omit.includes(r[0]));
     }
 
-    function sort(arr: Array<Record<string, any>>, fn: SortComparator = (a , b) => new Date(b[sortBy]) - new Date(a[sortBy])) {
+    function sort(arr: Array<Record<string, any>>, fn: SortComparator = (a , b) => Date.parse(b[sortBy]) - Date.parse(a[sortBy])) {
         return arr.sort(fn)
     }
 
@@ -92,10 +92,7 @@
         border: solid 1px black;
         border-collapse: collapse;
         overflow-y: hidden;
-    }
-
-    th {
-        text-transform: capitalize;
+        width: calc(100% - 16px);
     }
 
     thead tr {
@@ -108,6 +105,7 @@
 
     th,
     td {
+        text-transform: capitalize;
         padding: 1em;
         border: 1px solid rgba(0, 0, 0, 1);
     }
diff --git a/fe/src/lib/forms/AddForm.svelte b/fe/src/lib/forms/AddForm.svelte
index f85cce6..bbc8356 100644
--- a/fe/src/lib/forms/AddForm.svelte
+++ b/fe/src/lib/forms/AddForm.svelte
@@ -11,21 +11,10 @@
     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("-");
+        let date = new Date().toString();
 
         return {
-            user_id: $user!.uuid,
+            user_id: $user!.id,
             date,
             quantity: 1
         };
@@ -37,7 +26,7 @@
 
     async function handleSubmitStat()
     {
-        const { date, quantity } = statistic;
+        const { user_id, date, quantity } = statistic;
         await fetch(apiURL("stats"), {
             method: "POST",
             headers: {
@@ -45,7 +34,7 @@
             },
             body: JSON.stringify({
                 date: new Date(date),
-                user_id: 2,
+                user_id,
                 quantity
             })
         });
@@ -54,12 +43,12 @@
 
 </script>
 
-<dialog {open} on:submit={handleSubmitStat}>
+<dialog id="addForm" {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" />
+            <input bind:value={statistic.date} id="date" name="date" type="datetime-local" />
         </div>
         <div class="form input group">
             <label for="quantity">Quantity:</label>
@@ -75,4 +64,4 @@
         <button on:click={closeDialog}>Cancel</button>
         <button type="submit">Submit</button>
     </form>
-</dialog>
\ No newline at end of file
+</dialog>
diff --git a/fe/src/lib/forms/LoginForm.svelte b/fe/src/lib/forms/LoginForm.svelte
new file mode 100644
index 0000000..88d4479
--- /dev/null
+++ b/fe/src/lib/forms/LoginForm.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { token, user, preferences } from "../../stores/auth";
+  import Card from "../Card.svelte";
+  import { apiURL } from "../../utils";
+
+  let credentials: CredentialObject = {
+    username: "",
+    password: "",
+  };
+
+  let error: string | null = null;
+
+  interface CredentialObject {
+    username: string;
+    password: string;
+  }
+
+  function prepareCredentials({
+    username,
+    password,
+  }: CredentialObject): string {
+    return btoa(`${username}:${password}`);
+  }
+
+  async function onSubmit(e: Event) {
+    if (!credentials.username || !credentials.password) {
+      error = "please enter your username and password";
+      return;
+    }
+    const auth = prepareCredentials(credentials);
+
+    const response = await fetch(apiURL("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,
+        user: userData,
+        preferences: userPreferences,
+      } = await response.json();
+      user.setUser(userData);
+      preferences.setPreference(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>
+</Card>
diff --git a/fe/src/lib/forms/PreferencesForm.svelte b/fe/src/lib/forms/PreferencesForm.svelte
new file mode 100644
index 0000000..79663d1
--- /dev/null
+++ b/fe/src/lib/forms/PreferencesForm.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+  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;
+
+  let sizes: Array<any>;
+  let selectedSize: number = 1;
+  let color: string = "#000000";
+
+  const dispatch = createEventDispatcher();
+
+  const unsubscribe = preferences.subscribe(
+    (value: any) => {
+      if (value) {
+        color = value.color;
+        selectedSize = value.size_id;
+      }
+    },
+  );
+
+  function closeDialog() {
+    dispatch("close");
+  }
+
+  async function updateUserPreferences() {
+    const res = await fetch(apiURL("user/preferences"), {
+      method: "PATCH",
+      headers: {
+        Authorization: `Bearer ${$token}`,
+      },
+      body: JSON.stringify($preferences),
+    });
+  }
+
+  async function getUserPreferences() {
+    const res = await fetch(apiURL(`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(apiURL("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={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 {
+    background: white;
+    color: black;
+  }
+
+  input[type="color"] {
+    width: 4em;
+    height: 4em;
+  } */
+</style>
diff --git a/fe/src/lib/forms/index.ts b/fe/src/lib/forms/index.ts
new file mode 100644
index 0000000..ac4e63b
--- /dev/null
+++ b/fe/src/lib/forms/index.ts
@@ -0,0 +1,10 @@
+import AddForm from "./AddForm.svelte";
+import LoginForm from "./LoginForm.svelte";
+import PreferencesForm from "./PreferencesForm.svelte";
+
+
+export {
+  AddForm,
+  LoginForm,
+  PreferencesForm
+};
\ No newline at end of file
diff --git a/fe/src/types.ts b/fe/src/types.ts
index c8f2f00..e06e789 100644
--- a/fe/src/types.ts
+++ b/fe/src/types.ts
@@ -19,7 +19,7 @@ export interface User {
 }
 
 export interface Statistic {
-  user_id: string;
+  user_id: number;
   date: string;
   quantity: number;
 }
-- 
cgit v1.1