318 lines
16 KiB
Plaintext
318 lines
16 KiB
Plaintext
@inject IPokemonService PokemonService
|
|
|
|
@if(formUse == "ADD")
|
|
{
|
|
<div class="pokemon-form-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"
|
|
@onchange="@SendPokemon"
|
|
class="form-control "
|
|
type="number" />
|
|
<InputText placeholder="Pokemon Name"
|
|
id="PokemonName"
|
|
@bind-Value="NewPokemon.PokemonName"
|
|
@onchange="@SendPokemon"
|
|
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"
|
|
@onchange="@SendPokemon"
|
|
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"
|
|
@onchange="@SendPokemon"
|
|
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" @onchange="@SendPokemon" 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" @onchange="@SendPokemon" 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" @onchange="@SendPokemon" 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" @onchange="@SendPokemon" 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" @onchange="@SendPokemon" 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" @onchange="@SendPokemon" 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-success rounded rounded-5 p-1"
|
|
@onclick="@SendPokemon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4" />
|
|
</svg>
|
|
|
|
</button>
|
|
@if (mostRecentForm)
|
|
{
|
|
<button type="button"
|
|
class="btn btn-danger rounded rounded-5 p-1"
|
|
@onclick="@HandleRemove">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
|
|
</svg>
|
|
</button>
|
|
}
|
|
else
|
|
{
|
|
<button type="button"
|
|
class="btn btn-danger rounded rounded-5 p-1"
|
|
|
|
disabled>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
|
|
</svg>
|
|
</button>
|
|
}
|
|
</div>
|
|
</EditForm>
|
|
</div>
|
|
|
|
}
|
|
else if (formUse == "EDIT")
|
|
{
|
|
<div class="pokemon-form-container m-auto bg-info border border-5 border-info-subtle rounded-4 p-3">
|
|
<EditForm class="col" Model="PokemonToEdit">
|
|
<DataAnnotationsValidator />
|
|
|
|
<div class="bg-primary-subtle rounded"><p class="fs-3 fw-light text-center card-title">Edit 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="PokemonToEdit.PokemonId"
|
|
@onchange="@SendPokemon"
|
|
class="form-control "
|
|
type="number" />
|
|
<InputText placeholder="Pokemon Name"
|
|
id="PokemonName"
|
|
@bind-Value="PokemonToEdit.PokemonName"
|
|
@onchange="@SendPokemon"
|
|
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="PokemonToEdit.IsVariation"
|
|
@onclick="@Toggle"
|
|
@onchange="@SendPokemon"
|
|
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="PokemonToEdit.VariationName"
|
|
@onchange="@SendPokemon"
|
|
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="PokemonToEdit.PokemonType" class="form-select rounded-end" @onchange="@SendPokemon">
|
|
<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="PokemonToEdit.SleepType" class="form-select rounded-bottom" @onchange="@SendPokemon">
|
|
<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="PokemonToEdit.Speciality" class="form-select rounded-bottom" @onchange="@SendPokemon">
|
|
<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="PokemonToEdit.PokemonImageUrl" class="form-control rounded-end" @onchange="@SendPokemon" />
|
|
</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="PokemonToEdit.PokemonShinyImageUrl" class="form-control rounded-end" @onchange="@SendPokemon" />
|
|
</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="PokemonToEdit.FlavorText" class="form-control rounded-end" @onchange="@SendPokemon" />
|
|
</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">
|
|
@if (mostRecentForm)
|
|
{
|
|
<button type="button"
|
|
class="btn btn-danger rounded rounded-5 p-1"
|
|
@onclick="@HandleRemove">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
|
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
|
|
</svg>
|
|
</button>
|
|
}
|
|
</div>
|
|
</EditForm>
|
|
</div>
|
|
}
|
|
|