Add new columns to userPlannedAdventures table and update Adventure interface

src/lib/components/AdventureCard.svelte

@@ -3,18 +3,20 @@
   import locationDot from "$lib/assets/locationDot.svg";
   import calendar from "$lib/assets/calendar.svg";
   import { goto } from "$app/navigation";
+  import { desc } from "drizzle-orm";
   const dispatch = createEventDispatcher();
 
   export let type: String;
 
   export let name: String | undefined = undefined;
   export let location: String | undefined = undefined;
-  export let created: 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 countryCode: String | undefined = undefined;
   export let activityTypes: String[] | undefined = undefined;
+  export let description: String | undefined = undefined;
 
   function remove() {
     dispatch("remove", id);
@@ -51,10 +53,10 @@
           <p class="ml-.5">{location}</p>
         </div>
       {/if}
-      {#if created !== ""}
+      {#if date !== ""}
         <div class="inline-flex items-center">
           <iconify-icon icon="mdi:calendar" class="text-xl"></iconify-icon>
-          <p class="ml-1">{created}</p>
+          <p class="ml-1">{date}</p>
         </div>
       {/if}
       <div class="card-actions justify-end">
@@ -96,10 +98,10 @@
           <p class="ml-.5">{location}</p>
         </div>
       {/if}
-      {#if created !== ""}
+      {#if date !== ""}
         <div class="inline-flex items-center">
           <iconify-icon icon="mdi:calendar" class="text-xl"></iconify-icon>
-          <p class="ml-1">{created}</p>
+          <p class="ml-1">{date}</p>
         </div>
       {/if}
     </div>
@@ -141,7 +143,22 @@
         </div>
       {/if}
       {#if activityTypes && activityTypes.length > 0}
-        <p>{activityTypes}</p>
+        {#each activityTypes as activity}
+          <div
+            class="relative grid select-none items-center whitespace-nowrap rounded-lg bg-gray-900 py-1.5 px-3 font-sans text-xs font-bold uppercase text-white"
+          >
+            <span class="">{activity}</span>
+          </div>
+        {/each}
+      {/if}
+      {#if description && description.length > 0}
+        <p>{description}</p>
+      {/if}
+      {#if date && date != undefined}
+        <div class="inline-flex items-center">
+          <iconify-icon icon="mdi:calendar" class="text-xl"></iconify-icon>
+          <p class="ml-1">{date}</p>
+        </div>
       {/if}
       <div class="card-actions justify-end">
         <button class="btn btn-primary" on:click={add}>Add</button>

src/lib/components/DeleteConfirmation.svelte

@@ -51,10 +51,10 @@
           />
         </div>
         <div>
-          <label for="created">Created</label>
+          <label for="date">date</label>
           <input
             type="date"
-            id="created"
+            id="date"
             class="input input-bordered w-full max-w-xs"
           />
         </div>

src/lib/components/EditModal.svelte

@@ -2,7 +2,7 @@
   export let editId: number = NaN;
   export let editName: string = "";
   export let editLocation: string = "";
-  export let editCreated: string = "";
+  export let editdate: string = "";
   import { createEventDispatcher } from "svelte";
   import type { Adventure } from "$lib/utils/types";
   const dispatch = createEventDispatcher();
@@ -23,7 +23,7 @@
       id: editId,
       name: editName,
       location: editLocation,
-      created: editCreated,
+      date: editdate,
     };
     dispatch("submit", adventureEdited);
     console.log(adventureEdited);
@@ -70,11 +70,11 @@
           />
         </div>
         <div>
-          <label for="created">Created</label>
+          <label for="date">date</label>
           <input
             type="date"
-            id="created"
-            bind:value={editCreated}
+            id="date"
+            bind:value={editdate}
             class="input input-bordered w-full max-w-xs"
           />
         </div>

src/lib/components/UserCard.svelte

@@ -9,7 +9,7 @@
     <h2 class="card-title">{user.first_name} {user.last_name}</h2>
     <p>{user.username} - {user.icon}</p>
     <p>Last Login: {user.last_login}</p>
-    <p>Created: {user.signup_date}</p>
+    <p>date: {user.signup_date}</p>
     <p>{user.role}</p>
     <p>{user.id}</p>
     <div class="card-actions justify-end">

src/lib/db/schema.ts

@@ -1,3 +1,4 @@
+import { desc } from "drizzle-orm";
 import {
   pgTable,
   text,
@@ -99,4 +100,6 @@ export const userPlannedAdventures = pgTable("userPlannedAdventures", {
   name: text("adventureName").notNull(),
   location: text("location"),
   activityTypes: json("activityTypes"),
+  description: text("description"),
+  date: text("plannedDate"),
 });

src/lib/utils/types.ts

@@ -2,7 +2,7 @@ export interface Adventure {
   id?: number;
   name?: string;
   location?: string | undefined;
-  created?: string | undefined;
+  date?: string | undefined;
   description?: string | undefined;
   activityTypes?: string[] | undefined;
 }