From 895522b2ac4ce0acaa1f8a743c88ea62e654cce5 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Tue, 30 Apr 2024 21:52:05 +0000
Subject: [PATCH 01/13] Refactor adventure page layout to use a responsive
 image size in +page.svelte

---
 src/routes/adventure/[id]/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/adventure/[id]/+page.svelte b/src/routes/adventure/[id]/+page.svelte
index a266a4e6..9ed56867 100644
--- a/src/routes/adventure/[id]/+page.svelte
+++ b/src/routes/adventure/[id]/+page.svelte
@@ -59,7 +59,7 @@
       <img
         src={adventure.imageUrl}
         alt={adventure.name}
-        class="w-50 mt-4 align-middle rounded-lg shadow-lg"
+        class="w-1/2 mt-4 align-middle rounded-lg shadow-lg"
       />
     </div>
   {/if}

From 296659ea277c6541009666705026fd361aaf7119 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Tue, 30 Apr 2024 22:39:09 +0000
Subject: [PATCH 02/13] Refactor CreateNewAdventure component to add activity
 types and update server files

---
 src/lib/components/CreateNewAdventure.svelte | 33 ++++++++++++++++++--
 src/routes/api/visits/+server.ts             | 20 ++++++++++--
 src/routes/log/+page.server.ts               |  1 -
 src/routes/log/+page.svelte                  |  2 ++
 4 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/CreateNewAdventure.svelte b/src/lib/components/CreateNewAdventure.svelte
index 83c5e09d..2addc31c 100644
--- a/src/lib/components/CreateNewAdventure.svelte
+++ b/src/lib/components/CreateNewAdventure.svelte
@@ -7,6 +7,7 @@
     name: "",
     location: "",
     date: "",
+    activityTypes: [],
   };
 
   import { createEventDispatcher } from "svelte";
@@ -23,6 +24,7 @@
   });
 
   function create() {
+    addActivityType();
     dispatch("create", newAdventure);
     console.log(newAdventure);
   }
@@ -36,6 +38,22 @@
       close();
     }
   }
+
+  let activityInput: string = "";
+
+  function addActivityType() {
+    if (activityInput.trim() !== "") {
+      const activities = activityInput
+        .split(",")
+        .map((activity) => activity.trim());
+      newAdventure.activityTypes = [
+        ...(newAdventure.activityTypes || []),
+        ...activities,
+      ];
+      activityInput = "";
+    }
+    console.log(newAdventure.activityTypes);
+  }
 </script>
 
 <dialog id="my_modal_1" class="modal">
@@ -85,8 +103,19 @@
             class="input input-bordered w-full max-w-xs"
           />
         </div>
-        <button class="btn btn-primary mr-4 mt-4" on:click={create}
-          >Create</button
+        <div>
+          <label for="date">Activity Types</label>
+          <input
+            type="text"
+            id="activityTypes"
+            bind:value={activityInput}
+            class="input input-bordered w-full max-w-xs"
+          />
+        </div>
+        <button
+          type="submit"
+          class="btn btn-primary mr-4 mt-4"
+          on:click={create}>Create</button
         >
         <!-- if there is a button in form, it will close the modal -->
         <button class="btn mt-4" on:click={close}>Close</button>
