Merge pull request #135 from seanmorley15/development

Development

backend/server/adventures/migrations/0011_adventure_updated_at.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.0.6 on 2024-07-19 12:55
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('adventures', '0010_adventure_created_at_collection_created_at'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='adventure',
+            name='updated_at',
+            field=models.DateTimeField(auto_now=True),
+        ),
+    ]

backend/server/adventures/models.py

@@ -36,6 +36,7 @@ class Adventure(models.Model):
     latitude = models.DecimalField(max_digits=9, decimal_places=6, null=True, blank=True)
     collection = models.ForeignKey('Collection', on_delete=models.CASCADE, blank=True, null=True)
     created_at = models.DateTimeField(auto_now_add=True)
+    updated_at = models.DateTimeField(auto_now=True)
 
     def clean(self):
         if self.collection:

backend/server/adventures/views.py

@@ -31,11 +31,11 @@ class AdventureViewSet(viewsets.ModelViewSet):
     pagination_class = StandardResultsSetPagination
 
     def apply_sorting(self, queryset):
-        order_by = self.request.query_params.get('order_by', 'created_at')
+        order_by = self.request.query_params.get('order_by', 'updated_at')
         order_direction = self.request.query_params.get('order_direction', 'asc')
         include_collections = self.request.query_params.get('include_collections', 'true')
 
-        valid_order_by = ['name', 'type', 'date', 'rating', 'created_at']
+        valid_order_by = ['name', 'type', 'date', 'rating', 'updated_at']
         if order_by not in valid_order_by:
             order_by = 'name'
 
@@ -52,12 +52,12 @@ class AdventureViewSet(viewsets.ModelViewSet):
         if order_direction == 'desc':
             ordering = f'-{ordering}'
 
-        # reverse ordering for created_at field
-        if order_by == 'created_at':
+        # reverse ordering for updated_at field
+        if order_by == 'updated_at':
             if order_direction == 'asc':
-                ordering = '-created_at'
+                ordering = '-updated_at'
             else:
-                ordering = 'created_at'
+                ordering = 'updated_at'
 
         print(f"Ordering by: {ordering}")  # For debugging
 

frontend/src/lib/components/ActivityComplete.svelte

