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,11 +81,18 @@ 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):
+        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()
         page = paginator.paginate_queryset(queryset, request)
@@ -70,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]

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,6 +181,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 +192,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 +201,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 +213,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">
@@ -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/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}

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')}`
 			}

frontend/src/routes/planner/+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 plannedFetch = await fetch(`${endpoint}/api/adventures/planned/`, {
-			headers: {
-				Cookie: `${event.cookies.get('auth')}`
-			}
-		});
-		if (!plannedFetch.ok) {
-			console.error('Failed to fetch planned adventures');
-			return redirect(302, '/login');
-		} else {
-			let planned = (await plannedFetch.json()) as Adventure[];
-			return {
-				props: {
-					planned
-				}
-			};
-		}
-	}
-}) satisfies PageServerLoad;

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

@@ -1,111 +0,0 @@
-<script lang="ts">
-	import AdventureCard from '$lib/components/AdventureCard.svelte';
-	import NewAdventure from '$lib/components/NewAdventure.svelte';
-	import type { Adventure } from '$lib/types';
-	import Plus from '~icons/mdi/plus';
-	import type { PageData } from './$types';
-	import EditAdventure from '$lib/components/EditAdventure.svelte';
-
-	import Lost from '$lib/assets/undraw_lost.svg';
-
-	export let data: PageData;
-	console.log(data);
-
-	let adventures: Adventure[] = data.props.planned;
-	let isShowingCreateModal: boolean = false;
-
-	let adventureToEdit: Adventure;
-	let isEditModalOpen: boolean = false;
-
-	function deleteAdventure(event: CustomEvent<number>) {
-		adventures = adventures.filter((adventure) => adventure.id !== event.detail);
-	}
-
-	function createAdventure(event: CustomEvent<Adventure>) {
-		adventures = [event.detail, ...adventures];
-		isShowingCreateModal = false;
-	}
-
-	function editAdventure(event: CustomEvent<Adventure>) {
-		adventureToEdit = event.detail;
-		isEditModalOpen = true;
-	}
-
-	function saveEdit(event: CustomEvent<Adventure>) {
-		adventures = adventures.map((adventure) => {
-			if (adventure.id === event.detail.id) {
-				return event.detail;
-			}
-			return adventure;
-		});
-		isEditModalOpen = false;
-	}
-</script>
-
-{#if isShowingCreateModal}
-	<NewAdventure
-		type="planned"
-		on:create={createAdventure}
-		on:close={() => (isShowingCreateModal = false)}
-	/>
-{/if}
-
-{#if isEditModalOpen}
-	<EditAdventure
-		{adventureToEdit}
-		on:close={() => (isEditModalOpen = false)}
-		on:saveEdit={saveEdit}
-	/>
-{/if}
-
-<div class="fixed bottom-4 right-4 z-[999]">
-	<div class="flex flex-row items-center justify-center gap-4">
-		<div class="dropdown dropdown-top dropdown-end">
-			<div tabindex="0" role="button" class="btn m-1 size-16 btn-primary">
-				<Plus class="w-8 h-8" />
-			</div>
-			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-			<ul
-				tabindex="0"
-				class="dropdown-content z-[1] menu p-4 shadow bg-base-300 text-base-content rounded-box w-52 gap-4"
-			>
-				<p class="text-center font-bold text-lg">Create new...</p>
-				<button class="btn btn-primary" on:click={() => (isShowingCreateModal = true)}
-					>Planned Adventure</button
-				>
-				<!-- <button
-			class="btn btn-primary"
-			on:click={() => (isShowingNewTrip = true)}>Trip Planner</button
-		  > -->
-			</ul>
-		</div>
-	</div>
-</div>
-
-{#if adventures.length > 0}
-	<h1 class="text-center font-bold text-4xl mb-4">Planned Adventures</h1>
-{/if}
-
-<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} />
-	{/each}
-</div>
-
-{#if adventures.length === 0}
-	<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 planned adventures found
-			</h1>
-			<p class="mt-4 text-muted-foreground">
-				There are no adventures to display. Add some using the plus button at the bottom right!
-			</p>
-		</div>
-	</div>
-{/if}

frontend/src/routes/visited/+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/visited/`, {
-			headers: {
-				Cookie: `${event.cookies.get('auth')}`
-			}
-		});
-		if (!visitedFetch.ok) {
-			console.error('Failed to fetch visited adventures');
-			return redirect(302, '/login');
-		} else {
-			let visited = (await visitedFetch.json()) as Adventure[];
-			return {
-				props: {
-					visited
-				}
-			};
-		}
-	}
-}) satisfies PageServerLoad;

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

@@ -1,96 +0,0 @@
-<script lang="ts">
-	import AdventureCard from '$lib/components/AdventureCard.svelte';
-	import NewAdventure from '$lib/components/NewAdventure.svelte';
-	import type { Adventure } from '$lib/types';
-	import Plus from '~icons/mdi/plus';
-	import type { PageData } from './$types';
-	import EditAdventure from '$lib/components/EditAdventure.svelte';
-
-	import Lost from '$lib/assets/undraw_lost.svg';
-	import NotFound from '$lib/components/NotFound.svelte';
-
-	export let data: PageData;
-	console.log(data);
-
-	let adventures: Adventure[] = data.props.visited;
-	let isShowingCreateModal: boolean = false;
-
-	let adventureToEdit: Adventure;
-	let isEditModalOpen: boolean = false;
-
-	function deleteAdventure(event: CustomEvent<number>) {
-		adventures = adventures.filter((adventure) => adventure.id !== event.detail);
-	}
-
-	function createAdventure(event: CustomEvent<Adventure>) {
-		adventures = [event.detail, ...adventures];
-		isShowingCreateModal = false;
-	}
-
-	function editAdventure(event: CustomEvent<Adventure>) {
-		adventureToEdit = event.detail;
-		isEditModalOpen = true;
-	}
-
-	function saveEdit(event: CustomEvent<Adventure>) {
-		adventures = adventures.map((adventure) => {
-			if (adventure.id === event.detail.id) {
-				return event.detail;
-			}
-			return adventure;
-		});
-		isEditModalOpen = false;
-	}
-</script>
-
-{#if isShowingCreateModal}
-	<NewAdventure
-		type="visited"
-		on:create={createAdventure}
-		on:close={() => (isShowingCreateModal = false)}
-	/>
-{/if}
-
-{#if isEditModalOpen}
-	<EditAdventure
-		{adventureToEdit}
-		on:close={() => (isEditModalOpen = false)}
-		on:saveEdit={saveEdit}
-	/>
-{/if}
-
-<div class="fixed bottom-4 right-4 z-[999]">
-	<div class="flex flex-row items-center justify-center gap-4">
-		<div class="dropdown dropdown-top dropdown-end">
-			<div tabindex="0" role="button" class="btn m-1 size-16 btn-primary">
-				<Plus class="w-8 h-8" />
-			</div>
-			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-			<ul
-				tabindex="0"
-				class="dropdown-content z-[1] menu p-4 shadow bg-base-300 text-base-content rounded-box w-52 gap-4"
-			>
-				<p class="text-center font-bold text-lg">Create new...</p>
-				<button class="btn btn-primary" on:click={() => (isShowingCreateModal = true)}
-					>Visited Adventure</button
-				>
-				<!-- <button
-			class="btn btn-primary"
-			on:click={() => (isShowingNewTrip = true)}>Trip Planner</button
-		  > -->
-			</ul>
-		</div>
-	</div>
-</div>
-
-{#if adventures.length > 0}
-	<h1 class="text-center font-bold text-4xl mb-4">Visited Adventures</h1>
-{:else}
-	<NotFound />
-{/if}
-
-<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
-	{#each adventures as adventure}
-		<AdventureCard type="visited" {adventure} on:delete={deleteAdventure} on:edit={editAdventure} />
-	{/each}
-</div>