Refactor CreateNewAdventure component to add activity types and update server files

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}
+        <div>
-          >Create</button
+          <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>

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();

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,
   };

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