refactor: Update validation error message in Transportation model clean method

backend/server/adventures/models.py

@@ -105,7 +105,7 @@ class Transportation(models.Model):
     def clean(self):
         if self.collection:
             if self.collection.is_public and not self.is_public:
-                raise ValidationError('Transportations associated with a public collection must be public. Collection: ' + self.trip.name + ' Transportation: ' + self.name)
+                raise ValidationError('Transportations associated with a public collection must be public. Collection: ' + self.collection.name + ' Transportation: ' + self.name)
             if self.user_id != self.collection.user_id:
                 raise ValidationError('Transportations must be associated with collections owned by the same user. Collection owner: ' + self.collection.user_id.username + ' Transportation owner: ' + self.user_id.username)
 

backend/server/adventures/views.py

@@ -271,26 +271,6 @@ class CollectionViewSet(viewsets.ModelViewSet):
     def perform_create(self, serializer):
         serializer.save(user_id=self.request.user)
     
-    # @action(detail=False, methods=['get'])
-    # def filtered(self, request):
-    #     types = request.query_params.get('types', '').split(',')
-    #     valid_types = ['visited', 'planned']
-    #     types = [t for t in types if t in valid_types]
-
-    #     if not types:
-    #         return Response({"error": "No valid types provided"}, status=400)
-
-    #     queryset = Collection.objects.none()
-
-    #     for adventure_type in types:
-    #         if adventure_type in ['visited', 'planned']:
-    #             queryset |= Collection.objects.filter(
-    #                 type=adventure_type, user_id=request.user.id)
-
-    #     queryset = self.apply_sorting(queryset)
-    #     collections = self.paginate_and_respond(queryset, request)
-    #     return collections
-    
     def paginate_and_respond(self, queryset, request):
         paginator = self.pagination_class()
         page = paginator.paginate_queryset(queryset, request)
@@ -300,14 +280,6 @@ class CollectionViewSet(viewsets.ModelViewSet):
         serializer = self.get_serializer(queryset, many=True)
         return Response(serializer.data)
     
-    # make a view to return all of the associated transportations with a collection
-    @action(detail=True, methods=['get'])
-    def transportations(self, request, pk=None):
-        collection = self.get_object()
-        transportations = Transportation.objects.filter(collection=collection)
-        serializer = TransportationSerializer(transportations, many=True)
-        return Response(serializer.data)
-    
 class StatsViewSet(viewsets.ViewSet):
     permission_classes = [IsAuthenticated]
 

