From afeffe31bd7d0f8333627a972e1d32e64a325b5b Mon Sep 17 00:00:00 2001
From: Zach Berwaldt <zberwaldt@tutamail.com>
Date: Fri, 1 Mar 2024 18:17:42 -0500
Subject: reformat fe

---
 fe/src/lib/Card.svelte            |  14 +--
 fe/src/lib/Counter.svelte         |  10 ---
 fe/src/lib/DataView.svelte        | 177 +++++++++++++++++++-------------------
 fe/src/lib/Layout.svelte          |  77 +++++++++--------
 fe/src/lib/LoginForm.svelte       | 105 +++++++++++++---------
 fe/src/lib/PreferencesForm.svelte |  32 ++++---
 fe/src/lib/Table.svelte           | 138 ++++++++++++++---------------
 fe/src/lib/errors.ts              |   6 +-
 fe/src/lib/utils.ts               |  16 ++--
 9 files changed, 296 insertions(+), 279 deletions(-)
 delete mode 100644 fe/src/lib/Counter.svelte

(limited to 'fe/src/lib')

diff --git a/fe/src/lib/Card.svelte b/fe/src/lib/Card.svelte
index feb5bcc..0835940 100644
--- a/fe/src/lib/Card.svelte
+++ b/fe/src/lib/Card.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-export let title;
+  export let title = "";
 </script>
 
 <div class="card">
