AdventureLog/frontend/src/lib/components/NewTransportation.svelte

<script lang="ts">
	// let newTransportation: Transportation = {
	// 	id:NaN,
	// 	user_id: NaN,
	// 	type: '',
	// 	name: '',
	// 	description: null,
	// 	rating: NaN,
	// 	link: null,
	// 	date: null,
	// 	flight_number: null,
	// 	from_location: null,
	// 	to_location: null,
	// 	is_public: false,
	// 	collection: null,
	// 	created_at: '',
	// 	updated_at: ''
	// };
	import { createEventDispatcher } from 'svelte';
	import type { Collection, Transportation } from '$lib/types';
	const dispatch = createEventDispatcher();
	import { onMount } from 'svelte';
	import { addToast } from '$lib/toasts';
	let modal: HTMLDialogElement;

	export let collection: Collection;

	import MapMarker from '~icons/mdi/map-marker';
	import Calendar from '~icons/mdi/calendar';
	import Notebook from '~icons/mdi/notebook';
	import Star from '~icons/mdi/star';
	import PlaneCar from '~icons/mdi/plane-car';
	import LinkVariant from '~icons/mdi/link-variant';
	import Airplane from '~icons/mdi/airplane';

	export let startDate: string | null = null;
	export let endDate: string | null = null;

	let fullStartDate: string = '';
	let fullEndDate: string = '';

	if (startDate && endDate) {
		fullStartDate = `${startDate}T00:00`;
		fullEndDate = `${endDate}T23:59`;
	}

	let type: string = '';

	onMount(async () => {
		modal = document.getElementById('my_modal_1') as HTMLDialogElement;
		if (modal) {
			modal.showModal();
		}
	});

	// if (newTransportation.date) {
	// 	newTransportation.date = newTransportation.date.slice(0, 19);
	// }

	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(`/api/transportations/`, {
			method: 'POST',
			body: formData
		});

		if (response.ok) {
			const result = await response.json();

			addToast('success', 'Transportation added successfully!');
			dispatch('add', result);
			close();
		} else {
			addToast('error', 'Error editing transportation');
		}
	}
</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">New Transportation</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}>
				<div class="mb-2">
					<!-- <input
						type="text"
						id="id"
						name="id"
						hidden
						readonly
						bind:value={newTransportation.id}
						class="input input-bordered w-full max-w-xs mt-1"
					/> -->
					<input
						type="text"
						id="collection"
						name="collection"
						hidden
						readonly
						bind:value={collection.id}
						class="input input-bordered w-full max-w-xs mt-1"
					/>
					<input
						type="text"
						id="is_public"
						name="is_public"
						hidden
						readonly
						bind:value={collection.is_public}
						class="input input-bordered w-full max-w-xs mt-1"
					/>
					<div class="mb-2">
						<label for="type">Type <PlaneCar 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={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"
						name="name"
						id="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"
							class="input input-bordered w-full max-w-xs mt-1 mb-2"
						/>
					</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"
							min={fullStartDate || ''}
							max={fullEndDate || ''}
							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"
							class="input input-bordered w-full max-w-xs mt-1"
						/>
					</div>
					<div class="mb-2">
						<label for="rating">Link <LinkVariant class="inline-block mb-1 w-6 h-6" /></label><br />
						<input
							type="url"
							id="link"
							name="link"
							class="input input-bordered w-full max-w-xs mt-1"
						/>
					</div>

					{#if type == 'plane'}
						<div class="mb-2">
							<label for="flight_number"
								>Flight Number <Airplane class="inline-block mb-1 w-6 h-6" /></label
							><br />
							<input
								type="text"
								id="flight_number"
								name="flight_number"
								class="input input-bordered w-full max-w-xs mt-1"
							/>
						</div>
					{/if}
					<div class="mb-2">
						<label for="rating">From Location <MapMarker class="inline-block mb-1 w-6 h-6" /></label
						><br />
						<input
							type="text"
							id="from_location"
							name="from_location"
							class="input input-bordered w-full max-w-xs mt-1"
						/>
					</div>
					<div class="mb-2">
						<label for="rating">To Location <MapMarker class="inline-block mb-1 w-6 h-6" /></label
						><br />
						<input
							type="text"
							id="to_location"
							name="to_location"
							class="input input-bordered w-full max-w-xs mt-1"
						/>
					</div>
				</div>

				<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>
			<div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
		</div>
	</div>
</dialog>