bunch o stuff
This commit is contained in:
@@ -1,86 +1,108 @@
|
||||
@page "/book"
|
||||
@rendermode InteractiveServer
|
||||
@using Microsoft.AspNetCore.Components.Forms
|
||||
|
||||
<div class="container booking-page">
|
||||
<div class="section-title">
|
||||
<h1>Request an Appointment</h1>
|
||||
<p>Complete the form below and a technician will review your case.</p>
|
||||
@if(!Complete)
|
||||
{
|
||||
<div class="container booking-page">
|
||||
<div class="section-title">
|
||||
<h1>Request an Appointment</h1>
|
||||
<p>Complete the form below and a technician will review your case.</p>
|
||||
</div>
|
||||
|
||||
<EditForm FormName="RepairRequestForm" Model="Model" OnValidSubmit="HandleSubmit" On class="booking-form-wrapper">
|
||||
<DataAnnotationsValidator />
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-column">
|
||||
<h3 class="form-heading">1. Appliance Details</h3>
|
||||
|
||||
<div class="field-group">
|
||||
<label>Appliance Type</label>
|
||||
<InputSelect @bind-Value="Model.Type" class="custom-input">
|
||||
<option value="">Select an appliance...</option>
|
||||
<option>Refrigerator</option>
|
||||
<option>Washing Machine</option>
|
||||
<option>Dishwasher</option>
|
||||
<option>Oven / Stove</option>
|
||||
<option>Dryer</option>
|
||||
</InputSelect>
|
||||
<ValidationMessage For="@(() => Model.Type)" class="text-danger" />
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label>Appliance Brand</label>
|
||||
<InputSelect @bind-Value="Model.Brand" class="custom-input">
|
||||
<option value="">Select a brand...</option>
|
||||
<option>LG</option>
|
||||
<option>Maytag</option>
|
||||
<option>Whirlpool</option>
|
||||
<option>Kitchen Aid</option>
|
||||
<option>Amana</option>
|
||||
<option>GE</option>
|
||||
<option>Samsung</option>
|
||||
<option>Bosch</option>
|
||||
<option>Frigidaire</option>
|
||||
<option>Kenmore</option>
|
||||
<option>Other (please include in notes)</option>
|
||||
</InputSelect>
|
||||
<ValidationMessage For="@(() => Model.Brand)" class="text-danger" />
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label>Describe the Issue</label>
|
||||
<InputTextArea @bind-Value="Model.Notes"
|
||||
placeholder="e.g. Making a clicking noise, not draining, error code F1E2..."
|
||||
class="custom-input textarea" />
|
||||
<ValidationMessage For="@(() => Model.Notes)" class="text-danger" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-column">
|
||||
<h3 class="form-heading">2. Photos & Contact</h3>
|
||||
|
||||
<div class="upload-zone">
|
||||
<p><strong>Upload Photos/Video (10MB max)</strong></p>
|
||||
<p class="small-text">Tip: A photo of the <u>model number sticker</u> helps us arrive with the right parts!</p>
|
||||
<InputFile OnChange="HandleFiles" multiple class="file-input" id="file-upload" />
|
||||
<label for="file-upload" class="btn btn-secondary">Add Media</label>
|
||||
|
||||
@if (SelectedFiles.Any())
|
||||
{
|
||||
<div class="file-count">@SelectedFiles.Count files attached</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label>Full Name</label>
|
||||
<InputText @bind-Value="Model.Name" class="custom-input" />
|
||||
<ValidationMessage For="@(() => Model.Name)" class="text-danger" />
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label>Phone Number</label>
|
||||
<InputText @bind-Value="Model.Phone" class="custom-input" />
|
||||
<ValidationMessage For="@(() => Model.Phone)" class="text-danger" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary btn-large">Submit Repair Request</button>
|
||||
</div>
|
||||
</EditForm>
|
||||
</div>
|
||||
|
||||
<EditForm Model="@Model" OnValidSubmit="HandleSubmit" class="booking-form-wrapper">
|
||||
<DataAnnotationsValidator />
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-column">
|
||||
<h3 class="form-heading">1. Appliance Details</h3>
|
||||
|
||||
<div class="field-group">
|
||||
<label>Appliance Type</label>
|
||||
<InputSelect @bind-Value="Model.Type" class="custom-input">
|
||||
<option value="">Select an appliance...</option>
|
||||
<option>Refrigerator</option>
|
||||
<option>Washing Machine</option>
|
||||
<option>Dishwasher</option>
|
||||
<option>Oven / Stove</option>
|
||||
<option>Dryer</option>
|
||||
</InputSelect>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label>Appliance Brand</label>
|
||||
<InputSelect @bind-Value="Model.Brand" class="custom-input">
|
||||
<option value="">Select a brand...</option>
|
||||
<option>LG</option>
|
||||
<option>Maytag</option>
|
||||
<option>Whirlpool</option>
|
||||
<option>Kitchen Aid</option>
|
||||
<option>Amana</option>
|
||||
<option>GE</option>
|
||||
<option>Samsung</option>
|
||||
<option>Bosch</option>
|
||||
<option>Frigidaire</option>
|
||||
<option>Kenmore</option>
|
||||
<option>Other (please include in notes)</option>
|
||||
</InputSelect>
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label>Describe the Issue</label>
|
||||
<InputTextArea @bind-Value="Model.Notes"
|
||||
placeholder="e.g. Making a clicking noise, not draining, error code F1E2..."
|
||||
class="custom-input textarea" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-column">
|
||||
<h3 class="form-heading">2. Photos & Contact</h3>
|
||||
|
||||
<div class="upload-zone">
|
||||
<p><strong>Upload Photos/Video</strong></p>
|
||||
<p class="small-text">Tip: A photo of the <u>model number sticker</u> helps us arrive with the right parts!</p>
|
||||
<InputFile OnChange="HandleFiles" multiple class="file-input" id="file-upload" />
|
||||
<label for="file-upload" class="btn btn-secondary">Add Media</label>
|
||||
|
||||
@if (SelectedFiles.Any())
|
||||
{
|
||||
<div class="file-count">@SelectedFiles.Count files attached</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label>Full Name</label>
|
||||
<InputText @bind-Value="Model.Name" class="custom-input" />
|
||||
</div>
|
||||
|
||||
<div class="field-group">
|
||||
<label>Phone Number</label>
|
||||
<InputText @bind-Value="Model.Phone" class="custom-input" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="complete-container">
|
||||
<div class="complete-content">
|
||||
<h1 class="complete-heading">Thank You!</h1>
|
||||
<p class="complete-subheading">We will be contacting you shortly.</p>
|
||||
<p class="complete-subheading">Your request number is: @Model.RequestNumber</p>
|
||||
<NavLink class="btn-home" href="" Match="NavLinkMatch.All">
|
||||
<span class="home-icon">🏠</span> Back to Home
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div class="form-footer">
|
||||
<button type="submit" class="btn btn-primary btn-large">Submit Repair Request</button>
|
||||
</div>
|
||||
</EditForm>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
Reference in New Issue
Block a user