9 files changed, 798 insertions, 0 deletions

diff --git a/fe/src/lib/Card.svelte b/fe/src/lib/Card.svelte
new file mode 100644
index 0000000..cd1e02c
--- /dev/null
+++ b/fe/src/lib/Card.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+    export let title = "";
+</script>
+
+<div class="card">
+    {#if title}
+        <h2>{title}</h2>
+    {/if}
+    <slot />
+</div>
+
+<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);
+    }
+</style>
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/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
new file mode 100644
index 0000000..ffc2fe8
--- /dev/null
+++ b/fe/src/lib/DataView.svelte
@@ -0,0 +1,228 @@
+<script lang="ts">
+    import { onDestroy, onMount } from "svelte";
+    import http from "../http";
+    import { token } from "../stores/auth";
+    import { addFormOpen } from "../stores/forms";
+    import Table from "./Table.svelte";
+    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";
+    import { apiURL } from "../utils";
+
+    let json: Promise<any>;
+
+    let barCanvasRef: HTMLCanvasElement;
+    let lineCanvasRef: HTMLCanvasElement;
+    let barChart: any;
+    let lineChart: any;
+
+    let lastSevenDays: string[];
+    let lastSevenDaysData: number[];
+
+    let userTotalsLabels: string[];
+    let userTotalsData: number[];
+
+    async function fetchData() {
+        const res = await fetch(apiURL("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 fetchDailyUserStatistics() {
+        const res = await fetch(apiURL("stats/daily"), {
+            method: "GET",
+            headers: {
+                Authorization: `Bearer ${$token}`
+            }
+        });
+
+        if (res.ok) {
+            const json = await res.json();
+            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");
+        }
+
+    }
+
+    async function fetchWeeklyTotals() {
+        const res = await fetch(apiURL("stats/weekly"), {
+            method: "GET",
+            headers: {
+                Authorization: `Bearer ${$token}`
+            }
+        });
+
+        if (res.ok) {
+            const json = await res.json();
+            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");
+        }
+    }
+
+    function closeDialog() {
+        addFormOpen.set(false);
+    }
+
+    function onStatisticAdd() {
+        closeDialog();
+        fetchData();
+        fetchWeeklyTotals().then(updateWeeklyTotalsChart).catch(err => console.error(err));
+        fetchDailyUserStatistics().then(updateDailyUserTotalsChart).catch(err => console.error(err));
+    }
+
+    function setupWeeklyTotalsChart(result: any) {
+        [lastSevenDays, lastSevenDaysData] = result;
+        lineChart = new ChartJS(lineCanvasRef, {
+            type: "line",
+            data: {
+                labels: lastSevenDays,
+                datasets: [
+                    {
+                        label: "Totals",
+                        data: lastSevenDaysData,
+                        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}
+                    }
+                }
+            }
+        });
+    }
+
+    function setupDailyUserTotalsChart(result: any) {
+        [userTotalsLabels, userTotalsData] = result;
+
+        barChart = new ChartJS(barCanvasRef, {
+            type: "bar",
+            data: {
+                labels: userTotalsLabels,
+                datasets: [
+                    {
+                        data: userTotalsData,
+                        backgroundColor: [
+                            "#330000",
+                            "rgba(100, 200, 192, 0.2)"
+                        ]
+                    }
+                ]
+            },
+            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}
+                    }
+                }
+            }
+        });
+    }
+
+    function updateWeeklyTotalsChart(result: any) {
+        [, lastSevenDaysData] = result;
+        lineChart.data.datasets[0].data = lastSevenDaysData;
+        lineChart.update();
+    }
+
+    function updateDailyUserTotalsChart(result: any) {
+        [, userTotalsData] = result;
+        barChart.data.datasets[0].data = userTotalsData;
+        barChart.update();
+    }
+
+    onMount(() => {
+        fetchData();
+        fetchWeeklyTotals().then(setupWeeklyTotalsChart);
+        fetchDailyUserStatistics().then(setupDailyUserTotalsChart);
+    });
+
+    onDestroy(() => {
+        if (barChart) barChart.destroy();
+        if (lineChart) lineChart.destroy();
+        barChart = null;
+        lineChart = null;
+    });
+</script>
+
+<Column --width="500px">
+    <Card --height="300px">
+        <!--<Chart />-->
+        <canvas bind:this={barCanvasRef} />
+    </Card>
+    <Card --height="300px">
+        <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>
+</Column>
+<!-- <Chart /> -->
diff --git a/fe/src/lib/Layout.svelte b/fe/src/lib/Layout.svelte
new file mode 100644
index 0000000..2728dd3
--- /dev/null
+++ b/fe/src/lib/Layout.svelte
@@ -0,0 +1,74 @@
+<script>
+    import { authenticated, token, user, preferences } from "../stores/auth";
+    import PreferencesForm from "./PreferencesForm.svelte";
+    import { addFormOpen } from "../stores/forms";
+
+    const logout = () => { 
+        preferences.reset();
+        user.reset();
+        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={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: row;
+        justify-content: center;
+        gap: 2em;
+        margin-top: 4em;
+    }
+</style>
diff --git a/fe/src/lib/LoginForm.svelte b/fe/src/lib/LoginForm.svelte
new file mode 100644
index 0000000..cf5febf
--- /dev/null
+++ b/fe/src/lib/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/PreferencesForm.svelte b/fe/src/lib/PreferencesForm.svelte
new file mode 100644
index 0000000..74b8a63
--- /dev/null
+++ b/fe/src/lib/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/Table.svelte b/fe/src/lib/Table.svelte
new file mode 100644
index 0000000..621157e
--- /dev/null
+++ b/fe/src/lib/Table.svelte
@@ -0,0 +1,114 @@
+<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 sortBy: string = 'date';
+
+    type SortComparator = (a, b) => number
+
+    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 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", {
+        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 sort(data) as row}
+            <tr>
+                {#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">
+            <tfoot>
+            <tr>
+                <td>Table Footer</td>
+            </tr>
+            </tfoot>
+        </slot>
+    {/if}
+</table>
+
+<style>
+    table {
+        padding: 16px;
+        margin: 8px;
+        border: solid 1px black;
+        border-collapse: collapse;
+        overflow-y: hidden;
+    }
+
+    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>
diff --git a/fe/src/lib/forms/AddForm.svelte b/fe/src/lib/forms/AddForm.svelte
new file mode 100644
index 0000000..f85cce6
--- /dev/null
+++ b/fe/src/lib/forms/AddForm.svelte
@@ -0,0 +1,78 @@
+<script lang='ts'>
+    import { createEventDispatcher } from "svelte";
+    import { token, user } from "../../stores/auth";
+    import type { Statistic } from "../../types";
+    import { apiURL } from "../../utils";
+
+    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 { date, quantity } = statistic;
+        await fetch(apiURL("stats"), {
+            method: "POST",
+            headers: {
+                Authorization: `Bearer ${$token}`
+            },
+            body: JSON.stringify({
+                date: new Date(date),
+                user_id: 2,
+                quantity
+            })
+        });
+        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