Untitled
unknown
typescript
2 years ago
32 kB
5
Indexable
<script lang="ts">
import moment from 'moment';
import { goto } from '$app/navigation';
import { fade, fly } from 'svelte/transition';
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
import { onMount } from 'svelte';
const progress = tweened(0, {
duration: 400,
easing: cubicOut
});
onMount(() => {
progress.set(0.25);
});
let showError = false; // To control the error popup
let currentForm = 'swimmer';
type Event = {
time: string;
date: string;
location: string;
type: string;
};
let firstName = '';
let lastName = '';
let preferredName = '';
let dob = '';
let email = '';
let guardianFirstName = '';
let guardianLastName = '';
let guardianEmail = '';
let swimExperience = '';
let selectedEvent: Event | null = null;
let stage = 1;
let validFirstName = true;
let validLastName = true;
let validEmail = true;
let validDob = true;
let validGuardianFirstName = true;
let validGuardianLastName = true;
let validGuardianEmail = true;
let formClicked = false;
let selectedEvents = new Set();
const events: Event[] = [
{
time: '4:00 PM',
date: '2023-09-25',
location: 'Grandview Heights Aquatic Centre',
type: 'tryout'
},
{
time: '4:15 PM',
date: '2023-09-25',
location: 'Grandview Heights Aquatic Centre',
type: 'tryout'
},
{
time: '4:00 AM',
date: '2023-09-26',
location: 'Grandview Heights Aquatic Centre',
type: 'tryout'
},
{
time: '4:30 PM',
date: '2023-09-26',
location: 'Grandview Heights Aquatic Centre',
type: 'tryout'
},
{
time: '4:00 PM',
date: '2023-09-27',
location: 'Grandview Heights Aquatic Centre',
type: 'tryout'
},
{
time: '4:15 PM',
date: '2023-09-25',
location: 'Grandview Heights Aquatic Centre',
type: 'tryout'
},
{
time: '4:00 AM',
date: '2023-09-26',
location: 'Grandview Heights Aquatic Centre',
type: 'tryout'
},
{
time: '4:30 PM',
date: '2023-09-26',
location: 'Grandview Heights Aquatic Centre',
type: 'tryout'
}
];
function toggleEvent(event: Event) {
selectedEvent = event;
}
const validateField = (value: string) => value !== '';
function handleBlur(fieldType: string) {
formClicked = true;
if (fieldType === 'firstName') {
validFirstName = validateField(firstName);
} else if (fieldType === 'lastName') {
validLastName = validateField(lastName);
} else if (fieldType === 'email') {
validEmail = validateField(email);
} else if (fieldType === 'dob') {
validDob = validateField(dob);
} else if (fieldType === 'guardianFirstName') {
validGuardianFirstName = validateField(guardianFirstName);
} else if (fieldType === 'guardianLastName') {
validGuardianLastName = validateField(guardianLastName);
} else if (fieldType === 'guardianEmail') {
validGuardianEmail = validateField(guardianEmail);
}
}
const handleSubmitSwimmer = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
if (!formClicked) {
validFirstName = false;
validLastName = false;
validEmail = false;
validDob = false;
return;
}
if (!validFirstName || !validLastName || !validEmail || !validDob) {
return;
}
formClicked = false;
currentForm = 'guardian';
stage = 2;
progress.set(0.5);
};
const handleSubmitGuardian = () => {
if (!formClicked) {
validGuardianFirstName = false;
validGuardianLastName = false;
validGuardianEmail = false;
return;
}
if (!validGuardianFirstName || !validGuardianLastName || !validGuardianEmail) {
return;
}
// Handle form submission here
formClicked = false;
currentForm = 'tryout';
stage = 3;
progress.set(0.75);
};
const handleSubmitTryout = () => {
// Handle form submission here
if (selectedEvent === null) {
return;
}
formClicked = false;
currentForm = 'confirm';
stage = 4;
progress.set(1);
};
// const handleSubmitConfirm = () => {
// // Handle form submission here
// formClicked = false;
// currentForm = 'confirm';
// };
async function handleSubmitConfirm() {
const data = {
athleteInfo: {
firstName,
lastName,
preferredName,
dob,
email,
swimExperience
},
guardianInfo: {
guardianFirstName,
guardianLastName,
guardianEmail
},
tryoutInfo: {
selectedEvent
}
};
try {
const response = await fetch('/v1/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
if (response.ok) {
const result = await response.json();
// Update session or do something with the result
// $session.someValue = result.someValue;
goto('/registration/form-response');
} else {
showError = true; // Show error popup
}
} catch (error) {
showError = true; // Show error popup
}
}
</script>
{#key currentForm}
<div
class="py-4 px-4 relative w-[85%] text-center bg-white rounded-md flex flex-col justify-center my-6 lg:max-w-5xl"
>
<!-- Top container -->
<div class="w-full lg:flex lg:flex-col lg:items-center">
<!-- Breadcrumb Navigation -->
<div class="w-full flex flex-col justify-center lg:items-center">
<ul class="flex space-x-4 justify-center my-2">
<li class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="#000000"
version="1.1"
id="Capa_1"
class="w-6 h-6 mr-2 stroke-current"
viewBox="0 0 31.39 31.39"
xml:space="preserve"
>
<g>
<g>
<path
d="M27.851,21.77c-0.327,0.375-0.803,0.591-1.304,0.591c-0.498,0-0.975-0.215-1.301-0.591 c-1.033-1.184-2.543-1.933-4.244-1.933c-1.686,0-3.184,0.733-4.216,1.897c-0.328,0.37-0.797,0.581-1.292,0.581 c-0.494,0-0.965-0.21-1.294-0.58c-1.034-1.164-2.528-1.898-4.215-1.898c-1.685,0-3.183,0.733-4.214,1.898 c-0.33,0.37-0.799,0.58-1.295,0.58l0,0c-0.492,0-0.965-0.21-1.292-0.579C2.369,20.816,1.259,20.182,0,19.948v3.414 c0.27,0.134,0.519,0.315,0.728,0.552c0.951,1.07,2.316,1.684,3.749,1.684c1.432,0,2.799-0.613,3.747-1.686 c0.456-0.512,1.083-0.794,1.762-0.794c0.681,0,1.307,0.282,1.76,0.795c0.95,1.071,2.316,1.686,3.749,1.686 c1.431,0,2.798-0.615,3.746-1.686c0.455-0.513,1.082-0.795,1.763-0.795c0.926,0,1.507,0.508,1.771,0.809 c0.95,1.09,2.325,1.716,3.778,1.716c1.448-0.002,2.824-0.627,3.772-1.716c0.188-0.215,0.545-0.529,1.065-0.694v-3.319 C29.982,20.092,28.738,20.755,27.851,21.77z"
/>
<circle cx="24.374" cy="14.518" r="4.047" />
<path
d="M15.018,21.01c0.24,0.268,0.708,0.27,0.949-0.001c1.035-1.165,2.436-1.919,3.949-2.168 c0.104-0.617,0.072-1.267-0.15-1.898c-0.117-0.331-1.404-4.654-1.404-4.654c-0.002-0.009-0.156-0.9,0.391-1.701 c0.542-0.793,1.677-1.337,3.277-1.577c0.896-0.134,1.514-0.968,1.381-1.864c-0.131-0.896-0.959-1.515-1.866-1.381 c-2.562,0.382-4.415,1.381-5.501,2.968c-1.352,1.975-0.936,4.049-0.875,4.31l0.348,1.41c-0.212,0.037-0.426,0.08-0.634,0.154 l-6.62,2.337c-1.484,0.524-2.438,1.868-2.543,3.341c1.195-0.984,2.7-1.543,4.268-1.543C11.907,18.741,13.741,19.569,15.018,21.01z "
/>
</g>
</g>
</svg>
<span
class:active={currentForm === 'swimmer'}
class="hidden font-bold sm:inline-flex lg:text-lg"
>
SWIMMER
</span>
</li>
<li class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.0"
width="1129.000000pt"
height="1280.000000pt"
viewBox="0 0 1129.000000 1280.000000"
class="w-4 h-4 mr-2 stroke-current"
preserveAspectRatio="xMidYMid meet"
>
<g
transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
fill="#000000"
stroke="none"
>
<path
d="M7305 12790 c-607 -70 -1153 -365 -1531 -830 -201 -247 -361 -571 -433 -880 -25 -108 -48 -267 -55 -395 l-7 -100 79 -52 c264 -172 566 -475 751 -753 240 -359 369 -698 444 -1168 l12 -74 70 -30 c736 -313 1568 -210 2214 275 397 298 691 742 816 1231 79 312 88 678 24 996 -151 743 -672 1361 -1384 1640 -130 50 -292 94 -450 121 -138 23 -426 33 -550 19z"
/>
<path
d="M3595 10489 c-331 -32 -675 -148 -966 -329 -543 -337 -915 -895 -1024 -1540 -22 -130 -31 -438 -16 -581 56 -538 297 -1028 687 -1398 644 -610 1587 -781 2408 -437 420 176 788 493 1036 891 204 328 330 773 330 1164 0 864 -501 1654 -1283 2026 -356 169 -772 242 -1172 204z"
/>
<path
d="M6560 8138 c0 -77 -30 -309 -55 -433 -100 -495 -351 -977 -695 -1338 l-100 -105 67 -22 c480 -157 939 -429 1297 -769 318 -302 527 -584 716 -966 138 -280 227 -541 284 -835 50 -256 58 -365 63 -872 l5 -477 97 5 c774 41 1429 143 2056 320 335 95 741 245 886 329 43 25 85 45 94 45 14 0 16 116 12 1288 -3 1257 -3 1290 -24 1417 -85 515 -256 925 -555 1323 -113 152 -340 386 -478 496 -470 373 -997 580 -1593 626 -67 5 -562 10 -1099 10 l-978 0 0 -42z"
/>
<path
d="M2680 5873 c-919 -58 -1751 -553 -2247 -1338 -204 -324 -336 -684 -406 -1110 -21 -127 -21 -159 -24 -1447 l-4 -1317 73 -21 c40 -12 163 -49 273 -82 1681 -501 3384 -669 4921 -483 869 105 1676 325 2226 606 l86 44 1 1258 c1 797 -3 1293 -9 1355 -35 330 -122 640 -259 927 -154 321 -335 571 -590 818 -401 386 -879 635 -1431 743 -243 48 -218 47 -1420 49 -624 1 -1160 0 -1190 -2z"
/>
</g>
</svg>
<span
class:active={currentForm === 'guardian'}
class="hidden font-bold sm:inline-flex lg:text-lg"
>
GUARDIAN
</span>
</li>
<li class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
fill="#000000"
class="w-4 h-4 mr-2 stroke-current"
version="1.1"
id="Layer_1"
viewBox="0 0 512 512"
xml:space="preserve"
>
<g>
<g>
<path
d="M392.09,122.767l15.446-24.272c6.858-10.778,3.681-25.076-7.097-31.935c-10.777-6.86-25.076-3.681-31.935,7.099 l-15.409,24.215c-22.708-11.316-47.642-18.798-73.962-21.58V46.265h1.448c12.775,0,23.133-10.357,23.133-23.133 S293.356,0,280.581,0h-49.163c-12.775,0-23.133,10.357-23.133,23.133s10.357,23.133,23.133,23.133h1.45v30.029 C123.239,87.885,37.535,180.886,37.535,293.535C37.535,413.997,135.538,512,256,512s218.465-98.003,218.465-218.465 C474.465,224.487,442.259,162.83,392.09,122.767z M256,465.735c-94.951,0-172.2-77.249-172.2-172.2s77.249-172.2,172.2-172.2 s172.2,77.249,172.2,172.2S350.951,465.735,256,465.735z"
/>
</g>
</g>
<g>
<g>
<path
d="M333.172,205.084c-9.623-8.397-24.238-7.407-32.638,2.222l-61.964,71.02c-8.399,9.626-7.404,24.24,2.222,32.638 c9.626,8.399,24.24,7.404,32.638-2.222l61.964-71.02C343.794,228.096,342.798,213.484,333.172,205.084z"
/>
</g>
</g>
</svg>
<span
class:active={currentForm === 'tryout'}
class="hidden font-bold sm:inline-flex lg:text-lg"
>
TRYOUT
</span>
</li>
<li class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="800px"
height="800px"
viewBox="0 0 24 24"
class="w-4 h-4 mr-2 stroke-current"
fill="none"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M21.5821 5.54289C21.9726 5.93342 21.9726 6.56658 21.5821 6.95711L10.2526 18.2867C9.86452 18.6747 9.23627 18.6775 8.84475 18.293L2.29929 11.8644C1.90527 11.4774 1.89956 10.8443 2.28655 10.4503C2.67354 10.0562 3.30668 10.0505 3.70071 10.4375L9.53911 16.1717L20.1679 5.54289C20.5584 5.15237 21.1916 5.15237 21.5821 5.54289Z"
fill="#000000"
/>
</svg>
<span
class:active={currentForm === 'confirm'}
class="hidden font-bold sm:inline-flex lg:text-lg"
>
CONFIRM
</span>
</li>
</ul>
<div class="px-6 lg:w-1/2">
<progress value={$progress} class="w-full block h-3 mt-2 rounded-full appearance-none" />
</div>
</div>
<!-- Content + Form -->
<div
in:fly={{ y: 100, duration: 300, delay: 100 }}
class="flex flex-col items-start w-full p-6 text-[#808080] lg:flex-row lg:justify-center lg:items-center"
>
<!-- Content -->
{#if currentForm === 'swimmer'}
<div class="space-y-6 lg:my-24 lg:ml-4 lg:px-6 lg:max-w-[45%]">
<h1 class="w-full text-left text-3xl lg:text-4xl font-bold text-[#087cfc] lg:w-[20%]">
Registration
</h1>
<p class="hidden md:block text-left text-lg">
Welcome to our swim team registration process, we are excited to have you join us!
</p>
<p class="hidden md:block text-left text-lg">
Please take a few moments to fill out this form as accurately as possible. Your
information will help us ensure a smooth registration process and a fantastic
experience for your swimmer. Let's dive in!
</p>
</div>
<!-- Guardian Content -->
{:else if currentForm === 'guardian'}
<div class="space-y-6 lg:my-[104px] lg:ml-4 lg:px-6 lg:max-w-[45%]">
<h1 class="w-full text-left text-3xl lg:text-4xl font-bold text-[#087cfc] lg:w-[20%]">
Guardian Information
</h1>
<p class="hidden md:block text-left text-lg">
Provide essential details about the parent or guardian responsible for the swimmer.
</p>
<p class="hidden md:block text-left text-lg">
Your involvement is vital for a rewarding experience, so please fill out the form
accurately.
</p>
</div>
<!-- Tryout Content -->
{:else if currentForm === 'tryout'}
<div class="space-y-6 lg:my-[148px] lg:ml-4 lg:px-6 lg:max-w-[45%]">
<h1 class="w-full text-left font-bold text-[#087cfc] text-3xl lg:text:4xl lg:w-3/4">
Try-out Scheduling
</h1>
<p class="hidden md:block text-left text-lg">
Please select the time slots that work best for you. Each try-out takes roughly 15
minutes.
</p>
</div>
{:else if currentForm === 'confirm'}
<div class="hidden" />
{/if}
<!-- Form -->
<form
id="registration-form"
method="POST"
action="?/create"
class="flex flex-col w-[100%] mt-6 space-y-4 md:flex-row md:justify-center md:flex-wrap md:space-y-0 lg:mx-4 lg:px-6"
>
<!-- Swimmer Form -->
{#if currentForm === 'swimmer'}
<div class="flex flex-col md:w-1/2 md:pb-4 md:pr-2">
<label for="firstName" class="text-left">
First Name <span class="text-error">*</span>
</label>
<div
class={`${!validFirstName ? 'tooltip tooltip-open tooltip-error' : ''}`}
data-tip={`${!validFirstName ? 'First Name is required' : ''}`}
>
<input
bind:value={firstName}
name="firstName"
class="input input-primary input-bordered w-full text-black"
id="firstName"
type="text"
placeholder="First Name"
on:blur={() => handleBlur('firstName')}
/>
</div>
</div>
<div class="flex flex-col md:w-1/2 md:pb-4 md:pl-2">
<label for="lastName" class="text-left">
Last Name <span class="text-error">*</span>
</label>
<div
class={`${!validLastName ? 'tooltip tooltip-open tooltip-error' : ''}`}
data-tip={`${!validLastName ? 'Last Name is required' : ''}`}
>
<input
bind:value={lastName}
name="lastName"
class="input input-primary input-bordered w-full text-black"
id="lastName"
type="text"
placeholder="Last Name"
on:blur={() => handleBlur('lastName')}
/>
</div>
</div>
<div class="flex flex-col md:order-1 md:w-1/2 md:pb-4 md:pl-2">
<label for="email" class="text-left">
Email <span class="text-error">*</span>
</label>
<div
class={`w-full ${!validEmail ? 'tooltip tooltip-open tooltip-error' : ''}`}
data-tip={`${!validEmail ? 'Email is required' : ''}`}
>
<input
bind:value={email}
name="email"
required
class="input input-primary input-bordered w-full text-black"
id="email"
type="email"
placeholder="Email"
on:blur={() => handleBlur('email')}
/>
</div>
</div>
<div class="flex flex-col md:order-1 md:w-full md:pb-4">
<label for="dob" class="text-left">
Date of Birth <span class="text-error">*</span>
</label>
<div
class={`w-full ${!validDob ? 'tooltip tooltip-open tooltip-error' : ''}`}
data-tip={`${!validDob ? 'Date of Birth is required' : ''}`}
>
<input
bind:value={dob}
name="dob"
required
class="input input-primary input-bordered w-full text-black"
id="dob"
type="date"
on:blur={() => handleBlur('dob')}
/>
</div>
</div>
<div class="flex flex-col md:w-1/2 md:pb-4 md:pr-2">
<label for="preferredName" class="text-left"> Preferred Name </label>
<input
bind:value={preferredName}
name="preferredName"
class="input input-primary input-bordered w-full text-black"
id="preferredName"
type="text"
placeholder="Preferred Name"
/>
</div>
<div class="flex flex-col md:order-1 md:w-full">
<label for="swimExperience" class="text-left"> Previous Swim Experience </label>
<textarea
bind:value={swimExperience}
name="swimExperience"
class="input input-primary textarea textarea-bordered border-[#007BFF] w-full h-24 text-black"
id="swimExperience"
placeholder="Describe previous swim experience..."
/>
</div>
<!-- Guardian Form -->
{:else if currentForm === 'guardian'}
<div class="flex flex-col md:w-1/2 md:pr-2 md:mb-4">
<label for="guardianFirstName" class="text-left">
Guardian First Name <span class="text-error">*</span>
</label>
<div
class={`w-full ${
!validGuardianFirstName ? 'tooltip tooltip-open tooltip-error' : ''
}`}
data-tip={`${!validGuardianFirstName ? 'First name is required' : ''}`}
>
<input
required
bind:value={guardianFirstName}
name="guardianFirstName"
class="input input-primary input-bordered w-full text-black"
id="guardianFirstName"
type="text"
placeholder="First Name"
on:blur={() => handleBlur('guardianFirstName')}
/>
</div>
</div>
<div class="flex flex-col md:w-1/2 md:pl-2 md:mb-4">
<label for="guardianLastName" class="text-left">
Guardian Last Name <span class="text-error">*</span>
</label>
<div
class={`w-full ${
!validGuardianLastName ? 'tooltip tooltip-open tooltip-error' : ''
}`}
data-tip={`${!validGuardianLastName ? 'Last name is required' : ''}`}
>
<input
required
name="guardianLastName"
bind:value={guardianLastName}
class="input input-primary input-bordered w-full text-black"
id="guardianLastName"
type="text"
placeholder="Last Name"
on:blur={() => handleBlur('guardianLastName')}
/>
</div>
</div>
<div class="flex flex-col md:w-full">
<label for="guardianEmail" class="text-left">
Guardian Email <span class="text-error">*</span>
</label>
<div
class={`w-full ${!validGuardianEmail ? 'tooltip tooltip-open tooltip-error' : ''}`}
data-tip={`${!validGuardianEmail ? 'Email is required' : ''}`}
>
<input
required
bind:value={guardianEmail}
name="guardianEmail"
class="input input-primary input-bordered w-full text-black"
id="guardianEmail"
type="email"
placeholder="Email"
on:blur={() => handleBlur('guardianEmail')}
/>
</div>
</div>
<!-- Tryout Form -->
{:else if currentForm === 'tryout'}
<div class="overflow-y-auto h-[450px] md:w-full">
{#each events as event, i}
{#if i === 0 || moment(events[i].date).format('LL') !== moment(events[i - 1].date).format('LL')}
<div class="text-left font-bold text-black">
{moment(event.date).format('LL')}
</div>
{/if}
<div
class={`flex justify-between items-center my-2 py-2 px-4 rounded-md cursor-pointer min-h-[5rem] ${
selectedEvent === event ? 'bg-primary text-white' : 'bg-blue-200 text-black'
}`}
role="button"
tabindex="0"
aria-pressed={selectedEvent === event ? 'true' : 'false'}
aria-label="Toggle event selection"
on:click={() => toggleEvent(event)}
on:keydown={(e) => {
if (e.key === 'Enter' || e.key === ' ') toggleEvent(event);
}}
>
<span class="flex-none whitespace-nowrap w-20">{event.time}</span>
<span class="flex-grow text-left ml-4">{event.location}</span>
</div>
{/each}
</div>
<!-- Confirm Form -->
{:else if currentForm === 'confirm'}
<!-- Tryout Info -->
<div class="border border-[#e5e7eb] p-4 rounded-md space-y-4 md:w-[25vh] md:hidden">
<h1 class="text-xl font-bold text-left text-black">Selected Tryout<br />Time</h1>
<p class="text-left">
{selectedEvent ? moment(selectedEvent.date).format('LL') : 'No date selected'}
</p>
<p class="text-left">{selectedEvent ? selectedEvent.time : 'No time selected'}</p>
<p class="text-left">
{selectedEvent ? selectedEvent.location : 'No location selected'}
</p>
</div>
<!-- Swimmer Info -->
<div class="border border-[#e5e7eb] p-4 rounded-md space-y-4 md:w-[25vh] md:hidden">
<h1 class="text-xl font-bold text-left text-black md:whitespace-pre-line">
Swimmer Information
</h1>
<div class="flex flex-col text-left">
<h4 class="text-sm">Name:</h4>
<p class="text-left">{`${firstName} ${lastName}`}</p>
</div>
{#if preferredName}
<div class="flex flex-col text-left">
<h4 class="text-sm">Preferred Name:</h4>
<p class="text-left">{preferredName}</p>
</div>
{/if}
<div class="flex flex-col text-left">
<h4 class="text-sm">Date of Birth:</h4>
<p class="text-left">{dob}</p>
</div>
<div class="flex flex-col text-left">
<h4 class="text-sm">Email:</h4>
<p class="text-left">{email}</p>
</div>
<div class="flex flex-col text-left">
<h4 class="text-sm">Swim Experience:</h4>
<p class="text-left inline w-full h-auto">
{swimExperience}
</p>
</div>
</div>
<!-- Guardian Info -->
<div
class="border border-[#e5e7eb] p-4 rounded-md space-y-4 md:w-[25vh] md:min-h-[14rem] md:hidden"
>
<h1 class="text-xl font-bold text-left text-black md:whitespace-pre-line">
Guardian Information
</h1>
<div class="flex flex-col text-left">
<h4 class="text-sm">Name:</h4>
<p class="text-left">{`${guardianFirstName} ${guardianLastName}`}</p>
</div>
<div class="flex flex-col text-left">
<h4 class="text-sm">Email:</h4>
<p class="text-left">{guardianEmail}</p>
</div>
<!-- Fill in the guardian information here, similar to the swimmer information -->
</div>
<!-- md, lg, and xl confirmation form -->
<div class="hidden md:flex md:justify-between md:space-x-6">
<!-- Tryout Card -->
<div
class="text-left border border-[#e5e7eb] rounded-md space-y-4 px-6 py-4 h-fit w-[12rem] md:min-w-[14rem] lg:min-w-[16rem]"
>
<h1 class="text-xl font-bold text-black">Selected Tryout<br />Time</h1>
<p>
{selectedEvent ? moment(selectedEvent.date).format('LL') : 'No date selected'}
</p>
<p>{selectedEvent ? selectedEvent.time : 'No time selected'}</p>
<p>{selectedEvent ? selectedEvent.location : 'No location selected'}</p>
</div>
<!-- Swimmer Card -->
<div
class="text-left border border-[#e5e7eb] rounded-md space-y-4 px-6 py-4 h-fit w-[12rem] md:min-w-[14rem] lg:min-w-[16rem]"
>
<h1 class="text-xl font-bold text-black">Swimmer Information</h1>
<div>
<h4>Name:</h4>
<p>
{`${firstName} ${lastName}`}
</p>
</div>
{#if preferredName}
<div>
<h4>Preferred Name:</h4>
<p>{preferredName}</p>
</div>
{/if}
<div>
<h4>Date of Birth:</h4>
<p>{dob}</p>
</div>
<div>
<h4>Email:</h4>
<p>{email}</p>
</div>
<div>
<h4>Swim Experience:</h4>
<p>{swimExperience}</p>
</div>
</div>
<!-- Guardian Card -->
<div
class="text-left border border-[#e5e7eb] rounded-md space-y-4 px-6 py-4 h-fit w-[12rem] md:min-w-[14rem] lg:min-w-[16rem]"
>
<h1 class="text-xl font-bold text-black">Guardian Information</h1>
<div>
<h4>Name:</h4>
<p>{`${guardianFirstName} ${guardianLastName}`}</p>
</div>
<div>
<h4>Email:</h4>
<p>{guardianEmail}</p>
</div>
</div>
</div>
{/if}
</form>
</div>
</div>
<!-- -->
<!-- Next button logic -->
<!-- -->
{#if currentForm === 'swimmer'}
<div
in:fade={{ duration: 300, delay: 300 }}
class="w-full flex justify-end items-center space-x-4 pb-2 pr-6 lg:pr-16 xl:pr-16"
>
<a
href="/"
class="text-blue-600 no-underline bg-left-bottom bg-gradient-to-r from-yellow-500 to-orange-500 bg-[length:0%_2px] bg-no-repeat hover:bg-[length:100%_2px] hover:text-primary-50 outline-none transition-all duration-500 ease-out xl:text-lg"
>
CANCEL
</a>
<button
type="button"
class="btn btn-primary text-base xl:text-lg"
on:click={handleSubmitSwimmer}>Next</button
>
</div>
{:else if currentForm === 'guardian'}
<div
in:fade={{ duration: 300, delay: 300 }}
class="w-full flex justify-end items-center space-x-4 mr-10 pb-2 pr-6 lg:pr-16"
>
<button
type="button"
class="text-blue-600 no-underline bg-left-bottom bg-gradient-to-r from-yellow-500 to-orange-500 bg-[length:0%_2px] bg-no-repeat hover:bg-[length:100%_2px] hover:text-primary-50 outline-none transition-all duration-500 ease-out xl:text-lg"
on:click={() => {
currentForm = 'swimmer';
stage = 1;
formClicked = true;
progress.set(0.25);
}}>BACK</button
>
<button
type="button"
class="btn btn-primary text-base xl:text-lg"
on:click={handleSubmitGuardian}>Next</button
>
</div>
{:else if currentForm === 'tryout'}
<div
in:fade={{ duration: 300, delay: 300 }}
class="w-full flex justify-end items-center space-x-4 mr-10 pb-2 pr-6 lg:pr-16"
>
<button
type="button"
class="text-blue-600 no-underline bg-left-bottom bg-gradient-to-r from-yellow-500 to-orange-500 bg-[length:0%_2px] bg-no-repeat hover:bg-[length:100%_2px] hover:text-primary-50 outline-none transition-all duration-500 ease-out xl:text-lg"
on:click={() => {
currentForm = 'guardian';
stage = 2;
formClicked = true;
progress.set(0.5);
}}>BACK</button
>
<button
type="button"
class="btn btn-primary text-base xl:text-lg"
on:click={handleSubmitTryout}>Next</button
>
</div>
{:else if currentForm === 'confirm'}
<div
in:fade={{ duration: 300, delay: 300 }}
class="w-full flex justify-end items-center space-x-4 mr-10 pb-2 pr-6 lg:pr-20"
>
<button
type="button"
class="text-blue-600 no-underline bg-left-bottom bg-gradient-to-r from-yellow-500 to-orange-500 bg-[length:0%_2px] bg-no-repeat hover:bg-[length:100%_2px] hover:text-primary-50 outline-none transition-all duration-500 ease-out xl:text-lg"
on:click={() => {
currentForm = 'tryout';
stage = 3;
formClicked = true;
progress.set(0.75);
}}>BACK</button
>
<button form="registration-form" type="submit" class="btn btn-primary text-base xl:text-lg"
>Confirm</button
>
</div>
{/if}
<!-- Left Bubbles -->
<svg
class="hidden lg:block absolute left-[-142px] bottom-[50px]"
width="198"
height="108"
viewBox="0 0 99 54"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Frame 1" clip-path="url(#clip0_2_2)">
<g id="left-light-2">
<rect id="square" x="60" y="36" width="30" height="18" fill="white" />
<circle id="circle" cx="60" cy="45" r="9" fill="white" />
</g>
<g id="left-light-1">
<g id="main-body">
<rect id="square_2" x="42" width="30" height="18" fill="white" />
<circle id="circle_2" cx="41" cy="9" r="9" fill="white" />
</g>
<circle id="circle_3" cx="9" cy="9" r="9" fill="white" />
</g>
<g id="left-colour-1">
<rect id="square_3" x="56" y="18" width="19" height="18" fill="#007BFF" />
<circle id="circle_4" cx="75" cy="27" r="9" fill="#007BFF" />
</g>
</g>
<defs>
<clipPath id="clip0_2_2">
<rect width="99" height="54" fill="white" />
</clipPath>
</defs>
</svg>
<!-- Right Bubbles -->
<svg
class="hidden lg:block absolute right-[-82px] top-[50px]"
width="140"
height="108"
viewBox="0 0 70 54"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Frame 2" clip-path="url(#clip0_3_17)">
<g id="left-light-2">
<rect id="square" x="28" y="36" width="23" height="18" fill="white" />
<circle id="circle" cx="52" cy="45" r="9" fill="white" />
</g>
<g id="left-light-1">
<rect
id="square_2"
width="33"
height="18"
transform="matrix(-1 0 0 1 61 0)"
fill="white"
/>
<ellipse
id="circle_2"
cx="7.95"
cy="9"
rx="7.95"
ry="9"
transform="matrix(-1 0 0 1 70 0)"
fill="white"
/>
</g>
<g id="left-colour-1">
<rect id="square_3" x="25" y="18" width="19" height="18" fill="#007BFF" />
<circle id="circle_3" cx="24" cy="27" r="9" fill="#007BFF" />
</g>
</g>
<defs>
<clipPath id="clip0_3_17">
<rect width="70" height="54" fill="white" />
</clipPath>
</defs>
</svg>
</div>
{/key}
<style>
.event-box {
width: 100%;
background-color: lightblue;
padding: 10px;
margin: 5px 0;
cursor: pointer;
color: black;
}
.event-box.selected {
background-color: #087cfc;
color: white;
}
.active {
display: inline-flex;
color: #087cfc;
font-weight: bold;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 400ms;
}
/* Add these classes to your styles */
.slide-enter-active,
.slide-leave-active {
transition: all 0.5s;
}
.slide-enter,
.slide-leave-to {
transform: translateX(-100%);
opacity: 0;
}
:global(progress) {
border-radius: 9999px;
}
progress[value] {
/* Remove default styles */
appearance: none;
width: 100%;
height: 10px;
border: none;
background-color: #e5e7eb;
border-radius: 9999px;
}
progress[value]::-webkit-progress-bar {
background-color: #e5e7eb; /* Background color of the progress bar in Webkit browsers */
border-radius: 9999px;
}
progress[value]::-webkit-progress-value {
background-color: #087cfc; /* Color of the progress bar in Webkit browsers */
border-radius: 9999px;
}
progress[value]::-moz-progress-bar {
background-color: #087cfc; /* Color of the progress bar in Firefox */
border-radius: 9999px;
}
</style>
Editor is loading...