Scheduler-Frontend/src/lib/modules/AppointmentInfo.svelte

<script lang="ts">
	import { extractDate } from '$lib/funcs';

	/**
	 * The title of an event or booking.
	 *
	 * @type {string}
	 */
	export let title: string = '';

	/**
	 * The location of an event or booking.
	 *
	 * @type {string}
	 */
	export let location: string = '';

	/**
	 * A brief description of an event or booking.
	 *
	 * @type {string}
	 */
	export let description: string = '';

	/**
	 * Whether this is a confirmation message.
	 *
	 * @type {boolean}
	 */
	export let isConfirmation: boolean = false;

	/**
	 * The date of an event or booking.
	 *
	 * @type {Date}
	 */
	export let date: Date = new Date();

	/**
	 * The duration of an event or booking, in minutes.
	 *
	 * @type {number}
	 */
	export let duration: number = 0;

	/**
	 * The time at which the event or booking starts. This should be set to a string
	 * representing HH:mm (e.g., "12:30").
	 *
	 * @type {string}
	 */
	export let time: string = '';
</script>

<article class="bottom-margin">
	<h5>{title}</h5>
	<p><i>pin_drop</i> {location}</p>
	<p><i>description</i> {description}</p>
	<p><i>timer</i> {duration} Min.</p>
	{#if isConfirmation}
		<p><i>event</i> {extractDate(new Date(date))}</p>
		<p><i>schedule</i> {time}</p>
	{/if}
</article>