Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-24 07:19:36 +02:00
Code Issues Releases Activity

edit transportation

Browse source
This commit is contained in:
Sean Morley 2024-07-27 22:18:52 -04:00
parent 581e5548d5
commit 2e2932a030
3 changed files with 112 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

159
frontend/src/lib/components/EditTransportation.svelte
View file

@ -35,8 +35,6 @@
transportationToEdit.date = transportationToEdit.date.slice(0, 19); transportationToEdit.date = transportationToEdit.date.slice(0, 19);
} }
function submit() {}
function close() { function close() {
dispatch('close'); dispatch('close');
} }
@ -52,24 +50,21 @@
const form = event.target as HTMLFormElement; const form = event.target as HTMLFormElement;
const formData = new FormData(form); const formData = new FormData(form);
const response = await fetch(form.action, { const response = await fetch(`/api/transportations/${transportationToEdit.id}/`, {
method: form.method, method: 'PUT',
body: formData body: formData
}); });
if (response.ok) { if (response.ok) {
const result = await response.json(); const result = await response.json();
const data = JSON.parse(result.data);
console.log(data);
if (data) { transportationToEdit = result;
addToast('success', 'Adventure edited successfully!');
dispatch('saveEdit', transportationToEdit); addToast('success', 'Adventure edited successfully!');
close(); dispatch('saveEdit', transportationToEdit);
} else { close();
addToast('warning', 'Error editing adventure'); } else {
console.log('Error editing adventure'); addToast('error', 'Error editing adventure');
}
} }
} }
</script> </script>
@ -83,17 +78,37 @@
class="modal-action items-center" class="modal-action items-center"
style="display: flex; flex-direction: column; align-items: center; width: 100%;" 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"> <div class="mb-2">
<input <input
type="text" type="text"
id="adventureId" id="id"
name="adventureId" name="id"
hidden hidden
readonly readonly
bind:value={transportationToEdit.id} bind:value={transportationToEdit.id}
class="input input-bordered w-full max-w-xs mt-1" 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 /> <label for="name">Name</label><br />
<input <input
type="text" type="text"
@ -114,14 +129,6 @@
bind:value={transportationToEdit.description} bind:value={transportationToEdit.description}
class="input input-bordered w-full max-w-xs mt-1 mb-2" 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>
<div class="mb-2"> <div class="mb-2">
<label for="start_date" <label for="start_date"
@ -136,45 +143,77 @@
/> />
</div> </div>
<div class="mb-2"> <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> </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} <button type="submit" class="btn btn-primary mr-4 mt-4">Edit</button>
<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 --> <!-- if there is a button in form, it will close the modal -->
<button class="btn mt-4" on:click={close}>Close</button> <button class="btn mt-4" on:click={close}>Close</button>
</form> </form>

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

@ -15,7 +15,7 @@ export async function GET({ url, params, request, fetch, cookies }) {
/** @type {import('./$types').RequestHandler} */ /** @type {import('./$types').RequestHandler} */
export async function POST({ url, params, request, fetch, cookies }) { 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 }) { 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 }) { 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 }) { export async function DELETE({ url, params, request, fetch, cookies }) {

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

@ -134,6 +134,16 @@
isEditModalOpen = true; 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>) { function saveEdit(event: CustomEvent<Adventure>) {
adventures = adventures.map((adventure) => { adventures = adventures.map((adventure) => {
if (adventure.id === event.detail.id) { if (adventure.id === event.detail.id) {
@ -159,6 +169,7 @@
<EditTransportation <EditTransportation
{transportationToEdit} {transportationToEdit}
on:close={() => (isTransportationEditModalOpen = false)} on:close={() => (isTransportationEditModalOpen = false)}
on:saveEdit={saveNewTransportation}
/> />
{/if} {/if}