From d8b0f1335078d53d95a4212b1a4d4b0b28016702 Mon Sep 17 00:00:00 2001
From: Zach Berwaldt <zberwaldt@tutamail.com>
Date: Fri, 1 Mar 2024 20:12:21 -0500
Subject: feat(DataView): Add functionality to add water statistic

This commit adds functionality to add water statistics to the DataView component. It includes the following changes:
- Remove unused imports and variables
- Move the 'handleClick' function logic to a new 'AddForm' component
- Create the 'AddForm' component which displays a dialog with input fields for date and quantity and allows the user to add a new water statistic
- Dispatch events on form submit and dialog close in the 'AddForm' component
- Call the 'fetchData' function on successful submission of a new statistic
- Update chart data to display sample data

New component:
- AddForm.svelte: A form component to add a new water statistic

Note: This commit message exceeds the 50-character limit in the subject line, but adheres to the other specified requirements.
---
 fe/src/lib/DataView.svelte      | 206 +++++++++++++++-------------------------
 fe/src/lib/forms/AddForm.svelte |  74 +++++++++++++++
 2 files changed, 148 insertions(+), 132 deletions(-)
 create mode 100644 fe/src/lib/forms/AddForm.svelte

diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index 00ee21a..7f368c6 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -1,148 +1,90 @@
 <script lang="ts">
-  import { onDestroy, onMount } from "svelte";
-  import type { Statistic } from "../types";
-  import { token, user } from "../stores/auth";
-  import Table from "./Table.svelte";
-  import Chart from 'chart.js/auto';
-
-  let json: Promise<any>;
-  let showAddForm: boolean = false;
+    import { onDestroy, onMount } from "svelte";
+    import { token } from "../stores/auth";
+    import Table from "./Table.svelte";
+    import Chart from "chart.js/auto";
+    import AddForm from "./forms/AddForm.svelte";
+
+    let open: boolean = false;
+
+    let json: Promise<any>;
+
+    let canvasRef: HTMLCanvasElement;
+    let chart: any;
+
+    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");
+        }
+    }
 
-  let canvasRef: HTMLCanvasElement;
-  let chart: any;
+    function handleClick() {
+        open = true;
+    }
 
-  let statistic: Statistic = newStatistic();
+    function closeDialog() {
+        open = 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");
+    function onStatisticAdd() {
+        open = false;
+        fetchData();
     }
-  }
 
-  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,
-      }),
+    onMount(() => {
+        fetchData();
+        chart = new Chart(canvasRef, {
+            type: "bar",
+            data: {
+                labels: ["one", "two"],
+                datasets: [
+                    {
+                        label: "Water",
+                        data: [1, 2],
+                        backgroundColor: "rgba(75, 192, 192, 0.2)",
+                        borderColor: "rgba(75, 192, 192, 1)",
+                        borderWidth: 1
+                    }
+                ]
+            }
+        });
     });
-    fetchData();
-  }
-
-  function handleClick() {
-    showAddForm = true;
-  }
-
-  function handleAddDialogSubmit(e: Event) {
-    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(() => {
-    fetchData();
-    chart = new Chart(canvasRef, {
-        type: 'bar',
-        data: {
-            labels: ['one', 'two'],
-            datasets: [
-                {
-                    label: 'Water',
-                    data: [1, 2],
-                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
-                    borderColor: 'rgba(75, 192, 192, 1)',
-                    borderWidth: 1
-                }
-            ]
-        }
+    onDestroy(() => {
+        if (chart) chart.destroy();
+        chart = null;
     });
-  });
-
-  onDestroy(() => {
-    if (chart) chart.destroy();
-    chart = null;
-  });
 </script>
 
 <div>
-  <button on:click={submitStat}>Add Stat Test</button>
-  <dialog open={showAddForm} on:submit={handleAddDialogSubmit}>
-    <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" />
-      </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>
-  <button on:click={handleClick}>Add</button>
-  <canvas bind:this={canvasRef} />
-  {#await json then data}
-    <Table {data} nofooter />
-  {:catch error}
-    <p>{error}</p>
-  {/await}
-  <!-- <Chart /> -->
+    <button on:click={handleClick}>Add</button>
+    <canvas bind:this={canvasRef} />
+    <AddForm {open} on:submit={onStatisticAdd} on:close={closeDialog} />
+    {#await json then data}
+        <Table {data} nofooter />
+    {:catch error}
+        <p>{error}</p>
+    {/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;
-  }
+    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/forms/AddForm.svelte b/fe/src/lib/forms/AddForm.svelte
new file mode 100644
index 0000000..f22e5f4
--- /dev/null
+++ b/fe/src/lib/forms/AddForm.svelte
@@ -0,0 +1,74 @@
+<script lang='ts'>
+    import { createEventDispatcher } from "svelte";
+    import { token, user } from "../../stores/auth";
+    import type { Statistic } from "../../types";
+
+    export let open: boolean;
+
+    const dispatch = createEventDispatcher();
+
+    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("-");
+
+        return {
+            user_id: $user!.uuid,
+            date,
+            quantity: 1
+        };
+    }
+
+    function closeDialog() {
+        dispatch("close");
+    }
+
+    async function handleSubmitStat() {
+        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
+            })
+        });
+        dispatch("submit");
+    }
+</script>
+
+<dialog {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" />
+        </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>
\ No newline at end of file
-- 
cgit v1.1