From 9f9a33cbf55d38987a66b709284d2bb4ffea0fe9 Mon Sep 17 00:00:00 2001
From: Doog <157747121+doogongithub@users.noreply.github.com>
Date: Thu, 29 Feb 2024 20:13:48 -0500
Subject: modify api, build additional FE components, add types

---
 fe/src/lib/PreferencesForm.svelte | 45 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 fe/src/lib/PreferencesForm.svelte

(limited to 'fe/src/lib/PreferencesForm.svelte')

diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/PreferencesForm.svelte
new file mode 100644
index 0000000..781866c
--- /dev/null
+++ b/fe/src/lib/PreferencesForm.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+import { preferences } from '../stores/auth';
+import type { Size, Preference } from '../types';
+   export let open: boolean = true; 
+
+    let preference: Preference = {
+        color: "#00FF00",
+        size: {
+            size: 8,
+            unit: 'oz'
+        }
+    }
+    
+    preferences.subscribe((value) => {
+        preference = value;
+    });
+
+    function onPreferencesSave(): void {
+        preferences.set(preferences);
+    }
+</script>
+<dialog {open}>
+    <h2>User Preferences</h2>
+    <form method="dialog">
+        <div class="form input group">
+            <label>Color</label>
+            <input 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>
+        </div>
+        <button type="submit">Save</button>
+    </form>
+</dialog>
+<style>
+dialog {
+    background: white;
+    color: black;
+}
+</style>
-- 
cgit v1.1


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/PreferencesForm.svelte | 32 +++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 13 deletions(-)

(limited to 'fe/src/lib/PreferencesForm.svelte')

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>
-- 
cgit v1.1


From 9cae9c1d2a0b4f7fa72f3075541b9ffafe1a7275 Mon Sep 17 00:00:00 2001
From: Zach Berwaldt <zberwaldt@tutamail.com>
Date: Fri, 15 Mar 2024 18:49:43 -0400
Subject: Add routes for preference, clean up and add types

---
 fe/src/lib/PreferencesForm.svelte | 145 ++++++++++++++++++++++++++++----------
 1 file changed, 106 insertions(+), 39 deletions(-)

(limited to 'fe/src/lib/PreferencesForm.svelte')

diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/PreferencesForm.svelte
index 95e04c1..875393c 100644
--- a/fe/src/lib/PreferencesForm.svelte
+++ b/fe/src/lib/PreferencesForm.svelte
@@ -1,51 +1,118 @@
 <script lang="ts">
