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/App.svelte           | 147 +++-----------------------------------------
 fe/src/app.css              |   2 +-
 fe/src/lib/DataView.svelte  |  67 ++++++++++++++++++++
 fe/src/lib/Layout.svelte    |  57 +++++++++++++++++
 fe/src/lib/LoginForm.svelte |  64 +++++++++++++++++++
 fe/src/lib/Table.svelte     |  61 +++++++++++++++---
 fe/src/stores/auth.ts       |  48 +++++++++++++++
 7 files changed, 300 insertions(+), 146 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
 create mode 100644 fe/src/stores/auth.ts

(limited to 'fe/src')

diff --git a/fe/src/App.svelte b/fe/src/App.svelte
index cc4e594..8811c52 100644
--- a/fe/src/App.svelte
+++ b/fe/src/App.svelte
@@ -1,146 +1,19 @@
 <script lang="ts">
-    import {onMount} from 'svelte';
-    import svelteLogo from './assets/svelte.svg'
-    import viteLogo from '/vite.svg'
-    import Counter from './lib/Counter.svelte'
-    import Table from './lib/Table.svelte'
-    import Card from './lib/Card.svelte'
-    import { UnauthorizedError } from './lib/errors';
- 
-    let data;
-    let error;
-
-    let user = {
-        username: '',
-        password: ''
-    }
-
-    interface CredentialObject {
-        username: string;
-        password: string;
-    }
-
-    function sleep(ms) {
-        return new Promise(resolve => setTimeout(resolve, ms));
-    }
-
-    async function getData() {
-        const res = await fetch('http://localhost:8080/api/v1/stats/');
-        if (res.ok) {
-            await sleep(3000);
-            return await res.json();
-        } else {
-            throw new Error('There was a problem with your request');
-        }
-    }
-
-    function handleClick () {
-      data = getData();
-    } 
-    
-    let authenticated: boolean = false;
-
-    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 } = await response.json();
-            console.log(token);
-            localStorage.user = JSON.stringify(user);
-            localStorage.token = token;
-            authenticated = true;
-        }
-        
-
-        error = null;
-    }
-
-    function logout() {
-        localStorage.removeItem("user");
-        localStorage.removeItem("token");
-        authenticated = false;
-    }
-
-
-    onMount(() => {
-        if (localStorage.token) {
-            authenticated = true;
-        } 
-    });
+    import { onMount, onDestroy } from 'svelte';
+    import Layout from './lib/Layout.svelte'
+    import LoginForm from './lib/LoginForm.svelte';
+    import DataView from './lib/DataView.svelte';
+    import { authenticated } from './stores/auth';
 </script>
 
 <main>
-    {#if !authenticated}
-        <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" />
-                </div>
-                <div class='form input group'>
-                    <label for="password">Password</label>
-                    <input bind:value={user.password} id="password" name='password' type="password" />
-                </div>
-                {#if error}
-                    <p class="error">{error}</p>
-                {/if}
-                <button type="submit">Log in</button>
-            </form>
-        </Card>
+    <Layout>
+    {#if !$authenticated}
+        <LoginForm />
     {:else}
-        <div>
-            <button on:click={logout}>Logout</button>
-        </div>
-      <div>
-        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
-          <img src={viteLogo} class="logo" alt="Vite Logo" />
-        </a>
-        <a href="https://svelte.dev" target="_blank" rel="noreferrer">
-          <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
-        </a>
-      </div>
-
-      <button on:click={handleClick}>
-        Get Data
-      </button>
-
-      {#await data}
-        <p>...fetching</p>
-      {:then data}
-        {#if data}
-            <p>Status</p>
-            <p>{data.status}</p>
-            <Table />
-            <Table nofooter title="No Footer"/>
-            <Table noheader title="No Header"/>
-        {:else}
-            <p>No data yet</p>
-        {/if}
-      {:catch errror}
-        <p>{error.message}</p>
-      {/await}
+        <DataView />
     {/if} 
+    </Layout>
 </main>
 
 <style>
diff --git a/fe/src/app.css b/fe/src/app.css
index 4768cf6..0d5fa90 100644
--- a/fe/src/app.css
+++ b/fe/src/app.css
@@ -42,9 +42,9 @@ h1 {
 }
 
 #app {
+  flex-grow: 2;
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
 }
 
 button {
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>
diff --git a/fe/src/stores/auth.ts b/fe/src/stores/auth.ts
new file mode 100644
index 0000000..7e70cda
--- /dev/null
+++ b/fe/src/stores/auth.ts
@@ -0,0 +1,48 @@
+import type { Invalidator, Subscriber, Unsubscriber } from 'svelte/store';
+import { writable, derived } from 'svelte/store';
+
+type Nullable<T> = T | null;
+
+interface User {
+    uuid: string;
+    username: string;
+}
+
+interface TokenStore {
+    subscribe: (run: Subscriber<Nullable<string>>, invalidate: Invalidator<Nullable<string>>) => Unsubscriber,
+    authenticate: (newToken: string) => void,
+    unauthenticate: () => void
+}
+
+function createTokenStore(): TokenStore {
+    const storedToken = localStorage.getItem("token");
+    const { subscribe, set } = writable<string | null>(storedToken); 
+
+    function authenticate(newToken: string): void {
+        try {
+            localStorage.setItem("token", newToken);
+            set(newToken);
+        } catch (e) {
+            console.error('error', e);
+        }
+    }
+
+    function unauthenticate(): void {
+        localStorage.removeItem("token");
+        set(null);
+    }
+
+    return {
+        subscribe, 
+        authenticate,
+        unauthenticate
+    };
+}
+
+function onTokenChange ($token: Nullable<string>): boolean { 
+    return $token ? true : false;
+}
+
+export const token = createTokenStore();
+export const authenticated = derived(token, onTokenChange);
+export const user = writable<User | null>(null);
-- 
cgit v1.1