Refactor adventure page layout and add dynamic content

src/lib/components/AdventureCard.svelte

@@ -4,38 +4,31 @@
   import calendar from "$lib/assets/calendar.svg";
   import { goto } from "$app/navigation";
   import { desc } from "drizzle-orm";
+  import type { Adventure } from "$lib/utils/types";
   const dispatch = createEventDispatcher();
 
   export let type: String;
 
-  export let name: String | undefined = undefined;
-  export let location: String | undefined = undefined;
-  export let date: String | undefined = undefined;
-  export let id: Number | undefined = undefined;
-  export let regionId: String | undefined = undefined;
-  export let visited: Boolean | undefined = undefined;
+  export let adventure: Adventure;
+
+  // export let name: String | undefined = undefined;
+  // export let location: String | undefined = undefined;
+  // export let date: String | undefined = undefined;
+  // export let id: Number | undefined = undefined;
 
   function remove() {
-    dispatch("remove", id);
+    dispatch("remove", adventure.id);
   }
   function edit() {
-    dispatch("edit", id);
+    dispatch("edit", adventure.id);
   }
   function add() {
-    dispatch("add", { name, location });
-  }
-  function markVisited() {
-    dispatch("markVisited", regionId);
-    visited = true;
-  }
-  function removeVisit() {
-    dispatch("removeVisit", regionId);
-    visited = false;
+    dispatch("add", adventure);
   }
 
   function moreInfo() {
-    console.log(id);
-    goto(`/adventure/${id}`);
+    console.log(adventure.id);
+    goto(`/adventure/${adventure.id}`);
   }
 </script>
 
@@ -43,17 +36,17 @@
   class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
 >
   <div class="card-body">
-    <h2 class="card-title overflow-ellipsis">{name}</h2>
-    {#if location && location !== ""}
+    <h2 class="card-title overflow-ellipsis">{adventure.name}</h2>
+    {#if adventure.location && adventure.location !== ""}
       <div class="inline-flex items-center">
         <iconify-icon icon="mdi:map-marker" class="text-xl"></iconify-icon>
-        <p class="ml-.5">{location}</p>
+        <p class="ml-.5">{adventure.location}</p>
       </div>
     {/if}
-    {#if date && date !== ""}
+    {#if adventure.date && adventure.date !== ""}
       <div class="inline-flex items-center">
         <iconify-icon icon="mdi:calendar" class="text-xl"></iconify-icon>
-        <p class="ml-1">{date}</p>
+        <p class="ml-1">{adventure.date}</p>
       </div>
     {/if}
     <div class="card-actions justify-end">

src/lib/components/EditModal.svelte

@@ -61,7 +61,7 @@
           />
         </div>
         <div>
-          <label for="date">date</label>
+          <label for="date">Date</label>
           <input
             type="date"
             id="date"
@@ -69,6 +69,15 @@
             class="input input-bordered w-full max-w-xs"
           />
         </div>
+        <div>
+          <label for="date">Description</label>
+          <input
+            type="text"
+            id="description"
+            bind:value={adventureToEdit.description}
+            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/lib/components/MoreFieldsInput.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  let newAdventure: Adventure;
+
+  newAdventure = {
+    id: -1,
+    type: "mylog",
+    name: "",
+    location: "",
+    date: "",
+  };
+
+  import { createEventDispatcher } from "svelte";
+  import type { Adventure } from "$lib/utils/types";
+  const dispatch = createEventDispatcher();
+  import { onMount } from "svelte";
+  let modal: HTMLDialogElement;
+
+  onMount(() => {
+    modal = document.getElementById("my_modal_1") as HTMLDialogElement;
+    if (modal) {
+      modal.showModal();
+    }
+  });
+
+  function create() {
+    dispatch("create", newAdventure);
+    console.log(newAdventure);
+  }
+
+  function close() {
+    dispatch("close");
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      close();
+    }
+  }
+</script>
+
+<dialog id="my_modal_1" class="modal">
+  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+  <div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+    <h3 class="font-bold text-lg">New Adventure</h3>
+    <p class="py-4">Press ESC key or click the button below to close</p>
+    <div
+      class="modal-action items-center"
+      style="display: flex; flex-direction: column; align-items: center; width: 100%;"
+    >
+      <form method="dialog" style="width: 100%;">
+        <div>
+          <label for="name">Name</label>
+          <input
+            type="text"
+            id="name"
+            bind:value={newAdventure.name}
+            class="input input-bordered w-full max-w-xs"
+          />
+        </div>
+        <div>
+          <label for="location">Location</label>
+          <input
+            type="text"
+            id="location"
+            bind:value={newAdventure.location}
+            class="input input-bordered w-full max-w-xs"
+          />
+        </div>
+        <div>
+          <label for="date">date</label>
+          <input
+            type="date"
+            id="date"
+            bind:value={newAdventure.date}
+            class="input input-bordered w-full max-w-xs"
+          />
+        </div>
+        <div>
+          <label for="date">Description</label>
+          <input
+            type="text"
+            id="description"
+            bind:value={newAdventure.description}
+            class="input input-bordered w-full max-w-xs"
+          />
+        </div>
+        <button class="btn btn-primary mr-4 mt-4" on:click={create}>Save</button
+        >
+        <!-- if there is a button in form, it will close the modal -->
+        <button class="btn mt-4" on:click={close}>Close</button>
+      </form>
+    </div>
+  </div>
+</dialog>

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>