Refactor adventure page layout and add dynamic content

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