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