-    {#if title}
-        <h2>{title}</h2>
-    {/if}
-    <slot />   
+  {#if title}
+    <h2>{title}</h2>
+  {/if}
+  <slot />
 </div>
 
 <style>
-.card {
+  .card {
     background: #fff;
     width: 16rem;
     display: flex;
@@ -18,5 +18,5 @@ export let title;
     align-items: left;
     border: solid 2px #00000066;
     border-radius: 0.25em;
-}
+  }
 </style>
diff --git a/fe/src/lib/Counter.svelte b/fe/src/lib/Counter.svelte
deleted file mode 100644
index 979b4df..0000000
--- a/fe/src/lib/Counter.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  let count: number = 0
-  const increment = () => {
-    count += 1
-  }
-</script>
-
-<button on:click={increment}>
-  count is {count}
-</button>
diff --git a/fe/src/lib/DataView.svelte b/fe/src/lib/DataView.svelte
index dc8acae..1458c9a 100644
--- a/fe/src/lib/DataView.svelte
+++ b/fe/src/lib/DataView.svelte
@@ -1,126 +1,123 @@
-<script lang='ts'>
-import { onMount } from 'svelte';
-import type { Preference } from '../types';
-import { token, user, preferences } from '../stores/auth'
-import Table from './Table.svelte';
-import PreferencesForm from './PreferencesForm.svelte';
+<script lang="ts">
+  import { onMount } from "svelte";
+  import type { Statistic } from "../types";
+  import { token, user } from "../stores/auth";
+  import Table from "./Table.svelte";
 
-const formatter = new Intl.DateTimeFormat(
-    'en',
-    {
-        year: 'numeric',
-        month: '2-digit',
-        day: '2-digit'
-    }
-);
-
-let json;
-let showAddForm: boolean = false;
+  let json: Promise<any>;
+  let showAddForm: boolean = false;
 
-let statistic: Statistic = newStatistic();
+  let statistic: Statistic = newStatistic();
 
-async function fetchData() {
-    const res = await fetch('http://localhost:8080/api/v1/stats/', {
-        method: "GET",
-        headers: {
-            'Authorization': `Bearer ${$token}`
-        }
+  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();
+      json = res.json();
     } else {
-        throw new Error('There was a problem with your request');
+      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
-        })
+  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() {
+  function handleClick() {
     showAddForm = true;
-}
+  }
 
-function handleAddDialogSubmit (e) {
+  function handleAddDialogSubmit(e: Event) {
     console.log(statistic);
     showAddForm = false;
-}
+  }
 
-function closeDialog () {
+  function closeDialog() {
     showAddForm = false;
-}
+  }
 
-function newStatistic (): Statistic {
-    let now = new Date(), month, day, year;
+  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;
+    if (month.length < 2) month = "0" + month;
+    if (day.length < 2) day = "0" + day;
 
-    const date = [year, month, day].join('-');
+    const date = [year, month, day].join("-");
 
     return {
-        user_id: $user.uuid,
-        date,
-        quantity: 1
-    }
-}
+      user_id: $user!.uuid,
+      date,
+      quantity: 1,
+    };
+  }
 
-onMount(() => {
+  onMount(() => {
     fetchData();
-});
-
+  });
 </script>
+
 <div>
-    <button on:click={submitStat}>Add Stat Test</button>
-    <PreferencesForm />
-    <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>
-    {#await json then data}
-        <Table {data} nofooter />
-    {:catch error}
-        <p>{error}</p>
-    {/await}
-    <!-- <Chart /> -->
+  <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>
+  {#await json then data}
+    <Table {data} nofooter />
+  {:catch error}
+    <p>{error}</p>
+  {/await}
+  <!-- <Chart /> -->
 </div>
 
 <style>
-dialog {
+  dialog {
     background: red;
-    box-shadow: 0 20px 5em 10px rgba(0,0,0,0.8);
-}
-dialog::backdrop {
+    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);
+    box-shadow: 20px 20px rgba(0, 0, 0, 0.8);
     background-color: red;
-}
+  }
 </style>
diff --git a/fe/src/lib/Layout.svelte b/fe/src/lib/Layout.svelte
index f349632..94ce84d 100644
--- a/fe/src/lib/Layout.svelte
+++ b/fe/src/lib/Layout.svelte
@@ -1,57 +1,62 @@
 <script>
-import { authenticated, token } from '../stores/auth';
-
-const logout = () => token.unauthenticate();
-
-function showSettingsDialog() {
-    console.log('show settings');
-}
-
+  import { authenticated, token } from "../stores/auth";
+  import PreferencesForm from "./PreferencesForm.svelte";
+  const logout = () => token.unauthenticate();
+  let open = false;
+
+  function showSettingsDialog() {
+    open = true;
+  }
+
+  function closeDialog() {
+    open = false;
+  }
 </script>
 
 <div class="layout">
-    {#if $authenticated}
+  {#if $authenticated}
     <nav>
-        <div>
-            <h1>Water</h1>
-        </div>
-        <div>
-            <button on:click={showSettingsDialog}>Settings</button>
-            <button on:click={logout}>Logout</button>
-        </div>
+      <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>
+    <PreferencesForm {open} on:close={closeDialog} />
+  {/if}
+  <div id="content">
+    <slot />
+  </div>
 </div>
 
 <style>
-.layout {
+  .layout {
     height: 100vh;
-}
-nav {
-   display: flex;
-   flex-direction: row;
-   align-items: center;
-   justify-content: space-between;
-   height: 64px;
-   padding: 0 2em;
-}
+  }
+  nav {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    height: 64px;
+    padding: 0 2em;
+  }
 
-nav div {
+  nav div {
     width: fit-content;
-}
+  }
 
-nav div h1 {
+  nav div h1 {
     font-size: 1.75em;
-}
+  }
 
-#content {
+  #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
index 499a457..bf6d9ad 100644
--- a/fe/src/lib/LoginForm.svelte
+++ b/fe/src/lib/LoginForm.svelte
@@ -1,66 +1,85 @@
-<script lang='ts'>
-import { token, user, preferences } from '../stores/auth';
-import Card from './Card.svelte';
+<script lang="ts">
+  import { token, user, preferences } from "../stores/auth";
+  import Card from "./Card.svelte";
 
-let credentials: CredentialObject = {
-    username: '',
-    password: ''
-}
+  let credentials: CredentialObject = {
+    username: "",
+    password: "",
+  };
 
-let error;
+  let error: string | null = null;
 
-interface CredentialObject {
+  interface CredentialObject {
     username: string;
     password: string;
-}
+  }
 
-function prepareCredentials ({ username, password }: CredentialObject): string {
+  function prepareCredentials({
+    username,
+    password,
+  }: CredentialObject): string {
     return btoa(`${username}:${password}`);
-}
+  }
 
-async function onSubmit (e) {
+  async function onSubmit(e: Event) {
     if (!credentials.username || !credentials.password) {
-        error = 'please enter your username and password';
-        return;
+      error = "please enter your username and password";
+      return;
     }
-   const auth = prepareCredentials(credentials);
+    const auth = prepareCredentials(credentials);
 
-   const response = await fetch('http://localhost:8080/api/v1/auth', {
-        method: 'POST',
-        headers: {
-            'Authorization': `Basic ${auth}`,
-        },
-   });
+    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;
+      error = "Your username or password is wrong";
+      return;
     }
 
     if (response.ok) {
-        const { token: apiToken, user: userData, preferences: userPreferences } = await response.json();
-        user.setUser(userData);
-        preferences.set(userPreferences);
-        token.authenticate(apiToken);
+      const {
+        token: apiToken,
+        user: userData,
+        preferences: userPreferences,
+      } = await response.json();
+      user.setUser(userData);
+      preferences.set(userPreferences);
+      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={credentials.username} id="username" name='username' type="text" autocomplete="username" />
-        </div>
-        <div class='form input group'>
-            <label for="password">Password</label>
-            <input bind:value={credentials.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>
+  <form class="form" on:submit|preventDefault={onSubmit}>
+    <div class="form input group">
+      <label for="username">Username</label>
+      <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={credentials.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/PreferencesForm.svelte b/fe/src/lib/PreferencesForm.svelte
index 781866c..95e04c1 100644
--- a/fe/src/lib/PreferencesForm.svelte
+++ b/fe/src/lib/PreferencesForm.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-import { preferences } from '../stores/auth';
-import type { Size, Preference } from '../types';
-   export let open: boolean = true; 
+    import { preferences } from '../stores/auth';
+    import type { Size, Preference } from '../types';
+    import { createEventDispatcher } from 'svelte';
+   export let open: boolean; 
 
     let preference: Preference = {
         color: "#00FF00",
@@ -10,29 +11,29 @@ import type { Size, Preference } from '../types';
             unit: 'oz'
         }
     }
+
+    const dispatch = createEventDispatcher();
     
     preferences.subscribe((value) => {
         preference = value;
     });
 
     function onPreferencesSave(): void {
-        preferences.set(preferences);
+        preferences.set(preference);
+        dispatch('close')
     }
+
 </script>
-<dialog {open}>
+<dialog {open} on:submit|preventDefault={onPreferencesSave}>
     <h2>User Preferences</h2>
     <form method="dialog">
         <div class="form input group">
-            <label>Color</label>
-            <input type="color" bind:value={preference.color}/>
+            <label for="color">Color</label>
+            <input id="color" name="color" 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>
+            <label for="size">Bottle Size</label>
+            <input id="size" name="size" type="number" min="8" max="48" step="8" bind:value={preference.size.size}/>
         </div>
         <button type="submit">Save</button>
     </form>
@@ -42,4 +43,9 @@ dialog {
     background: white;
     color: black;
 }
+
+input[type="color"] {
+   width: 100%;
+   height: 100%;
+}
 </style>
diff --git a/fe/src/lib/Table.svelte b/fe/src/lib/Table.svelte
index 4b81800..3a66e0d 100644
--- a/fe/src/lib/Table.svelte
+++ b/fe/src/lib/Table.svelte
@@ -1,105 +1,105 @@
 <script lang="ts">
-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;
+  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[] {
+  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));
-}
+    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]));
-}
+  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"
-});
+  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);
+  function formatDatum([key, value]: any[]) {
+    if (key === "date") {
+      const parsedDate = new Date(value);
+      return formatter.format(parsedDate);
     }
 
-    if (key === 'user') {
-        return value['name'];
+    if (key === "user") {
+      return value["name"];
     }
 
     return value;
-}
-
+  }
 </script>