-    import { preferences } from '../stores/auth';
-    import type { Size, Preference } from '../types';
-    import { createEventDispatcher } from 'svelte';
-   export let open: boolean; 
-
-    let preference: Preference = {
-        color: "#00FF00",
-        size: {
-            size: 8,
-            unit: 'oz'
-        }
-    }
-
-    const dispatch = createEventDispatcher();
-    
-    preferences.subscribe((value) => {
-        preference = value;
+  import { user, preferences, token } from "../stores/auth";
+  import { createEventDispatcher, onDestroy, onMount } from "svelte";
+  import type { User } from "../types";
+
+  export let open: boolean;
+
+  let sizes: Array<any>;
+  let selectedSize: number = 1;
+  let color: string = "#000000";
+
+  const dispatch = createEventDispatcher();
+
+  const unsubscribe = preferences.subscribe(
+    (value: any) => {
+        console.log('update value: ', value);
+      color = value.color;
+      selectedSize = value.size_id;
+    },
+  );
+
+  function closeDialog() {
+    dispatch("close");
+  }
+
+  async function updateUserPreferences() {
+    const res = await fetch("http://localhost:8080/api/v1/user/preferences", {
+      method: "PATCH",
+      headers: {
+        Authorization: `Bearer ${$token}`,
+      },
+      body: JSON.stringify($preferences),
     });
+  }
 
-    function onPreferencesSave(): void {
-        preferences.set(preference);
-        dispatch('close')
-    }
+  async function getUserPreferences() {
+    const res = await fetch(
+      `http://localhost:8080/api/v1/user/${($user as User)!.id}/preferences`,
+      {
+        method: "GET",
+        headers: {
+          Authorization: `Bearer ${$token}`,
+        },
+      },
+    );
+    const updatePreferences = await res.json();
+    preferences.set(updatePreferences);
+  }
 
+  async function onPreferencesSave(): Promise<void> {
+    preferences.update((value) => ({
+      ...value!,
+      size_id: selectedSize,
+      color: color,
+    }));
+
+    await updateUserPreferences();
+    await getUserPreferences();
+
+    dispatch("close");
+  }
+
+  onMount(() => {
+    fetch("http://localhost:8080/api/v1/sizes", {
+      method: "GET",
+      headers: {
+        Authorization: `Bearer ${$token}`,
+      },
+    })
+      .then((res) => res.json())
+      .then((val) => (sizes = val));
+  });
+
+  onDestroy(() => {
+    unsubscribe();
+  });
 </script>
+
 <dialog {open} on:submit|preventDefault={onPreferencesSave}>
-    <h2>User Preferences</h2>
-    <form method="dialog">
-        <div class="form input group">
-            <label for="color">Color</label>
-            <input id="color" name="color" type="color" bind:value={preference.color}/>
-        </div>
-        <div class="form input group">
-            <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>
+  <h2>User Preferences</h2>
+  <form method="dialog">
+    <div class="form input group">
+      <label for="color">Color</label>
+      <input
+        id="color"
+        name="color"
+        type="color"
+        bind:value={color}
+      />
+    </div>
+    <div class="form input group">
+      <label for="size">Bottle Size</label>
+      <select
+        bind:value={selectedSize}
+      >
+        {#if sizes}
+          {#each sizes as size}
+            <option value={size.id}>{size.size} {size.unit}</option>
+          {/each}
+        {/if}
+      </select>
+    </div>
+    <button on:click={closeDialog}>Cancel</button>
+    <button type="submit">Save</button>
+  </form>
 </dialog>
+
 <style>
-dialog {
+  dialog {
     background: white;
     color: black;
-}
+  }
 
-input[type="color"] {
-   width: 100%;
-   height: 100%;
-}
+  input[type="color"] {
+    width: 4em;
+    height: 4em;
+  }
 </style>
-- 
cgit v1.1


From fd1332a3df191577e91c6d846a8b5db1747099fd Mon Sep 17 00:00:00 2001
From: Zach Berwaldt <zberwaldt@tutamail.com>
Date: Fri, 15 Mar 2024 22:00:10 -0400
Subject: cleanup

---
 fe/src/lib/PreferencesForm.svelte | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

(limited to 'fe/src/lib/PreferencesForm.svelte')

diff --git a/fe/src/lib/PreferencesForm.svelte b/fe/src/lib/PreferencesForm.svelte
index 875393c..74b8a63 100644
--- a/fe/src/lib/PreferencesForm.svelte
+++ b/fe/src/lib/PreferencesForm.svelte
@@ -2,6 +2,7 @@
   import { user, preferences, token } from "../stores/auth";
   import { createEventDispatcher, onDestroy, onMount } from "svelte";
   import type { User } from "../types";
+  import { apiURL } from "../utils";
 
   export let open: boolean;
 
@@ -13,9 +14,10 @@
 
   const unsubscribe = preferences.subscribe(
     (value: any) => {
-        console.log('update value: ', value);
-      color = value.color;
-      selectedSize = value.size_id;
+      if (value) {
+        color = value.color;
+        selectedSize = value.size_id;
+      }
     },
   );
 
@@ -24,7 +26,7 @@
   }
 
   async function updateUserPreferences() {
-    const res = await fetch("http://localhost:8080/api/v1/user/preferences", {
+    const res = await fetch(apiURL("user/preferences"), {
       method: "PATCH",
       headers: {
         Authorization: `Bearer ${$token}`,
@@ -34,8 +36,7 @@
   }
 
   async function getUserPreferences() {
-    const res = await fetch(
-      `http://localhost:8080/api/v1/user/${($user as User)!.id}/preferences`,
+    const res = await fetch(apiURL(`user/${($user as User)!.id}/preferences`),
       {
         method: "GET",
         headers: {
@@ -61,7 +62,7 @@
   }
 
   onMount(() => {
-    fetch("http://localhost:8080/api/v1/sizes", {
+    fetch(apiURL("sizes"), {
       method: "GET",
       headers: {
         Authorization: `Bearer ${$token}`,
-- 
cgit v1.1