Allow for editing adventures in a trip

src/lib/components/AdventureCard.svelte

@@ -104,6 +104,20 @@
           ></iconify-icon></button
         >
       {/if}
+      {#if type == "trip"}
+        <!-- <button class="btn btn-primary" on:click={moreInfo}
+          ><iconify-icon icon="mdi:launch" class="text-2xl"
+          ></iconify-icon></button
+        > -->
+        <button class="btn btn-primary" on:click={edit}
+          ><iconify-icon icon="mdi:file-document-edit" class="text-2xl"
+          ></iconify-icon></button
+        >
+        <button class="btn btn-secondary" on:click={remove}
+          ><iconify-icon icon="mdi:trash-can-outline" class="text-2xl"
+          ></iconify-icon></button
+        >
+      {/if}
     </div>
   </div>
 </div>

src/routes/trip/[id]/+page.svelte

@@ -4,8 +4,13 @@
   import type { PageData } from "./$types";
   import { goto } from "$app/navigation";
   import CreateNewAdventure from "$lib/components/CreateNewAdventure.svelte";
-  import { addAdventure } from "../../../services/adventureService";
+  import {
+    addAdventure,
+    saveAdventure,
+  } from "../../../services/adventureService";
   import AdventureCard from "$lib/components/AdventureCard.svelte";
+  import EditModal from "$lib/components/EditModal.svelte";
+  import SucessToast from "$lib/components/SucessToast.svelte";
 
   export let data: PageData;
 
@@ -14,6 +19,7 @@
   let isCreateModalOpen: boolean = false;
 
   let adventuresPlans: Adventure[] = [];
+  let adventureToEdit: Adventure | undefined;
 
   onMount(() => {
     if (data.trip.trip) {
@@ -25,6 +31,11 @@
     }
   });
 
+  function handleClose() {
+    adventureToEdit = undefined;
+    isCreateModalOpen = false;
+  }
+
   const newAdventure = async (event: { detail: Adventure }) => {
     isCreateModalOpen = false;
     let detailAdventure = event.detail;
@@ -37,8 +48,45 @@
       // showToast("Failed to add adventure");
     }
   };
+
+  let isShowingToast: boolean = false;
+  let toastAction: string = "";
+
+  function showToast(action: string) {
+    toastAction = action;
+    isShowingToast = true;
+
+    setTimeout(() => {
+      isShowingToast = false;
+      toastAction = "";
+    }, 3000);
+  }
+
+  async function savePlan(event: { detail: Adventure }) {
+    let newArray = await saveAdventure(event.detail, adventuresPlans);
+    if (newArray.length > 0) {
+      adventuresPlans = newArray;
+      showToast("Adventure updated successfully!");
+    } else {
+      showToast("Failed to update adventure");
+    }
+    adventureToEdit = undefined;
+  }
+
+  function edit(event: { detail: number }) {
+    const adventure = adventuresPlans.find(
+      (adventure) => adventure.id === event.detail
+    );
+    if (adventure) {
+      adventureToEdit = adventure;
+    }
+  }
 </script>
 
+{#if isShowingToast}
+  <SucessToast action={toastAction} />
+{/if}
+
 <main>
   {#if trip && trip.name}
     <h1 class="text-center font-extrabold text-4xl mb-2">{trip.name}</h1>
@@ -60,7 +108,7 @@
   class="grid xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 mt-4 content-center auto-cols-auto ml-6 mr-6"
 >
   {#each adventuresPlans as adventure (adventure.id)}
-    <AdventureCard {adventure} type="trip" />
+    <AdventureCard {adventure} type="trip" on:edit={edit} />
   {/each}
 </div>
 
@@ -98,3 +146,7 @@
     on:create={newAdventure}
   />
 {/if}
+
+{#if adventureToEdit && adventureToEdit.id != undefined}
+  <EditModal bind:adventureToEdit on:submit={savePlan} on:close={handleClose} />
+{/if}