From 6383a623ad661292e7043e9b0f256cd23422ea4c Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Wed, 10 Jul 2024 13:49:40 -0400
Subject: [PATCH] trips

---
 frontend/src/lib/components/TripCard.svelte | 15 ++++++++------
 frontend/src/routes/trips/+page.server.ts   |  5 +++--
 frontend/src/routes/trips/+page.svelte      | 23 ++++++++++++++++++++-
 3 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/TripCard.svelte b/frontend/src/lib/components/TripCard.svelte
index cecc556..8c6ffec 100644
--- a/frontend/src/lib/components/TripCard.svelte
+++ b/frontend/src/lib/components/TripCard.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 
+	import Calendar from '~icons/mdi/calendar';
+	import MapMarker from '~icons/mdi/map-marker';
+	import Launch from '~icons/mdi/launch';
+	import TrashCanOutline from '~icons/mdi/trash-can-outline';
+
 	import { goto } from '$app/navigation';
 	import type { Trip } from '$lib/types';
 	const dispatch = createEventDispatcher();
@@ -31,23 +36,21 @@
 		<h2 class="card-title overflow-ellipsis">{trip.name}</h2>
 		{#if trip.date && trip.date !== ''}
 			<div class="inline-flex items-center">
-				<!-- <iconify-icon icon="mdi:calendar" class="text-xl"></iconify-icon> -->
+				<Calendar class="w-5 h-5 mr-1" />
 				<p class="ml-1">{trip.date}</p>
 			</div>
 		{/if}
 		{#if trip.location && trip.location !== ''}
 			<div class="inline-flex items-center">
-				<!-- <iconify-icon icon="mdi:map-marker" class="text-xl"></iconify-icon> -->
+				<MapMarker class="w-5 h-5 mr-1" />
 				<p class="ml-1">{trip.location}</p>
 			</div>
 		{/if}
 
 		<div class="card-actions justify-end">
-			<button class="btn btn-secondary"
-				><iconify-icon icon="mdi:trash-can-outline" class="text-2xl"></iconify-icon></button
-			>
+			<button class="btn btn-secondary"><TrashCanOutline class="w-5 h-5 mr-1" /></button>
 			<button class="btn btn-primary" on:click={() => goto(`/trip/${trip.id}`)}
-				><iconify-icon icon="mdi:launch" class="text-2xl"></iconify-icon></button
+				><Launch class="w-5 h-5 mr-1" /></button
 			>
 		</div>
 	</div>
diff --git a/frontend/src/routes/trips/+page.server.ts b/frontend/src/routes/trips/+page.server.ts
index f23b56a..f3116aa 100644
--- a/frontend/src/routes/trips/+page.server.ts
+++ b/frontend/src/routes/trips/+page.server.ts
@@ -9,11 +9,12 @@ export const load = (async (event) => {
 	} else {
 		let res = await event.fetch(`${endpoint}/api/trips/`, {
 			headers: {
-				Cookies: event.cookies.get('auth') || ''
+				Cookie: `${event.cookies.get('auth')}`
 			}
 		});
 		if (res.ok) {
 			let data = await res.json();
+			console.log(data);
 			return {
 				props: {
 					trips: data
@@ -22,7 +23,7 @@ export const load = (async (event) => {
 		} else {
 			return {
 				status: res.status,
-				error: new Error('Failed to fetch data')
+				error: 'Failed to load trips'
 			};
 		}
 	}
diff --git a/frontend/src/routes/trips/+page.svelte b/frontend/src/routes/trips/+page.svelte
index a9557dd..901e25f 100644
--- a/frontend/src/routes/trips/+page.svelte
+++ b/frontend/src/routes/trips/+page.svelte
@@ -10,10 +10,13 @@
 
 	let trips: Trip[];
 	let notFound: boolean = false;
+	let noTrips: boolean = false;
 
 	onMount(() => {
-		if (data.props && data.props.trips) {
+		if (data.props && data.props.trips?.length > 0) {
 			trips = data.props.trips;
+		} else if (data.props && data.props.trips?.length === 0) {
+			noTrips = true;
 		} else {
 			notFound = true;
 		}
@@ -44,6 +47,24 @@
 	</div>
 {/if}
 
+{#if noTrips}
+	<div
+		class="flex min-h-[100dvh] flex-col items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8 -mt-20"
+	>
+		<div class="mx-auto max-w-md text-center">
+			<div class="flex items-center justify-center">
+				<img src={Lost} alt="Lost" class="w-1/2" />
+			</div>
+			<h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+				No Trips Found
+			</h1>
+			<p class="mt-4 text-muted-foreground">
+				There are no trips to display. Please try again later.
+			</p>
+		</div>
+	</div>
+{/if}
+
 {#if trips && !notFound}
 	<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
 		{#each trips as trip (trip.id)}