Pokemon are being added to the database, and being presented correctly on the main page.
This commit is contained in:
Kira Jiroux
parent
9dd4765780
commit
7a797c558b
|
|
@ -1,61 +1,105 @@
|
|||
@page "/pokemonsleep/add-new-pokemon"
|
||||
|
||||
@inject IPokemonService PokemonService
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
<h2>Add New Pokémon</h2>
|
||||
@attribute [StreamRendering]
|
||||
@rendermode InteractiveServer
|
||||
|
||||
|
||||
<PageTitle>Add New Pokémon</PageTitle>
|
||||
|
||||
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<h1 class="text-info">Pokémon Sleep</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@if (isSubmitting)
|
||||
{
|
||||
<p><em>Submitting...</em></p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="card shadow border-0 mt-4" style="margin: auto; width: 900px; max-width: 60%; ">
|
||||
<EditForm Model="NewPokemon" OnValidSubmit="HandleSubmit">
|
||||
<div class="w-50 mt-5 m-auto " style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
|
||||
|
||||
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<h2 class="text-info">Add New Pokémon</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container shadow m-lg-1" >
|
||||
<EditForm class=" col mb-3" Model="NewPokemon" OnValidSubmit="HandleSubmit">
|
||||
<DataAnnotationsValidator />
|
||||
<div class="mb-3">
|
||||
<label for="PokemonName" class="form-label">Pokémon Name</label>
|
||||
<InputText id="PokemonName" @bind-Value="NewPokemon.PokemonName" class="form-control" required />
|
||||
|
||||
<!-- Section 1 -->
|
||||
<div class="row m-auto">
|
||||
<div class="col-sm-3 input-group input-group-sm mb-3 ">
|
||||
<!-- Pokemon #-->
|
||||
<span for="PokemonId" class="input-group-text">#</span>
|
||||
<InputNumber min="0" placeholder="Pokedex #" id="PokemonId" @bind-Value="NewPokemon.PokemonId" class="form-control" required />
|
||||
<!-- Pokemon Name-->
|
||||
<InputText placeholder="Pokemon Name" id="PokemonName" @bind-Value="NewPokemon.PokemonName" class="form-control" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="PokemonId" class="form-label">Pokédex ID</label>
|
||||
<InputNumber id="PokemonId" @bind-Value="NewPokemon.PokemonId" class="form-control" required />
|
||||
<!-- Section 2 -->
|
||||
<div class="row m-auto">
|
||||
<div class="col-sm-3 input-group input-group-sm mb-3">
|
||||
<!-- Variation Check -->
|
||||
<InputCheckbox id="IsVariation" @bind-Value="NewPokemon.IsVariation" @onclick="@Toggle" class=" form-check-input" style="border: 1px solid black;" />
|
||||
<span for="IsVariation" class="input-group-text">Variation?</span>
|
||||
<!-- Variation Region Input -->
|
||||
<InputText placeholder="What Variant? (Alolan, Paldean)" hidden="@HideLabel" id="VariationName" @bind-Value="NewPokemon.VariationName" class="form-control" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="IsVariation" class="form-label">Variation?</label>
|
||||
<InputCheckbox id="IsVariation" @bind-Value="NewPokemon.IsVariation" @onclick="onDisable" class="form-control" required />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="VariationName" class="form-label">What Variant? (Alolan, Paldean)</label>
|
||||
<InputText disabled="@ToggleVariationName" id="VariationName" @bind-Value="NewPokemon.VariationName" class="form-control" required />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
|
||||
<!-- Section 3 -->
|
||||
<div class="row mb-3 m-auto" >
|
||||
<label for="SleepType" class="form-label">Sleep Type</label>
|
||||
<InputSelect id="SleepType" @bind-Value="NewPokemon.SleepType" class="form-select">
|
||||
<option hidden value="">Dozing / Snoozing / Slumbering</option>
|
||||
<option value="Dozing">Dozing</option>
|
||||
<option value="Snoozing">Snoozing</option>
|
||||
<option value="Slumbering">Slumbering</option>
|
||||
</InputSelect>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<!-- Section 4 -->
|
||||
<div class="row mb-3 m-auto">
|
||||
<label for="Speciality" class="form-label">Specialty</label>
|
||||
<InputSelect id="SleepType" @bind-Value="NewPokemon.Speciality" class="form-select">
|
||||
<option hidden value="">Berries / Ingredients / Skills</option>
|
||||
<option value="Berries">Berries</option>
|
||||
<option value="Ingredients">Ingredients</option>
|
||||
<option value="Skills">Skills</option>
|
||||
</InputSelect>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Add Pokémon</button>
|
||||
<button type="button" class="btn btn-secondary" @onclick="Cancel">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary mb-3">Add Pokémon</button>
|
||||
<button type="button" class="btn btn-secondary mb-3" @onclick="@Cancel">Cancel</button>
|
||||
</EditForm>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@code {
|
||||
|
||||
private bool HideLabel { get; set; } = true;
|
||||
private void Toggle()
|
||||
{
|
||||
HideLabel = !HideLabel;
|
||||
}
|
||||
|
||||
private Pokemon NewPokemon = new Pokemon
|
||||
{
|
||||
PokemonId = 0, // Or any default ID logic
|
||||
|
|
|
|||
|
|
@ -3,10 +3,45 @@
|
|||
@inject IPokemonService PokemonService
|
||||
|
||||
@attribute [StreamRendering]
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<PageTitle>Pokémon Sleep</PageTitle>
|
||||
<style>
|
||||
.tableFixHead {
|
||||
overflow: auto;
|
||||
height: 600px;
|
||||
}
|
||||
|
||||
.tableFixHead thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
||||
<div class="row">
|
||||
<div class="col-4"></div>
|
||||
<div class="col-4 text-center">
|
||||
<h1 class="text-info">Pokémon Sleep</h1>
|
||||
</div>
|
||||
<div class="col-4 text-end">
|
||||
<!--
|
||||
<button @onclick="ShowCreateForm" class="btn btn-outline-primary">
|
||||
<i class="bi bi-plus-square"></i> Add New Pokemon
|
||||
</button>
|
||||
-->
|
||||
<NavLink class="btn btn-outline-primary" style="border-radius: 15px 50px;" href="/pokemonsleep/add-new-pokemon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
|
||||
</svg> Add New Pokemon
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PageTitle>Pokemon Sleep</PageTitle>
|
||||
|
||||
<h1>Pokemon Sleep</h1>
|
||||
@if (pokemons == null)
|
||||
{
|
||||
<p><em>Loading...</em></p>
|
||||
|
|
@ -17,31 +52,13 @@ else
|
|||
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<h1 class="text-info">Available Pokemon</h1>
|
||||
<h2 class="text-info">Available Pokémon</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-4">
|
||||
<div class="row pb-3">
|
||||
<div class="col-6">
|
||||
</div>
|
||||
<div class="col-6 text-end">
|
||||
<!--
|
||||
<button @onclick="ShowCreateForm" class="btn btn-outline-primary">
|
||||
<i class="bi bi-plus-square"></i> Add New Pokemon
|
||||
</button>
|
||||
-->
|
||||
<NavLink class="btn btn-outline-primary" href="pokemonsleep/add-new-pokemon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
|
||||
</svg> Add New Pokemon
|
||||
</NavLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<div class="card-body p-4 tableFixHead" >
|
||||
<table class="table table-striped" >
|
||||
<thead class="thead-dark text-light">
|
||||
<tr>
|
||||
<th scope="col" style="width: 50%;"></th>
|
||||
<th scope="col">#</th>
|
||||
|
|
@ -55,6 +72,8 @@ else
|
|||
@foreach (var pokemon in pokemons)
|
||||
{
|
||||
<tr style=" text-align: center; margin:0; padding: 0;">
|
||||
|
||||
<!-- Section 1: Pokemon Image -->
|
||||
@if (pokemon.IsVariation)
|
||||
{
|
||||
@if (pokemon.VariationName == "Alolan")
|
||||
|
|
@ -86,9 +105,11 @@ else
|
|||
</td>
|
||||
}
|
||||
|
||||
<!-- Section 2: Pokemon # -->
|
||||
<th scope="row">@pokemon.PokemonId</th>
|
||||
|
||||
@if (pokemon.IsVariation)
|
||||
<!-- Section 3: Pokemon Name -->
|
||||
@if (pokemon.IsVariation) // If a Variant
|
||||
{
|
||||
@if (pokemon.VariationName == "Alolan")
|
||||
{
|
||||
|
|
@ -99,16 +120,20 @@ else
|
|||
<td> Paldean @pokemon.PokemonName</td>
|
||||
}
|
||||
}
|
||||
else // Base Case
|
||||
else // Otherwise, Base Case
|
||||
{
|
||||
<td> @pokemon.PokemonName</td>
|
||||
}
|
||||
|
||||
|
||||
<!-- Section 4: Sleep Type -->
|
||||
<td>@pokemon.SleepType</td>
|
||||
|
||||
<!-- Section 5: Speciality -->
|
||||
<td style="padding-right: 30px;">@pokemon.Speciality</td>
|
||||
|
||||
<!-- Section 6: Delete Button -->
|
||||
<td>
|
||||
<a asp-controller="Pokemon" asp-action="PokemonDelete" asp-route-Id="@pokemon.Id" class="btn btn-danger">
|
||||
<a asp-controller="Pokemon" asp-action="PokemonDelete" asp-route-Id="@pokemon.Id" class="btn btn-danger" style="border-radius: 15px 50px 30px 5px;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
|
||||
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" />
|
||||
<path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" />
|
||||
|
|
@ -128,7 +153,6 @@ else
|
|||
@code {
|
||||
private List<Pokemon> pokemons = new List<Pokemon>();
|
||||
|
||||
private bool showForm = true;
|
||||
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
|
|
@ -138,8 +162,10 @@ else
|
|||
if (result is not null)
|
||||
{
|
||||
pokemons = result;
|
||||
pokemons.Sort((x,y) => x.PokemonId.CompareTo(y.PokemonId));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ using Portfolio.Infrastructure;
|
|||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
||||
// Add services to the container.
|
||||
builder.Services.AddRazorComponents();
|
||||
builder.Services.AddRazorComponents()
|
||||
.AddInteractiveServerComponents();
|
||||
|
||||
builder.Services.AddApplication();
|
||||
builder.Services.AddInfrastructure(builder.Configuration);
|
||||
|
|
@ -25,6 +26,7 @@ app.UseHttpsRedirection();
|
|||
app.UseStaticFiles();
|
||||
app.UseAntiforgery();
|
||||
|
||||
app.MapRazorComponents<App>();
|
||||
app.MapRazorComponents<App>()
|
||||
.AddInteractiveServerRenderMode();
|
||||
|
||||
app.Run();
|
||||
|
|
|
|||
Loading…
Reference in New Issue