+
 <table>
-    {#if title}
+  {#if title}
     <h2>{title}</h2>
-    {/if}
-    {#if !noheader}
+  {/if}
+  {#if !noheader && data}
     <thead>
-        <tr>
-            {#each getDataKeys(data) as header}
-                <th>{header}</th>
-            {/each}
-        </tr>
+      <tr>
+        {#each getDataKeys(data) as header}
+          <th>{header}</th>
+        {/each}
+      </tr>
     </thead>
-    {/if}
-    <tbody>
-        {#if data}
-        {#each data as row}
+  {/if}
+  <tbody>
+    {#if data}
+      {#each data as row}
         <tr>
-            {#each getRow(row) as datum}
-            
+          {#each getRow(row) as datum}
             <td>{formatDatum(datum)}</td>
-            {/each}
+          {/each}
         </tr>
-        {/each}
-        {:else}
-        <tr>
-            There is not data.
-        </tr>   
-        {/if}
-    </tbody>
-    {#if !nofooter}
+      {/each}
+    {:else}
+      <tr> There is not data. </tr>
+    {/if}
+  </tbody>
+  {#if !nofooter}
     <slot name="footer">
-       <tfoot>
+      <tfoot>
         <tr>
-            <td>Table Footer</td>
+          <td>Table Footer</td>
         </tr>
-       </tfoot>
+      </tfoot>
     </slot>
-    {/if}
+  {/if}
 </table>
+
 <style>
-table {
+  table {
     padding: 16px;
     margin: 8px;
     border: solid 1px black;
     border-collapse: collapse;
-}
+  }
 
-th {
+  th {
     text-transform: capitalize;
-}
+  }
 
-thead tr {
-    background: rgba(0,0,23, 0.34);
-}
+  thead tr {
+    background: rgba(0, 0, 23, 0.34);
+  }
 
-tbody tr:nth-child(odd) {
-   background: rgba(0,0,23,0.14); 
-}
+  tbody tr:nth-child(odd) {
+    background: rgba(0, 0, 23, 0.14);
+  }
 
-th, td {
+  th,
+  td {
     padding: 1em;
-    border: 1px solid rgba(0,0,0, 1);
-}
+    border: 1px solid rgba(0, 0, 0, 1);
+  }
 </style>
diff --git a/fe/src/lib/errors.ts b/fe/src/lib/errors.ts
index 0663d63..d44bec5 100644
--- a/fe/src/lib/errors.ts
+++ b/fe/src/lib/errors.ts
@@ -1,7 +1,7 @@
 export class UnauthorizedError extends Error {
-    constructor (message?: string , options?: ErrorOptions) {
-        super(message, options);
-    }
+  constructor(message?: string, options?: ErrorOptions) {
+    super(message, options);
+  }
 }
 
 
diff --git a/fe/src/lib/utils.ts b/fe/src/lib/utils.ts
index c5501ae..22d4e9a 100644
--- a/fe/src/lib/utils.ts
+++ b/fe/src/lib/utils.ts
@@ -1,9 +1,9 @@
-export function processFormInput(form) {
-    const formData = new FormData(form);
-    const data = {};
-    for (let field of formData) {
-        const [key, value] = field;
-        data[key] = value;
-    }
-    return data;
+export function processFormInput(form: HTMLFormElement) {
+  const formData = new FormData(form);
+  const data: Record<string, any> = {};
+  for (let field of formData) {
+    const [key, value] = field;
+    data[key] = value;
+  }
+  return data;
 }
-- 
cgit v1.1