collections v2

frontend/src/lib/components/AdventureCard.svelte

@@ -10,6 +10,7 @@
 	import Calendar from '~icons/mdi/calendar';
 	import MapMarker from '~icons/mdi/map-marker';
 	import { addToast } from '$lib/toasts';
+	import Link from '~icons/mdi/link-variant';
 
 	export let type: string;
 
@@ -34,6 +35,10 @@
 	function editAdventure() {
 		dispatch('edit', adventure);
 	}
+
+	function link() {
+		dispatch('link', adventure);
+	}
 </script>
 
 <div
@@ -100,6 +105,9 @@
 					><TrashCan class="w-6 h-6" /></button
 				>
 			{/if}
+			{#if type == 'link'}
+				<button class="btn btn-primary" on:click={link}><Link class="w-6 h-6" /></button>
+			{/if}
 		</div>
 	</div>
 </div>

frontend/src/lib/components/AdventureLink.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import { deserialize } from '$app/forms';
+	import type { Adventure } from '$lib/types';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+	import type { ActionResult } from '@sveltejs/kit';
+	import { onMount } from 'svelte';
+	import AdventureCard from './AdventureCard.svelte';
+	let modal: HTMLDialogElement;
+
+	let adventures: Adventure[] = [];
+
+	onMount(async () => {
+		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
+		if (modal) {
+			modal.showModal();
+		}
+		let formData = new FormData();
+		formData.append('include_collections', 'false');
+		let res = await fetch(`/adventures?/all`, {
+			method: 'POST',
+			body: formData
+		});
+
+		const result: ActionResult = deserialize(await res.text());
+		console.log(result);
+
+		if (result.type === 'success' && result.data) {
+			adventures = result.data.adventures as Adventure[];
+		}
+	});
+
+	function close() {
+		dispatch('close');
+	}
+
+	function add(event: CustomEvent<Adventure>) {
+		dispatch('add', event.detail);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			dispatch('close');
+		}
+	}
+</script>
+
+<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="flex flex-wrap gap-4 mr-4 justify-center content-center">
+			{#each adventures as adventure}
+				<AdventureCard type="link" {adventure} on:link={add} />
+			{/each}
+		</div>
+		<button class="btn btn-primary" on:click={close}>Close</button>
+	</div>
+</dialog>

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>