feat: Add type change functionality to AdventureCard component

seanmorley15 · Jul 22, 2024 · fe05e5c · fe05e5c
1 parent e093be3
commit fe05e5c
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 12 deletions.
diff --git a/frontend/src/lib/components/AdventureCard.svelte b/frontend/src/lib/components/AdventureCard.svelte
@@ -83,6 +83,7 @@
 			});
 			if (res.ok) {
 				console.log('Adventure type changed');
+				dispatch('typeChange', adventure.id);
 				addToast('info', 'Adventure type changed successfully!');
 				adventure.type = newType;
 			} else {

diff --git a/frontend/src/routes/collections/[id]/+page.svelte b/frontend/src/routes/collections/[id]/+page.svelte
@@ -9,13 +9,18 @@
 	import AdventureCard from '$lib/components/AdventureCard.svelte';
 	import AdventureLink from '$lib/components/AdventureLink.svelte';
 	import EditAdventure from '$lib/components/EditAdventure.svelte';
+	import NotFound from '$lib/components/NotFound.svelte';
 
 	export let data: PageData;
 
 	let collection: Collection;
 
 	let adventures: Adventure[] = [];
-	let numVisited: number = adventures.filter((a) => a.type == 'visited').length;
+	let numVisited: number = 0;
+
+	$: {
+		numVisited = adventures.filter((a) => a.type === 'visited').length;
+	}
 
 	let notFound: boolean = false;
 	let isShowingCreateModal: boolean = false;
@@ -56,6 +61,19 @@
 		}
 	}
 
+	function changeType(event: CustomEvent<number>) {
+		adventures = adventures.map((adventure) => {
+			if (adventure.id == event.detail) {
+				if (adventure.type == 'visited') {
+					adventure.type = 'planned';
+				} else {
+					adventure.type = 'visited';
+				}
+			}
+			return adventure;
+		});
+	}
+
 	let adventureToEdit: Adventure;
 	let isEditModalOpen: boolean = false;
 
@@ -157,7 +175,7 @@
 		<div class="flex items-center justify-center mb-4">
 			<div class="stats shadow bg-base-300">
 				<div class="stat">
-					<div class="stat-title">Region Stats</div>
+					<div class="stat-title">Collection Stats</div>
 					<div class="stat-value">{numVisited}/{adventures.length} Visited</div>
 					{#if numVisited === adventures.length}
 						<div class="stat-desc">You've completed this collection! 🎉!</div>
@@ -169,6 +187,9 @@
 		</div>
 	{/if}
 	<h1 class="text-center font-semibold text-2xl mt-4 mb-2">Linked Adventures</h1>
+	{#if adventures.length == 0}
+		<NotFound error={undefined} />
+	{/if}
 	<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
 		{#each adventures as adventure}
 			<AdventureCard
@@ -177,6 +198,7 @@
 				on:delete={deleteAdventure}
 				type={adventure.type}
 				{adventure}
+				on:typeChange={changeType}
 			/>
 		{/each}
 	</div>

diff --git a/frontend/src/routes/map/+page.server.ts b/frontend/src/routes/map/+page.server.ts
@@ -25,7 +25,8 @@ export const load = (async (event) => {
 				.map((adventure) => {
 					return {
 						lngLat: [adventure.longitude, adventure.latitude] as [number, number],
-						name: adventure.name
+						name: adventure.name,
+						type: adventure.type
 					};
 				});
 			return {

diff --git a/frontend/src/routes/map/+page.svelte b/frontend/src/routes/map/+page.svelte
@@ -1,9 +1,11 @@
 <script>
 	// @ts-nocheck
 
-	import { DefaultMarker, MapEvents, MapLibre, Popup } from 'svelte-maplibre';
+	import { DefaultMarker, MapEvents, MapLibre, Popup, Marker } from 'svelte-maplibre';
 	export let data;
 
+	let clickedName = '';
+
 	let markers = data.props.markers;
 	console.log(markers);
 </script>
@@ -13,14 +15,50 @@
 	class="relative aspect-[9/16] max-h-[70vh] w-full sm:aspect-video sm:max-h-full"
 	standardControls
 >
-	{#each data.props.markers as { lngLat, name }}
-		<!-- Unlike the custom marker example, default markers do not have mouse events,
-    and popups only support the default openOn="click" behavior -->
-		<DefaultMarker {lngLat}>
-			<Popup offset={[0, -10]}>
-				<div class="text-lg font-bold">{name}</div>
-			</Popup>
-		</DefaultMarker>
+	{#each data.props.markers as { lngLat, name, type }}
+		{#if type == 'visited'}
+			<Marker
+				{lngLat}
+				on:click={() => (clickedName = name)}
+				class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 bg-red-300 text-black shadow-2xl focus:outline-2 focus:outline-black"
+			>
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<circle cx="12" cy="12" r="10" stroke="red" stroke-width="2" fill="red" />
+				</svg>
+				<Popup openOn="click" offset={[0, -10]}>
+					<div class="text-lg font-bold">{name}</div>
+					<p class="font-semibold text-md">Visited</p>
+				</Popup>
+			</Marker>
+		{/if}
+
+		{#if type == 'planned'}
+			<Marker
+				{lngLat}
+				on:click={() => (clickedName = name)}
+				class="grid h-8 w-8 place-items-center rounded-full border border-gray-200 bg-blue-300 text-black shadow-2xl focus:outline-2 focus:outline-black"
+			>
+				<svg
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<circle cx="12" cy="12" r="10" stroke="blue" stroke-width="2" fill="blue" />
+				</svg>
+				<Popup openOn="click" offset={[0, -10]}>
+					<div class="text-lg font-bold">{name}</div>
+					<p class="font-semibold text-md">Planned</p>
+				</Popup>
+			</Marker>
+		{/if}
 	{/each}
 </MapLibre>