From 4b2306f812326c1f42e3a0e3839a29ca93e8643c Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Tue, 2 Apr 2024 18:04:27 +0000
Subject: [PATCH] Update startup.sh, +page.server.ts,
 FeaturedAdventureCard.svelte, and Navbar.svelte

---
 sampleData/parks.sql                          | 81 +++++++++++++++++++
 .../components/FeaturedAdventureCard.svelte   | 24 ++++++
 src/lib/components/Navbar.svelte              |  8 +-
 src/routes/featured/+page.server.ts           |  2 +-
 src/routes/featured/+page.svelte              | 18 ++++-
 src/routes/log/+page.svelte                   | 15 +++-
 startup.sh                                    |  2 +-
 7 files changed, 143 insertions(+), 7 deletions(-)
 create mode 100644 sampleData/parks.sql
 create mode 100644 src/lib/components/FeaturedAdventureCard.svelte

diff --git a/sampleData/parks.sql b/sampleData/parks.sql
new file mode 100644
index 0000000..207813c
--- /dev/null
+++ b/sampleData/parks.sql
@@ -0,0 +1,81 @@
+INSERT INTO "featuredAdventures" (id, name, location) VALUES
+  (20, 'Yellowstone National Park', 'Wyoming, Montana, Idaho, USA'),
+  (21, 'Yosemite National Park', 'California, USA'),
+  (22, 'Banff National Park', 'Alberta, Canada'),
+  (23, 'Kruger National Park', 'Limpopo, South Africa'),
+  (24, 'Grand Canyon National Park', 'Arizona, USA'),
+  (25, 'Great Smoky Mountains National Park', 'North Carolina, Tennessee, USA'),
+  (26, 'Zion National Park', 'Utah, USA'),
+  (27, 'Glacier National Park', 'Montana, USA'),
+  (28, 'Rocky Mountain National Park', 'Colorado, USA'),
+  (29, 'Everglades National Park', 'Florida, USA'),
+  (30, 'Arches National Park', 'Utah, USA'),
+  (31, 'Acadia National Park', 'Maine, USA'),
+  (32, 'Sequoia National Park', 'California, USA'),
+  (33, 'Joshua Tree National Park', 'California, USA'),
+  (34, 'Yellowstone National Park', 'Wyoming, Montana, Idaho, USA'),
+  (35, 'Bryce Canyon National Park', 'Utah, USA'),
+  (36, 'Grand Teton National Park', 'Wyoming, USA'),
+  (37, 'Denali National Park', 'Alaska, USA'),
+  (38, 'Olympic National Park', 'Washington, USA'),
+  (39, 'Canyonlands National Park', 'Utah, USA'),
+  (40, 'Death Valley National Park', 'California, Nevada, USA'),
+  (41, 'Redwood National and State Parks', 'California, USA'),
+  (42, 'Waterton Lakes National Park', 'Alberta, Canada'),
+  (43, 'Mesa Verde National Park', 'Colorado, USA'),
+  (44, 'Petrified Forest National Park', 'Arizona, USA'),
+  (45, 'Capitol Reef National Park', 'Utah, USA'),
+  (46, 'Yellowstone National Park', 'Wyoming, Montana, Idaho, USA'),
+  (47, 'Yosemite National Park', 'California, USA'),
+  (48, 'Banff National Park', 'Alberta, Canada'),
+  (49, 'Kruger National Park', 'Limpopo, South Africa'),
+  (50, 'Grand Canyon National Park', 'Arizona, USA'),
+  (51, 'Great Smoky Mountains National Park', 'North Carolina, Tennessee, USA'),
+  (52, 'Zion National Park', 'Utah, USA'),
+  (53, 'Glacier National Park', 'Montana, USA'),
+  (54, 'Rocky Mountain National Park', 'Colorado, USA'),
+  (55, 'Everglades National Park', 'Florida, USA'),
+  (56, 'Arches National Park', 'Utah, USA'),
+  (57, 'Acadia National Park', 'Maine, USA'),
+  (58, 'Sequoia National Park', 'California, USA'),
+  (59, 'Joshua Tree National Park', 'California, USA'),
+  (60, 'Yellowstone National Park', 'Wyoming, Montana, Idaho, USA'),
+  (61, 'Bryce Canyon National Park', 'Utah, USA'),
+  (62, 'Grand Teton National Park', 'Wyoming, USA'),
+  (63, 'Denali National Park', 'Alaska, USA'),
+  (64, 'Olympic National Park', 'Washington, USA'),
+  (65, 'Canyonlands National Park', 'Utah, USA'),
+  (66, 'Yellowstone National Park', 'Wyoming, Montana, Idaho, USA'),
+  (67, 'Yosemite National Park', 'California, USA'),
+  (68, 'Banff National Park', 'Alberta, Canada'),
+  (69, 'Kruger National Park', 'Limpopo, South Africa'),
+  (70, 'Grand Canyon National Park', 'Arizona, USA'),
+  (71, 'Great Smoky Mountains National Park', 'North Carolina, Tennessee, USA'),
+  (72, 'Zion National Park', 'Utah, USA'),
+  (73, 'Glacier National Park', 'Montana, USA'),
+  (74, 'Rocky Mountain National Park', 'Colorado, USA'),
+  (75, 'Everglades National Park', 'Florida, USA'),
+  (76, 'Arches National Park', 'Utah, USA'),
+  (77, 'Acadia National Park', 'Maine, USA'),
+  (78, 'Sequoia National Park', 'California, USA'),
+  (79, 'Joshua Tree National Park', 'California, USA'),
+  (80, 'Yellowstone National Park', 'Wyoming, Montana, Idaho, USA'),
+  (81, 'Bryce Canyon National Park', 'Utah, USA'),
+  (82, 'Grand Teton National Park', 'Wyoming, USA'),
+  (83, 'Denali National Park', 'Alaska, USA'),
+  (84, 'Olympic National Park', 'Washington, USA'),
+  (85, 'Canyonlands National Park', 'Utah, USA'),
+  (86, 'Yellowstone National Park', 'Wyoming, Montana, Idaho, USA'),
+  (87, 'Yosemite National Park', 'California, USA'),
+  (88, 'Banff National Park', 'Alberta, Canada'),
+  (89, 'Kruger National Park', 'Limpopo, South Africa'),
+  (90, 'Grand Canyon National Park', 'Arizona, USA'),
+  (91, 'Great Smoky Mountains National Park', 'North Carolina, Tennessee, USA'),
+  (92, 'Zion National Park', 'Utah, USA'),
+  (93, 'Glacier National Park', 'Montana, USA'),
+  (94, 'Rocky Mountain National Park', 'Colorado, USA'),
+  (95, 'Everglades National Park', 'Florida, USA'),
+  (96, 'Arches National Park', 'Utah, USA'),
+  (97, 'Acadia National Park', 'Maine, USA'),
+  (98, 'Sequoia National Park', 'California, USA'),
+  (99, 'Joshua Tree National Park', 'California, USA');
diff --git a/src/lib/components/FeaturedAdventureCard.svelte b/src/lib/components/FeaturedAdventureCard.svelte
new file mode 100644
index 0000000..a442402
--- /dev/null
+++ b/src/lib/components/FeaturedAdventureCard.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    import locationDot from "$lib/assets/locationDot.svg";
+    import calendar from "$lib/assets/calendar.svg";
+    const dispatch = createEventDispatcher();
+
+    export let name:String;
+    export let location:String;
+
+    function add() {
+        dispatch('add', {name, location});
+    }
+</script>
+
+<div class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden">
+    <div class="card-body">
+      <h2 class="card-title overflow-ellipsis">{name}</h2>
+      <p><img src={locationDot} class="inline-block -mt-1 mr-1" alt="Logo" />{location}</p>
+      <div class="card-actions justify-end">
+        <button class="btn btn-primary" on:click={add}>Add</button>
+      </div>
+    </div>
+</div>
+
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 57a499d..27473bf 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -8,16 +8,20 @@
     async function goToLog() {
         goto('/log');
     }