@@ -81,7 +81,11 @@
 			{#each activities as activity}
 				<li class="flex items-center justify-between bg-base-200 p-2 rounded">
 					{activity}
-					<button class="btn btn-sm btn-error" on:click={() => removeActivity(activity)}>
+					<button
+						type="button"
+						class="btn btn-sm btn-error"
+						on:click={() => removeActivity(activity)}
+					>
 						Remove
 					</button>
 				</li>

frontend/src/lib/components/AdventureCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import { goto } from '$app/navigation';
-	import type { Adventure } from '$lib/types';
+	import type { Adventure, User } from '$lib/types';
 	const dispatch = createEventDispatcher();
 
 	import Launch from '~icons/mdi/launch';
@@ -20,10 +20,25 @@
 
 	export let type: string;
 
+	export let user: User | null;
+
 	let isCollectionModalOpen: boolean = false;
 
 	export let adventure: Adventure;
 
+	let activityTypes: string[] = [];
+	// makes it reactivty to changes so it updates automatically
+	$: {
+		if (adventure.activity_types) {
+			activityTypes = adventure.activity_types;
+			if (activityTypes.length > 3) {
+				activityTypes = activityTypes.slice(0, 3);
+				let remaining = adventure.activity_types.length - 3;
+				activityTypes.push('+' + remaining);
+			}
+		}
+	}
+
 	async function deleteAdventure() {
 		let res = await fetch(`/adventures/${adventure.id}?/delete`, {
 			method: 'POST',
@@ -129,15 +144,15 @@
 			<h2 class="text-2xl font-semibold -mt-2 break-words text-wrap">
 				{adventure.name}
 			</h2>
+		</div>
 		<div>
-				{#if adventure.type == 'visited'}
+			{#if adventure.type == 'visited' && user?.pk == adventure.user_id}
 				<div class="badge badge-primary">Visited</div>
-				{:else}
+			{:else if user?.pk == adventure.user_id}
 				<div class="badge badge-secondary">Planned</div>
 			{/if}
 			<div class="badge badge-neutral">{adventure.is_public ? 'Public' : 'Private'}</div>
 		</div>
-		</div>
 		{#if adventure.location && adventure.location !== ''}
 			<div class="inline-flex items-center">
 				<MapMarker class="w-5 h-5 mr-1" />
@@ -152,7 +167,7 @@
 		{/if}
 		{#if adventure.activity_types && adventure.activity_types.length > 0}
 			<ul class="flex flex-wrap">
-				{#each adventure.activity_types as activity}
+				{#each activityTypes as activity}
 					<div class="badge badge-primary mr-1 text-md font-semibold pb-2 pt-1 mb-1">
 						{activity}
 					</div>
@@ -162,6 +177,7 @@
 		<div class="card-actions justify-end mt-2">
 			<!-- action options dropdown -->
 			{#if type != 'link'}
+				{#if user?.pk == adventure.user_id}
 					<div class="dropdown dropdown-end">
 						<div tabindex="0" role="button" class="btn btn-neutral">
 							<DotsHorizontal class="w-6 h-6" />
@@ -204,6 +220,11 @@
 							>
 						</ul>
 					</div>
+				{:else}
+					<button class="btn btn-neutral mb-2" on:click={() => goto(`/adventures/${adventure.id}`)}
+						><Launch class="w-6 h-6" /></button
+					>
+				{/if}
 			{/if}
 			{#if type == 'link'}
 				<button class="btn btn-primary" on:click={link}><Link class="w-6 h-6" /></button>

frontend/src/lib/components/AdventureLink.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { deserialize } from '$app/forms';
-	import type { Adventure } from '$lib/types';
+	import type { Adventure, User } from '$lib/types';
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher();
 	import type { ActionResult } from '@sveltejs/kit';
@@ -10,6 +10,8 @@
 
 	let adventures: Adventure[] = [];
 
+	export let user: User | null;
+
 	onMount(async () => {
 		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
 		if (modal) {
@@ -53,7 +55,7 @@
 		<h1 class="text-center font-bold text-4xl mb-6">My Adventures</h1>
 		<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
 			{#each adventures as adventure}
-				<AdventureCard type="link" {adventure} on:link={add} />
+				<AdventureCard user={user ?? null} type="link" {adventure} on:link={add} />
 			{/each}
 			{#if adventures.length === 0}
 				<p class="text-center text-lg">

frontend/src/lib/components/EditAdventure.svelte

@@ -124,11 +124,16 @@
 		latitude={adventureToEdit.latitude}
 		on:close={() => (isPointModalOpen = false)}
 		on:submit={setLongLat}
+		query={adventureToEdit.name}
 	/>
 {/if}
 
 {#if isImageFetcherOpen}
-	<ImageFetcher on:image={handleImageFetch} on:close={() => (isImageFetcherOpen = false)} />
+	<ImageFetcher
+		on:image={handleImageFetch}
+		name={adventureToEdit.name}
+		on:close={() => (isImageFetcherOpen = false)}
+	/>
 {/if}
 
 <dialog id="my_modal_1" class="modal">

frontend/src/lib/components/ImageFetcher.svelte

@@ -6,7 +6,8 @@
 	let modal: HTMLDialogElement;
 
 	let url: string = '';
-	let query: string = '';
+
+	export let name: string | null = null;
 
 	let error = '';
 
@@ -30,13 +31,13 @@
 	}
 
 	async function fetchWikiImage() {
-		let res = await fetch(`/api/generate/img/?name=${query}`);
+		let res = await fetch(`/api/generate/img/?name=${name}`);
 		let data = await res.json();
 		if (data.source) {
 			let imageUrl = data.source;
 			let res = await fetch(imageUrl);
 			let blob = await res.blob();
-			let file = new File([blob], `${query}.jpg`, { type: 'image/jpeg' });
+			let file = new File([blob], `${name}.jpg`, { type: 'image/jpeg' });
 			close();
 			dispatch('image', { file });
 		} else {
@@ -75,7 +76,7 @@
 			<input
 				type="text"
 				class="input input-bordered w-full max-w-xs"
-				bind:value={query}
+				bind:value={name}
 				placeholder="Enter a Wikipedia Article Name"
 			/>
 			<button class="btn btn-primary" on:click={fetchWikiImage}>Submit</button>

frontend/src/lib/components/NewAdventure.svelte

@@ -132,11 +132,19 @@
 </script>
 
 {#if isPointModalOpen}
-	<PointSelectionModal on:close={() => (isPointModalOpen = false)} on:submit={setLongLat} />
+	<PointSelectionModal
+		query={newAdventure.name}
+		on:close={() => (isPointModalOpen = false)}
+		on:submit={setLongLat}
+	/>
 {/if}
 
 {#if isImageFetcherOpen}
-	<ImageFetcher on:image={handleImageFetch} on:close={() => (isImageFetcherOpen = false)} />
+	<ImageFetcher
+		on:image={handleImageFetch}
+		name={newAdventure.name}
+		on:close={() => (isImageFetcherOpen = false)}
+	/>
 {/if}
 
 <!-- svelte-ignore a11y-no-noninteractive-tabindex -->

frontend/src/lib/components/PointSelectionModal.svelte

@@ -10,7 +10,11 @@
 
 	let markers: Point[] = [];
 
-	let query: string = '';
+	export let query: string | null = null;
+
+	if (query) {
+		geocode();
+	}
 
 	export let longitude: number | null = null;
 	export let latitude: number | null = null;
@@ -43,8 +47,10 @@
 
 	let places: OpenStreetMapPlace[] = [];
 
-	async function geocode(e: Event) {
+	async function geocode(e: Event | null) {
+		if (e) {
 			e.preventDefault();
+		}
 		if (!query) {
 			alert('Please enter a location');
 			return;

frontend/src/lib/types.ts

@@ -25,7 +25,8 @@ export type Adventure = {
 	latitude: number | null;
 	longitude: number | null;
 	is_public: boolean;
-	created_at?: string;
+	created_at?: string | null;
+	updated_at?: string | null;
 };
 
 export type Country = {

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

@@ -181,10 +181,11 @@
 			>
 				{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
+						user={data.user}
 						type={adventure.type}
 						{adventure}
 						on:delete={deleteAdventure}
@@ -192,45 +193,7 @@
 					/>
 				{/each}
 			</div>
-			{/if}
-			{#if currentView == 'table'}
-				<table class="table table-compact w-full">
-					<thead>
-						<tr>
-							<th>Name</th>
-							<th>Date</th>
-							<th>Rating</th>
-							<th>Type</th>
-							<th>Actions</th>
-						</tr>
-					</thead>
-					<tbody>
-						{#each adventures as adventure}
-							<tr>
-								<td>{adventure.name}</td>
-								<td>{adventure.date}</td>
-								<td>{adventure.rating}</td>
-								<td>{adventure.type}</td>
-								<td>
-									<button
-										class="btn btn-sm btn-primary"
-										on:click={() => editAdventure(new CustomEvent('edit', { detail: adventure }))}
-									>
-										Edit
-									</button>
-									<button
-										class="btn btn-sm btn-error"
-										on:click={() =>
-											deleteAdventure(new CustomEvent('delete', { detail: adventure.id }))}
-									>
-										Delete
-									</button>
-								</td>
-							</tr>
-						{/each}
-					</tbody>
-				</table>
-			{/if}
+
 			<div class="join flex items-center justify-center mt-4">
 				{#if next || previous}
 					<div class="join">
@@ -253,10 +216,11 @@
 	</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">
 			<!-- Sidebar content here -->
-			<h3 class="text-center font-semibold text-lg mb-4">Adventure Types</h3>
 			<div class="form-control">
+				<h3 class="text-center font-bold text-lg mb-4">Adventure Types</h3>
 				<form action="?/get" method="post" use:enhance={handleSubmit}>
 					<label class="label cursor-pointer">
 						<span class="label-text">Completed</span>
@@ -279,56 +243,67 @@
 						/>
 					</label>
 					<!-- <div class="divider"></div> -->
-					<h3 class="text-center font-semibold text-lg mb-4">Sort</h3>
-					<p class="text-md font-semibold mb-2">Order Direction</p>
-					<label for="asc">Ascending</label>
+					<h3 class="text-center font-bold text-lg mb-4">Sort</h3>
+					<p class="text-lg font-semibold mb-2">Order Direction</p>
+					<div class="join">
 						<input
+							class="join-item btn btn-neutral"
 							type="radio"
 							name="order_direction"
 							id="asc"
-						class="radio radio-primary"
-						checked
 							value="asc"
+							aria-label="Ascending"
+							checked
 						/>
-					<label for="desc">Descending</label>
 						<input
+							class="join-item btn btn-neutral"
 							type="radio"
 							name="order_direction"
 							id="desc"
 							value="desc"
-						class="radio radio-primary"
+							aria-label="Descending"
 						/>
+					</div>
 					<br />
-					<p class="text-md font-semibold mt-2 mb-2">Order By</p>
-					<label for="name">Created At</label>
+					<p class="text-lg font-semibold mt-2 mb-2">Order By</p>
+					<div class="flex join overflow-auto">
 						<input
+							class="join-item btn btn-neutral"
 							type="radio"
 							name="order_by"
-						id="created_at"
-						class="radio radio-primary"
+							id="updated_at"
+							value="updated_at"
+							aria-label="Updated"
 							checked
-						value="created_at"
 						/>
-					<label for="name">Name</label>
 						<input
+							class="join-item btn btn-neutral"
 							type="radio"
 							name="order_by"
 							id="name"
-						class="radio radio-primary"
-						checked
+							aria-label="Name"
 							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
+							class="join-item btn btn-neutral"
+							type="radio"
+							value="date"
+							name="order_by"
+							id="date"
+							aria-label="Date"
+						/>
+						<input
+							class="join-item btn btn-neutral"
 							type="radio"
-						value="rating"
 							name="order_by"
 							id="rating"
-						class="radio radio-primary"
+							aria-label="Rating"
+							value="rating"
 						/>
+					</div>
+
 					<br />
+					<p class="text-lg font-semibold mt-2 mb-2">Sources</p>
 					<label class="label cursor-pointer">
 						<span class="label-text">Include Collection Adventures</span>
 						<input
@@ -338,27 +313,8 @@
 							class="checkbox checkbox-primary"
 						/>
 					</label>
-					<button type="submit" class="btn btn-primary mt-4">Filter</button>
+					<button type="submit" class="btn btn-success 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/collections/+page.svelte

@@ -167,7 +167,7 @@
 		<h1 class="text-center font-bold text-4xl mb-6">My Collections</h1>
 		<p class="text-center">This search returned {count} results.</p>
 		{#if collections.length === 0}
-			<NotFound />
+			<NotFound error={undefined} />
 		{/if}
 		<div class="p-4">
 			<button
@@ -215,24 +215,26 @@
 			<div class="form-control">
 				<form action="?/get" method="post" use:enhance={handleSubmit}>
 					<h3 class="text-center font-semibold text-lg mb-4">Sort</h3>
-					<p class="text-md font-semibold mb-2">Order Direction</p>
-					<label for="asc">Ascending</label>
+					<p class="text-lg font-semibold mb-2">Order Direction</p>
+					<div class="join">
 						<input
+							class="join-item btn btn-neutral"
 							type="radio"
 							name="order_direction"
 							id="asc"
-						class="radio radio-primary"
-						checked
 							value="asc"
+							aria-label="Ascending"
+							checked
 						/>
-					<label for="desc">Descending</label>
 						<input
+							class="join-item btn btn-neutral"
 							type="radio"
 							name="order_direction"
 							id="desc"
 							value="desc"
-						class="radio radio-primary"
+							aria-label="Descending"
 						/>
+					</div>
 					<br />
 
 					<input

frontend/src/routes/collections/[id]/+page.svelte

@@ -77,6 +77,7 @@
 
 {#if isShowingCreateModal}
 	<AdventureLink
+		user={data?.user ?? null}
 		on:close={() => {
 			isShowingCreateModal = false;
 		}}
@@ -171,6 +172,7 @@
 	<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
 		{#each adventures as adventure}
 			<AdventureCard
+				user={data.user}
 				on:edit={editAdventure}
 				on:delete={deleteAdventure}
 				type={adventure.type}

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

@@ -48,14 +48,19 @@
 	<h2 class="text-center font-bold text-2xl mb-4">AdventureLog Results</h2>
 	<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} />
+			<AdventureCard
+				user={data.user}
+				type={adventure.type}
+				{adventure}
+				on:delete={deleteAdventure}
+			/>
 		{/each}
 	</div>
 	<div class="divider"></div>
 	<h2 class="text-center font-bold text-2xl mb-4">Online Results</h2>
 	<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
 		{#each osmResults as result}
-			<div class="bg-base-300 rounded-lg shadow-md p-4 w-96">
+			<div class="bg-base-300 rounded-lg shadow-md p-4 w-96 mb-2">
 				<h2 class="text-xl font-bold">{result.display_name}</h2>
 				<p>{result.type}</p>
 				<p>{result.lat}, {result.lon}</p>