We are now saving Ingredients!

This commit is contained in:
Kira Jiroux 2025-12-04 12:36:55 -05:00
parent 3feacfaa96
commit 7b6df6530c
4 changed files with 366 additions and 328 deletions

View File

@ -8,7 +8,7 @@ namespace Portfolio.Domain.Features.Pokemon
{ {
public class Ingredient public class Ingredient
{ {
public string Ing { get; set; } public string Name { get; set; }
public string Description { get; set; } public string Description { get; set; }
public string ImageURL { get; set; } public string ImageURL { get; set; }
} }

View File

@ -1,339 +1,375 @@
@inject IPokemonService PokemonService @inject IPokemonService PokemonService
@inject IHttpClientFactory ClientFactory @inject IHttpClientFactory ClientFactory
@if(Ingredients == null)
@if(formUse == "ADD")
{ {
<div class="pokemon-form-container m-auto bg-info border border-5 border-info-subtle rounded-4 p-3"> <Loading />
<EditForm class="col" Model="NewPokemon"> }
<DataAnnotationsValidator /> else
{
@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> <div class="bg-primary-subtle rounded"><p class="fs-3 fw-light text-center card-title">New Pokemon</p></div>
<!-- Pokemon Number and Name --> <!-- Pokemon Number and Name -->
<div class="row mt-1"> <div class="row mt-1">
<div class="col input-group mb-2"> <div class="col input-group mb-2">
<span class="input-group-text text-sm-center rounded-start">#</span> <span class="input-group-text text-sm-center rounded-start">#</span>
<InputNumber min="1" <InputNumber min="1"
placeholder="Pokedex #" placeholder="Pokedex #"
id="PokemonId" id="PokemonId"
@bind-Value="NewPokemon.PokemonId" @bind-Value="NewPokemon.PokemonId"
@onchange="@SendPokemon" @onchange="@SendPokemon"
class="form-control " class="form-control "
type="number" /> type="number" />
<InputText placeholder="Pokemon Name" <InputText placeholder="Pokemon Name"
id="PokemonName" id="PokemonName"
@bind-Value="NewPokemon.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" @onchange="@SendPokemon"
class="form-control w-50 rounded-end" /> class="form-control rounded-end"
</div> hidden="@HideLabel" />
</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>
</div> <!-- <br> -->
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
<!-- Pokemon Sleep Type, Specialty --> <!-- Pokemon Type -->
<div class="row mb-3 mx-0"> <div class="row mb-2">
<!-- Sleep Type --> <div class="input-group m-auto">
<div class="col ps-0 pe-1"> <span for="PokemonType" class="input-group-text rounded-start">Pokemon Type</span>
<div class="row input-group m-auto"> <InputSelect id="PokemonType" @bind-Value="NewPokemon.PokemonType" @onchange="@SendPokemon" class="form-select rounded-end">
<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> <option disabled value="" selected>Select...</option>
@foreach (var st in SleepTypes) @foreach (var pt in PokemonTypes)
{ {
<option value="@st">@st</option> <option value="@pt">@pt</option>
} }
</InputSelect> </InputSelect>
</div> </div>
</div> </div>
<!-- Speciality -->
<div class="col ps-1 pe-0"> <!-- Pokemon Sleep Type, Specialty -->
<div class="row input-group m-auto"> <div class="row mb-3 mx-0">
<span for="Speciality" class="input-group-text rounded-top">Specialty</span> <!-- 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> </div>
<div class="row input-group m-auto"> <!-- Speciality -->
<InputSelect id="Speciality" @bind-Value="NewPokemon.Speciality" @onchange="@SendPokemon" class="form-select rounded-bottom"> <div class="col ps-1 pe-0">
<option disabled value="" selected>Select...</option> <div class="row input-group m-auto">
@foreach (var sp in Specialities) <span for="Speciality" class="input-group-text rounded-top">Specialty</span>
{ </div>
<option value="@sp">@sp</option> <div class="row input-group m-auto">
} <InputSelect id="Speciality" @bind-Value="NewPokemon.Speciality" @onchange="@SendPokemon" class="form-select rounded-bottom">
</InputSelect> <option disabled value="" selected>Select...</option>
@foreach (var sp in Specialities)
{
<option value="@sp">@sp</option>
}
</InputSelect>
</div>
</div> </div>
</div> </div>
</div>
<!-- Pokemon Ingredients --> <!-- Pokemon Ingredients -->
<div class="row mb-3 mx-0"> <div class="row mb-3 mx-0">
<!-- Ingredient 1 --> <!-- Ingredient 1 -->
<div class="col ps-0 pe-1"> <div class="col ps-0 pe-1">
<div class="row input-group m-auto"> <div class="row input-group m-auto">
<span for="Ingredient1" class="input-group-text rounded-top">Ingredient 1</span> <span for="Ingredient1" class="input-group-text rounded-top">Ingredient 1</span>
</div>
<div class="row input-group m-auto">
<InputSelect id="Ingredient1" @bind-Value="NewPokemon.Ingredient1" @onchange="@SendPokemon" class="form-select rounded-bottom">
<option disabled value="" selected>Select...</option>
@foreach (var ingredient in Ingredients)
{
<option value="@ingredient.Name">@ingredient.Name</option>
}
</InputSelect>
</div>
</div> </div>
<div class="row input-group m-auto"> <!-- Ingredient 2 -->
<InputSelect id="Ingredient1" @bind-Value="NewPokemon.Ingredient1" @onchange="@SendPokemon" class="form-select rounded-bottom"> <div class="col ps-0 pe-1">
<option disabled value="" selected>Select...</option> <div class="row input-group m-auto">
@foreach (var ingredient in Ingredients) <span for="Ingredient2" class="input-group-text rounded-top">Ingredient 2</span>
{ </div>
<option value="@ingredient.Ing">@ingredient.Ing</option> <div class="row input-group m-auto">
} <InputSelect id="Ingredient2" @bind-Value="NewPokemon.Ingredient2" @onchange="@SendPokemon" class="form-select rounded-bottom">
</InputSelect> <option disabled value="" selected>Select...</option>
@foreach (var ingredient in Ingredients)
{
<option value="@ingredient.Name">@ingredient.Name</option>
}
</InputSelect>
</div>
</div>
<!-- Ingredient 3 -->
<div class="col ps-0 pe-1">
<div class="row input-group m-auto">
<span for="Ingredient3" class="input-group-text rounded-top">Ingredient 3</span>
</div>
<div class="row input-group m-auto">
<InputSelect id="Ingredient3" @bind-Value="NewPokemon.Ingredient3" @onchange="@SendPokemon" class="form-select rounded-bottom">
<option disabled value="" selected>Select...</option>
@foreach (var ingredient in Ingredients)
{
<option value="@ingredient.Name">@ingredient.Name</option>
}
</InputSelect>
</div>
</div> </div>
</div> </div>
</div>
<!-- <br> --> <!-- <br> -->
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div> <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
<!-- Images --> <!-- Images -->
<div class="row mb-2"> <div class="row mb-2">
<div class="input-group m-auto"> <div class="input-group m-auto">
<span for="ImageUrl" class="input-group-text rounded-start">Base Image URL</span> <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" /> <InputText id="ImageUrl" @bind-Value="NewPokemon.PokemonImageUrl" @onchange="@SendPokemon" class="form-control rounded-end" />
</div>
</div> </div>
</div> <div class="row mb-2">
<div class="row mb-2"> <div class="input-group m-auto">
<div class="input-group m-auto"> <span for="ShinyImageUrl" class="input-group-text rounded-start">Shiny Image URL</span>
<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" />
<InputText id="ShinyImageUrl" @bind-Value="NewPokemon.PokemonShinyImageUrl" @onchange="@SendPokemon" class="form-control rounded-end" /> </div>
</div> </div>
</div>
<!-- Flavor --> <!-- Flavor -->
<div class="row mb-2"> <div class="row mb-2">
<div class="input-group m-auto"> <div class="input-group m-auto">
<span for="FlavorText" class="input-group-text rounded-start">Flavor Text</span> <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" /> <InputText id="FlavorText" @bind-Value="NewPokemon.FlavorText" @onchange="@SendPokemon" class="form-control rounded-end" />
</div>
</div> </div>
</div>
<!-- <br> --> <!-- <br> -->
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div> <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
@if (showErrors && !IsComplete) @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" <div class="alert alert-warning mt-2">
class="btn btn-danger rounded rounded-5 p-1" Please complete: @string.Join(", ", MissingFields())
@onclick="@HandleRemove"> </div>
<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
{ <div class="d-flex mt-3 justify-content-center gap-3">
<button type="button" <button type="button"
class="btn btn-danger rounded rounded-5 p-1" 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> 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"> <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="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" /> <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> </svg>
</button> </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>
</div> </EditForm>
</div>
<!-- Variation Check --> }
<div class="d-flex flex-row justify-content-start input-group "> else if (formUse == "EDIT")
<InputCheckbox id="IsVariation" {
@bind-Value="PokemonToEdit.IsVariation" <div class="pokemon-form-container m-auto bg-info border border-5 border-info-subtle rounded-4 p-3">
@onclick="@Toggle" <EditForm class="col" Model="PokemonToEdit">
@onchange="@SendPokemon" <DataAnnotationsValidator />
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="bg-primary-subtle rounded"><p class="fs-3 fw-light text-center card-title">Edit Pokemon</p></div>
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
<!-- Pokemon Type --> <!-- Pokemon Number and Name -->
<div class="row mb-2"> <div class="row mt-1">
<div class="input-group m-auto"> <div class="col input-group mb-2">
<span for="PokemonType" class="input-group-text rounded-start">Pokemon Type</span> <span class="input-group-text text-sm-center rounded-start">#</span>
<InputSelect id="PokemonType" @bind-Value="PokemonToEdit.PokemonType" class="form-select rounded-end" @onchange="@SendPokemon"> <InputNumber min="1"
<option disabled value="" selected>Select...</option> placeholder="Pokedex #"
@foreach (var pt in PokemonTypes) id="PokemonId"
{ @bind-Value="PokemonToEdit.PokemonId"
<option value="@pt">@pt</option> @onchange="@SendPokemon"
} class="form-control "
</InputSelect> type="number" />
</div> <InputText placeholder="Pokemon Name"
id="PokemonName"
</div> @bind-Value="PokemonToEdit.PokemonName"
@onchange="@SendPokemon"
<!-- Pokemon Sleep Type, Specialty --> class="form-control w-50 rounded-end" />
<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>
<div class="row input-group m-auto"> </div>
<InputSelect id="SleepType" @bind-Value="PokemonToEdit.SleepType" class="form-select rounded-bottom" @onchange="@SendPokemon">
<!-- 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> <option disabled value="" selected>Select...</option>
@foreach (var st in SleepTypes) @foreach (var pt in PokemonTypes)
{ {
<option value="@st">@st</option> <option value="@pt">@pt</option>
} }
</InputSelect> </InputSelect>
</div> </div>
</div> </div>
<!-- Speciality -->
<div class="col ps-1 pe-0"> <!-- Pokemon Sleep Type, Specialty -->
<div class="row input-group m-auto"> <div class="row mb-3 mx-0">
<span for="Speciality" class="input-group-text rounded-top">Specialty</span> <!-- 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> </div>
<div class="row input-group m-auto"> <!-- Speciality -->
<InputSelect id="Speciality" @bind-Value="PokemonToEdit.Speciality" class="form-select rounded-bottom" @onchange="@SendPokemon"> <div class="col ps-1 pe-0">
<option disabled value="" selected>Select...</option> <div class="row input-group m-auto">
@foreach (var sp in Specialities) <span for="Speciality" class="input-group-text rounded-top">Specialty</span>
{ </div>
<option value="@sp">@sp</option> <div class="row input-group m-auto">
} <InputSelect id="Speciality" @bind-Value="PokemonToEdit.Speciality" class="form-select rounded-bottom" @onchange="@SendPokemon">
</InputSelect> <option disabled value="" selected>Select...</option>
@foreach (var sp in Specialities)
{
<option value="@sp">@sp</option>
}
</InputSelect>
</div>
</div> </div>
</div> </div>
</div>
<!-- <br> --> <!-- <br> -->
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div> <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
<!-- Images --> <!-- Images -->
<div class="row mb-2"> <div class="row mb-2">
<div class="input-group m-auto"> <div class="input-group m-auto">
<span for="ImageUrl" class="input-group-text rounded-start">Base Image URL</span> <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" /> <InputText id="ImageUrl" @bind-Value="PokemonToEdit.PokemonImageUrl" class="form-control rounded-end" @onchange="@SendPokemon" />
</div>
</div> </div>
</div> <div class="row mb-2">
<div class="row mb-2"> <div class="input-group m-auto">
<div class="input-group m-auto"> <span for="ShinyImageUrl" class="input-group-text rounded-start">Shiny Image URL</span>
<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" />
<InputText id="ShinyImageUrl" @bind-Value="PokemonToEdit.PokemonShinyImageUrl" class="form-control rounded-end" @onchange="@SendPokemon" /> </div>
</div> </div>
</div>
<!-- Flavor --> <!-- Flavor -->
<div class="row mb-2"> <div class="row mb-2">
<div class="input-group m-auto"> <div class="input-group m-auto">
<span for="FlavorText" class="input-group-text rounded-start">Flavor Text</span> <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" /> <InputText id="FlavorText" @bind-Value="PokemonToEdit.FlavorText" class="form-control rounded-end" @onchange="@SendPokemon" />
</div>
</div> </div>
</div>
<!-- <br> --> <!-- <br> -->
<div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div> <div class="border-bottom border-3 border-info-subtle rounded m-1 my-3"></div>
@if (showErrors && !IsComplete) @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" <div class="alert alert-warning mt-2">
class="btn btn-danger rounded rounded-5 p-1" Please complete: @string.Join(", ", MissingFields())
@onclick="@HandleRemove"> </div>
<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 class="d-flex mt-3 justify-content-center gap-3">
</div> @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>
}
} }

View File

@ -29,10 +29,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
PokemonName = string.Empty, // Required fields cannot be null PokemonName = string.Empty, // Required fields cannot be null
SleepType = string.Empty, SleepType = string.Empty,
Speciality = string.Empty, Speciality = string.Empty,
IsVariation = false, IsVariation = false
Ingredient1 = "",
Ingredient2 = "",
Ingredient3 = ""
}; };
// When Editing // When Editing
@ -43,8 +40,6 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
// General Form // General Form
private List<string> PokemonTypeInfo;
protected static readonly string[] PokemonTypes = new[] protected static readonly string[] PokemonTypes = new[]
{ {
"Grass","Fire","Water","Normal","Flying","Bug","Poison","Electric","Ground","Rock","Ice", "Grass","Fire","Water","Normal","Flying","Bug","Poison","Electric","Ground","Rock","Ice",
@ -52,8 +47,8 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
}; };
protected static readonly string[] SleepTypes = new[] { "Dozing", "Snoozing", "Slumbering" }; protected static readonly string[] SleepTypes = new[] { "Dozing", "Snoozing", "Slumbering" };
protected static readonly string[] Specialities = new[] { "Berries", "Ingredients", "Skills", "All" }; protected static readonly string[] Specialities = new[] { "Berries", "Ingredients", "Skills", "All" };
private List<Ingredient> Ingredients { get; set; }
private List<Ingredient>? Ingredients;
private bool HideLabel { get; set; } private bool HideLabel { get; set; }
private bool showErrors { get; set; } = false; private bool showErrors { get; set; } = false;
@ -126,6 +121,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
private async Task SendPokemon() private async Task SendPokemon()
{ {
Console.WriteLine("onchange");
if(formUse == "ADD") if(formUse == "ADD")
{ {
if (!IsComplete) if (!IsComplete)
@ -147,7 +143,10 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
VariationName = NewPokemon.VariationName, VariationName = NewPokemon.VariationName,
PokemonImageUrl = NewPokemon.PokemonImageUrl, PokemonImageUrl = NewPokemon.PokemonImageUrl,
PokemonShinyImageUrl = NewPokemon.PokemonShinyImageUrl, PokemonShinyImageUrl = NewPokemon.PokemonShinyImageUrl,
FlavorText = NewPokemon.FlavorText FlavorText = NewPokemon.FlavorText,
Ingredient1 = NewPokemon.Ingredient1,
Ingredient2 = NewPokemon.Ingredient2,
Ingredient3 = NewPokemon.Ingredient3
}; };
await OnPokemonReady.InvokeAsync(copy); await OnPokemonReady.InvokeAsync(copy);
@ -168,7 +167,10 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
VariationName = PokemonToEdit.VariationName, VariationName = PokemonToEdit.VariationName,
PokemonImageUrl = PokemonToEdit.PokemonImageUrl, PokemonImageUrl = PokemonToEdit.PokemonImageUrl,
PokemonShinyImageUrl = PokemonToEdit.PokemonShinyImageUrl, PokemonShinyImageUrl = PokemonToEdit.PokemonShinyImageUrl,
FlavorText = PokemonToEdit.FlavorText FlavorText = PokemonToEdit.FlavorText,
Ingredient1 = PokemonToEdit.Ingredient1,
Ingredient2 = PokemonToEdit.Ingredient2,
Ingredient3 = PokemonToEdit.Ingredient3
}; };
await OnPokemonReady.InvokeAsync(edit); await OnPokemonReady.InvokeAsync(edit);

