From 2e2932a0304bbcddf56fd273fa440309dbdc9acc Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 27 Jul 2024 22:18:52 -0400
Subject: [PATCH] edit transportation

---
 .../lib/components/EditTransportation.svelte  | 159 +++++++++++-------
 frontend/src/routes/api/[...path]/+server.ts  |   4 +-
 .../src/routes/collections/[id]/+page.svelte  |  11 ++
 3 files changed, 112 insertions(+), 62 deletions(-)

diff --git a/frontend/src/lib/components/EditTransportation.svelte b/frontend/src/lib/components/EditTransportation.svelte
index 8dd892c..02208b6 100644
--- a/frontend/src/lib/components/EditTransportation.svelte
+++ b/frontend/src/lib/components/EditTransportation.svelte
@@ -35,8 +35,6 @@
 		transportationToEdit.date = transportationToEdit.date.slice(0, 19);
 	}
 
-	function submit() {}
-
 	function close() {
 		dispatch('close');
 	}
@@ -52,24 +50,21 @@
 		const form = event.target as HTMLFormElement;
 		const formData = new FormData(form);
 
-		const response = await fetch(form.action, {
-			method: form.method,
+		const response = await fetch(`/api/transportations/${transportationToEdit.id}/`, {
+			method: 'PUT',
 			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');
-			}
+			transportationToEdit = result;
+
+			addToast('success', 'Adventure edited successfully!');
+			dispatch('saveEdit', transportationToEdit);
+			close();
+		} else {
+			addToast('error', 'Error editing adventure');
 		}
 	}
 </script>
@@ -83,17 +78,37 @@
 			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">
+			<form method="post" style="width: 100%;" on:submit={handleSubmit}>
 				<div class="mb-2">
 					<input
 						type="text"
-						id="adventureId"
-						name="adventureId"
+						id="id"
+						name="id"
 						hidden
 						readonly
 						bind:value={transportationToEdit.id}
 						class="input input-bordered w-full max-w-xs mt-1"
 					/>
+					<div class="mb-2">
+						<label for="type">Type <Calendar class="inline-block mb-1 w-6 h-6" /></label><br />
+						<select
+							class="select select-bordered w-full max-w-xs"
+							name="type"
+							id="type"
+							bind:value={transportationToEdit.type}
+						>
+							<option disabled selected>Transport Type</option>
+							<option value="car">Car</option>
+							<option value="plane">Plane</option>
+							<option value="train">Train</option>
+							<option value="bus">Bus</option>
+							<option value="boat">Boat</option>
+							<option value="bike">Bike</option>
+							<option value="walking">Walking</option>
+							<option value="other">Other</option>
+						</select>
+					</div>
+
 					<label for="name">Name</label><br />
 					<input
 						type="text"
@@ -114,14 +129,6 @@
 							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"
@@ -136,45 +143,77 @@
 						/>
 					</div>
 					<div class="mb-2">
-						<label for="end_date">End Date <Calendar class="inline-block mb-1 w-6 h-6" /></label><br
+						<label for="rating">Rating <Star class="inline-block mb-1 w-6 h-6" /></label><br />
+						<input
+							type="number"
+							max="5"
+							min="0"
+							id="rating"
+							name="rating"
+							bind:value={transportationToEdit.rating}
+							class="input input-bordered w-full max-w-xs mt-1"
+						/>
+					</div>
+					<div class="mb-2">
+						<label for="rating">Link <Star class="inline-block mb-1 w-6 h-6" /></label><br />
+						<input
+							type="url"
+							id="link"
+							name="link"
+							bind:value={transportationToEdit.link}
+							class="input input-bordered w-full max-w-xs mt-1"
+						/>
+					</div>
+					<div class="mb-2">
+						<label for="rating">Rating <Star class="inline-block mb-1 w-6 h-6" /></label><br />
+						<input
+							type="number"
+							max="5"
+							min="0"
+							id="rating"
+							name="rating"
+							bind:value={transportationToEdit.rating}
+							class="input input-bordered w-full max-w-xs mt-1"
+						/>
+					</div>
+					{#if transportationToEdit.type == 'plane'}
+						<div class="mb-2">
+							<label for="flight_number"
+								>Flight Number <Star class="inline-block mb-1 w-6 h-6" /></label
+							><br />
+							<input
+								type="text"
+								id="flight_number"
+								name="flight_number"
+								bind:value={transportationToEdit.flight_number}
+								class="input input-bordered w-full max-w-xs mt-1"
+							/>
+						</div>
+					{/if}
+					<div class="mb-2">
+						<label for="rating">From Location <Star class="inline-block mb-1 w-6 h-6" /></label><br
+						/>
+						<input
+							type="text"
+							id="from_location"
+							name="from_location"
+							bind:value={transportationToEdit.from_location}
+							class="input input-bordered w-full max-w-xs mt-1"
+						/>
+					</div>
+					<div class="mb-2">
+						<label for="rating">To Location <Star class="inline-block mb-1 w-6 h-6" /></label><br />
+						<input
+							type="text"
+							id="to_location"
+							name="to_location"
+							bind:value={transportationToEdit.to_location}
+							class="input input-bordered w-full max-w-xs mt-1"
 						/>
 					</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>
+				<button type="submit" class="btn btn-primary mr-4 mt-4">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>
diff --git a/frontend/src/routes/api/[...path]/+server.ts b/frontend/src/routes/api/[...path]/+server.ts
index 0d237c2..981debb 100644
--- a/frontend/src/routes/api/[...path]/+server.ts
+++ b/frontend/src/routes/api/[...path]/+server.ts
@@ -15,7 +15,7 @@ export async function GET({ url, params, request, fetch, cookies }) {
 
 /** @type {import('./$types').RequestHandler} */
 export async function POST({ url, params, request, fetch, cookies }) {
-	return handleRequest(url, params, request, fetch, cookies);
+	return handleRequest(url, params, request, fetch, cookies, true);
 }
 
 export async function PATCH({ url, params, request, fetch, cookies }) {
@@ -23,7 +23,7 @@ export async function PATCH({ url, params, request, fetch, cookies }) {
 }
 
 export async function PUT({ url, params, request, fetch, cookies }) {
-	return handleRequest(url, params, request, fetch, cookies);
+	return handleRequest(url, params, request, fetch, cookies, true);
 }
 
 export async function DELETE({ url, params, request, fetch, cookies }) {
diff --git a/frontend/src/routes/collections/[id]/+page.svelte b/frontend/src/routes/collections/[id]/+page.svelte
index a005b33..eeaa9ac 100644
--- a/frontend/src/routes/collections/[id]/+page.svelte
+++ b/frontend/src/routes/collections/[id]/+page.svelte
@@ -134,6 +134,16 @@
 		isEditModalOpen = true;
 	}
 
+	function saveNewTransportation(event: CustomEvent<Transportation>) {
+		transportations = transportations.map((transportation) => {
+			if (transportation.id === event.detail.id) {
+				return event.detail;
+			}
+			return transportation;
+		});
+		isTransportationEditModalOpen = false;
+	}
+
 	function saveEdit(event: CustomEvent<Adventure>) {
 		adventures = adventures.map((adventure) => {
 			if (adventure.id === event.detail.id) {
@@ -159,6 +169,7 @@
 	<EditTransportation
 		{transportationToEdit}
 		on:close={() => (isTransportationEditModalOpen = false)}
+		on:saveEdit={saveNewTransportation}
 	/>
 {/if}