notes beta

backend/server/adventures/migrations/0018_note_links.py

@@ -0,0 +1,19 @@
+# Generated by Django 5.0.7 on 2024-08-04 13:19
+
+import django.contrib.postgres.fields
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('adventures', '0017_alter_note_date'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='note',
+            name='links',
+            field=django.contrib.postgres.fields.ArrayField(base_field=models.URLField(), blank=True, null=True, size=None),
+        ),
+    ]

backend/server/adventures/models.py

@@ -116,6 +116,7 @@ class Note(models.Model):
         User, on_delete=models.CASCADE, default=default_user_id)
     name = models.CharField(max_length=200)
     content = models.TextField(blank=True, null=True)
+    links = ArrayField(models.URLField(), blank=True, null=True)
     date = models.DateField(blank=True, null=True)
     is_public = models.BooleanField(default=False)
     collection = models.ForeignKey('Collection', on_delete=models.CASCADE, blank=True, null=True)

frontend/src/lib/components/NoteCard.svelte

@@ -21,11 +21,11 @@
 	<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}`)}
+			<!-- <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
+				<Launch class="w-6 h-6" />Open
 			</button>
 		</div>
 	</div>

frontend/src/lib/components/NoteModal.svelte

@@ -1,15 +1,31 @@
 <script lang="ts">
-	import type { Note } from '$lib/types';
+	import type { Collection, Note } from '$lib/types';
 	import { createEventDispatcher } from 'svelte';
 	const dispatch = createEventDispatcher();
 	import { onMount } from 'svelte';
 	let modal: HTMLDialogElement;
 
-	export let note: Note;
+	export let note: Note | null = null;
+	export let collection: Collection;
+
+	let editing: boolean = true;
+
+	console.log(collection);
+
+	let newNote = {
+		name: note?.name || '',
+		content: note?.content || '',
+		date: note?.date || '',
+		links: note?.links || [],
+		collection: collection.id,
+		is_public: collection.is_public
+	};
+	console.log(note);
+
 	export let startDate: string | null = null;
 	export let endDate: string | null = null;
 
-	let initialName: string = note.name;
+	let initialName: string = note?.name || '';
 
 	onMount(() => {
 		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
@@ -28,7 +44,40 @@
 		}
 	}
 
-	async function save() {}
+	async function save() {
+		if (note && note.id) {
+			const res = await fetch(`/api/notes/${note.id}`, {
+				method: 'PATCH',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(newNote)
+			});
+			if (res.ok) {
+				let data = await res.json();
+				if (data) {
+					dispatch('save', data);
+				}
+			} else {
+				console.error('Failed to save note');
+			}
+		} else {
+			const res = await fetch(`/api/notes/`, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(newNote)
+			});
+			if (res.ok) {
+				dispatch('close');
+			} else {
+				let data = await res.json();
+				console.error('Failed to save note', data);
+				console.error('Failed to save note');
+			}
+		}
+	}
 </script>
 
 <dialog id="my_modal_1" class="modal">
@@ -36,8 +85,8 @@
 	<!-- 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}
+		{#if initialName}
-			<p>Editing note {initialName}</p>
+			<p class="font-semibold text-md mb-2">Editing note {initialName}</p>
 		{/if}
 
 		<form>
@@ -47,7 +96,7 @@
 					type="text"
 					id="name"
 					class="input input-bordered w-full max-w-xs"
-					bind:value={note.name}
+					bind:value={newNote.name}
 				/>
 			</div>
 			<div class="form-control mb-2">
@@ -58,18 +107,26 @@
 					name="date"
 					min={startDate || ''}
 					max={endDate || ''}
-					bind:value={note.date}
+					bind:value={newNote.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
+					id="content"
+					class="textarea textarea-bordered"
+					bind:value={newNote.content}
+					rows="5"
 				></textarea>
 			</div>
-
+			{#if collection.is_public}
-			<button class="btn btn-neutral" on:click={close}>Close</button>
+				<p class="text-warning mb-1">
+					This note will be public because it is in a public collection.
+				</p>
+			{/if}
 			<button class="btn btn-primary" on:click={save}>Save</button>
+			<button class="btn btn-neutral" on:click={close}>Close</button>
 		</form>
 	</div>
 </dialog>

frontend/src/lib/types.ts

@@ -110,9 +110,10 @@ export type Note = {
 	user_id: number;
 	name: string;
 	content: string | null;
+	links: string[] | null;
 	date: string | null; // ISO 8601 date string
 	is_public: boolean;
-	collection: Collection | null;
+	collection: number | null;
 	created_at: string; // ISO 8601 date string
 	updated_at: string; // ISO 8601 date string
 };

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

@@ -249,6 +249,17 @@
 		on:close={() => (isNoteModalOpen = false)}
 		startDate={collection.start_date}
 		endDate={collection.end_date}
+		{collection}
+		on:save={(event) => {
+			notes = notes.map((note) => {
+				if (note.id === event.detail.id) {
+					return event.detail;
+				}
+				return note;
+			});
+			isNoteModalOpen = false;
+		}}
+		on:close={() => (isNoteModalOpen = false)}
 	/>
 {/if}
 
@@ -371,6 +382,15 @@
 						>
 							Transportation</button
 						>
+						<button
+							class="btn btn-primary"
+							on:click={() => {
+								isNoteModalOpen = true;
+								newType = '';
+							}}
+						>
+							Note</button
+						>
 
 						<!-- <button
 			class="btn btn-primary"
@@ -462,6 +482,7 @@
 				transportations,
 				new Date(collection.start_date)
 			)[dateString]}
+			{@const dayNotes = groupNotesByDate(notes, new Date(collection.start_date))[dateString]}
 
 			<h2 class="text-center font-semibold text-2xl mb-2 mt-4">
 				Day {i + 1} - {currentDate.toLocaleDateString('en-US', { timeZone: 'UTC' })}
@@ -494,23 +515,20 @@
 						/>
 					{/each}
 				{/if}
-				{#if notes.length > 0}
+				{#if dayNotes.length > 0}
-					{#each notes as note}
+					{#each dayNotes as note}
-						{#if note.date && new Date(note.date).toISOString().split('T')[0] === dateString}
+						<NoteCard
-							<NoteCard
+							{note}
-								{note}
+							on:edit={(event) => {
-								on:edit={(event) => {
+								noteToEdit = event.detail;
-									noteToEdit = event.detail;
+								isNoteModalOpen = true;
-									isNoteModalOpen = true;
+							}}
-								}}
+						/>
-							/>
-						{/if}
 					{/each}
 				{/if}
-				{#if dayAdventures.length == 0 && dayTransportations.length == 0}
+
-					<p class="text-center text-lg mt-2">
+				{#if dayAdventures.length == 0 && dayTransportations.length == 0 && dayNotes.length == 0}
-						No adventures or transportaions planned for this day.
+					<p class="text-center text-lg mt-2">Nothing planned for this day. Enjoy the journey!</p>
-					</p>
 				{/if}
 			</div>
 		{/each}