View File

@ -1,98 +1,98 @@
[ [
{ {
"ingredient": "Large Leek", "name": "Large Leek",
"description": "Whether this is the kind of vegetable stalk that Farfetch'd like is unknown.", "description": "Whether this is the kind of vegetable stalk that Farfetch'd like is unknown.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/largeleek.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/largeleek.png"
}, },
{ {
"ingredient": "Tasty Mushroom", "name": "Tasty Mushroom",
"description": "A juicy mushroom with an abundance of umami flavor.", "description": "A juicy mushroom with an abundance of umami flavor.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/tastymushroom.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/tastymushroom.png"
}, },
{ {
"ingredient": "Fancy Egg", "name": "Fancy Egg",
"description": "A nutritious cooking ingredient that goes well with all sorts of seasonings.", "description": "A nutritious cooking name that goes well with all sorts of seasonings.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/fancyegg.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/fancyegg.png"
}, },
{ {
"ingredient": "Soft Potato", "name": "Soft Potato",
"description": "Its mellow flavor makes both body and spirit feel warm and fuzzy.", "description": "Its mellow flavor makes both body and spirit feel warm and fuzzy.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/softpotato.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/softpotato.png"
}, },
{ {
"ingredient": "Fancy Apple", "name": "Fancy Apple",
"description": "An apple chosen above others. It has spectacular form and a brilliant sheen.", "description": "An apple chosen above others. It has spectacular form and a brilliant sheen.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/fancyapple.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/fancyapple.png"
}, },
{ {
"ingredient": "Fiery Herb", "name": "Fiery Herb",
"description": "The fiery taste of this bright-red herb will wake anyone right up.", "description": "The fiery taste of this bright-red herb will wake anyone right up.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/fieryherb.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/fieryherb.png"
}, },
{ {
"ingredient": "Bean Sausage", "name": "Bean Sausage",
"description": "A healthy sausage made from beans that Pok<6F>mon like to eat.", "description": "A healthy sausage made from beans that Pok<6F>mon like to eat.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/beansausage.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/beansausage.png"
}, },
{ {
"ingredient": "Moomoo Milk", "name": "Moomoo Milk",
"description": "Highly nutritious milk. Pok<6F>mon that drink it become full of energy.", "description": "Highly nutritious milk. Pok<6F>mon that drink it become full of energy.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/moomoomilk.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/moomoomilk.png"
}, },
{ {
"ingredient": "Honey", "name": "Honey",
"description": "A sweet honey collected by Pok<6F>mon.", "description": "A sweet honey collected by Pok<6F>mon.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/honey.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/honey.png"
}, },
{ {
"ingredient": "Pure Oil", "name": "Pure Oil",
"description": "All-purpose oil that can be used in any type of cuisine.", "description": "All-purpose oil that can be used in any type of cuisine.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/pureoil.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/pureoil.png"
}, },
{ {
"ingredient": "Warming Ginger", "name": "Warming Ginger",
"description": "Spicy ginger that warms the body better than any other ingredient.", "description": "Spicy ginger that warms the body better than any other name.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/warmingginger.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/warmingginger.png"
}, },
{ {
"ingredient": "Snoozy Tomato", "name": "Snoozy Tomato",
"description": "A bright-red tomato. Eat it and you'll sleep like a baby.", "description": "A bright-red tomato. Eat it and you'll sleep like a baby.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/snoozytomato.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/snoozytomato.png"
}, },
{ {
"ingredient": "Soothing Cacao", "name": "Soothing Cacao",
"description": "This cacao bean is time-consuming to process, but its soothing effects make the effort worthwhile.", "description": "This cacao bean is time-consuming to process, but its soothing effects make the effort worthwhile.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/soothingcacao.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/soothingcacao.png"
}, },
{ {
"ingredient": "Slowpoke Tail", "name": "Slowpoke Tail",
"description": "A very tasty tail of something. When it falls off, it grows back quickly.", "description": "A very tasty tail of something. When it falls off, it grows back quickly.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/slowpoketail.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/slowpoketail.png"
}, },
{ {
"ingredient": "Greengrass Soybeans", "name": "Greengrass Soybeans",
"description": "This Greengrass Isle specialty is easy to process into foods that are great for training.", "description": "This Greengrass Isle specialty is easy to process into foods that are great for training.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/greengrasssoybeans.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/greengrasssoybeans.png"
}, },
{ {
"ingredient": "Greengrass Corn", "name": "Greengrass Corn",
"description": "This Greengrass Isle specialty can be eaten raw. It's remarkably sweet.", "description": "This Greengrass Isle specialty can be eaten raw. It's remarkably sweet.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/greengrasscorn.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/greengrasscorn.png"
}, },
{ {
"ingredient": "Rousing Coffee", "name": "Rousing Coffee",
"description": "You may have trouble sleeping if you drink too much of this. It may help make you feel more alert.", "description": "You may have trouble sleeping if you drink too much of this. It may help make you feel more alert.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/rousingcoffee.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/rousingcoffee.png"
}, },
{ {
"ingredient": "Plump Pumpkin", "name": "Plump Pumpkin",
"description": "A big pumpkin packed full of pulp.", "description": "A big pumpkin packed full of pulp.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/plumppumpkin.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/plumppumpkin.png"
}, },
{ {
"ingredient": "Glossy Avocado", "name": "Glossy Avocado",
"description": "The glossy green shine is a sign it' s freshly picked.", "description": "The glossy green shine is a sign it' s freshly picked.",
"imageURL": "https://www.serebii.net/pokemonsleep/ingredients/glossyavocado.png" "imageURL": "https://www.serebii.net/pokemonsleep/names/glossyavocado.png"
} }
] ]