notes beta

frontend/src/lib/components/NoteCard.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { addToast } from '$lib/toasts';
+	import type { Note } from '$lib/types';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	import Launch from '~icons/mdi/launch';
+	import FileDocumentEdit from '~icons/mdi/file-document-edit';
+
+	export let note: Note;
+
+	function editNote() {
+		dispatch('edit', note);
+	}
+</script>
+
+<div
+	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
+>
+	<div class="card-body">
+		<h2 class="card-title overflow-ellipsis">{note.name}</h2>
+		<div class="card-actions justify-end">
+			<button class="btn btn-neutral mb-2" on:click={() => goto(`/notes/${note.id}`)}
+				><Launch class="w-6 h-6" />Open Details</button
+			>
+			<button class="btn btn-neutral mb-2" on:click={editNote}>
+				<FileDocumentEdit class="w-6 h-6" />Edit note
+			</button>
+		</div>
+	</div>
+</div>

frontend/src/lib/components/NoteModal.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import type { Note } from '$lib/types';
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+	import { onMount } from 'svelte';
+	let modal: HTMLDialogElement;
+
+	export let note: Note;
+	export let startDate: string | null = null;
+	export let endDate: string | null = null;
+
+	let initialName: string = note.name;
+
+	onMount(() => {
+		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
+		if (modal) {
+			modal.showModal();
+		}
+	});
+
+	function close() {
+		dispatch('close');
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			dispatch('close');
+		}
+	}
+
+	async function save() {}
+</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">
+		<h3 class="font-bold text-lg">Note Editor</h3>
+		{#if initialName !== note.name}
+			<p>Editing note {initialName}</p>
+		{/if}
+
+		<form>
+			<div class="form-control mb-2">
+				<label for="name">Name</label>
+				<input
+					type="text"
+					id="name"
+					class="input input-bordered w-full max-w-xs"
+					bind:value={note.name}
+				/>
+			</div>
+			<div class="form-control mb-2">
+				<label for="content">Date</label>
+				<input
+					type="date"
+					id="date"
+					name="date"
+					min={startDate || ''}
+					max={endDate || ''}
+					bind:value={note.date}
+					class="input input-bordered w-full max-w-xs mt-1"
+				/>
+			</div>
+			<div class="form-control mb-2">
+				<label for="content">Content</label>
+				<textarea id="content" class="textarea textarea-bordered" bind:value={note.content} rows="5"
+				></textarea>
+			</div>
+
+			<button class="btn btn-neutral" on:click={close}>Close</button>
+			<button class="btn btn-primary" on:click={save}>Save</button>
+		</form>
+	</div>
+</dialog>

frontend/src/routes/collections/[id]/+page.svelte

@@ -15,6 +15,8 @@
 	import TransportationCard from '$lib/components/TransportationCard.svelte';
 	import EditTransportation from '$lib/components/EditTransportation.svelte';
 	import NewTransportation from '$lib/components/NewTransportation.svelte';
+	import NoteCard from '$lib/components/NoteCard.svelte';
+	import NoteModal from '$lib/components/NoteModal.svelte';
 
 	export let data: PageData;
 	console.log(data);
@@ -180,6 +182,8 @@
 	let transportationToEdit: Transportation;
 	let isEditModalOpen: boolean = false;
 	let isTransportationEditModalOpen: boolean = false;
+	let isNoteModalOpen: boolean = false;
+	let noteToEdit: Note;
 
 	let newType: string;
 
@@ -239,6 +243,15 @@
 	/>
 {/if}
 
+{#if isNoteModalOpen}
+	<NoteModal
+		note={noteToEdit}
+		on:close={() => (isNoteModalOpen = false)}
+		startDate={collection.start_date}
+		endDate={collection.end_date}
+	/>
+{/if}
+
 {#if isShowingCreateModal}
 	<NewAdventure
 		type={newType}
@@ -484,11 +497,13 @@
 				{#if notes.length > 0}
 					{#each notes as note}
 						{#if note.date && new Date(note.date).toISOString().split('T')[0] === dateString}
-							<div class="bg-base-300 p-4 rounded-lg w-full">
-								<p class="text-lg font-semibold">{note.name}</p>
-								<p class="text-md">{note.date}</p>
-								<p>{note.content}</p>
-							</div>
+							<NoteCard
+								{note}
+								on:edit={(event) => {
+									noteToEdit = event.detail;
+									isNoteModalOpen = true;
+								}}
+							/>
 						{/if}
 					{/each}
 				{/if}
@@ -502,7 +517,7 @@
 
 		<MapLibre
 			style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
-			class="flex items-center self-center justify-center aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max-h-full w-10/12"
+			class="flex items-center self-center justify-center aspect-[9/16] max-h-[70vh] sm:aspect-video sm:max-h-full w-10/12 mt-4"
 			standardControls
 		>
 			<!-- MapEvents gives you access to map events even from other components inside the map,