fix bugs, redo layout, reorg.

12 files changed, 100 insertions, 90 deletions

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/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/LoginForm.svelte b/fe/src/lib/forms/LoginForm.svelte
index cf5febf..88d4479 100644
--- a/fe/src/lib/LoginForm.svelte
+++ b/fe/src/lib/forms/LoginForm.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { token, user, preferences } from "../stores/auth";
-  import Card from "./Card.svelte";
-  import { apiURL } from "../utils";
+  import { token, user, preferences } from "../../stores/auth";
+  import Card from "../Card.svelte";
+  import { apiURL } from "../../utils";
 
   let credentials: CredentialObject = {
     username: "",
diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/forms/PreferencesForm.svelte
index 74b8a63..79663d1 100644
--- a/fe/src/lib/PreferencesForm.svelte
+++ b/fe/src/lib/forms/PreferencesForm.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { user, preferences, token } from "../stores/auth";
+  import { user, preferences, token } from "../../stores/auth";
   import { createEventDispatcher, onDestroy, onMount } from "svelte";
-  import type { User } from "../types";
-  import { apiURL } from "../utils";
+  import type { User } from "../../types";
+  import { apiURL } from "../../utils";
 
   export let open: boolean;
 
@@ -107,7 +107,7 @@
 </dialog>
 
 <style>
-  dialog {
+  /* dialog {
     background: white;
     color: black;
   }
@@ -115,5 +115,5 @@
   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;
 }