Merge pull request #133 from seanmorley15/development

Development

backend/server/adventures/views.py

@@ -143,6 +143,8 @@ class AdventureViewSet(viewsets.ModelViewSet):
     @action(detail=False, methods=['get'])
     def search(self, request):
         query = self.request.query_params.get('query', '')
+        if len(query) < 2:
+            return Response({"error": "Query must be at least 2 characters long"}, status=400)
         queryset = Adventure.objects.filter(
     (Q(name__icontains=query) | Q(description__icontains=query) | Q(location__icontains=query) | Q(activity_types__icontains=query)) &
     (Q(user_id=request.user.id) | Q(is_public=True))

frontend/src/lib/components/AdventureCard.svelte

@@ -161,49 +161,53 @@
 		{/if}
 		<div class="card-actions justify-end mt-2">
 			<!-- action options dropdown -->
-			<div class="dropdown dropdown-end">
+			{#if type != 'link'}
-				<div tabindex="0" role="button" class="btn btn-neutral">
+				<div class="dropdown dropdown-end">
-					<DotsHorizontal class="w-6 h-6" />
+					<div tabindex="0" role="button" class="btn btn-neutral">
+						<DotsHorizontal class="w-6 h-6" />
+					</div>
+					<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+					<ul
+						tabindex="0"
+						class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
+					>
+						<button
+							class="btn btn-neutral mb-2"
+							on:click={() => goto(`/adventures/${adventure.id}`)}
+							><Launch class="w-6 h-6" />Open Details</button
+						>
+						<button class="btn btn-neutral mb-2" on:click={editAdventure}>
+							<FileDocumentEdit class="w-6 h-6" />Edit Adventure
+						</button>
+						{#if adventure.type == 'visited'}
+							<button class="btn btn-neutral mb-2" on:click={changeType('planned')}
+								><FormatListBulletedSquare class="w-6 h-6" />Change to Plan</button
+							>
+						{/if}
+						{#if adventure.type == 'planned'}
+							<button class="btn btn-neutral mb-2" on:click={changeType('visited')}
+								><CheckBold class="w-6 h-6" />Mark Visited</button
+							>
+						{/if}
+						{#if adventure.collection}
+							<button class="btn btn-neutral mb-2" on:click={removeFromCollection}
+								><LinkVariantRemove class="w-6 h-6" />Remove from Collection</button
+							>
+						{/if}
+						{#if !adventure.collection}
+							<button class="btn btn-neutral mb-2" on:click={() => (isCollectionModalOpen = true)}
+								><Plus class="w-6 h-6" />Add to Collection</button
+							>
+						{/if}
+						<button class="btn btn-warning" on:click={deleteAdventure}
+							><TrashCan class="w-6 h-6" />Delete</button
+						>
+					</ul>
 				</div>
-				<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+			{/if}
-				<ul
+			{#if type == 'link'}
-					tabindex="0"
+				<button class="btn btn-primary" on:click={link}><Link class="w-6 h-6" /></button>
-					class="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow"
+			{/if}
-				>
-					<button class="btn btn-neutral mb-2" on:click={() => goto(`/adventures/${adventure.id}`)}
-						><Launch class="w-6 h-6" />Open Details</button
-					>
-					<button class="btn btn-neutral mb-2" on:click={editAdventure}>
-						<FileDocumentEdit class="w-6 h-6" />Edit Adventure
-					</button>
-					{#if adventure.type == 'visited'}
-						<button class="btn btn-neutral mb-2" on:click={changeType('planned')}
-							><FormatListBulletedSquare class="w-6 h-6" />Change to Plan</button
-						>
-					{/if}
-					{#if adventure.type == 'planned'}
-						<button class="btn btn-neutral mb-2" on:click={changeType('visited')}
-							><CheckBold class="w-6 h-6" />Mark Visited</button
-						>
-					{/if}
-					{#if adventure.collection}
-						<button class="btn btn-neutral mb-2" on:click={removeFromCollection}
-							><LinkVariantRemove class="w-6 h-6" />Remove from Collection</button
-						>
-					{/if}
-					{#if !adventure.collection}
-						<button class="btn btn-neutral mb-2" on:click={() => (isCollectionModalOpen = true)}
-							><Plus class="w-6 h-6" />Add to Collection</button
-						>
-					{/if}
-					{#if type == 'link'}
-						<button class="btn btn-primary" on:click={link}><Link class="w-6 h-6" /></button>
-					{/if}
-					<button class="btn btn-warning" on:click={deleteAdventure}
-						><TrashCan class="w-6 h-6" />Delete</button
-					>
-				</ul>
-			</div>
 		</div>
 	</div>
 </div>

frontend/src/lib/components/NotFound.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Lost from '$lib/assets/undraw_lost.svg';
+	export let error: string | undefined;
 </script>
 
 <div
@@ -12,9 +13,13 @@
 		<h1 class="mt-4 text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
 			No adventures found
 		</h1>
-		<p class="mt-4 text-muted-foreground">
+		{#if !error}
-			There are no adventures to display. Add some using the plus button at the bottom right or try
+			<p class="mt-4 text-muted-foreground">
-			changing filters!
+				There are no adventures to display. Add some using the plus button at the bottom right or
-		</p>
+				try changing filters!
+			</p>
+		{:else}
+			<p class="text-error mt-2">{error}</p>
+		{/if}
 	</div>
 </div>

frontend/src/lib/components/PointSelectionModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	// @ts-nocheck
-	import type { Point } from '$lib/types';
+	import type { OpenStreetMapPlace, Point } from '$lib/types';
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher();
 	import { onMount } from 'svelte';
@@ -10,6 +10,8 @@
 
 	let markers: Point[] = [];
 
+	let query: string = '';
+
 	export let longitude: number | null = null;
 	export let latitude: number | null = null;
 
@@ -39,6 +41,20 @@
 		}
 	}
 
+	let places: OpenStreetMapPlace[] = [];
+
+	async function geocode(e: Event) {
+		e.preventDefault();
+		if (!query) {
+			alert('Please enter a location');
+			return;
+		}
+		let res = await fetch(`https://nominatim.openstreetmap.org/search?q=${query}&format=jsonv2`);
+		console.log(res);
+		let data = (await res.json()) as OpenStreetMapPlace[];
+		places = data;
+	}
+
 	function submit() {
 		if (markers.length === 0) {
 			alert('Please select a point on the map');
@@ -53,7 +69,18 @@
 <dialog id="my_modal_1" class="modal">
 	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-	<div class="modal-box" role="dialog" on:keydown={handleKeydown} tabindex="0">
+	<div class="modal-box w-11/12 max-w-4xl" role="dialog" on:keydown={handleKeydown} tabindex="0">
+		<form on:submit={geocode}>
+			<input
+				type="text"
+				placeholder="Seach for a location"
+				class="input input-bordered w-full max-w-xs"
+				id="search"
+				name="search"
+				bind:value={query}
+			/>
+			<button type="submit">Search</button>
+		</form>
 		<h3 class="font-bold text-lg mb-4">Choose a Point</h3>
 		<MapLibre
 			style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
@@ -70,6 +97,33 @@
 			{/each}
 		</MapLibre>
 
+		{#if places.length > 0}
+			<div class="mt-4">
+				<h3 class="font-bold text-lg mb-4">Search Results</h3>
+				<ul>
+					{#each places as place}
+						<li>
+							<button
+								class="btn btn-neutral mb-2"
+								on:click={() => {
+									markers = [
+										{
+											lngLat: { lng: Number(place.lon), lat: Number(place.lat) },
+											name: place.display_name
+										}
+									];
+								}}
+							>
+								{place.display_name}
+							</button>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{:else}
+			<p class="text-error text-lg">No results found</p>
+		{/if}
+
 		<div class="mb-4 mt-4"></div>
 		<button class="btn btn-primary" on:click={submit}>Submit</button>
 		<button class="btn btn-neutral" on:click={close}>Close</button>

frontend/src/lib/types.ts

@@ -62,3 +62,20 @@ export type Collection = {
 	is_public: boolean;
 	adventures: Adventure[];
 };
+
+export type OpenStreetMapPlace = {
+	place_id: number;
+	licence: string;
+	osm_type: string;
+	osm_id: number;
+	lat: string;
+	lon: string;
+	category: string;
+	type: string;
+	place_rank: number;
+	importance: number;
+	addresstype: string;
+	name: string;
+	display_name: string;
+	boundingbox: string[];
+};

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

@@ -172,7 +172,7 @@
 		<h1 class="text-center font-bold text-4xl mb-6">My Adventures</h1>
 		<p class="text-center">This search returned {count} results.</p>
 		{#if adventures.length === 0}
-			<NotFound />
+			<NotFound error={undefined} />
 		{/if}
 		<div class="p-4">
 			<button

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

@@ -34,6 +34,7 @@ export const load = (async (event) => {
 		};
 	} else {
 		console.error('Failed to fetch search data');
-		return { data: [] };
+		let error = await res.json();
+		return { error: error.error };
 	}
 }) satisfies PageServerLoad;

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

@@ -18,7 +18,7 @@
 </script>
 
 {#if adventures.length === 0}
-	<NotFound />
+	<NotFound error={data.error} />
 {:else}
 	<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
 		{#each adventures as adventure}