modify api, build additional FE components, add types

6 files changed, 206 insertions, 12 deletions

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>
diff --git a/fe/src/stores/auth.ts b/fe/src/stores/auth.ts
index 7e70cda..10e6bd3 100644
--- a/fe/src/stores/auth.ts
+++ b/fe/src/stores/auth.ts
@@ -1,4 +1,5 @@
 import type { Invalidator, Subscriber, Unsubscriber } from 'svelte/store';
+import type { Preference } from '../types';
 import { writable, derived } from 'svelte/store';
 
 type Nullable<T> = T | null;
@@ -14,6 +15,18 @@ interface TokenStore {
     unauthenticate: () => void
 }
 
+
+interface UserStore {
+    subscribe: (run: Subscriber<Nullable<User>>, invalidate: Invalidator<Nullable<User>>) => Unsubscriber,
+    setUser: (user: User) => void,
+    reset: () => void
+}
+
+interface PreferenceStore {
+    subscribe: (run: Subscriber<Nullable<Preference>>, invalidate: Invalidator<Nullable<Preference>>) => Unsubscriber,
+    set: (this: void, value: Nullable<Preference>) => void
+}
+
 function createTokenStore(): TokenStore {
     const storedToken = localStorage.getItem("token");
     const { subscribe, set } = writable<string | null>(storedToken); 
@@ -43,6 +56,48 @@ function onTokenChange ($token: Nullable<string>): boolean {
     return $token ? true : false;
 }
 
+function createUserStore(): UserStore {
+    const user = localStorage.getItem('user');
+    const userObj: Nullable<User> = user ? JSON.parse(user) : null;
+    const { subscribe, set } = writable<User | null>(userObj);
+    
+    const setUser = (user: User) => {
+       localStorage.setItem('user', JSON.stringify(user));
+       set(user);
+    }
+
+    const reset = () => {
+        localStorage.removeItem('user');
+        set(null);
+    }
+
+    return {
+        subscribe,
+        setUser,
+        reset
+    }
+}
+
+
+function createPreferenceStore(): PreferenceStore {
+   const preferences = localStorage.getItem('preferences'); 
+   const preferenceObj: Preference = preferences ? JSON.parse(preferences) : {
+        color: "#FF0000",
+        size: {
+            size: 16,
+            unit: 'oz'
+        }
+   };
+
+   const { subscribe, set } = writable<Nullable<Preference>>(preferenceObj);
+
+   return {
+       subscribe,
+       set
+   }
+}
+
 export const token = createTokenStore();
 export const authenticated = derived(token, onTokenChange);
-export const user = writable<User | null>(null);
+export const user = createUserStore();
+export const preferences = createPreferenceStore(); 
diff --git a/fe/src/types.ts b/fe/src/types.ts
new file mode 100644
index 0000000..03d613d
--- /dev/null
+++ b/fe/src/types.ts
@@ -0,0 +1,14 @@
+export interface Size {
+    size: number;
+    unit: string;
+}
+
+export interface Preference {
+    color: string;
+    size: Size;
+}
+
+export interface User {
+    name: string;
+    uuid: string;
+}