feat: Add activity types functionality to CreateNewAdventure and AdventureCard components

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"

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 -->

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(

src/routes/featured/+page.svelte

@@ -11,12 +11,7 @@
   });
 
   async function add(event: CustomEvent<Adventure>) {
-    let newAdventure: Adventure = {
+    let detailAdventure = event.detail;
-      name: event.detail.name,
-      location: event.detail.location,
-      type: "mylog",
-      id: -1,
-    };
 
     const response = await fetch("/api/visits", {
       method: "POST",
@@ -24,7 +19,7 @@
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        newAdventure,
+        detailAdventure,
       }),
     });