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>