Scheduler-Frontend/src/routes/appointment/+page.svelte

<script lang="ts">
	import { goto } from '$app/navigation';
	import { page } from '$app/stores';
	import { api_host } from '$lib';
	import type {
		Appointment,
		AppointmentDateTimes,
		AppointmentInputs,
		DynamicJson
	} from '$lib/dbdata';
	import AppointmentConfirmDialog from '$lib/modules/AppointmentConfirmDialog.svelte';
	import AppointmentInfo from '$lib/modules/AppointmentInfo.svelte';
	import DatePicker from '$lib/modules/DatePicker.svelte';
	import DateTimes from '$lib/modules/DateTimes.svelte';
	import { onMount } from 'svelte';

	let appointment: Appointment;

	let selectedDate: Date = new Date();
	let activateModal: boolean = false;
	let dynamicInputs: DynamicJson[] = [];
	let appointmentDateTimes: AppointmentDateTimes[] = [];

	async function getAppointmentInfo(appointmentId: string) {
		const response = await fetch(`${api_host}/api/schedule?appointmentId=${appointmentId}`, {
			method: 'GET',
			headers: {
				'Content-Type': 'application/json'
			}
		});
		const js: Appointment = await response.json();
		appointment = js;
		appointmentDateTimes = js.times.filter((element) => element.available === true);
        dynamicInputs = js.inputs;

		if (response.status === 404) {
			goto('/errors/404');
		}
		if (response.status === 410) {
			goto('/errors/410');
		}
	}

	onMount(async () => {
		const id = $page.url.searchParams.get('id');
		if (!id) {
			goto('/errors/404');
		} else {
			await getAppointmentInfo(id);
		}
	});
</script>

{#if appointment}
	<DatePicker bind:appointmentDateTimes bind:selectedDate />

	<div class="top-margin w-80 inline-margin">
		<AppointmentInfo
			bind:title={appointment.title}
			bind:description={appointment.description}
			bind:location={appointment.place}
		/>
		{#key selectedDate}
			<DateTimes bind:activateModal bind:selectedDate bind:availableTimes={appointmentDateTimes} />
		{/key}
	</div>

	<AppointmentConfirmDialog
		bind:appointment
		bind:dynamicInputs
		bind:active={activateModal}
		bind:date={selectedDate}
	/>
{/if}

<style>
	.w-80 {
		max-width: 600px;
	}

	.inline-margin {
		margin-inline: auto;
	}
</style>