diff --git a/src/routes/api/visits/+server.ts b/src/routes/api/visits/+server.ts
index b19ed75b..dedf2b23 100644
--- a/src/routes/api/visits/+server.ts
+++ b/src/routes/api/visits/+server.ts
@@ -22,7 +22,20 @@ export async function GET(event: RequestEvent): Promise<Response> {
     .execute();
   return new Response(
     // turn the result into an Adventure object array
-    JSON.stringify(result.map((r) => r as Adventure)),
+    JSON.stringify(
+      result.map((r) => {
+        const adventure: Adventure = r as Adventure;
+        if (typeof adventure.activityTypes === "string") {
+          try {
+            adventure.activityTypes = JSON.parse(adventure.activityTypes);
+          } catch (error) {
+            console.error("Error parsing activityTypes:", error);
+            adventure.activityTypes = undefined;
+          }
+        }
+        return adventure;
+      })
+    ),
     {
       status: 200,
       headers: {
@@ -86,7 +99,7 @@ export async function POST(event: RequestEvent): Promise<Response> {
 
   const { newAdventure } = await event.request.json();
   console.log(newAdventure);
-  const { name, location, date, description } = newAdventure;
+  const { name, location, date, description, activityTypes } = newAdventure;
 
   if (!name) {
     return error(400, {
@@ -94,6 +107,8 @@ export async function POST(event: RequestEvent): Promise<Response> {
     });
   }
 
+  console.log(activityTypes);
+
   // insert the adventure to the user's visited list
   let res = await db
     .insert(adventureTable)
@@ -104,6 +119,7 @@ export async function POST(event: RequestEvent): Promise<Response> {
       location: location || null,
       date: date || null,
       description: description || null,
+      activityTypes: JSON.stringify(activityTypes) || null,
     })
     .returning({ insertedId: adventureTable.id })
     .execute();
diff --git a/src/routes/log/+page.server.ts b/src/routes/log/+page.server.ts
index fa7fff87..1f38e8df 100644
--- a/src/routes/log/+page.server.ts
+++ b/src/routes/log/+page.server.ts
@@ -8,7 +8,6 @@ export const load: PageServerLoad = async (event) => {
   }
   const response = await event.fetch("/api/visits");
   const result = await response.json();
-  // let array = result.adventures as Adventure[];
   return {
     result,
   };
diff --git a/src/routes/log/+page.svelte b/src/routes/log/+page.svelte
index dd6d0532..1d217400 100644
--- a/src/routes/log/+page.svelte
+++ b/src/routes/log/+page.svelte
@@ -67,6 +67,7 @@
       date: event.detail.date,
       description: event.detail.description,
       id: -1,
+      activityTypes: event.detail.activityTypes,
     };
 
     fetch("/api/visits", {
@@ -123,6 +124,7 @@
       date: event.detail.date,
       id: event.detail.id,
       description: event.detail.description,
+      activityTypes: event.detail.activityTypes,
     };
 
     // put request to /api/visits with id and advneture data

From 9f9f0c3d8741ffbc9e57fe292f8524afe69ccfcc Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Tue, 30 Apr 2024 22:52:07 +0000
Subject: [PATCH 03/13] Refactor adventure page layout to display activity
 types in +page.svelte and update server files

---
 src/routes/adventure/[id]/+page.svelte |  9 +++++++++
 src/routes/api/adventure/+server.ts    | 15 +++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/routes/adventure/[id]/+page.svelte b/src/routes/adventure/[id]/+page.svelte
index 9ed56867..9576bc3c 100644
--- a/src/routes/adventure/[id]/+page.svelte
+++ b/src/routes/adventure/[id]/+page.svelte
@@ -11,6 +11,7 @@
   onMount(() => {
     if (data.adventure.adventure) {
       adventure = data.adventure.adventure[0];
+      console.log(adventure.activityTypes);
     } else {
       goto("/404");
     }
@@ -63,4 +64,12 @@
       />
     </div>
   {/if}
+  {#if adventure.activityTypes && adventure.activityTypes.length > 0}
+    <div class="flex justify-center items-center mt-4">
+      <p class="text-center text-lg">Activities:</p>
+      <ul class="flex flex-wrap">
+        {adventure.activityTypes.toString()}
+      </ul>
+    </div>
+  {/if}
 {/if}
diff --git a/src/routes/api/adventure/+server.ts b/src/routes/api/adventure/+server.ts
index 742d9a59..57ca82ef 100644
--- a/src/routes/api/adventure/+server.ts
+++ b/src/routes/api/adventure/+server.ts
@@ -1,5 +1,6 @@
 import { db } from "$lib/db/db.server";
 import { adventureTable } from "$lib/db/schema";
+import type { Adventure } from "$lib/utils/types";
 import { json, type RequestEvent, type RequestHandler } from "@sveltejs/kit";
 import { and, eq } from "drizzle-orm";
 
@@ -38,6 +39,20 @@ export const GET: RequestHandler = async ({ url, locals }) => {
     return json({ error: "Adventure not found" }, { status: 404 });
   }
 
+  let adventureData = JSON.stringify(
+    adventure.map((r) => {
+      const adventure: Adventure = r as Adventure;
+      if (typeof adventure.activityTypes === "string") {
+        try {
+          adventure.activityTypes = JSON.parse(adventure.activityTypes);
+        } catch (error) {
+          console.error("Error parsing activityTypes:", error);
+          adventure.activityTypes = undefined;
+        }
+      }
+    })
+  );
+
   //   console.log("GET /api/adventure?id=", id);
   //   console.log("User:", user);
 

From 6d4e860e433b64a8608bd3a39d437585e71cc308 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Tue, 30 Apr 2024 23:04:12 +0000
Subject: [PATCH 04/13] Refactor adventure page layout to display activity
 types in +page.svelte and update server files

---
 src/routes/adventure/[id]/+page.server.ts |  2 +-
 src/routes/adventure/[id]/+page.svelte    | 10 ++++++++--
 src/routes/api/adventure/+server.ts       |  2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/routes/adventure/[id]/+page.server.ts b/src/routes/adventure/[id]/+page.server.ts
index f332b5b2..2b144751 100644
--- a/src/routes/adventure/[id]/+page.server.ts
+++ b/src/routes/adventure/[id]/+page.server.ts
@@ -9,7 +9,7 @@ export const load = (async (event) => {
     return redirect(302, "/login");
   }
 
-  let adventureUserId = await db
+  let adventureUserId: any[] = await db
     .select({ userId: adventureTable.userId })
     .from(adventureTable)
     .where(eq(adventureTable.id, Number(event.params.id)))
diff --git a/src/routes/adventure/[id]/+page.svelte b/src/routes/adventure/[id]/+page.svelte
index 9576bc3c..7bb1cbe7 100644
--- a/src/routes/adventure/[id]/+page.svelte
+++ b/src/routes/adventure/[id]/+page.svelte
@@ -66,9 +66,15 @@
   {/if}
   {#if adventure.activityTypes && adventure.activityTypes.length > 0}
     <div class="flex justify-center items-center mt-4">
-      <p class="text-center text-lg">Activities:</p>
+      <p class="text-center text-lg">Activities:&nbsp</p>
       <ul class="flex flex-wrap">
-        {adventure.activityTypes.toString()}
+        {#each adventure.activityTypes as activity}
+          <div
+            class="badge badge-primary mr-1 text-md font-semibold pb-2 pt-1 mb-1"
+          >
+            {activity}
+          </div>
+        {/each}
       </ul>
     </div>
   {/if}
diff --git a/src/routes/api/adventure/+server.ts b/src/routes/api/adventure/+server.ts
index 57ca82ef..7bfba3ec 100644
--- a/src/routes/api/adventure/+server.ts
+++ b/src/routes/api/adventure/+server.ts
@@ -39,7 +39,7 @@ export const GET: RequestHandler = async ({ url, locals }) => {
     return json({ error: "Adventure not found" }, { status: 404 });
   }
 
-  let adventureData = JSON.stringify(
+  JSON.stringify(
     adventure.map((r) => {
       const adventure: Adventure = r as Adventure;
       if (typeof adventure.activityTypes === "string") {

From 6a4771cecec031bfdb1dc79727d31df7530cb491 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Tue, 30 Apr 2024 23:10:59 +0000
Subject: [PATCH 05/13] Add activity types to AdventureCard component and
 update server files

---
 src/lib/components/AdventureCard.svelte | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/lib/components/AdventureCard.svelte b/src/lib/components/AdventureCard.svelte
index 24342527..9d2324af 100644
--- a/src/lib/components/AdventureCard.svelte
+++ b/src/lib/components/AdventureCard.svelte
@@ -49,6 +49,17 @@
         <p class="ml-1">{adventure.date}</p>
       </div>
     {/if}
+    {#if adventure.activityTypes && adventure.activityTypes.length > 0}
+      <ul class="flex flex-wrap">
+        {#each adventure.activityTypes as activity}
+          <div
+            class="badge badge-primary mr-1 text-md font-semibold pb-2 pt-1 mb-1"
+          >
+            {activity}
+          </div>
+        {/each}
+      </ul>
+    {/if}
     <div class="card-actions justify-end">
       {#if type == "mylog"}
         <button class="btn btn-primary" on:click={moreInfo}

From 2da4baf8a10e61bcea5c76a825145c22fc9eff3d Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Wed, 1 May 2024 00:14:31 +0000
Subject: [PATCH 06/13] Add activity types to EditModal component and update
 server files

---
 src/lib/components/EditModal.svelte | 25 +++++++++++++++++++++++++
 src/routes/api/visits/+server.ts    |  3 ++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/EditModal.svelte b/src/lib/components/EditModal.svelte
index 5b1db35d..11e78146 100644
--- a/src/lib/components/EditModal.svelte
+++ b/src/lib/components/EditModal.svelte
@@ -13,9 +13,11 @@
     if (modal) {
       modal.showModal();
     }
+    activityInput = (adventureToEdit?.activityTypes || []).join(", ");
   });
 
   function submit() {
+    addActivityType();
     dispatch("submit", adventureToEdit);
     console.log(adventureToEdit);
   }
@@ -29,6 +31,20 @@
       close();
     }
   }
+
+  let activityInput: string = "";
+
+  function addActivityType() {
+    if (activityInput.trim() !== "") {
+      const activities = activityInput
+        .split(",")
+        .map((activity) => activity.trim());
+      adventureToEdit.activityTypes = activities;
+      // override the original activity types
+      activityInput = "";
+    }
+    console.log(adventureToEdit.activityTypes);
+  }
 </script>
 
 <dialog id="my_modal_1" class="modal">
@@ -78,6 +94,15 @@
             class="input input-bordered w-full max-w-xs"
           />
         </div>
+        <div>
+          <label for="date">Activity Types</label>
+          <input
+            type="text"
+            id="activityTypes"
+            bind:value={activityInput}
+            class="input input-bordered w-full max-w-xs"
+          />
+        </div>
         <button class="btn btn-primary mr-4 mt-4" on:click={submit}>Save</button
         >
         <!-- if there is a button in form, it will close the modal -->
diff --git a/src/routes/api/visits/+server.ts b/src/routes/api/visits/+server.ts
index dedf2b23..37cf3932 100644
--- a/src/routes/api/visits/+server.ts
+++ b/src/routes/api/visits/+server.ts
@@ -157,7 +157,7 @@ export async function PUT(event: RequestEvent): Promise<Response> {
   // get properties from the body
   const { newAdventure } = await event.request.json();
   console.log(newAdventure);
-  const { name, location, date, id, description } = newAdventure;
+  const { name, location, date, id, description, activityTypes } = newAdventure;
 
   // update the adventure in the user's visited list
   await db
@@ -167,6 +167,7 @@ export async function PUT(event: RequestEvent): Promise<Response> {
       location: location,
       date: date,
       description: description,
+      activityTypes: JSON.stringify(activityTypes),
     })
     .where(
       and(

From 25adf07874a070e4b5d2f9fad1a520018924dee1 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Fri, 3 May 2024 21:29:35 +0000
Subject: [PATCH 07/13] Refactor adventure page layout to display activity
 types and update server files

---
 src/lib/components/EditModal.svelte |  2 +
 src/routes/api/visits/+server.ts    | 38 +++++++++++-----
 src/routes/log/+page.svelte         | 68 +++++++++--------------------
 3 files changed, 51 insertions(+), 57 deletions(-)

diff --git a/src/lib/components/EditModal.svelte b/src/lib/components/EditModal.svelte
index 11e78146..a1f9a3e5 100644
--- a/src/lib/components/EditModal.svelte
+++ b/src/lib/components/EditModal.svelte
@@ -6,6 +6,8 @@
   import { onMount } from "svelte";
   let modal: HTMLDialogElement;
 
+  console.log(adventureToEdit.id);
+
   let originalName = adventureToEdit.name;
 
   onMount(() => {
diff --git a/src/routes/api/visits/+server.ts b/src/routes/api/visits/+server.ts
index 37cf3932..ce2c654f 100644
--- a/src/routes/api/visits/+server.ts
+++ b/src/routes/api/visits/+server.ts
@@ -86,7 +86,6 @@ export async function DELETE(event: RequestEvent): Promise<Response> {
   });
 }
 
-// add the adventure to the user's visited list
 export async function POST(event: RequestEvent): Promise<Response> {
   if (!event.locals.user) {
     return new Response(JSON.stringify({ error: "No user found" }), {
@@ -97,9 +96,15 @@ export async function POST(event: RequestEvent): Promise<Response> {
     });
   }
 
-  const { newAdventure } = await event.request.json();
-  console.log(newAdventure);
-  const { name, location, date, description, activityTypes } = newAdventure;
+  const body = await event.request.json();
+  if (!body.detailAdventure) {
+    return error(400, {
+      message: "No adventure data provided",
+    });
+  }
+
+  const { name, location, date, description, activityTypes } =
+    body.detailAdventure;
 
   if (!name) {
     return error(400, {
@@ -127,10 +132,12 @@ export async function POST(event: RequestEvent): Promise<Response> {
   let insertedId = res[0].insertedId;
   console.log(insertedId);
 
+  body.detailAdventure.id = insertedId;
+
   // return a response with the adventure object values
   return new Response(
     JSON.stringify({
-      adventure: { name, location, date },
+      adventure: body.detailAdventure,
       message: { message: "Adventure added" },
       id: insertedId,
     }),
@@ -154,10 +161,21 @@ export async function PUT(event: RequestEvent): Promise<Response> {
     });
   }
 
-  // get properties from the body
-  const { newAdventure } = await event.request.json();
-  console.log(newAdventure);
-  const { name, location, date, id, description, activityTypes } = newAdventure;
+  const body = await event.request.json();
+  if (!body.detailAdventure) {
+    return error(400, {
+      message: "No adventure data provided",
+    });
+  }
+
+  const { name, location, date, description, activityTypes, id } =
+    body.detailAdventure;
+
+  if (!name) {
+    return error(400, {
+      message: "Name field is required!",
+    });
+  }
 
   // update the adventure in the user's visited list
   await db
@@ -179,7 +197,7 @@ export async function PUT(event: RequestEvent): Promise<Response> {
 
   return new Response(
     JSON.stringify({
-      adventure: { id, name, location, date, description },
+      adventure: body.detailAdventure,
       message: { message: "Adventure updated" },
     }),
     {
diff --git a/src/routes/log/+page.svelte b/src/routes/log/+page.svelte
index 1d217400..59c29f22 100644
--- a/src/routes/log/+page.svelte
+++ b/src/routes/log/+page.svelte
@@ -15,9 +15,6 @@
   import { visitCount } from "$lib/utils/stores/visitCountStore";
   import MoreFieldsInput from "$lib/components/CreateNewAdventure.svelte";
 
-  let newName = "";
-  let newLocation = "";
-
   let isShowingMoreFields = false;
 
   let adventureToEdit: Adventure | undefined;
@@ -60,15 +57,9 @@
   }
 
   const createNewAdventure = (event: { detail: Adventure }) => {
-    let newAdventure: Adventure = {
-      type: "mylog",
-      name: event.detail.name,
-      location: event.detail.location,
-      date: event.detail.date,
-      description: event.detail.description,
-      id: -1,
-      activityTypes: event.detail.activityTypes,
-    };
+    isShowingMoreFields = false;
+    let detailAdventure = event.detail;
+    console.log("Event" + event.detail.name);
 
     fetch("/api/visits", {
       method: "POST",
@@ -76,7 +67,7 @@
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        newAdventure,
+        detailAdventure,
       }),
     })
       .then((response) => {
@@ -90,21 +81,8 @@
         return response.json();
       })
       .then((data) => {
-        let newId = data.id;
         // add to local array for instant view update
-        adventures = [
-          ...adventures,
-          {
-            id: newId,
-            type: "mylog",
-            name: event.detail.name,
-            location: event.detail.location,
-            date: event.detail.date,
-            description: event.detail.description,
-          },
-        ];
-        newName = ""; // Reset newName and newLocation after adding adventure
-        newLocation = "";
+        adventures = [...adventures, data.adventure];
         showToast("Adventure added successfully!");
         visitCount.update((n) => n + 1);
       })
@@ -115,35 +93,29 @@
   };
 
   function saveAdventure(event: { detail: Adventure }) {
-    console.log("Event" + event.detail);
+    console.log("Event", event.detail);
+    let detailAdventure = event.detail;
 
-    let newAdventure: Adventure = {
-      type: "mylog",
-      name: event.detail.name,
-      location: event.detail.location,
-      date: event.detail.date,
-      id: event.detail.id,
-      description: event.detail.description,
-      activityTypes: event.detail.activityTypes,
-    };
-
-    // put request to /api/visits with id and advneture data
+    // put request to /api/visits with id and adventure data
     fetch("/api/visits", {
       method: "PUT",
       headers: {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        newAdventure,
+        detailAdventure,
       }),
     })
       .then((response) => response.json())
       .then((data) => {
         console.log("Success:", data);
         // update local array with new data
-        adventures = adventures.map((adventure) =>
-          adventure.id === event.detail.id ? event.detail : adventure
+        const index = adventures.findIndex(
+          (adventure) => adventure.id === detailAdventure.id
         );
+        if (index !== -1) {
+          adventures[index] = detailAdventure;
+        }
         adventureToEdit = undefined;
         showToast("Adventure edited successfully!");
       })
@@ -163,6 +135,12 @@
 
   function shareLink() {
     let key = generateRandomString();
+
+    // console log each adventure in the array
+    for (let i = 0; i < adventures.length; i++) {
+      console.log(adventures[i]);
+    }
+
     let data = JSON.stringify(adventures);
     fetch("/api/share", {
       method: "POST",
@@ -268,11 +246,7 @@
 {/if}
 
 {#if isShowingMoreFields}
-  <MoreFieldsInput
-    on:create={createNewAdventure}
-    on:close={handleClose}
-    on:submit={saveAdventure}
-  />
+  <MoreFieldsInput on:create={createNewAdventure} on:close={handleClose} />
 {/if}
 
 {#if adventureToEdit && adventureToEdit.id != undefined}

From eab7cb6087ef94c19ff7699ea70dab091a855480 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Fri, 3 May 2024 21:39:31 +0000
Subject: [PATCH 08/13] feat: Add activity types to CreateNewAdventure and
 AdventureCard components

The code changes include adding activity types functionality to the CreateNewAdventure and AdventureCard components. This allows users to specify different types of activities for each adventure. The changes also include updates to the server files to handle the new activity types.

Recent user commits:
- Refactor adventure page layout to display activity types and update server files
- Add activity types to EditModal component and update server files
- Add activity types to AdventureCard component and update server files
- Refactor adventure page layout to display activity types in +page.svelte and update server files
- Refactor adventure page layout to display activity types in +page.svelte and update server files
- Refactor CreateNewAdventure component to add activity types and update server files
- Refactor adventure page layout to use a responsive image size in +page.svelte
- Merge pull request #52 from seanmorley15/development
- Refactor error handling and add validation for adventure name in server and page files
- Update config.ts
---
 src/lib/components/AdventureCard.svelte      | 1 +
 src/lib/components/CreateNewAdventure.svelte | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/AdventureCard.svelte b/src/lib/components/AdventureCard.svelte
index 9d2324af..923c1e38 100644
--- a/src/lib/components/AdventureCard.svelte
+++ b/src/lib/components/AdventureCard.svelte
@@ -20,6 +20,7 @@
     dispatch("remove", adventure.id);
   }
   function edit() {
+    console.log(adventure.activityTypes);
     dispatch("edit", adventure.id);
   }
   function add() {
diff --git a/src/lib/components/CreateNewAdventure.svelte b/src/lib/components/CreateNewAdventure.svelte
index 2addc31c..579b6ebc 100644
--- a/src/lib/components/CreateNewAdventure.svelte
+++ b/src/lib/components/CreateNewAdventure.svelte
@@ -44,8 +44,8 @@
   function addActivityType() {
     if (activityInput.trim() !== "") {
       const activities = activityInput
-        .split(",")
-        .map((activity) => activity.trim());
+        .split(" ")
+        .filter((activity) => activity.trim() !== "");
       newAdventure.activityTypes = [
         ...(newAdventure.activityTypes || []),
         ...activities,

From 312778463266943ebd3f74334b10645e0cb3fcd3 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 4 May 2024 00:43:18 +0000
Subject: [PATCH 09/13] feat: Add activity types functionality to
 CreateNewAdventure and AdventureCard components

---
 src/lib/components/CreateNewAdventure.svelte | 18 +++++++++++++-----
 src/lib/components/EditModal.svelte          | 16 +++++++++++++---
 src/routes/api/visits/+server.ts             | 12 ++++++++++--
 src/routes/featured/+page.svelte             |  9 ++-------
 4 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/CreateNewAdventure.svelte b/src/lib/components/CreateNewAdventure.svelte
index 579b6ebc..25a0ec93 100644
--- a/src/lib/components/CreateNewAdventure.svelte
+++ b/src/lib/components/CreateNewAdventure.svelte
@@ -46,10 +46,7 @@
       const activities = activityInput
         .split(" ")
         .filter((activity) => activity.trim() !== "");
-      newAdventure.activityTypes = [
-        ...(newAdventure.activityTypes || []),
-        ...activities,
-      ];
+      newAdventure.activityTypes = activities;
       activityInput = "";
     }
     console.log(newAdventure.activityTypes);
@@ -104,7 +101,7 @@
           />
         </div>
         <div>
-          <label for="date">Activity Types</label>
+          <label for="date">Activity Types (Comma Seperated)</label>
           <input
             type="text"
             id="activityTypes"
@@ -112,6 +109,17 @@
             class="input input-bordered w-full max-w-xs"
           />
         </div>
+        <div>
+          <label for="rating">Rating</label>
+          <input
+            type="number"
+            min="0"
+            max="5"
+            id="rating"
+            bind:value={newAdventure.rating}
+            class="input input-bordered w-full max-w-xs"
+          />
+        </div>
         <button
           type="submit"
           class="btn btn-primary mr-4 mt-4"
diff --git a/src/lib/components/EditModal.svelte b/src/lib/components/EditModal.svelte
index a1f9a3e5..b566521c 100644
--- a/src/lib/components/EditModal.svelte
+++ b/src/lib/components/EditModal.svelte
@@ -40,9 +40,8 @@
     if (activityInput.trim() !== "") {
       const activities = activityInput
         .split(",")
-        .map((activity) => activity.trim());
+        .filter((activity) => activity.trim() !== "");
       adventureToEdit.activityTypes = activities;
-      // override the original activity types
       activityInput = "";
     }
     console.log(adventureToEdit.activityTypes);
@@ -97,7 +96,7 @@
           />
         </div>
         <div>
-          <label for="date">Activity Types</label>
+          <label for="date">Activity Types (Comma Seperated)</label>
           <input
             type="text"
             id="activityTypes"
@@ -105,6 +104,17 @@
             class="input input-bordered w-full max-w-xs"
           />
         </div>
+        <div>
+          <label for="rating">Rating</label>
+          <input
+            type="number"
+            min="0"
+            max="5"
+            id="rating"
+            bind:value={adventureToEdit.rating}
+            class="input input-bordered w-full max-w-xs"
+          />
+        </div>
         <button class="btn btn-primary mr-4 mt-4" on:click={submit}>Save</button
         >
         <!-- if there is a button in form, it will close the modal -->
diff --git a/src/routes/api/visits/+server.ts b/src/routes/api/visits/+server.ts
index ce2c654f..3afa6bae 100644
--- a/src/routes/api/visits/+server.ts
+++ b/src/routes/api/visits/+server.ts
@@ -103,7 +103,7 @@ export async function POST(event: RequestEvent): Promise<Response> {
     });
   }
 
-  const { name, location, date, description, activityTypes } =
+  const { name, location, date, description, activityTypes, rating } =
     body.detailAdventure;
 
   if (!name) {
@@ -112,6 +112,12 @@ export async function POST(event: RequestEvent): Promise<Response> {
     });
   }
 
+  if (rating && (rating < 1 || rating > 5)) {
+    return error(400, {
+      message: "Rating must be between 1 and 5",
+    });
+  }
+
   console.log(activityTypes);
 
   // insert the adventure to the user's visited list
@@ -125,6 +131,7 @@ export async function POST(event: RequestEvent): Promise<Response> {
       date: date || null,
       description: description || null,
       activityTypes: JSON.stringify(activityTypes) || null,
+      rating: rating || null,
     })
     .returning({ insertedId: adventureTable.id })
     .execute();
@@ -168,7 +175,7 @@ export async function PUT(event: RequestEvent): Promise<Response> {
     });
   }
 
-  const { name, location, date, description, activityTypes, id } =
+  const { name, location, date, description, activityTypes, id, rating } =
     body.detailAdventure;
 
   if (!name) {
@@ -185,6 +192,7 @@ export async function PUT(event: RequestEvent): Promise<Response> {
       location: location,
       date: date,
       description: description,
+      rating: rating,
       activityTypes: JSON.stringify(activityTypes),
     })
     .where(
diff --git a/src/routes/featured/+page.svelte b/src/routes/featured/+page.svelte
index 8d0cd465..176392e2 100644
--- a/src/routes/featured/+page.svelte
+++ b/src/routes/featured/+page.svelte
@@ -11,12 +11,7 @@
   });
 
   async function add(event: CustomEvent<Adventure>) {
-    let newAdventure: Adventure = {
-      name: event.detail.name,
-      location: event.detail.location,
-      type: "mylog",
-      id: -1,
-    };
+    let detailAdventure = event.detail;
 
     const response = await fetch("/api/visits", {
       method: "POST",
@@ -24,7 +19,7 @@
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        newAdventure,
+        detailAdventure,
       }),
     });
 

From 716323657bd2af67429754ef3f6ea1140211a5f4 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 4 May 2024 15:00:02 +0000
Subject: [PATCH 10/13] feat: Add "Planner" button to Navbar component

The code changes include adding a "Planner" button to the Navbar component. This button allows users to navigate to the Planner page. The changes involve modifying the Navbar component in the src/lib/components/Navbar.svelte file.
---
 src/lib/components/AdventureCard.svelte |  14 ++
 src/lib/components/Navbar.svelte        |   5 +
 src/routes/api/planner/+server.ts       | 223 ++++++++++++++++++++++++
 src/routes/api/visits/+server.ts        |   7 +-
 src/routes/planner/+page.server.ts      |  14 ++
 src/routes/planner/+page.svelte         | 163 ++++++++++++++++-
 6 files changed, 424 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/api/planner/+server.ts

diff --git a/src/lib/components/AdventureCard.svelte b/src/lib/components/AdventureCard.svelte
index 923c1e38..e5bed984 100644
--- a/src/lib/components/AdventureCard.svelte
+++ b/src/lib/components/AdventureCard.svelte
@@ -76,6 +76,20 @@
           ></iconify-icon></button
         >
       {/if}
+      {#if type == "planner"}
+        <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}
       {#if type == "featured"}
         <button class="btn btn-primary" on:click={add}
           ><iconify-icon icon="mdi:plus" class="text-2xl"
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 1e6e2c64..7efe33f0 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -78,6 +78,11 @@
       <button class="btn btn-primary my-2 md:my-0 md:mr-4" on:click={goToLog}
         >My Log</button
       >
+      <button
+        class="btn btn-primary my-2 md:my-0 md:mr-4"
+        on:click={() => goto("/planner")}>Planner</button
+      >
+
       <!-- <button
         class="btn btn-primary my-2 md:my-0 md:mr-4"
         on:click={() => goto("/planner")}>Planner</button
diff --git a/src/routes/api/planner/+server.ts b/src/routes/api/planner/+server.ts
new file mode 100644
index 00000000..fffb22c4
--- /dev/null
+++ b/src/routes/api/planner/+server.ts
@@ -0,0 +1,223 @@
+import { lucia } from "$lib/server/auth";
+import { error, type RequestEvent } from "@sveltejs/kit";
+import { adventureTable } from "$lib/db/schema";
+import { db } from "$lib/db/db.server";
+import { and, eq } from "drizzle-orm";
+import type { Adventure } from "$lib/utils/types";
+
+// Gets all the adventures that the user has visited
+export async function GET(event: RequestEvent): Promise<Response> {
+  if (!event.locals.user) {
+    return new Response(JSON.stringify({ error: "No user found" }), {
+      status: 401,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }
+  let result = await db
+    .select()
+    .from(adventureTable)
+    .where(
+      and(
+        eq(adventureTable.userId, event.locals.user.id),
+        eq(adventureTable.type, "planner")
+      )
+    )
+    .execute();
+  return new Response(
+    // turn the result into an Adventure object array
+    JSON.stringify(
+      result.map((r) => {
+        const adventure: Adventure = r as Adventure;
+        if (typeof adventure.activityTypes === "string") {
+          try {
+            adventure.activityTypes = JSON.parse(adventure.activityTypes);
+          } catch (error) {
+            console.error("Error parsing activityTypes:", error);
+            adventure.activityTypes = undefined;
+          }
+        }
+        return adventure;
+      })
+    ),
+    {
+      status: 200,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }
+  );
+}
+
+// deletes the adventure given the adventure id and the user object
+export async function DELETE(event: RequestEvent): Promise<Response> {
+  if (!event.locals.user) {
+    return new Response(JSON.stringify({ error: "No user found" }), {
+      status: 401,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }
+
+  // get id from the body
+  const { id } = await event.request.json();
+
+  if (!id) {
+    return new Response(JSON.stringify({ error: "No id found" }), {
+      status: 400,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }
+
+  let res = await db
+    .delete(adventureTable)
+    .where(
+      and(
+        eq(adventureTable.userId, event.locals.user.id),
+        eq(adventureTable.id, Number(id))
+      )
+    )
+    .execute();
+
+  return new Response(JSON.stringify({ id: id, res: res }), {
+    status: 200,
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+}
+
+export async function POST(event: RequestEvent): Promise<Response> {
+  if (!event.locals.user) {
+    return new Response(JSON.stringify({ error: "No user found" }), {
+      status: 401,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }
+
+  const body = await event.request.json();
+  if (!body.detailAdventure) {
+    return error(400, {
+      message: "No adventure data provided",
+    });
+  }
+
+  const { name, location, date, description, activityTypes, rating } =
+    body.detailAdventure;
+
+  if (!name) {
+    return error(400, {
+      message: "Name field is required!",
+    });
+  }
+
+  if (rating && (rating < 1 || rating > 5)) {
+    return error(400, {
+      message: "Rating must be between 1 and 5",
+    });
+  }
+
+  console.log(activityTypes);
+
+  // insert the adventure to the user's visited list
+  let res = await db
+    .insert(adventureTable)
+    .values({
+      userId: event.locals.user.id,
+      type: "planner",
+      name: name,
+      location: location || null,
+      date: date || null,
+      description: description || null,
+      activityTypes: JSON.stringify(activityTypes) || null,
+      rating: rating || null,
+    })
+    .returning({ insertedId: adventureTable.id })
+    .execute();
+
+  let insertedId = res[0].insertedId;
+  console.log(insertedId);
+
+  body.detailAdventure.id = insertedId;
+
+  // return a response with the adventure object values
+  return new Response(
+    JSON.stringify({
+      adventure: body.detailAdventure,
+      message: { message: "Adventure added" },
+      id: insertedId,
+    }),
+    {
+      status: 200,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }
+  );
+}
+
+// put route to update existing adventure
+export async function PUT(event: RequestEvent): Promise<Response> {
+  if (!event.locals.user) {
+    return new Response(JSON.stringify({ error: "No user found" }), {
+      status: 401,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }
+
+  const body = await event.request.json();
+  if (!body.detailAdventure) {
+    return error(400, {
+      message: "No adventure data provided",
+    });
+  }
+
+  const { name, location, date, description, activityTypes, id, rating } =
+    body.detailAdventure;
+
+  if (!name) {
+    return error(400, {
+      message: "Name field is required!",
+    });
+  }
+
+  // update the adventure in the user's visited list
+  await db
+    .update(adventureTable)
+    .set({
+      name: name,
+      location: location,
+      date: date,
+      description: description,
+      rating: rating,
+      activityTypes: JSON.stringify(activityTypes),
+    })
+    .where(
+      and(
+        eq(adventureTable.userId, event.locals.user.id),
+        eq(adventureTable.id, Number(id))
+      )
+    )
+    .execute();
+
+  return new Response(
+    JSON.stringify({
+      adventure: body.detailAdventure,
+      message: { message: "Adventure updated" },
+    }),
+    {
+      status: 200,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }
+  );
+}
diff --git a/src/routes/api/visits/+server.ts b/src/routes/api/visits/+server.ts
index 3afa6bae..42dcb6c2 100644
--- a/src/routes/api/visits/+server.ts
+++ b/src/routes/api/visits/+server.ts
@@ -18,7 +18,12 @@ export async function GET(event: RequestEvent): Promise<Response> {
   let result = await db
     .select()
     .from(adventureTable)
-    .where(eq(adventureTable.userId, event.locals.user.id))
+    .where(
+      and(
+        eq(adventureTable.userId, event.locals.user.id),
+        eq(adventureTable.type, "mylog")
+      )
+    )
     .execute();
   return new Response(
     // turn the result into an Adventure object array
diff --git a/src/routes/planner/+page.server.ts b/src/routes/planner/+page.server.ts
index e69de29b..65f44182 100644
--- a/src/routes/planner/+page.server.ts
+++ b/src/routes/planner/+page.server.ts
@@ -0,0 +1,14 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+import type { Adventure } from "$lib/utils/types";
+
+export const load: PageServerLoad = async (event) => {
+  if (!event.locals.user) {
+    return redirect(302, "/login");
+  }
+  const response = await event.fetch("/api/planner");
+  const result = await response.json();
+  return {
+    result,
+  };
+};
diff --git a/src/routes/planner/+page.svelte b/src/routes/planner/+page.svelte
index 9c5b3673..d7b81bae 100644
--- a/src/routes/planner/+page.svelte
+++ b/src/routes/planner/+page.svelte
@@ -1 +1,162 @@
-<h1>Welcome to the planner</h1>
+<script lang="ts">
+  import type { Adventure } from "$lib/utils/types.js";
+  import { onMount } from "svelte";
+  import AdventureCard from "$lib/components/AdventureCard.svelte";
+  import EditModal from "$lib/components/EditModal.svelte";
+  import MoreFieldsInput from "$lib/components/CreateNewAdventure.svelte";
+  export let data;
+  let plans: Adventure[] = [];
+  let isLoading = true;
+
+  onMount(async () => {
+    console.log(data);
+    plans = data.result;
+    isLoading = false;
+  });
+
+  let isShowingMoreFields: boolean = false;
+
+  let adventureToEdit: Adventure | undefined;
+
+  console.log(data);
+
+  function editPlan(event: { detail: number }) {
+    const adventure = plans.find((adventure) => adventure.id === event.detail);
+    if (adventure) {
+      adventureToEdit = adventure;
+    }
+  }
+
+  function handleClose() {
+    adventureToEdit = undefined;
+    isShowingMoreFields = false;
+  }
+
+  function savePlan(event: { detail: Adventure }) {
+    console.log("Event", event.detail);
+    let detailAdventure = event.detail;
+
+    // put request to /api/visits with id and adventure data
+    fetch("/api/planner", {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        detailAdventure,
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log("Success:", data);
+        // update local array with new data
+        const index = plans.findIndex(
+          (adventure) => adventure.id === detailAdventure.id
+        );
+        if (index !== -1) {
+          plans[index] = detailAdventure;
+        }
+        adventureToEdit = undefined;
+        // showToast("Adventure edited successfully!");
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  }
+
+  function removeAdventure(event: { detail: number }) {
+    console.log("Event ID " + event.detail);
+    // send delete request to server at /api/visits
+    fetch("/api/visits", {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ id: event.detail }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log("Success:", data);
+        // remove adventure from array where id matches
+        plans = plans.filter((adventure) => adventure.id !== event.detail);
+        // showToast("Adventure removed successfully!");
+        // visitCount.update((n) => n - 1);
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  }
+
+  const createNewAdventure = (event: { detail: Adventure }) => {
+    isShowingMoreFields = false;
+    let detailAdventure = event.detail;
+    console.log("Event" + event.detail.name);
+
+    fetch("/api/planner", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        detailAdventure,
+      }),
+    })
+      .then((response) => {
+        if (!response.ok) {
+          return response.json().then((data) => {
+            throw new Error(
+              data.error || `Failed to add adventure - ${data?.message}`
+            );
+          });
+        }
+        return response.json();
+      })
+      .then((data) => {
+        // add to local array for instant view update
+        plans = [...plans, data.adventure];
+        // showToast("Adventure added successfully!");
+        // visitCount.update((n) => n + 1);
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+        // showToast(error.message);
+      });
+  };
+</script>
+
+<div class="flex flex-row items-center justify-center gap-4">
+  <button
+    type="button"
+    class="btn btn-secondary"
+    on:click={() => (isShowingMoreFields = !isShowingMoreFields)}
+  >
+    <iconify-icon icon="mdi:plus" class="text-2xl"></iconify-icon>
+  </button>
+</div>
+
+{#if isLoading}
+  <div class="flex justify-center items-center w-full mt-16">
+    <span class="loading loading-spinner w-24 h-24"></span>
+  </div>
+{/if}
+
+<div
+  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 plans as adventure (adventure.id)}
+    <AdventureCard
+      {adventure}
+      type="planner"
+      on:edit={editPlan}
+      on:remove={removeAdventure}
+    />
+  {/each}
+</div>
+
+{#if adventureToEdit && adventureToEdit.id != undefined}
+  <EditModal bind:adventureToEdit on:submit={savePlan} on:close={handleClose} />
+{/if}
+
+{#if isShowingMoreFields}
+  <MoreFieldsInput on:create={createNewAdventure} on:close={handleClose} />
+{/if}

From 798ce1e3e51f1c1a5cbbb94f299403bc5b7ec7fe Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 4 May 2024 15:18:20 +0000
Subject: [PATCH 11/13] feat: Add saveAdventure function to adventureService

The code changes include adding a new function called saveAdventure to the adventureService module. This function is responsible for sending a PUT request to the corresponding API endpoint to save an adventure. If the request is successful, the local adventure array is updated with the new data. If the request fails, an empty array is returned to allow for handling errors.
---
 src/routes/planner/+page.svelte  | 58 +++++++++++-----------
 src/services/adventureService.ts | 84 ++++++++++++++++++++++++++++++++
 2 files changed, 112 insertions(+), 30 deletions(-)

diff --git a/src/routes/planner/+page.svelte b/src/routes/planner/+page.svelte
index d7b81bae..c1de2236 100644
--- a/src/routes/planner/+page.svelte
+++ b/src/routes/planner/+page.svelte
@@ -4,6 +4,8 @@
   import AdventureCard from "$lib/components/AdventureCard.svelte";
   import EditModal from "$lib/components/EditModal.svelte";
   import MoreFieldsInput from "$lib/components/CreateNewAdventure.svelte";
+  import { saveAdventure } from "../../services/adventureService.js";
+  import SucessToast from "$lib/components/SucessToast.svelte";
   export let data;
   let plans: Adventure[] = [];
   let isLoading = true;
@@ -16,10 +18,23 @@
 
   let isShowingMoreFields: boolean = false;
 
+  let isShowingToast: boolean = false;
+  let toastAction: string = "";
+
   let adventureToEdit: Adventure | undefined;
 
   console.log(data);
 
+  function showToast(action: string) {
+    toastAction = action;
+    isShowingToast = true;
+
+    setTimeout(() => {
+      isShowingToast = false;
+      toastAction = "";
+    }, 3000);
+  }
+
   function editPlan(event: { detail: number }) {
     const adventure = plans.find((adventure) => adventure.id === event.detail);
     if (adventure) {
@@ -32,36 +47,15 @@
     isShowingMoreFields = false;
   }
 
-  function savePlan(event: { detail: Adventure }) {
-    console.log("Event", event.detail);
-    let detailAdventure = event.detail;
-
-    // put request to /api/visits with id and adventure data
-    fetch("/api/planner", {
-      method: "PUT",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        detailAdventure,
-      }),
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        console.log("Success:", data);
-        // update local array with new data
-        const index = plans.findIndex(
-          (adventure) => adventure.id === detailAdventure.id
-        );
-        if (index !== -1) {
-          plans[index] = detailAdventure;
-        }
-        adventureToEdit = undefined;
-        // showToast("Adventure edited successfully!");
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-      });
+  async function savePlan(event: { detail: Adventure }) {
+    let newArray = await saveAdventure(event.detail, plans);
+    if (newArray.length > 0) {
+      plans = newArray;
+      showToast("Adventure updated successfully!");
+    } else {
+      showToast("Failed to update adventure");
+    }
+    adventureToEdit = undefined;
   }
 
   function removeAdventure(event: { detail: number }) {
@@ -124,6 +118,10 @@
   };
 </script>
 
+{#if isShowingToast}
+  <SucessToast action={toastAction} />
+{/if}
+
 <div class="flex flex-row items-center justify-center gap-4">
   <button
     type="button"
diff --git a/src/services/adventureService.ts b/src/services/adventureService.ts
index 53ba034c..a8b3c27d 100644
--- a/src/services/adventureService.ts
+++ b/src/services/adventureService.ts
@@ -1 +1,85 @@
 import type { Adventure } from "$lib/utils/types";
+
+// json that maps the type to api routes
+const apiRoutes: { [key: string]: string } = {
+  planner: "/api/planner",
+  mylog: "/api/visits",
+};
+
+/**
+ * Saves an adventure by sending a PUT request to the corresponding API endpoint.
+ * If the request is successful, the local adventure array is updated with the new data.
+ * If the request fails, an empty array is returned to allow for handling errors.
+ * @param adventure - The adventure object to be saved.
+ * @param adventureArray - The array of adventures to be updated.
+ * @returns A promise that resolves to the updated adventure array.
+ */
+export async function saveAdventure(
+  adventure: Adventure,
+  adventureArray: Adventure[]
+): Promise<Adventure[]> {
+  const detailAdventure = adventure;
+  const type = detailAdventure.type;
+  const url = apiRoutes[type];
+
+  // put request to /api/visits with id and adventure data
+  const response = await fetch(url, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      detailAdventure,
+    }),
+  });
+
+  if (response.ok) {
+    // update local array with new data
+    const index = adventureArray.findIndex(
+      (adventure) => adventure.id === detailAdventure.id
+    );
+    if (index !== -1) {
+      adventureArray[index] = detailAdventure;
+    }
+    // showToast("Adventure edited successfully!");
+  } else {
+    console.error("Error:", response.statusText);
+    adventureArray = [];
+  }
+
+  return adventureArray;
+}
+
+/**
+ * function savePlan(event: { detail: Adventure }) {
+    console.log("Event", event.detail);
+    let detailAdventure = event.detail;
+
+    // put request to /api/visits with id and adventure data
+    fetch("/api/planner", {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        detailAdventure,
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log("Success:", data);
+        // update local array with new data
+        const index = plans.findIndex(
+          (adventure) => adventure.id === detailAdventure.id
+        );
+        if (index !== -1) {
+          plans[index] = detailAdventure;
+        }
+        adventureToEdit = undefined;
+        // showToast("Adventure edited successfully!");
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  }
+    */

From 2b7c6b0f182d93fea9c26c4283d8ff4a725b9d7c Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 4 May 2024 15:38:55 +0000
Subject: [PATCH 12/13] feat: Add removeAdventure function to +page.svelte and
 adventureService.ts

The code changes include adding a new function called removeAdventure to the +page.svelte file and adventureService.ts module. This function is responsible for sending a DELETE request to the corresponding API endpoint to remove an adventure. If the request is successful, the adventure is removed from the local plans array. If the request fails, an error toast is displayed. This functionality allows users to remove adventures from the planner page.
---
 src/routes/planner/+page.svelte  | 40 +++++++++-------------
 src/services/adventureService.ts | 59 ++++++++++++++++++++++----------
 2 files changed, 57 insertions(+), 42 deletions(-)

diff --git a/src/routes/planner/+page.svelte b/src/routes/planner/+page.svelte
index c1de2236..0ac09bbf 100644
--- a/src/routes/planner/+page.svelte
+++ b/src/routes/planner/+page.svelte
@@ -4,7 +4,10 @@
   import AdventureCard from "$lib/components/AdventureCard.svelte";
   import EditModal from "$lib/components/EditModal.svelte";
   import MoreFieldsInput from "$lib/components/CreateNewAdventure.svelte";
-  import { saveAdventure } from "../../services/adventureService.js";
+  import {
+    saveAdventure,
+    removeAdventure,
+  } from "../../services/adventureService.js";
   import SucessToast from "$lib/components/SucessToast.svelte";
   export let data;
   let plans: Adventure[] = [];
@@ -58,27 +61,18 @@
     adventureToEdit = undefined;
   }
 
-  function removeAdventure(event: { detail: number }) {
-    console.log("Event ID " + event.detail);
-    // send delete request to server at /api/visits
-    fetch("/api/visits", {
-      method: "DELETE",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({ id: event.detail }),
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        console.log("Success:", data);
-        // remove adventure from array where id matches
-        plans = plans.filter((adventure) => adventure.id !== event.detail);
-        // showToast("Adventure removed successfully!");
-        // visitCount.update((n) => n - 1);
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-      });
+  async function remove(event: { detail: number }) {
+    let initialLenght: number = plans.length;
+    let theAdventure = plans.find((adventure) => adventure.id === event.detail);
+    if (theAdventure) {
+      let newArray = await removeAdventure(theAdventure, plans);
+      if (newArray.length == initialLenght - 1) {
+        plans = newArray;
+        showToast("Adventure removed successfully!");
+      } else {
+        showToast("Failed to remove adventure");
+      }
+    }
   }
 
   const createNewAdventure = (event: { detail: Adventure }) => {
@@ -146,7 +140,7 @@
       {adventure}
       type="planner"
       on:edit={editPlan}
-      on:remove={removeAdventure}
+      on:remove={remove}
     />
   {/each}
 </div>
diff --git a/src/services/adventureService.ts b/src/services/adventureService.ts
index a8b3c27d..b08ebb0d 100644
--- a/src/services/adventureService.ts
+++ b/src/services/adventureService.ts
@@ -50,36 +50,57 @@ export async function saveAdventure(
   return adventureArray;
 }
 
-/**
- * function savePlan(event: { detail: Adventure }) {
-    console.log("Event", event.detail);
-    let detailAdventure = event.detail;
+export async function removeAdventure(
+  adventure: Adventure,
+  adventureArray: Adventure[]
+): Promise<Adventure[]> {
+  let url = apiRoutes[adventure.type];
+  // delete request to /api/visits with id
+  const response = await fetch(url, {
+    method: "DELETE",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ id: adventure.id }),
+  });
 
-    // put request to /api/visits with id and adventure data
-    fetch("/api/planner", {
-      method: "PUT",
+  if (response.ok) {
+    // remove adventure from array where id matches
+    adventureArray = adventureArray.filter(
+      (adventure) => adventure.id !== adventure.id
+    );
+    // showToast("Adventure removed successfully!");
+  } else {
+    console.error("Error:", response.statusText);
+    adventureArray = [];
+  }
+
+  return adventureArray;
+}
+
+/**
+ * function removeAdventure(event: { detail: number }) {
+    console.log("Event ID " + event.detail);
+    // send delete request to server at /api/visits
+    fetch("/api/visits", {
+      method: "DELETE",
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({
-        detailAdventure,
-      }),
+      body: JSON.stringify({ id: event.detail }),
     })
       .then((response) => response.json())
       .then((data) => {
         console.log("Success:", data);
-        // update local array with new data
-        const index = plans.findIndex(
-          (adventure) => adventure.id === detailAdventure.id
-        );
-        if (index !== -1) {
-          plans[index] = detailAdventure;
-        }
-        adventureToEdit = undefined;
-        // showToast("Adventure edited successfully!");
+        // remove adventure from array where id matches
+        plans = plans.filter((adventure) => adventure.id !== event.detail);
+        // showToast("Adventure removed successfully!");
+        // visitCount.update((n) => n - 1);
       })
       .catch((error) => {
         console.error("Error:", error);
       });
   }
+ * 
+ * 
     */

From 79cf19ccb20ccdff95c1d32c10ed7e54fac762dc Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 4 May 2024 15:55:58 +0000
Subject: [PATCH 13/13] ```text feat: Add type prop to CreateNewAdventure
 component

The code changes include adding a new prop called "type" to the CreateNewAdventure component in order to specify the type of adventure being created. This prop is passed from the parent component and used to set the "type" property of the newAdventure object. This allows for more flexibility in creating adventures with different types.
---
 src/lib/components/CreateNewAdventure.svelte |  3 +-
 src/routes/log/+page.svelte                  |  6 +++-
 src/routes/planner/+page.svelte              | 31 ++++++++++++++++++--
 src/services/adventureService.ts             |  4 ++-
 4 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/CreateNewAdventure.svelte b/src/lib/components/CreateNewAdventure.svelte
index 25a0ec93..615b8e4c 100644
--- a/src/lib/components/CreateNewAdventure.svelte
+++ b/src/lib/components/CreateNewAdventure.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   let newAdventure: Adventure;
+  export let type: string;
 
   newAdventure = {
     id: -1,
-    type: "mylog",
+    type: type,
     name: "",
     location: "",
     date: "",
diff --git a/src/routes/log/+page.svelte b/src/routes/log/+page.svelte
index 59c29f22..ac491b6c 100644
--- a/src/routes/log/+page.svelte
+++ b/src/routes/log/+page.svelte
@@ -246,7 +246,11 @@
 {/if}
 
 {#if isShowingMoreFields}
-  <MoreFieldsInput on:create={createNewAdventure} on:close={handleClose} />
+  <MoreFieldsInput
+    on:create={createNewAdventure}
+    on:close={handleClose}
+    type="mylog"
+  />
 {/if}
 
 {#if adventureToEdit && adventureToEdit.id != undefined}
diff --git a/src/routes/planner/+page.svelte b/src/routes/planner/+page.svelte
index 0ac09bbf..c0acbd1a 100644
--- a/src/routes/planner/+page.svelte
+++ b/src/routes/planner/+page.svelte
@@ -9,6 +9,7 @@
     removeAdventure,
   } from "../../services/adventureService.js";
   import SucessToast from "$lib/components/SucessToast.svelte";
+  import mapDrawing from "$lib/assets/adventure_map.svg";
   export let data;
   let plans: Adventure[] = [];
   let isLoading = true;
@@ -62,11 +63,11 @@
   }
 
   async function remove(event: { detail: number }) {
-    let initialLenght: number = plans.length;
+    let initialLength: number = plans.length;
     let theAdventure = plans.find((adventure) => adventure.id === event.detail);
     if (theAdventure) {
       let newArray = await removeAdventure(theAdventure, plans);
-      if (newArray.length == initialLenght - 1) {
+      if (newArray.length === initialLength - 1) {
         plans = newArray;
         showToast("Adventure removed successfully!");
       } else {
@@ -116,6 +117,12 @@
   <SucessToast action={toastAction} />
 {/if}
 
+<div class="flex justify-center items-center w-full mt-4 mb-4">
+  <article class="prose">
+    <h2 class="text-center">Add new Plan</h2>
+  </article>
+</div>
+
 <div class="flex flex-row items-center justify-center gap-4">
   <button
     type="button"
@@ -125,6 +132,13 @@
     <iconify-icon icon="mdi:plus" class="text-2xl"></iconify-icon>
   </button>
 </div>
+{#if plans.length != 0}
+  <div class="flex justify-center items-center w-full mt-4 mb-4">
+    <article class="prose">
+      <h1 class="text-center">My Adventure Plans</h1>
+    </article>
+  </div>
+{/if}
 
 {#if isLoading}
   <div class="flex justify-center items-center w-full mt-16">
@@ -145,10 +159,21 @@
   {/each}
 </div>
 
+{#if plans.length == 0 && !isLoading}
+  <div class="flex flex-col items-center justify-center mt-16">
+    <article class="prose mb-4"><h2>Add some plans!</h2></article>
+    <img src={mapDrawing} width="25%" alt="Logo" />
+  </div>
+{/if}
+
 {#if adventureToEdit && adventureToEdit.id != undefined}
   <EditModal bind:adventureToEdit on:submit={savePlan} on:close={handleClose} />
 {/if}
 
 {#if isShowingMoreFields}
-  <MoreFieldsInput on:create={createNewAdventure} on:close={handleClose} />
+  <MoreFieldsInput
+    on:create={createNewAdventure}
+    on:close={handleClose}
+    type="planner"
+  />
 {/if}
diff --git a/src/services/adventureService.ts b/src/services/adventureService.ts
index b08ebb0d..cf851b65 100644
--- a/src/services/adventureService.ts
+++ b/src/services/adventureService.ts
@@ -67,7 +67,7 @@ export async function removeAdventure(
   if (response.ok) {
     // remove adventure from array where id matches
     adventureArray = adventureArray.filter(
-      (adventure) => adventure.id !== adventure.id
+      (existingAdventure) => existingAdventure.id !== adventure.id
     );
     // showToast("Adventure removed successfully!");
   } else {
@@ -75,6 +75,8 @@ export async function removeAdventure(
     adventureArray = [];
   }
 
+  console.log(adventureArray);
+
   return adventureArray;
 }