collections v2

frontend/src/lib/components/CollectionCard.svelte

@@ -8,25 +8,28 @@
 
 	import { goto } from '$app/navigation';
 	import type { Collection } from '$lib/types';
+	import { addToast } from '$lib/toasts';
 	const dispatch = createEventDispatcher();
 
 	//   export let type: String;
 
 	export let collection: Collection;
 
-	// function remove() {
-	//   dispatch("remove", trip.id);
-	// }
-	// function edit() {}
-	// function add() {
-	//   dispatch("add", trip);
-	// }
-
-	// // TODO: Implement markVisited function
-	// function markVisited() {
-	//   console.log(trip.id);
-	//   dispatch("markVisited", trip);
-	// }
+	async function deleteCollection() {
+		let res = await fetch(`/collections/${collection.id}?/delete`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/x-www-form-urlencoded'
+			}
+		});
+		if (res.ok) {
+			console.log('Collection deleted');
+			addToast('info', 'Adventure deleted successfully!');
+			dispatch('delete', collection.id);
+		} else {
+			console.log('Error deleting adventure');
+		}
+	}
 </script>
 
 <div
@@ -36,8 +39,10 @@
 		<h2 class="card-title overflow-ellipsis">{collection.name}</h2>
 		<p>{collection.adventures.length} Adventures</p>
 		<div class="card-actions justify-end">
-			<button class="btn btn-secondary"><TrashCanOutline class="w-5 h-5 mr-1" /></button>
-			<button class="btn btn-primary" on:click={() => goto(`/trip/${collection.id}`)}
+			<button on:click={deleteCollection} class="btn btn-secondary"
+				><TrashCanOutline class="w-5 h-5 mr-1" /></button
+			>
+			<button class="btn btn-primary" on:click={() => goto(`/collections/${collection.id}`)}
 				><Launch class="w-5 h-5 mr-1" /></button
 			>
 		</div>