4 files changed, 241 insertions, 8 deletions

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>