1 files changed, 63 insertions, 4 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>