+    async function goToFeatured() {
+        goto('/featured');
+    }
 </script>
 <div class="navbar bg-base-100 flex flex-col md:flex-row">
     <div class="navbar-start flex justify-around md:justify-start">
         <button class="btn btn-primary my-2 md:my-0 md:mr-4 md:ml-2" on:click={goHome}>Home</button>
-        <button class="btn btn-primary my-2 md:my-0" on:click={goToLog}>My Log</button>
+        <button class="btn btn-primary my-2 md:my-0 md:mr-4 md:ml-2" on:click={goToLog}>My Log</button>
+        <button class="btn btn-primary my-2 md:my-0" on:click={goToFeatured}>Featured</button>
     </div>
     <div class="navbar-center flex justify-center md:justify-center">
       <a class="btn btn-ghost text-xl" href="/">AdventureLog 🗺️</a>
     </div>
-    <div class="navbar-end flex justify-around md:justify-end">
+    <div class="navbar-end flex justify-around md:justify-end mr-4">
       <p>Adventures: {getNumberOfAdventures()} </p>
     </div>
 </div>
diff --git a/src/routes/featured/+page.server.ts b/src/routes/featured/+page.server.ts
index a23fe5b..af5c7ad 100644
--- a/src/routes/featured/+page.server.ts
+++ b/src/routes/featured/+page.server.ts
@@ -4,7 +4,7 @@ import type { Adventure } from '$lib/utils/types';
 
 
 export const load = (async () => {
-    const result = await db.select().from(featuredAdventures)
+    const result = await db.select().from(featuredAdventures).orderBy(featuredAdventures.id);
     return {
         result : result as Adventure[]
     };
diff --git a/src/routes/featured/+page.svelte b/src/routes/featured/+page.svelte
index fa8b025..191cb60 100644
--- a/src/routes/featured/+page.svelte
+++ b/src/routes/featured/+page.svelte
@@ -1,11 +1,25 @@
 <script lang="ts">
     export let data
     console.log(data.result);
-    import AdventureCard from '$lib/components/AdventureCard.svelte';
+    import FeaturedAdventureCard from '$lib/components/FeaturedAdventureCard.svelte';
+    import type { Adventure } from '$lib/utils/types.js';
+    import { addAdventure, getNextId } from '../../services/adventureService.js';
+
+    function add(event: CustomEvent<{name: string, location: string}>) {
+        console.log(event.detail);
+        let newAdventure:Adventure = {
+            id: getNextId(),
+            name: event.detail.name,
+            location: event.detail.location,
+            created: ""
+        }
+        addAdventure(newAdventure);
+
+    }
 </script>
 
 <div 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 id={adventure.id} name={adventure.name} location={adventure.location} created={adventure.created} />
+        <FeaturedAdventureCard on:add={add} name={adventure.name} location={adventure.location} />
     {/each}
 </div>
\ No newline at end of file
diff --git a/src/routes/log/+page.svelte b/src/routes/log/+page.svelte
index d8d90fc..bbf2db3 100644
--- a/src/routes/log/+page.svelte
+++ b/src/routes/log/+page.svelte
@@ -94,6 +94,12 @@
 
 </script>
 
+<div class="flex justify-center items-center w-full mt-4 mb-4">
+    <article class="prose">
+        <h2 class="text-center">Add new Location</h2>
+    </article>
+</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" />
@@ -102,6 +108,13 @@
     </form>
 </div>
 
+<div class="flex justify-center items-center w-full mt-4 mb-4">
+    <article class="prose">
+        <h1 class="text-center">My Visited Adventure Locations</h1>
+    </article>
+</div>
+
+
 {#if isShowingToast}
     <SucessToast action={toastAction} />
 {/if}
@@ -124,7 +137,7 @@
 {/if}
 
 {#if adventures.length != 0}
-<div class="flex flex-row items-center justify-center mt-16 gap-4">
+<div class="flex flex-row items-center justify-center mt-16 gap-4 mb-4">
     <button class="btn btn-neutral" on:click={async () => { window.location.href = exportData(); }}>
         <img src={exportFile} class="inline-block -mt-1" alt="Logo" /> Save as File
     </button>
diff --git a/startup.sh b/startup.sh
index 666f95e..7c9c866 100644
--- a/startup.sh
+++ b/startup.sh
@@ -3,6 +3,6 @@
 # Start your application here
 # Example: node build/index.js
 # print message
-echo "Starting the application"
+echo "Starting AdventureLog"
 npm run migrate
 node build/index.js