From a2de88aa6bd114c9262319848e10892c05a42f2e Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sun, 16 Jun 2024 13:57:52 +0000
Subject: [PATCH 1/3] feat: Add existing image display to image upload modal

---
 src/lib/components/CreateNewAdventure.svelte | 2 ++
 src/lib/components/EditModal.svelte          | 2 ++
 src/lib/components/ImageModal.svelte         | 7 +++++++
 3 files changed, 11 insertions(+)

diff --git a/src/lib/components/CreateNewAdventure.svelte b/src/lib/components/CreateNewAdventure.svelte
index f789068a..287bc190 100644
--- a/src/lib/components/CreateNewAdventure.svelte
+++ b/src/lib/components/CreateNewAdventure.svelte
@@ -102,6 +102,8 @@
     name={newAdventure.name}
     on:submit={upload}
     on:close={() => (isImageModalOpen = false)}
+    bucket="adventures"
+    existingImageKey={newAdventure.imageUrl}
   />
 {/if}
 
diff --git a/src/lib/components/EditModal.svelte b/src/lib/components/EditModal.svelte
index 01b01018..24ee7b5d 100644
--- a/src/lib/components/EditModal.svelte
+++ b/src/lib/components/EditModal.svelte
@@ -103,6 +103,8 @@
     name={adventureToEdit.name}
     on:submit={upload}
     on:close={() => (isImageModalOpen = false)}
+    existingImageKey={adventureToEdit.imageUrl}
+    bucket="adventures"
   />
 {/if}
 
diff --git a/src/lib/components/ImageModal.svelte b/src/lib/components/ImageModal.svelte
index fd7bfe14..50322a18 100644
--- a/src/lib/components/ImageModal.svelte
+++ b/src/lib/components/ImageModal.svelte
@@ -4,6 +4,8 @@
   import { onMount } from "svelte";
   let modal: HTMLDialogElement;
   export let name: string;
+  export let existingImageKey: string | undefined;
+  export let bucket: string;
 
   let viewType: string = "upload";
 
