activity types for autocomplete in the future

backend/server/adventures/urls.py

@@ -1,12 +1,13 @@
 from django.urls import include, path
 from rest_framework.routers import DefaultRouter
-from .views import AdventureViewSet, CollectionViewSet, StatsViewSet, GenerateDescription
+from .views import AdventureViewSet, CollectionViewSet, StatsViewSet, GenerateDescription, ActivityTypesView
 
 router = DefaultRouter()
 router.register(r'adventures', AdventureViewSet, basename='adventures')
 router.register(r'collections', CollectionViewSet, basename='collections')
 router.register(r'stats', StatsViewSet, basename='stats')
 router.register(r'generate', GenerateDescription, basename='generate')
+router.register(r'activity-types', ActivityTypesView, basename='activity-types')
 
 
 urlpatterns = [

backend/server/adventures/views.py

@@ -342,3 +342,30 @@ class GenerateDescription(viewsets.ViewSet):
             return Response({"error": "No image found"}, status=400)
         return Response(extract["original"])
 
+
+class ActivityTypesView(viewsets.ViewSet):
+    permission_classes = [IsAuthenticated]
+
+    @action(detail=False, methods=['get'])
+    def types(self, request):
+        """
+        Retrieve a list of distinct activity types for adventures associated with the current user.
+
+        Args:
+            request (HttpRequest): The HTTP request object.
+
+        Returns:
+            Response: A response containing a list of distinct activity types.
+        """
+        types = Adventure.objects.filter(user_id=request.user.id).values_list('activity_types', flat=True).distinct()
+
+        allTypes = []
+
+        for i in types:
+            if not i:
+                continue
+            for x in i:
+                if x and x not in allTypes:
+                    allTypes.append(x)
+
+        return Response(allTypes)

frontend/src/lib/components/Navbar.svelte

@@ -12,6 +12,9 @@
 	import Water from '~icons/mdi/water';
 	import AboutModal from './AboutModal.svelte';
 	import Avatar from './Avatar.svelte';
+	import { page } from '$app/stores';
+
+	let query: string = '';
 
 	let isAboutModalOpen: boolean = false;
 
@@ -22,6 +25,22 @@
 			document.documentElement.setAttribute('data-theme', theme);
 		}
 	};
+
+	const searchGo = async (e: Event) => {
+		e.preventDefault();
+		let reload: boolean = false;
+
+		if ($page.url.pathname === '/search') {
+			reload = true;
+		}
+
+		if (query) {
+			await goto(`/search?query=${query}`);
+			if (reload) {
+				window.location.reload();
+			}
+		}
+	};
 </script>
 
 {#if isAboutModalOpen}
@@ -96,6 +115,24 @@
 				<li>
 					<button class="btn btn-neutral" on:click={() => goto('/map')}>Map</button>
 				</li>
+				<label class="input input-bordered flex items-center gap-2">
+					<form>
+						<input type="text" bind:value={query} class="grow" placeholder="Search" />
+					</form>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 16 16"
+						fill="currentColor"
+						class="h-4 w-4 opacity-70"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</label>
+				<button on:click={searchGo} type="submit" class="btn btn-neutral">Search</button>
 			{/if}
 
 			{#if !data.user}

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

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