feat: Add markVisited function to AdventureCard.svelte and +page.svelte

The code changes include adding a new function called markVisited to the AdventureCard.svelte and +page.svelte files. This function is responsible for marking an adventure as visited and dispatching an event to update the adventure's status. This enhancement allows users to mark adventures as visited in the planner page and triggers the corresponding API request to update the adventure's status in the database.

src/lib/components/AdventureCard.svelte

@@ -31,6 +31,10 @@
     console.log(adventure.id);
     goto(`/adventure/${adventure.id}`);
   }
+  function markVisited() {
+    console.log(adventure.id);
+    dispatch("markVisited", adventure);
+  }
 </script>
 
 <div
@@ -77,6 +81,10 @@
         >
       {/if}
       {#if type == "planner"}
+        <button class="btn btn-success" on:click={markVisited}
+          ><iconify-icon icon="mdi:check-bold" class="text-2xl"
+          ></iconify-icon></button
+        >
         <button class="btn btn-primary" on:click={moreInfo}
           ><iconify-icon icon="mdi:launch" class="text-2xl"
           ></iconify-icon></button

src/routes/api/visits/+server.ts

@@ -180,7 +180,7 @@ export async function PUT(event: RequestEvent): Promise<Response> {
     });
   }
 
-  const { name, location, date, description, activityTypes, id, rating } =
+  const { name, location, date, description, activityTypes, id, rating, type } =
     body.detailAdventure;
 
   if (!name) {
@@ -189,11 +189,18 @@ export async function PUT(event: RequestEvent): Promise<Response> {
     });
   }
 
+  if (type == "featured") {
+    return error(400, {
+      message: "Featured adventures cannot be created at the moment",
+    });
+  }
+
   // update the adventure in the user's visited list
   await db
     .update(adventureTable)
     .set({
       name: name,
+      type: type,
       location: location,
       date: date,
       description: description,

src/routes/planner/+page.svelte

@@ -8,6 +8,7 @@
     saveAdventure,
     removeAdventure,
     addAdventure,
+    changeType,
   } from "../../services/adventureService.js";
   import SucessToast from "$lib/components/SucessToast.svelte";
   import mapDrawing from "$lib/assets/adventure_map.svg";
@@ -87,6 +88,18 @@
       showToast("Failed to add adventure");
     }
   };
+
+  async function markVisited(event: { detail: Adventure }) {
+    let initialLength: number = plans.length;
+    let newArray = await changeType(event.detail, "mylog", plans);
+    if (newArray.length + 1 == initialLength) {
+      plans = newArray;
+      showToast("Adventure moved to visit log!");
+    } else {
+      showToast("Failed to moves adventure");
+    }
+    adventureToEdit = undefined;
+  }
 </script>
 
 {#if isShowingToast}
@@ -131,6 +144,7 @@
       type="planner"
       on:edit={editPlan}
       on:remove={remove}
+      on:markVisited={markVisited}
     />
   {/each}
 </div>
@@ -153,3 +167,52 @@
     type="planner"
   />
 {/if}
+
+<!-- ----------------------- -->
+
+<!-- {#if plans.length == 0 && !isLoading}
+  <div class="flex flex-col items-center justify-center mt-16">
+    <article class="prose mb-4"><h2>Add some adventures!</h2></article>
+    <img src={mapDrawing} width="25%" alt="Logo" />
+  </div>
+{/if}
+
+{#if plans.length != 0 && !isLoading}
+  <div class="flex justify-center items-center w-full mt-4">
+    <article class="prose">
+      <h2 class="text-center">Actions</h2>
+    </article>
+  </div>
+  <div
+    class="flex flex-row items-center justify-center mt-2 gap-4 mb-4 flex-wrap"
+  >
+    <button class="btn btn-neutral" on:click={exportData}>
+      <img src={exportFile} class="inline-block -mt-1" alt="Logo" /> Save as File
+    </button>
+    <button class="btn btn-neutral" on:click={() => (confirmModalOpen = true)}>
+      <img src={deleteIcon} class="inline-block -mt-1" alt="Logo" /> Delete Data
+    </button>
+    <button class="btn btn-neutral" on:click={shareLink}>
+      <iconify-icon icon="mdi:share-variant" class="text-xl"></iconify-icon> Share
+      as Link
+    </button>
+  </div>
+{/if}
+
+{#if confirmModalOpen}
+  <ConfirmModal
+    on:close={handleClose}
+    on:confirm={deleteData}
+    title="Delete all Adventures"
+    isWarning={false}
+    message="Are you sure you want to delete all adventures?"
+  />
+{/if} -->
+
+<svelte:head>
+  <title>My Plans | AdventureLog</title>
+  <meta
+    name="description"
+    content="Create and manage your adventure plans here!"
+  />
+</svelte:head>

src/services/adventureService.ts

@@ -124,6 +124,37 @@ export async function addAdventure(
   return adventureArray;
 }
 
+export async function changeType(
+  newAdventure: Adventure,
+  newType: string,
+  adventureArray: Adventure[]
+) {
+  newAdventure.type = newType;
+  let detailAdventure = newAdventure;
+
+  const response = await fetch("/api/visits", {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ detailAdventure }),
+  });
+
+  if (response.ok) {
+    // remove adventure from array where id matches
+    adventureArray = adventureArray.filter(
+      (existingAdventure) => existingAdventure.id !== newAdventure.id
+    );
+    // showToast("Adventure removed successfully!");
+  } else {
+    console.error("Error:", response.statusText);
+    adventureArray = [];
+  }
+
+  console.log(adventureArray);
+
+  return adventureArray;
+}
 /**
  * Increments the visit count by the specified amount.
  * @param {number} amount - The amount to increment the visit count by.