@@ -110,6 +112,11 @@
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+    {#if existingImageKey}
+      <h2 class="text-center font-bold text-xl mb-2">Existing Image</h2>
+      <img src="/cdn/{bucket}/{existingImageKey}" alt="Existing" class="mb-2" />
+    {/if}
+
     <h3 class="font-bold text-lg">Image Upload</h3>
     <div class="join items-center justify-center flex mb-8">
       <input

From b6dcb8e438cbf724cf6256b65a3ab6ebec2dd630 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sun, 16 Jun 2024 14:01:51 +0000
Subject: [PATCH 2/3] feat: Improve adventure creation form layout and
 functionality

---
 src/lib/components/EditModal.svelte | 107 ++++++++++++++++++----------
 1 file changed, 70 insertions(+), 37 deletions(-)

diff --git a/src/lib/components/EditModal.svelte b/src/lib/components/EditModal.svelte
index 24ee7b5d..ace0df8b 100644
--- a/src/lib/components/EditModal.svelte
+++ b/src/lib/components/EditModal.svelte
@@ -72,7 +72,7 @@
       console.log(adventureToEdit.name);
       const desc = await generateDescription(adventureToEdit.name);
       adventureToEdit.description = desc;
-      // Do something with the updated newAdventure object
+      // Do something with the updated adventureToEdit object
     } catch (error) {
       console.error(error);
       // Handle the error
@@ -91,6 +91,11 @@
 
   let isImageModalOpen: boolean = false;
 
+  /**
+   * Handles the upload event and updates the adventure's image URL.
+   *
+   * @param {CustomEvent<any>} e - The custom event containing the key.
+   */
   function upload(e: CustomEvent<any>) {
     let key = e.detail;
     console.log("EE" + key);
@@ -112,99 +117,127 @@
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
-    <h3 class="font-bold text-lg">Edit Adventure {originalName}</h3>
-    <p class="py-4">Press ESC key or click the button below to close</p>
+    <h3 class="font-bold text-lg">Edit Adventure: {adventureToEdit.name}</h3>
     <div
       class="modal-action items-center"
       style="display: flex; flex-direction: column; align-items: center; width: 100%;"
     >
       <form method="dialog" style="width: 100%;">
-        <div>
-          <label for="name">Name</label>
+        <div class="mb-2">
+          <label for="name">Name</label><br />
           <input
             type="text"
             id="name"
             bind:value={adventureToEdit.name}
-            class="input input-bordered w-full max-w-xs"
+            class="input input-bordered w-full max-w-xs mt-1"
           />
         </div>
-        <div>
-          <label for="location">Location</label>
+        <div class="mb-2">
+          <label for="location"
+            >Location<iconify-icon
+              icon="mdi:map-marker"
+              class="text-lg ml-0.5 -mb-0.5"
+            ></iconify-icon></label
+          ><br />
           <input
             type="text"
             id="location"
             bind:value={adventureToEdit.location}
-            class="input input-bordered w-full max-w-xs"
+            class="input input-bordered w-full max-w-xs mt-1"
           />
         </div>
-        <div>
-          <label for="date">Date</label>
+        <div class="mb-2">
+          <label for="date"
+            >Date<iconify-icon icon="mdi:calendar" class="text-lg ml-1 -mb-0.5"
+            ></iconify-icon></label
+          ><br />
           <input
             type="date"
             id="date"
             bind:value={adventureToEdit.date}
-            class="input input-bordered w-full max-w-xs"
+            class="input input-bordered w-full max-w-xs mt-1"
           />
         </div>
-        <div>
-          <label for="date">Description</label>
-          <input
-            type="text"
-            id="description"
-            bind:value={adventureToEdit.description}
-            class="input input-bordered w-full max-w-xs"
-          />
+        <div class="mb-2">
+          <label for="date"
+            >Description<iconify-icon
+              icon="mdi:notebook"
+              class="text-lg ml-1 -mb-0.5"
+            ></iconify-icon></label
+          ><br />
+          <div class="flex">
+            <input
+              type="text"
+              id="description"
+              bind:value={adventureToEdit.description}
+              class="input input-bordered w-full max-w-xs mt-1 mb-2"
+            />
+            <button
+              class="btn btn-neutral ml-2"
+              type="button"
+              on:click={generate}
+              ><iconify-icon icon="mdi:wikipedia" class="text-xl -mb-1"
+              ></iconify-icon>Generate Description</button
+            >
+          </div>
         </div>
-        <div>
+        <div class="mb-2">
+          <label for="activityTypes"
+            >Activity Types <iconify-icon
+              icon="mdi:clipboard-list"
+              class="text-xl -mb-1"
+            ></iconify-icon></label
+          ><br />
           <input
             type="text"
             hidden
             id="activityTypes"
             bind:value={activityInput}
-            class="input input-bordered w-full max-w-xs"
+            class="input input-bordered w-full max-w-xs mt-1"
           />
-          <label for="date">Activity Types (Comma Seperated)</label>
+
           <AutoComplete
             items={activityTypes}
             bind:selectedItem={selected}
             bind:displayValue={activityInput}
           />
         </div>
-        <div>
-          <label for="rating">Rating</label>
+        <div class="mb-2">
+          <label for="rating"
+            >Rating <iconify-icon icon="mdi:star" class="text-xl -mb-1"
+            ></iconify-icon></label
+          ><br />
           <input
             type="number"
             min="0"
             max="5"
             id="rating"
             bind:value={adventureToEdit.rating}
-            class="input input-bordered w-full max-w-xs"
+            class="input input-bordered w-full max-w-xs mt-1"
           />
         </div>
         <div>
           <button
             type="button"
-            class="btn btn-secondary"
+            class="btn btn-neutral"
             on:click={() => {
               isImageModalOpen = true;
             }}
           >
-            Upload Image
+            <iconify-icon icon="mdi:upload" class="text-xl"
+            ></iconify-icon>Upload Image
           </button>
         </div>
-        <button class="btn btn-primary mr-4 mt-4" on:click={submit}>Save</button
+
+        <button
+          type="submit"
+          class="btn btn-primary mr-4 mt-4"
+          on:click={submit}>Create</button
         >
         <!-- if there is a button in form, it will close the modal -->
         <button class="btn mt-4" on:click={close}>Close</button>
       </form>
-      <div class="flex items-center justify-center flex-wrap gap-4 mt-4">
-        <button class="btn btn-secondary" on:click={generate}
-          >Generate Description</button
-        >
-        <button class="btn btn-secondary" on:click={searchImage}
-          >Search for Image</button
-        >
-      </div>
+      <div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
     </div>
   </div>
 </dialog>

From 563e9d2b4debf549be863fd00c0e64c0d6df2956 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sun, 16 Jun 2024 16:40:07 +0000
Subject: [PATCH 3/3] feat: Remove image functionality from ImageModal
 component

---
 src/lib/components/ImageModal.svelte | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/ImageModal.svelte b/src/lib/components/ImageModal.svelte
index 50322a18..7e2f6af0 100644
--- a/src/lib/components/ImageModal.svelte
+++ b/src/lib/components/ImageModal.svelte
@@ -106,6 +106,12 @@
       // Handle the error
     }
   }
+
+  function removeImage() {
+    existingImageKey = undefined;
+    imageUrl = "";
+    dispatch("submit", "");
+  }
 </script>
 
 <dialog id="my_modal_1" class="modal">
@@ -114,7 +120,14 @@
   <div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
     {#if existingImageKey}
       <h2 class="text-center font-bold text-xl mb-2">Existing Image</h2>
+
       <img src="/cdn/{bucket}/{existingImageKey}" alt="Existing" class="mb-2" />
+      <div class="flex items-center justify-center">
+        <button class="btn btn-warning" on:click={removeImage}
+          >Remove Image<iconify-icon icon="mdi:delete" class="text-xl -ml-1"
+          ></iconify-icon></button
+        >
+      </div>
     {/if}
 
     <h3 class="font-bold text-lg">Image Upload</h3>
@@ -169,7 +182,10 @@
       </form>
     {/if}
 
-    <button class="btn btn-primary" on:click={submit}>Submit</button>
+    <button class="btn btn-primary" on:click={submit}
+      >Submit <iconify-icon icon="mdi:upload" class="text-xl"
+      ></iconify-icon></button
+    >
     <button class="btn btn-neutral" on:click={close}>Close</button>
   </div>
 </dialog>