Merge pull request #127 from seanmorley15/development

Development

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,10 +81,17 @@ def filtered(self, request):
                 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):
+        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)
 
     def paginate_and_respond(self, queryset, request):
         paginator = self.pagination_class()
@@ -70,7 +101,6 @@ def paginate_and_respond(self, queryset, request):
             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]

docker-compose.yml

@@ -2,8 +2,8 @@ version: "3.9"
 
 services:
   web:
-    build: ./frontend/
-    #image: ghcr.io/seanmorley15/adventurelog-frontend:latest
+    #build: ./frontend/
+    image: ghcr.io/seanmorley15/adventurelog-frontend:latest
     environment:
       - PUBLIC_SERVER_URL=http://server:8000
       - ORIGIN=http://localhost:8080
@@ -23,8 +23,8 @@ services:
       - postgres_data:/var/lib/postgresql/data/
 
   server:
-    build: ./backend/
-    #image: ghcr.io/seanmorley15/adventurelog-backend:latest
+    #build: ./backend/
+    image: ghcr.io/seanmorley15/adventurelog-backend:latest
     environment:
       - PGHOST=db
       - PGDATABASE=database

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/+page.svelte

@@ -40,7 +40,7 @@
 					</p>
 				</div>
 				<div class="flex flex-col gap-2 min-[400px]:flex-row">
-					<button on:click={() => goto('/visited')} class="btn btn-primary">
+					<button on:click={() => goto('/adventures')} class="btn btn-primary">
 						Go To AdventureLog
 					</button>
 				</div>

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

@@ -363,6 +363,11 @@ export const actions: Actions = {
 		const planned = formData.get('planned');
 		const featured = formData.get('featured');
 
+		const order_direction = formData.get('order_direction') as string;
+		const order_by = formData.get('order_by') as string;
+
+		console.log(order_direction, order_by);
+
 		let adventures: Adventure[] = [];
 
 		if (!event.locals.user) {
@@ -399,7 +404,7 @@ export const actions: Actions = {
 		console.log(filterString);
 
 		let visitedFetch = await fetch(
-			`${serverEndpoint}/api/adventures/filtered?types=${filterString}`,
+			`${serverEndpoint}/api/adventures/filtered?types=${filterString}&order_by=${order_by}&order_direction=${order_direction}`,
 			{
 				headers: {
 					Cookie: `${event.cookies.get('auth')}`
@@ -493,7 +498,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,8 @@
 					previous = result.data.previous;
 					count = result.data.count;
 					totalPages = Math.ceil(count / resultsPerPage);
+					currentPage = 1;
+
 					console.log(next);
 				}
 			}
@@ -175,31 +181,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>
@@ -239,28 +249,68 @@
 							class="checkbox checkbox-primary"
 						/>
 					</label>
-
-					<button type="submit" class="btn btn-primary mt-4">Filter</button>
-					<div class="divider"></div>
+					<!-- <div class="divider"></div> -->
 					<h3 class="text-center font-semibold text-lg mb-4">Sort</h3>
-					<label for="name-asc">Name ASC</label>
+					<p class="text-md font-semibold mb-2">Order Direction</p>
+					<label for="asc">Ascending</label>
 					<input
 						type="radio"
-						name="name"
-						id="name-asc"
+						name="order_direction"
+						id="asc"
 						class="radio radio-primary"
 						checked
-						on:click={() => sort({ attribute: 'name', order: 'asc' })}
+						value="asc"
 					/>
-					<label for="name-desc">Name DESC</label>
+					<label for="desc">Descending</label>
 					<input
 						type="radio"
-						name="name"
-						id="name-desc"
+						name="order_direction"
+						id="desc"
+						value="desc"
 						class="radio radio-primary"
-						on:click={() => sort({ attribute: 'name', order: 'desc' })}
 					/>
+					<br />
+					<p class="text-md font-semibold mt-2 mb-2">Order By</p>
+					<label for="name">Name</label>
+					<input
+						type="radio"
+						name="order_by"
+						id="name"
+						class="radio radio-primary"
+						checked
+						value="name"
+					/>
+					<label for="date">Date</label>
+					<input type="radio" value="date" name="order_by" id="date" class="radio radio-primary" />
+					<label for="rating">Rating</label>
+					<input
+						type="radio"
+						value="rating"
+						name="order_by"
+						id="rating"
+						class="radio radio-primary"
+					/>
+					<button type="submit" class="btn btn-primary mt-4">Filter</button>
 				</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/map/+page.server.ts

@@ -8,7 +8,7 @@ export const load = (async (event) => {
 	if (!event.locals.user) {
 		return redirect(302, '/login');
 	} else {
-		let visitedFetch = await fetch(`${endpoint}/api/adventures/`, {
+		let visitedFetch = await fetch(`${endpoint}/api/adventures/all/`, {
 			headers: {
 				Cookie: `${event.cookies.get('auth')}`
 			}