Refactor adventure page layout and add dynamic content

src/routes/+layout.svelte

@@ -15,7 +15,7 @@
     inject();
     injectSpeedInsights();
   } else {
-    console.log("Not using Vercel");
+    // console.log("Not using Vercel");
   }
 
   let isServerSetup = data.isServerSetup;

src/routes/adventure/[id]/+page.svelte

@@ -33,7 +33,7 @@
   {/if}
   {#if adventure.date}
     <p class="text-center text-lg mt-4 pl-16 pr-16">
-      Visited on: {new Date(adventure.date).toLocaleDateString()}
+      Visited on: {adventure.date}
     </p>
   {/if}
   {#if adventure.rating !== undefined && adventure.rating !== null}

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

@@ -86,7 +86,7 @@ export async function POST(event: RequestEvent): Promise<Response> {
 
   const { newAdventure } = await event.request.json();
   console.log(newAdventure);
-  const { name, location, date } = newAdventure;
+  const { name, location, date, description } = newAdventure;
 
   // insert the adventure to the user's visited list
   await db
@@ -97,6 +97,7 @@ export async function POST(event: RequestEvent): Promise<Response> {
       name: name,
       location: location,
       date: date,
+      description: description,
     })
     .execute();
   let res = await db
@@ -107,7 +108,8 @@ export async function POST(event: RequestEvent): Promise<Response> {
         eq(adventureTable.userId, event.locals.user.id),
         eq(adventureTable.name, name),
         eq(adventureTable.location, location),
-        eq(adventureTable.date, date)
+        eq(adventureTable.date, date),
+        eq(adventureTable.description, description)
       )
     )
     .execute();
@@ -142,7 +144,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 } = newAdventure;
+  const { name, location, date, id, description } = newAdventure;
 
   // update the adventure in the user's visited list
   await db
@@ -151,6 +153,7 @@ export async function PUT(event: RequestEvent): Promise<Response> {
       name: name,
       location: location,
       date: date,
+      description: description,
     })
     .where(
       and(
@@ -162,7 +165,7 @@ export async function PUT(event: RequestEvent): Promise<Response> {
 
   return new Response(
     JSON.stringify({
-      adventure: { id, name, location, date },
+      adventure: { id, name, location, date, description },
       message: { message: "Adventure updated" },
     }),
     {

src/routes/featured/+page.svelte

@@ -10,11 +10,10 @@
     count = value;
   });
 
-  async function add(event: CustomEvent<{ name: string; location: string }>) {
+  async function add(event: CustomEvent<Adventure>) {
     let newAdventure: Adventure = {
       name: event.detail.name,
       location: event.detail.location,
-      date: "",
       type: "mylog",
       id: -1,
     };
@@ -47,14 +46,7 @@
   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 data.result as adventure (adventure.id)}
-    <AdventureCard
-      type="featured"
-      on:add={add}
-      id={adventure.id}
-      name={adventure.name}
-      location={adventure.location}
-      date=""
-    />
+    <AdventureCard type="featured" on:add={add} {adventure} />
   {/each}
 </div>
 

src/routes/log/+page.svelte

@@ -13,10 +13,13 @@
   import EditModal from "$lib/components/EditModal.svelte";
   import { generateRandomString } from "$lib";
   import { visitCount } from "$lib/utils/stores/visitCountStore";
+  import MoreFieldsInput from "$lib/components/MoreFieldsInput.svelte";
 
   let newName = "";
   let newLocation = "";
 
+  let isShowingMoreFields = false;
+
   let adventureToEdit: Adventure | undefined;
 
   let isShowingToast: boolean = false;
@@ -56,16 +59,13 @@
     URL.revokeObjectURL(url);
   }
 
-  const createNewAdventure = () => {
-    let currentDate = new Date();
-    let dateString = currentDate.toISOString().slice(0, 10); // Get date in "yyyy-mm-dd" format
-    // post to /api/visits
-
+  const createNewAdventure = (event: { detail: Adventure }) => {
     let newAdventure: Adventure = {
       type: "mylog",
-      name: newName,
-      location: newLocation,
-      date: dateString,
+      name: event.detail.name,
+      location: event.detail.location,
+      date: event.detail.date,
+      description: event.detail.description,
       id: -1,
     };
 
@@ -87,9 +87,10 @@
           {
             id: newId,
             type: "mylog",
-            name: newName,
-            location: newLocation,
-            date: dateString,
+            name: event.detail.name,
+            location: event.detail.location,
+            date: event.detail.date,
+            description: event.detail.description,
           },
         ];
         newName = ""; // Reset newName and newLocation after adding adventure
@@ -111,6 +112,7 @@
       location: event.detail.location,
       date: event.detail.date,
       id: event.detail.id,
+      description: event.detail.description,
     };
 
     // put request to /api/visits with id and advneture data
@@ -171,6 +173,7 @@
 
   function handleClose() {
     adventureToEdit = undefined;
+    isShowingMoreFields = false;
   }
 
   function deleteData() {
@@ -226,21 +229,13 @@
 </div>
 
 <div class="flex flex-row items-center justify-center gap-4">
-  <form on:submit={createNewAdventure} class="flex gap-2">
-    <input
-      type="text"
-      bind:value={newName}
-      placeholder="Adventure Name"
-      class="input input-bordered w-full max-w-xs"
-    />
-    <input
-      type="text"
-      bind:value={newLocation}
-      placeholder="Adventure Location"
-      class="input input-bordered w-full max-w-xs"
-    />
-    <input class="btn btn-primary" type="submit" value="Add Adventure" />
-  </form>
+  <button
+    type="button"
+    class="btn btn-secondary"
+    on:click={() => (isShowingMoreFields = !isShowingMoreFields)}
+  >
+    Show More Fields
+  </button>
 </div>
 {#if adventures.length != 0}
   <div class="flex justify-center items-center w-full mt-4 mb-4">
@@ -260,6 +255,14 @@
   <SucessToast action={toastAction} />
 {/if}
 
+{#if isShowingMoreFields}
+  <MoreFieldsInput
+    on:create={createNewAdventure}
+    on:close={handleClose}
+    on:submit={saveAdventure}
+  />
+{/if}
+
 {#if adventureToEdit && adventureToEdit.id != undefined}
   <EditModal
     bind:adventureToEdit
@@ -273,11 +276,8 @@
 >
   {#each adventures as adventure (adventure.id)}
     <AdventureCard
+      {adventure}
       type="mylog"
-      id={adventure.id}
-      name={adventure.name}
-      location={adventure.location}
-      date={adventure.date}
       on:edit={editAdventure}
       on:remove={removeAdventure}
     />

src/routes/shared/[key]/+page.svelte

@@ -2,6 +2,7 @@
   import type { Adventure } from "$lib/utils/types";
   export let data;
   let array = data.adventureArray as Adventure[];
+  console.log(array);
   import AdventureCard from "$lib/components/AdventureCard.svelte";
 </script>
 
@@ -20,13 +21,7 @@
   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 array as adventure (adventure.id)}
-    <AdventureCard
-      type="shared"
-      id={adventure.id}
-      name={adventure.name}
-      location={adventure.location}
-      date={adventure.date}
-    />
+    <AdventureCard type="shared" {adventure} />
   {/each}
 </div>