frontend/src/lib/components/EditTransportation.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+	export let transportationToEdit: Transportation;
+	import { createEventDispatcher } from 'svelte';
+	import type { Transportation } from '$lib/types';
+	const dispatch = createEventDispatcher();
+	import { onMount } from 'svelte';
+	import { addToast } from '$lib/toasts';
+	let modal: HTMLDialogElement;
+
+	console.log(transportationToEdit.id);
+
+	let originalName = transportationToEdit.name;
+
+	let isPointModalOpen: boolean = false;
+
+	import MapMarker from '~icons/mdi/map-marker';
+	import Calendar from '~icons/mdi/calendar';
+	import Notebook from '~icons/mdi/notebook';
+	import ClipboardList from '~icons/mdi/clipboard-list';
+	import Image from '~icons/mdi/image';
+	import Star from '~icons/mdi/star';
+	import Attachment from '~icons/mdi/attachment';
+	import PointSelectionModal from './PointSelectionModal.svelte';
+	import Earth from '~icons/mdi/earth';
+	import TransportationCard from './TransportationCard.svelte';
+
+	onMount(async () => {
+		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
+		if (modal) {
+			modal.showModal();
+		}
+	});
+
+	if (transportationToEdit.date) {
+		transportationToEdit.date = transportationToEdit.date.slice(0, 19);
+	}
+
+	function submit() {}
+
+	function close() {
+		dispatch('close');
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			close();
+		}
+	}
+
+	async function handleSubmit(event: Event) {
+		event.preventDefault();
+		const form = event.target as HTMLFormElement;
+		const formData = new FormData(form);
+
+		const response = await fetch(form.action, {
+			method: form.method,
+			body: formData
+		});
+
+		if (response.ok) {
+			const result = await response.json();
+			const data = JSON.parse(result.data);
+			console.log(data);
+
+			if (data) {
+				addToast('success', 'Adventure edited successfully!');
+				dispatch('saveEdit', transportationToEdit);
+				close();
+			} else {
+				addToast('warning', 'Error editing adventure');
+				console.log('Error editing adventure');
+			}
+		}
+	}
+</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">Edit Transportation: {originalName}</h3>
+		<div
+			class="modal-action items-center"
+			style="display: flex; flex-direction: column; align-items: center; width: 100%;"
+		>
+			<form method="post" style="width: 100%;" on:submit={handleSubmit} action="/collections?/edit">
+				<div class="mb-2">
+					<input
+						type="text"
+						id="adventureId"
+						name="adventureId"
+						hidden
+						readonly
+						bind:value={transportationToEdit.id}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+					<label for="name">Name</label><br />
+					<input
+						type="text"
+						name="name"
+						id="name"
+						bind:value={transportationToEdit.name}
+						class="input input-bordered w-full max-w-xs mt-1"
+					/>
+				</div>
+				<div class="mb-2">
+					<label for="date">Description <Notebook class="inline-block -mt-1 mb-1 w-6 h-6" /></label
+					><br />
+					<div class="flex">
+						<input
+							type="text"
+							id="description"
+							name="description"
+							bind:value={transportationToEdit.description}
+							class="input input-bordered w-full max-w-xs mt-1 mb-2"
+						/>
+
+						<!-- <button
+                class="btn btn-neutral ml-2"
+                type="button"
+                on:click={generate}
+                ><iconify-icon icon="mdi:wikipedia" class="text-xl -mb-1"
+                ></iconify-icon>Generate Description</button
+              > -->
+					</div>
+					<div class="mb-2">
+						<label for="start_date"
+							>Date & Time <Calendar class="inline-block mb-1 w-6 h-6" /></label
+						><br />
+						<input
+							type="datetime-local"
+							id="date"
+							name="date"
+							bind:value={transportationToEdit.date}
+							class="input input-bordered w-full max-w-xs mt-1"
+						/>
+					</div>
+					<div class="mb-2">
+						<label for="end_date">End Date <Calendar class="inline-block mb-1 w-6 h-6" /></label><br
+						/>
+					</div>
+				</div>
+				<div class="mb-2">
+					<label for="is_public">Public <Earth class="inline-block -mt-1 mb-1 w-6 h-6" /></label><br
+					/>
+					<input
+						type="checkbox"
+						class="toggle toggle-primary"
+						id="is_public"
+						name="is_public"
+						bind:checked={transportationToEdit.is_public}
+					/>
+				</div>
+
+				{#if transportationToEdit.is_public}
+					<div class="bg-neutral p-4 rounded-md shadow-sm">
+						<p class=" font-semibold">Share this Adventure!</p>
+						<div class="flex items-center justify-between">
+							<p class="text-card-foreground font-mono">
+								{window.location.origin}/collections/{transportationToEdit.id}
+							</p>
+							<button
+								type="button"
+								on:click={() => {
+									navigator.clipboard.writeText(
+										`${window.location.origin}/collections/${transportationToEdit.id}`
+									);
+								}}
+								class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 h-10 px-4 py-2"
+							>
+								Copy Link
+							</button>
+						</div>
+					</div>
+				{/if}
+
+				<button type="submit" class="btn btn-primary mr-4 mt-4" on:click={submit}>Edit</button>
+				<!-- if there is a button in form, it will close the modal -->
+				<button class="btn mt-4" on:click={close}>Close</button>
+			</form>
+			<div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
+		</div>
+	</div>
+</dialog>

frontend/src/lib/components/TransportationCard.svelte

@@ -7,36 +7,32 @@
 	import FileDocumentEdit from '~icons/mdi/file-document-edit';
 
 	import { goto } from '$app/navigation';
-	import type { Collection } from '$lib/types';
+	import type { Collection, Transportation } from '$lib/types';
 	import { addToast } from '$lib/toasts';
 
 	import Plus from '~icons/mdi/plus';
 
 	const dispatch = createEventDispatcher();
 
-	export let type: String | undefined | null;
+	export let transportation: Transportation;
 
-	//   export let type: String;
+	function editTransportation() {
-
+		dispatch('edit', transportation);
-	function editAdventure() {
-		dispatch('edit', collection);
 	}
 
-	export let collection: Collection;
+	async function deleteTransportation() {
-
+		let res = await fetch(`/api/transportations/${transportation.id}`, {
-	async function deleteCollection() {
+			method: 'DELETE',
-		let res = await fetch(`/collections/${collection.id}?/delete`, {
-			method: 'POST',
 			headers: {
-				'Content-Type': 'application/x-www-form-urlencoded'
+				'Content-Type': 'application/json'
 			}
 		});
-		if (res.ok) {
+		if (!res.ok) {
-			console.log('Collection deleted');
+			console.log('Error deleting transportation');
-			addToast('info', 'Adventure deleted successfully!');
-			dispatch('delete', collection.id);
 		} else {
-			console.log('Error deleting adventure');
+			console.log('Collection deleted');
+			addToast('info', 'Transportation deleted successfully!');
+			dispatch('delete', transportation.id);
 		}
 	}
 </script>
@@ -45,39 +41,23 @@
 	class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
 >
 	<div class="card-body">
-		<h2 class="card-title overflow-ellipsis">{collection.name}</h2>
+		<h2 class="card-title overflow-ellipsis">{transportation.name}</h2>
-		<p>{collection.adventures.length} Adventures</p>
+		<div class="badge badge-secondary">{transportation.type}</div>
-		{#if collection.start_date && collection.end_date}
+		{#if transportation.from_location && transportation.to_location}
-			<p>
+			<p class="text-sm">
-				Dates: {new Date(collection.start_date).toLocaleDateString('en-US', { timeZone: 'UTC' })} - {new Date(
+				{transportation.from_location} to {transportation.to_location}
-					collection.end_date
-				).toLocaleDateString('en-US', { timeZone: 'UTC' })}
 			</p>
-			<!-- display the duration in days -->
+		{/if}
-			<p>
+		{#if transportation.date}
-				Duration: {Math.floor(
+			{new Date(transportation.date).toLocaleString()}
-					(new Date(collection.end_date).getTime() - new Date(collection.start_date).getTime()) /
+		{/if}
-						(1000 * 60 * 60 * 24)
-				) + 1}{' '}
-				days
-			</p>{/if}
 		<div class="card-actions justify-end">
-			{#if type != 'link'}
+			<button on:click={deleteTransportation} class="btn btn-secondary"
-				<button on:click={deleteCollection} class="btn btn-secondary"
+				><TrashCanOutline class="w-5 h-5 mr-1" /></button
-					><TrashCanOutline class="w-5 h-5 mr-1" /></button
+			>
-				>
+			<button class="btn btn-primary" on:click={editTransportation}>
-				<button class="btn btn-primary" on:click={editAdventure}>
+				<FileDocumentEdit class="w-6 h-6" />
-					<FileDocumentEdit class="w-6 h-6" />
+			</button>
-				</button>
-				<button class="btn btn-primary" on:click={() => goto(`/collections/${collection.id}`)}
-					><Launch class="w-5 h-5 mr-1" /></button
-				>
-			{/if}
-			{#if type == 'link'}
-				<button class="btn btn-primary" on:click={() => dispatch('link', collection.id)}>
-					<Plus class="w-5 h-5 mr-1" />
-				</button>
-			{/if}
 		</div>
 	</div>
 </div>

frontend/src/routes/api/[...path]/+server.ts

@@ -27,7 +27,7 @@ export async function PUT({ url, params, request, fetch, cookies }) {
 }
 
 export async function DELETE({ url, params, request, fetch, cookies }) {
-	return handleRequest(url, params, request, fetch, cookies);
+	return handleRequest(url, params, request, fetch, cookies, true);
 }
 
 // Implement other HTTP methods as needed (PUT, DELETE, etc.)
@@ -62,6 +62,14 @@ async function handleRequest(
 			body: request.method !== 'GET' && request.method !== 'HEAD' ? await request.text() : undefined
 		});
 
+		if (response.status === 204) {
+			// For 204 No Content, return a response with no body
+			return new Response(null, {
+				status: 204,
+				headers: response.headers
+			});
+		}
+
 		const responseData = await response.text();
 
 		return new Response(responseData, {

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Adventure, Collection } from '$lib/types';
+	import type { Adventure, Collection, Transportation } from '$lib/types';
 	import { onMount } from 'svelte';
 	import type { PageData } from './$types';
 	import { goto } from '$app/navigation';
@@ -12,6 +12,8 @@
 	import NotFound from '$lib/components/NotFound.svelte';
 	import NewAdventure from '$lib/components/NewAdventure.svelte';
 	import { DefaultMarker, MapEvents, MapLibre, Popup } from 'svelte-maplibre';
+	import TransportationCard from '$lib/components/TransportationCard.svelte';
+	import EditTransportation from '$lib/components/EditTransportation.svelte';
 
 	export let data: PageData;
 
@@ -19,6 +21,7 @@
 
 	let adventures: Adventure[] = [];
 	let numVisited: number = 0;
+	let transportations: Transportation[] = [];
 
 	let numberOfDays: number = NaN;
 
@@ -44,6 +47,9 @@
 						(1000 * 60 * 60 * 24)
 				) + 1;
 		}
+		if (collection.transportations) {
+			transportations = collection.transportations;
+		}
 	});
 
 	function deleteAdventure(event: CustomEvent<number>) {
@@ -117,7 +123,9 @@
 	}
 
 	let adventureToEdit: Adventure;
+	let transportationToEdit: Transportation;
 	let isEditModalOpen: boolean = false;
+	let isTransportationEditModalOpen: boolean = false;
 
 	let newType: string;
 
@@ -147,6 +155,13 @@
 	/>
 {/if}
 
+{#if isTransportationEditModalOpen}
+	<EditTransportation
+		{transportationToEdit}
+		on:close={() => (isTransportationEditModalOpen = false)}
+	/>
+{/if}
+
 {#if isEditModalOpen}
 	<EditAdventure
 		{adventureToEdit}
@@ -297,11 +312,17 @@
 
 	{#if collection.transportations && collection.transportations.length > 0}
 		<h1 class="text-center font-bold text-4xl mt-4 mb-2">Transportation</h1>
-		{#each collection.transportations as transportation}
+		{#each transportations as transportation}
-			<p>{transportation.id}</p>
+			<TransportationCard
-			<p>{transportation.name}</p>
+				{transportation}
-			<p>{transportation.type}</p>
+				on:delete={(event) => {
-			<p>{transportation.date}</p>
+					transportations = transportations.filter((t) => t.id != event.detail);
+				}}
+				on:edit={(event) => {
+					transportationToEdit = event.detail;
+					isTransportationEditModalOpen = true;
+				}}
+			/>
 		{/each}
 	{/if}