7GUIs Flight Booker - Svelte

<script>
	import { today, validateDate } from "../../../../lib/date";
	import TripType from "./TripType.html";
	import DateEntry from "./DateEntry.html";

	const oneWayFlight = "one-way";
	const returnFlight = "return";

	let departing = today();
	let returning = departing;

	$: departingError = getErrorMessage(departing);
	$: returningError = getErrorMessage(returning);
	$: if (
		departingError == null &&
		returningError == null &&
		tripType == returnFlight &&
		returning < departing
	) {
		returningError = "Returning date must be on or after departing date.";
	}

	let tripType = oneWayFlight;

	$: isBookDisabled = departingError || returningError;

	function getErrorMessage(date) {
		try {
			validateDate(date);
			return null;
		} catch (error) {
			return error.message;
		}
	}

	function bookFlight() {
		const type = tripType == returnFlight ? "return" : "one-way";

		let message = `You have booked a ${type} flight, leaving ${departing}`;
		if (type === "return") {
			message += ` and returning ${returning}`;
		}

		alert(message);
	}
</script>

<TripType bind:tripType="{tripType}"></TripType>
<DateEntry
	label="Departing"
	bind:date="{departing}"
	errorMsg="{departingError}"
></DateEntry>
<DateEntry
	label="Returning"
	bind:date="{returning}"
	errorMsg="{returningError}"
	disabled="{tripType == oneWayFlight}"
></DateEntry>

<div class="form-group">
	<button
		class="btn btn-primary"
		on:click="{bookFlight}"
		disabled="{isBookDisabled}"
	>
		book
	</button>
</div>

<script>
	import { oneWayFlight, returnFlight } from "./constants";
	export let tripType;
</script>

<div class="form-group">
	<label class="form-label" for="trip-type">Trip type</label
	><select id="trip-type" class="form-select" bind:value="{tripType}">
		<option value="{oneWayFlight}">one-way flight</option>
		<option value="{returnFlight}">return flight</option>
	</select>
</div>

export const oneWayFlight = "one-way";
export const returnFlight = "return";

import App from "./FlightBooker.html";

new App({
	target: document.getElementById("app")
});