starting trips

backend/server/adventures/views.py

@@ -47,7 +47,7 @@ class TripViewSet(viewsets.ModelViewSet):
     def get_queryset(self):
         return Trip.objects.filter(
             Q(is_public=True) | Q(user_id=self.request.user.id)
-        ).select_related(
+        ).prefetch_related(
             Prefetch('adventure_set', queryset=Adventure.objects.filter(
                 Q(is_public=True) | Q(user_id=self.request.user.id)
             ))

documentation/docs/Installation/docker.md

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # Docker 🐋
 
-Docker is the perffered way to run AdventureLog on your local machine. It is a lightweight containerization technology that allows you to run applications in isolated environments called containers.
+Docker is the preferred way to run AdventureLog on your local machine. It is a lightweight containerization technology that allows you to run applications in isolated environments called containers.
 **Note**: This guide mainly focuses on installation with a linux based host machine, but the steps are similar for other operating systems.
 
 ## Prerequisites

frontend/src/lib/components/TripCard.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	import { goto } from '$app/navigation';
+	import type { Trip } from '$lib/types';
+	const dispatch = createEventDispatcher();
+
+	//   export let type: String;
+
+	export let trip: Trip;
+
+	// function remove() {
+	//   dispatch("remove", trip.id);
+	// }
+	// function edit() {}
+	// function add() {
+	//   dispatch("add", trip);
+	// }
+
+	// // TODO: Implement markVisited function
+	// function markVisited() {
+	//   console.log(trip.id);
+	//   dispatch("markVisited", trip);
+	// }
+</script>
+
+<div
+	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">{trip.name}</h2>
+		{#if trip.date && trip.date !== ''}
+			<div class="inline-flex items-center">
+				<!-- <iconify-icon icon="mdi:calendar" class="text-xl"></iconify-icon> -->
+				<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> -->
+				<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-primary" on:click={() => goto(`/trip/${trip.id}`)}
+				><iconify-icon icon="mdi:launch" class="text-2xl"></iconify-icon></button
+			>
+		</div>
+	</div>
+</div>

frontend/src/lib/types.ts

@@ -53,3 +53,14 @@ export type Point = {
 	};
 	name: string;
 };
+
+export type Trip = {
+	id: number;
+	user_id: number;
+	name: string;
+	type: string;
+	location: string;
+	date: string;
+	is_public: boolean;
+	adventures: Adventure[];
+};

frontend/src/routes/planner/+page.svelte

@@ -80,7 +80,7 @@
 	</div>
 </div>
 
-<h1 class="text-center font-bold text-4xl mb-4">Visited Adventures</h1>
+<h1 class="text-center font-bold text-4xl mb-4">Planned Adventures</h1>
 <div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
 	{#each adventures as adventure}
 		<AdventureCard type="planned" {adventure} on:delete={deleteAdventure} on:edit={editAdventure} />

frontend/src/routes/trips/+page.server.ts

@@ -0,0 +1,30 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import { PUBLIC_SERVER_URL } from '$env/static/public';
+
+export const load = (async (event) => {
+	const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+	if (!event.locals.user || !event.cookies.get('auth')) {
+		return redirect(302, '/login');
+	} else {
+		let res = await event.fetch(`${endpoint}/api/trips/`, {
+			headers: {
+				Cookies: event.cookies.get('auth') || ''
+			}
+		});
+		if (res.ok) {
+			let data = await res.json();
+			return {
+				props: {
+					trips: data
+				}
+			};
+		} else {
+			return {
+				status: res.status,
+				error: new Error('Failed to fetch data')
+			};
+		}
+	}
+	return {};
+}) satisfies PageServerLoad;

frontend/src/routes/trips/+page.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { Trip } from '$lib/types';
+	import { onMount } from 'svelte';
+	import type { PageData } from './$types';
+	import Lost from '$lib/assets/undraw_lost.svg';
+	import { goto } from '$app/navigation';
+	import TripCard from '$lib/components/TripCard.svelte';
+
+	export let data: PageData;
+
+	let trips: Trip[];
+	let notFound: boolean = false;
+
+	onMount(() => {
+		if (data.props && data.props.trips) {
+			trips = data.props.trips;
+		} else {
+			notFound = true;
+		}
+	});
+
+	console.log(data);
+</script>
+
+{#if notFound}
+	<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">
+				Adventure not Found
+			</h1>
+			<p class="mt-4 text-muted-foreground">
+				The adventure you were looking for could not be found. Please try a different adventure or
+				check back later.
+			</p>
+			<div class="mt-6">
+				<button class="btn btn-primary" on:click={() => goto('/')}>Homepage</button>
+			</div>
+		</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)}
+			<TripCard {trip} />
+		{/each}
+	</div>
+{/if}