sorting server side

backend/server/adventures/views.py

@@ -27,13 +27,37 @@ class AdventureViewSet(viewsets.ModelViewSet):
     permission_classes = [IsOwnerOrReadOnly, IsPublicReadOnly]
     pagination_class = StandardResultsSetPagination
 
+    def apply_sorting(self, queryset):
+        order_by = self.request.query_params.get('order_by', 'name')
+        order_direction = self.request.query_params.get('order_direction', 'asc')
+
+        valid_order_by = ['name', 'type', 'date', 'rating']
+        if order_by not in valid_order_by:
+            order_by = 'name'
+
+        if order_direction not in ['asc', 'desc']:
+            order_direction = 'asc'
+
+        # Apply case-insensitive sorting for the 'name' field
+        if order_by == 'name':
+            queryset = queryset.annotate(lower_name=Lower('name'))
+            ordering = 'lower_name'
+        else:
+            ordering = order_by
+
+        if order_direction == 'desc':
+            ordering = f'-{ordering}'
+
+        print(f"Ordering by: {ordering}")  # For debugging
+
+        return queryset.order_by(ordering)
+
     def get_queryset(self):
-        lower_name = Lower('name')
         queryset = Adventure.objects.annotate(
         ).filter(
             Q(is_public=True) | Q(user_id=self.request.user.id)
-        ).order_by(lower_name)  # Sort by the annotated lowercase name
-        return queryset
+        )
+        return self.apply_sorting(queryset)
     
     def perform_create(self, serializer):
         serializer.save(user_id=self.request.user)
@@ -57,20 +81,17 @@ class AdventureViewSet(viewsets.ModelViewSet):
                 queryset |= Adventure.objects.filter(
                     type='featured', is_public=True, trip=None)
 
-        lower_name = Lower('name')
-        queryset = queryset.order_by(lower_name)
+        queryset = self.apply_sorting(queryset)
         adventures = self.paginate_and_respond(queryset, request)
         return adventures
     
     @action(detail=False, methods=['get'])
     def all(self, request):
-        # return error if user is not authenticated
         if not request.user.is_authenticated:
             return Response({"error": "User is not authenticated"}, status=400)
         queryset = Adventure.objects.filter(user_id=request.user.id).exclude(type='featured')
-        serializer = self.get_serializer(queryset, many=True)
-        return Response(serializer.data)
-        
+        queryset = self.apply_sorting(queryset)
+        return self.paginate_and_respond(queryset, request)
 
     def paginate_and_respond(self, queryset, request):
         paginator = self.pagination_class()
@@ -80,7 +101,6 @@ class AdventureViewSet(viewsets.ModelViewSet):
             return paginator.get_paginated_response(serializer.data)
         serializer = self.get_serializer(queryset, many=True)
         return Response(serializer.data)
-
 class TripViewSet(viewsets.ModelViewSet):
     serializer_class = TripSerializer
     permission_classes = [IsOwnerOrReadOnly, IsPublicReadOnly]

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,6 +180,7 @@
 			>
 				{sidebarOpen ? 'Close Filters' : 'Open Filters'}
 			</button>
+			{#if currentView == 'cards'}
 				<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
 					{#each adventures as adventure}
 						<AdventureCard
@@ -185,8 +191,8 @@
 						/>
 					{/each}
 				</div>
-			<div class="join grid grid-cols-2">
-				<div class="join grid grid-cols-2">
+			{/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}
@@ -194,7 +200,11 @@
 								<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>
+								{#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>
@@ -202,7 +212,6 @@
 			</div>
 		</div>
 	</div>
-	</div>
 	<div class="drawer-side">
 		<label for="my-drawer" class="drawer-overlay"></label>
 		<ul class="menu p-4 w-80 h-full bg-base-200 text-base-content rounded-lg">
@@ -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}