sorting server side

frontend/src/lib/components/Avatar.svelte

@@ -30,7 +30,7 @@
 		<!-- svelte-ignore a11y-missing-attribute -->
 		<p class="text-lg ml-4 font-bold">Hi, {user.first_name} {user.last_name}</p>
 		<li><button on:click={() => goto('/profile')}>Profile</button></li>
-		<li><button on:click={() => goto('/visited')}>My Log</button></li>
+		<li><button on:click={() => goto('/adventures')}>My Adventures</button></li>
 		<li><button on:click={() => goto('/settings')}>User Settings</button></li>
 		<form method="post">
 			<li><button formaction="/?/logout">Logout</button></li>

frontend/src/lib/components/Navbar.svelte

@@ -58,9 +58,6 @@
 					<li>
 						<button on:click={() => goto('/worldtravel')}>World Travel</button>
 					</li>
-					<li>
-						<button on:click={() => goto('/featured')}>Featured</button>
-					</li>
 					<li>
 						<button on:click={() => goto('/map')}>Map</button>
 					</li>
@@ -90,9 +87,6 @@
 					<button class="btn btn-neutral" on:click={() => goto('/worldtravel')}>World Travel</button
 					>
 				</li>
-				<li>
-					<button class="btn btn-neutral" on:click={() => goto('/featured')}>Featured</button>
-				</li>
 				<li>
 					<button class="btn btn-neutral" on:click={() => goto('/map')}>Map</button>
 				</li>

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

@@ -493,7 +493,8 @@ export const actions: Actions = {
 					adventures,
 					next,
 					previous,
-					count
+					count,
+					page
 				}
 			};
 		} catch (error) {

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

@@ -20,10 +20,13 @@
 
 	let resultsPerPage: number = 10;
 
+	let currentView: string = 'cards';
+
 	let next: string | null = data.props.next || null;
 	let previous: string | null = data.props.previous || null;
 	let count = data.props.count || 0;
 	let totalPages = Math.ceil(count / resultsPerPage);
+	let currentPage: number = 1;
 
 	function handleChangePage() {
 		return async ({ result }: any) => {
@@ -33,6 +36,7 @@
 				next = result.data.body.next;
 				previous = result.data.body.previous;
 				count = result.data.body.count;
+				currentPage = result.data.body.page;
 				totalPages = Math.ceil(count / resultsPerPage);
 			}
 		};
@@ -52,6 +56,7 @@
 					previous = result.data.previous;
 					count = result.data.count;
 					totalPages = Math.ceil(count / resultsPerPage);
+
 					console.log(next);
 				}
 			}
@@ -175,31 +180,35 @@
 			>
 				{sidebarOpen ? 'Close Filters' : 'Open Filters'}
 			</button>
-			<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
-				{#each adventures as adventure}
-					<AdventureCard
-						type={adventure.type}
-						{adventure}
-						on:delete={deleteAdventure}
-						on:edit={editAdventure}
-					/>
-				{/each}
-			</div>
-			<div class="join grid grid-cols-2">
-				<div class="join grid grid-cols-2">
-					{#if next || previous}
-						<div class="join">
-							{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
-								<form action="?/changePage" method="POST" use:enhance={handleChangePage}>
-									<input type="hidden" name="page" value={page} />
-									<input type="hidden" name="next" value={next} />
-									<input type="hidden" name="previous" value={previous} />
-									<button class="join-item btn">{page}</button>
-								</form>
-							{/each}
-						</div>
-					{/if}
+			{#if currentView == 'cards'}
+				<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
+					{#each adventures as adventure}
+						<AdventureCard
+							type={adventure.type}
+							{adventure}
+							on:delete={deleteAdventure}
+							on:edit={editAdventure}
+						/>
+					{/each}
 				</div>
+			{/if}
+			<div class="join flex items-center justify-center mt-4">
+				{#if next || previous}
+					<div class="join">
+						{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
+							<form action="?/changePage" method="POST" use:enhance={handleChangePage}>
+								<input type="hidden" name="page" value={page} />
+								<input type="hidden" name="next" value={next} />
+								<input type="hidden" name="previous" value={previous} />
+								{#if currentPage != page}
+									<button class="join-item btn btn-lg">{page}</button>
+								{:else}
+									<button class="join-item btn btn-lg btn-active">{page}</button>
+								{/if}
+							</form>
+						{/each}
+					</div>
+				{/if}
 			</div>
 		</div>
 	</div>
@@ -261,6 +270,25 @@
 						on:click={() => sort({ attribute: 'name', order: 'desc' })}
 					/>
 				</form>
+				<div class="divider"></div>
+				<h3 class="text-center font-semibold text-lg mb-4">View</h3>
+				<div class="join">
+					<input
+						class="join-item btn-neutral btn"
+						type="radio"
+						name="options"
+						aria-label="Cards"
+						on:click={() => (currentView = 'cards')}
+						checked
+					/>
+					<input
+						class="join-item btn btn-neutral"
+						type="radio"
+						name="options"
+						aria-label="Table"
+						on:click={() => (currentView = 'table')}
+					/>
+				</div>
 			</div>
 		</ul>
 	</div>

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

@@ -1,28 +0,0 @@
-import { redirect } from '@sveltejs/kit';
-import type { PageServerLoad } from './$types';
-const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
-import type { Adventure } from '$lib/types';
-const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
-
-export const load = (async (event) => {
-	if (!event.locals.user) {
-		return redirect(302, '/login');
-	} else {
-		let visitedFetch = await fetch(`${endpoint}/api/adventures/featured/`, {
-			headers: {
-				Cookie: `${event.cookies.get('auth')}`
-			}
-		});
-		if (!visitedFetch.ok) {
-			console.error('Failed to fetch featured adventures');
-			return redirect(302, '/login');
-		} else {
-			let featured = (await visitedFetch.json()) as Adventure[];
-			return {
-				props: {
-					featured
-				}
-			};
-		}
-	}
-}) satisfies PageServerLoad;

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

@@ -1,23 +0,0 @@
-<script lang="ts">
-	import AdventureCard from '$lib/components/AdventureCard.svelte';
-	import type { Adventure } from '$lib/types';
-	import type { PageData } from './$types';
-
-	export let data: PageData;
-	console.log(data);
-
-	let adventures: Adventure[] = data.props.featured;
-</script>
-
-<h1 class="text-center font-bold text-4xl mb-4">Featured Adventures</h1>
-<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
-	{#each adventures as adventure}
-		<AdventureCard type="featured" {adventure} />
-	{/each}
-</div>
-
-{#if adventures.length === 0}
-	<div class="flex justify-center items-center h-96">
-		<p class="text-2xl text-primary-content">No visited adventures yet!</p>
-	</div>
-{/if}