mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-28 09:19:37 +02:00
Update startup.sh, +page.server.ts, FeaturedAdventureCard.svelte, and Navbar.svelte
This commit is contained in:
parent
f86151ee5e
commit
4b2306f812
7 changed files with 143 additions and 7 deletions
81
sampleData/parks.sql
Normal file
81
sampleData/parks.sql
Normal file
|
@ -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');
|
24
src/lib/components/FeaturedAdventureCard.svelte
Normal file
24
src/lib/components/FeaturedAdventureCard.svelte
Normal file
|
@ -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>
|
||||||
|
|
|
@ -8,16 +8,20 @@
|
||||||
async function goToLog() {
|
async function goToLog() {
|
||||||
goto('/log');
|
goto('/log');
|
||||||
}
|
}
|
||||||
|
async function goToFeatured() {
|
||||||
|
goto('/featured');
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<div class="navbar bg-base-100 flex flex-col md:flex-row">
|
<div class="navbar bg-base-100 flex flex-col md:flex-row">
|
||||||
<div class="navbar-start flex justify-around md:justify-start">
|
<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 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>
|
||||||
<div class="navbar-center flex justify-center md:justify-center">
|
<div class="navbar-center flex justify-center md:justify-center">
|
||||||
<a class="btn btn-ghost text-xl" href="/">AdventureLog 🗺️</a>
|
<a class="btn btn-ghost text-xl" href="/">AdventureLog 🗺️</a>
|
||||||
</div>
|
</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>
|
<p>Adventures: {getNumberOfAdventures()} </p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,7 +4,7 @@ import type { Adventure } from '$lib/utils/types';
|
||||||
|
|
||||||
|
|
||||||
export const load = (async () => {
|
export const load = (async () => {
|
||||||
const result = await db.select().from(featuredAdventures)
|
const result = await db.select().from(featuredAdventures).orderBy(featuredAdventures.id);
|
||||||
return {
|
return {
|
||||||
result : result as Adventure[]
|
result : result as Adventure[]
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,11 +1,25 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export let data
|
export let data
|
||||||
console.log(data.result);
|
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>
|
</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">
|
<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)}
|
{#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}
|
{/each}
|
||||||
</div>
|
</div>
|
|
@ -94,6 +94,12 @@
|
||||||
|
|
||||||
</script>
|
</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">
|
<div class="flex flex-row items-center justify-center gap-4">
|
||||||
<form on:submit={createNewAdventure} class="flex gap-2">
|
<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={newName} placeholder="Adventure Name" class="input input-bordered w-full max-w-xs" />
|
||||||
|
@ -102,6 +108,13 @@
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</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}
|
{#if isShowingToast}
|
||||||
<SucessToast action={toastAction} />
|
<SucessToast action={toastAction} />
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -124,7 +137,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if adventures.length != 0}
|
{#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(); }}>
|
<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
|
<img src={exportFile} class="inline-block -mt-1" alt="Logo" /> Save as File
|
||||||
</button>
|
</button>
|
||||||
|
|
|
@ -3,6 +3,6 @@
|
||||||
# Start your application here
|
# Start your application here
|
||||||
# Example: node build/index.js
|
# Example: node build/index.js
|
||||||
# print message
|
# print message
|
||||||
echo "Starting the application"
|
echo "Starting AdventureLog"
|
||||||
npm run migrate
|
npm run migrate
|
||||||
node build/index.js
|
node build/index.js
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue