From ca7592989aea27dfb89b7a757a84e03a4feb4719 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sun, 5 May 2024 19:06:23 +0000
Subject: [PATCH] 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 |  8 ++++
 src/routes/api/visits/+server.ts        |  9 +++-
 src/routes/planner/+page.svelte         | 63 +++++++++++++++++++++++++
 src/services/adventureService.ts        | 31 ++++++++++++
 4 files changed, 110 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/AdventureCard.svelte b/src/lib/components/AdventureCard.svelte
index e5bed98..0cdd8a1 100644
--- a/src/lib/components/AdventureCard.svelte
+++ b/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
diff --git a/src/routes/api/visits/+server.ts b/src/routes/api/visits/+server.ts
index 42dcb6c..5092016 100644
--- a/src/routes/api/visits/+server.ts
+++ b/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,
diff --git a/src/routes/planner/+page.svelte b/src/routes/planner/+page.svelte
index 8e9092d..409f3d1 100644
--- a/src/routes/planner/+page.svelte
+++ b/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>
diff --git a/src/services/adventureService.ts b/src/services/adventureService.ts
index 8559702..c8405dc 100644
--- a/src/services/adventureService.ts
+++ b/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.