153 lines
7.0 KiB
Plaintext
153 lines
7.0 KiB
Plaintext
@inject IPokemonService PokemonService
|
|
|
|
|
|
<div class="create-container m-auto bg-info border border-5 border-info-subtle rounded-4 p-3">
|
|
<EditForm class="col" Model="NewPokemon">
|
|
<DataAnnotationsValidator />
|
|
|
|
<div class="bg-primary-subtle rounded"><p class="fs-3 fw-light text-center card-title">New Pokemon</p></div>
|
|
|
|
<!-- Pokemon Number and Name -->
|
|
<div class="row mt-1">
|
|
<div class="col input-group mb-2">
|
|
<span class="input-group-text text-sm-center rounded-start">#</span>
|
|
<InputNumber min="1"
|
|
placeholder="Pokedex #"
|
|
id="PokemonId"
|
|
@bind-Value="NewPokemon.PokemonId"
|
|
class="form-control "
|
|
type="number" />
|
|
<InputText placeholder="Pokemon Name"
|
|
id="PokemonName"
|
|
@bind-Value="NewPokemon.PokemonName"
|
|
class="form-control w-50 rounded-end" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Variation Check -->
|
|
<div class="d-flex flex-row justify-content-start input-group ">
|
|
<InputCheckbox id="IsVariation"
|
|
@bind-Value="NewPokemon.IsVariation"
|
|
@onclick="@Toggle"
|
|
class="form-check-input p-3 rounded" />
|
|
<span class="input-group-text ms-1 @GetRoundingClass()">Variation?</span>
|
|
<InputText placeholder="How So?"
|
|
id="VariationName"
|
|
@bind-Value="NewPokemon.VariationName"
|
|
class="form-control rounded-end"
|
|
hidden="@HideLabel" />
|
|
</div>
|
|
|
|
<!-- <br> -->
|
|
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
|
|
|
|
<!-- Pokemon Type -->
|
|
<div class="row mb-2">
|
|
<div class="input-group m-auto">
|
|
<span for="PokemonType" class="input-group-text rounded-start">Pokemon Type</span>
|
|
<InputSelect id="PokemonType" @bind-Value="NewPokemon.PokemonType" class="form-select rounded-end">
|
|
<option disabled value="" selected>Select...</option>
|
|
@foreach (var pt in PokemonTypes)
|
|
{
|
|
<option value="@pt">@pt</option>
|
|
}
|
|
</InputSelect>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Pokemon Sleep Type, Specialty -->
|
|
<div class="row mb-3 mx-0">
|
|
<!-- Sleep Type -->
|
|
<div class="col ps-0 pe-1">
|
|
<div class="row input-group m-auto">
|
|
<span for="SleepType" class="input-group-text rounded-top">Sleep Type</span>
|
|
</div>
|
|
<div class="row input-group m-auto">
|
|
<InputSelect id="SleepType" @bind-Value="NewPokemon.SleepType" class="form-select rounded-bottom">
|
|
<option disabled value="" selected>Select...</option>
|
|
@foreach (var st in SleepTypes)
|
|
{
|
|
<option value="@st">@st</option>
|
|
}
|
|
</InputSelect>
|
|
</div>
|
|
</div>
|
|
<!-- Speciality -->
|
|
<div class="col ps-1 pe-0">
|
|
<div class="row input-group m-auto">
|
|
<span for="Speciality" class="input-group-text rounded-top">Specialty</span>
|
|
</div>
|
|
<div class="row input-group m-auto">
|
|
<InputSelect id="Speciality" @bind-Value="NewPokemon.Speciality" class="form-select rounded-bottom">
|
|
<option disabled value="" selected>Select...</option>
|
|
@foreach (var sp in Specialities)
|
|
{
|
|
<option value="@sp">@sp</option>
|
|
}
|
|
</InputSelect>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <br> -->
|
|
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
|
|
|
|
<!-- Images -->
|
|
<div class="row mb-2">
|
|
<div class="input-group m-auto">
|
|
<span for="ImageUrl" class="input-group-text rounded-start">Base Image URL</span>
|
|
<InputText id="ImageUrl" @bind-Value="NewPokemon.PokemonImageUrl" class="form-control rounded-end" />
|
|
</div>
|
|
</div>
|
|
<div class="row mb-2">
|
|
<div class="input-group m-auto">
|
|
<span for="ShinyImageUrl" class="input-group-text rounded-start">Shiny Image URL</span>
|
|
<InputText id="ShinyImageUrl" @bind-Value="NewPokemon.PokemonShinyImageUrl" class="form-control rounded-end" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Flavor -->
|
|
<div class="row mb-2">
|
|
<div class="input-group m-auto">
|
|
<span for="FlavorText" class="input-group-text rounded-start">Flavor Text</span>
|
|
<InputText id="FlavorText" @bind-Value="NewPokemon.FlavorText" class="form-control rounded-end" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <br> -->
|
|
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
|
|
|
|
@if (showErrors && !IsComplete)
|
|
{
|
|
<div class="alert alert-warning mt-2">
|
|
Please complete: @string.Join(", ", MissingFields())
|
|
</div>
|
|
}
|
|
|
|
<div class="d-flex mt-3 justify-content-center gap-3">
|
|
<button type="button"
|
|
class="btn btn-primary rounded p-1 px-0"
|
|
@onclick="@SendPokemon"
|
|
disabled="@( !IsComplete )">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-arrow-up" viewBox="0 0 16 16">
|
|
<path d="M8 11a.5.5 0 0 0 .5-.5V6.707l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2a.5.5 0 0 0-.708 0l-2 2a.5.5 0 1 0 .708.708L7.5 6.707V10.5a.5.5 0 0 0 .5.5" />
|
|
<path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
|
|
</svg>
|
|
</button>
|
|
@if(mostRecentForm)
|
|
{
|
|
<button type="button"
|
|
class="btn btn-danger rounded p-1 px-0"
|
|
@onclick="@HandleRemove">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-minus" viewBox="0 0 16 16">
|
|
<path d="M5.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5" />
|
|
<path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
|
|
</svg>
|
|
</button>
|
|
}
|
|
</div>
|
|
</EditForm>
|
|
</div>
|
|
|