251 lines
14 KiB
HTML
251 lines
14 KiB
HTML
|
|
<secondary-page-component [hideAlways]="true" >
|
|
<div mainContent>
|
|
<div class="form-container">
|
|
<h1 class="center" style="background-color: lightblue; padding:10px;">
|
|
Vacation Bible School Registration
|
|
</h1>
|
|
<form [formGroup]="form">
|
|
<div *ngIf="studentStep">
|
|
<table class="info-table">
|
|
<tr>
|
|
<td class="label">Ages</td>
|
|
<td>4 - 12 years old</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Dates</td>
|
|
<td>August 10 - 13</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Time</td>
|
|
<td>6:30 PM - 8:00 PM</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Location</td>
|
|
<td>
|
|
<a href="https://www.google.com/maps/place/Old+Fashion+Baptist+Church/@45.9509155,-112.5144616,17z/data=!3m1!4b1!4m6!3m5!1s0x535b078c3c74ea33:0xac299097142c5894!8m2!3d45.9509155!4d-112.5118867!16s%2Fg%2F1ts3f8rz?entry=ttu&g_ep=EgoyMDI2MDcxMi4wIKXMDSoASAFQAw%3D%3D" target="_blank" rel="noopener noreferrer">
|
|
Old Fashion Baptist Church<br>
|
|
5003 Wynne Ave<br>
|
|
Butte, MT
|
|
</a>
|
|
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Contact</td>
|
|
<td><a href="tel:+4064945028">(406) 494-5028</a></td>
|
|
</tr>
|
|
</table>
|
|
<h2 id="studentInfo" class="center" style="margin:25px; margin-top: 35px;">Student Information</h2>
|
|
<div class="form-row-2-col">
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('firstName')">
|
|
<mat-label>First Name</mat-label>
|
|
<input matInput type="text" formControlName="firstName" required>
|
|
<mat-error>Please enter student first name</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('lastName')">
|
|
<mat-label>Last Name</mat-label>
|
|
<input matInput type="text" formControlName="lastName" required>
|
|
<mat-error>Please enter student last name</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="form-row-2-col">
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('grade')">
|
|
<mat-label>Grade</mat-label>
|
|
<input matInput type="number" formControlName="grade" required>
|
|
<mat-error>Please enter student grade</mat-error>
|
|
</mat-form-field>
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('dob')">
|
|
<mat-label>Birthday</mat-label>
|
|
<input matInput [matDatepicker]="picker" (click)="picker.open()" formControlName="dob" required readonly>
|
|
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
|
<mat-datepicker touchUi #picker></mat-datepicker>
|
|
<mat-error>Please enter student birthday</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="form-row-1-col">
|
|
<div>
|
|
<label id="studentHasAllergiesLabel">Does the student have any allergies?</label>
|
|
<mat-radio-group aria-label="Student has allergies" formControlName="hasAllergies" aria-labelledby="studentHasAllergiesLabel">
|
|
<mat-radio-button class="radio-button" value="true">Yes</mat-radio-button>
|
|
<mat-radio-button class="radio-button" value="false">No</mat-radio-button>
|
|
</mat-radio-group>
|
|
</div>
|
|
<mat-form-field *ngIf="form.get('hasAllergies').value === 'true'" class="w-100" [class.background-error]="hasErrors('allergies')">
|
|
<mat-label>Allergies</mat-label>
|
|
<textarea matInput type="text" formControlName="allergies"></textarea>
|
|
<mat-error>Please enter student allergies</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="form-row-1-col">
|
|
<div>
|
|
<label id="studentHasDietaryRestrictionsLabel">Does the student have any dietary restrictions?</label>
|
|
<mat-radio-group aria-label="Student has allergies" formControlName="hasDietaryRestrictions" aria-labelledby="studentHasDietaryRestrictionsLabel">
|
|
<mat-radio-button class="radio-button" value="true">Yes</mat-radio-button>
|
|
<mat-radio-button class="radio-button" value="false">No</mat-radio-button>
|
|
</mat-radio-group>
|
|
</div>
|
|
<mat-form-field *ngIf="form.get('hasDietaryRestrictions').value === 'true'" class="w-100" [class.background-error]="hasErrors('dietaryRestrictions')">
|
|
<mat-label>Dietary Restrictions</mat-label>
|
|
<textarea matInput type="text" formControlName="dietaryRestrictions"></textarea>
|
|
<mat-error>Please enter student dietary restrictions</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="form-row-1-col">
|
|
<div>
|
|
<label id="studentAttendedInPastLabel">Has the student attended VBS in the past?</label>
|
|
<mat-radio-group aria-label="Student Attended In Past" formControlName="attendedInPast" aria-labelledby="studentAttendedInPastLabel">
|
|
<mat-radio-button class="radio-button" value="true">Yes</mat-radio-button>
|
|
<mat-radio-button class="radio-button" value="false">No</mat-radio-button>
|
|
</mat-radio-group>
|
|
</div>
|
|
</div>
|
|
<div class="form-row-1-col">
|
|
<div>
|
|
<label id="studentRidesBus">Does the student currently ride the bus or van?</label>
|
|
<mat-radio-group aria-label="Student Rides The Bus or Van" formControlName="ridesBus" aria-labelledby="studentRidesBus">
|
|
<mat-radio-button class="radio-button" value="true">Yes</mat-radio-button>
|
|
<mat-radio-button class="radio-button" value="false">No</mat-radio-button>
|
|
</mat-radio-group>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; justify-content: flex-end; margin-bottom:20px;">
|
|
<button [disabled]="!studentComplete()" mat-raised-button color="primary" (click)="gotoParentStep()">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="parentStep">
|
|
<h2 id="parentInfo" class="center" style="margin:25px;">Parent/Guardian Information</h2>
|
|
<div class="form-row-2-col">
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('parentFirstName')">
|
|
<mat-label>First Name</mat-label>
|
|
<input matInput type="text" formControlName="parentFirstName" required>
|
|
<mat-error>Please enter parent/guardian name</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('parentLastName')">
|
|
<mat-label>Last Name</mat-label>
|
|
<input matInput type="text" formControlName="parentLastName" required>
|
|
<mat-error>Please enter parent/guardian name</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="form-row-1-col">
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('address1')">
|
|
<mat-label>Address Line 1</mat-label>
|
|
<input matInput type="text" formControlName="address1" required>
|
|
<mat-error>Please enter parent/guardian address</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('address2')">
|
|
<mat-label>Address Line 2</mat-label>
|
|
<input matInput type="text" formControlName="address2">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="form-row-2-col">
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('city')">
|
|
<mat-label>City</mat-label>
|
|
<input matInput type="text" formControlName="city" required>
|
|
<mat-error>Please enter parent/guardian city</mat-error>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('state')">
|
|
<mat-label>State *</mat-label>
|
|
<mat-select formControlName="state">
|
|
<!-- Empty option to allow clearing the choice -->
|
|
<mat-option [value]="null">-- Select a State --</mat-option>
|
|
|
|
<!-- Dynamically loop over the array mapping code to value and name to label -->
|
|
<mat-option *ngFor="let state of stateList" [value]="state.code">
|
|
{{ state.name }}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error>Please enter parent/guardian state</mat-error>
|
|
</mat-form-field>
|
|
|
|
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('zip')">
|
|
<mat-label>Zip</mat-label>
|
|
<input matInput type="text" formControlName="zip" required>
|
|
<mat-error>Please enter parent/guardian zip</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="form-row-2-col">
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('parentHomePhone')">
|
|
<mat-label>Home Phone</mat-label>
|
|
<input matInput type="tel" formControlName="parentHomePhone">
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('parentMobilePhone')">
|
|
<mat-label>Mobile Phone</mat-label>
|
|
<input matInput type="tel" formControlName="parentMobilePhone" required>
|
|
<mat-error>Please enter parent/guardian mobile phone (must be 10 digits)</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="form-row-2-col">
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('parentWorkPhone')">
|
|
<mat-label>Work Phone</mat-label>
|
|
<input matInput type="tel" formControlName="parentWorkPhone">
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('parentEmail')">
|
|
<mat-label>Email</mat-label>
|
|
<input matInput type="email" formControlName="parentEmail" required>
|
|
<mat-error>Please enter parent/guardian email</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
|
|
<button mat-raised-button color="primary" (click)="gotoStudentStep()">Back</button>
|
|
<button [disabled]="!parentComplete()" mat-raised-button color="primary" (click)="gotoEmergencyStep()">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="emergencyStep">
|
|
<h2 id="emergencyInfo" class="center" style="margin:25px;">Emergency Contact Information</h2>
|
|
<div class="form-row-1-col">
|
|
<mat-checkbox matPrefix formControlName="emergencySameAsParent">Same as Parent/Guardian</mat-checkbox>
|
|
</div>
|
|
<div class="form-row-2-col">
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('emergencyFirstName')">
|
|
<mat-label>First Name</mat-label>
|
|
<input matInput type="text" formControlName="emergencyFirstName">
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('emergencyLastName')">
|
|
<mat-label>Last Name</mat-label>
|
|
<input matInput type="text" formControlName="emergencyLastName">
|
|
</mat-form-field>
|
|
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('emergencyPhone')">
|
|
<mat-label>Phone</mat-label>
|
|
<input matInput type="tel" formControlName="emergencyPhone">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="form-row-1-col">
|
|
<mat-form-field class="w-100" [class.background-error]="hasErrors('notes')">
|
|
<mat-label>Notes</mat-label>
|
|
<textarea matInput type="text" formControlName="notes"></textarea>
|
|
<mat-hint>Transportation needed, comments, concerns, etc.</mat-hint>
|
|
</mat-form-field>
|
|
</div>
|
|
<input type="hidden" formControlName="hp">
|
|
<div style="display: flex; justify-content: space-between; margin-top:20px; margin-bottom: 20px;">
|
|
<button [disabled]="submitting" mat-raised-button color="primary" (click)="gotoParentStep()">Back</button>
|
|
<button [disabled]="!emergencyComplete() || submitting" mat-raised-button color="primary" (click)="submit()">Submit</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="completeStep">
|
|
<h2 id="completeInfo" class="center" style="margin:25px;">Complete!</h2>
|
|
<h4 class="center">{{form.get('firstName').value}} has been registered!</h4>
|
|
<div class="center" style="margin-top:20px;">
|
|
<button mat-raised-button color="primary" (click)="registerAnotherStudent()">Register Another Student</button>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</secondary-page-component> |