kira
/
exciting-aftermath
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pokemon are being added to the database, and being presented correctly on the main page.

This commit is contained in:
Kira Jiroux 2025-02-18 16:28:49 -05:00
parent 9dd4765780
commit 7a797c558b
3 changed files with 199 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
Portfolio.WebUI.Server/Components/Pages/PokemonCreate.razor
View File

@ -1,61 +1,105 @@
@page "/pokemonsleep/add-new-pokemon" @page "/pokemonsleep/add-new-pokemon"
@inject IPokemonService PokemonService @inject IPokemonService PokemonService
@inject NavigationManager Navigation @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) @if (isSubmitting)
{ {
<p><em>Submitting...</em></p> <p><em>Submitting...</em></p>
} }
else else
{ {
<div class="card shadow border-0 mt-4" style="margin: auto; width: 900px; max-width: 60%; "> <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);">
<EditForm Model="NewPokemon" OnValidSubmit="HandleSubmit">
<DataAnnotationsValidator /> <div class="card-header bg-secondary bg-gradient ml-0 py-3">
<div class="mb-3"> <div class="row">
<label for="PokemonName" class="form-label">Pokémon Name</label> <div class="col-12 text-center">
<InputText id="PokemonName" @bind-Value="NewPokemon.PokemonName" class="form-control" required /> <h2 class="text-info">Add New Pokémon</h2>
</div>
</div>
</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 />
</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"> <div class="container shadow m-lg-1" >
<label for="SleepType" class="form-label">Sleep Type</label> <EditForm class=" col mb-3" Model="NewPokemon" OnValidSubmit="HandleSubmit">
<InputSelect id="SleepType" @bind-Value="NewPokemon.SleepType" class="form-select"> <DataAnnotationsValidator />
<option value="Dozing">Dozing</option>
<option value="Snoozing">Snoozing</option>
<option value="Slumbering">Slumbering</option>
</InputSelect>
</div>
<div class="mb-3"> <!-- Section 1 -->
<label for="Speciality" class="form-label">Specialty</label> <div class="row m-auto">
<InputSelect id="SleepType" @bind-Value="NewPokemon.Speciality" class="form-select"> <div class="col-sm-3 input-group input-group-sm mb-3 ">
<option value="Berries">Berries</option> <!-- Pokemon #-->
<option value="Ingredients">Ingredients</option> <span for="PokemonId" class="input-group-text">#</span>
<option value="Skills">Skills</option> <InputNumber min="0" placeholder="Pokedex #" id="PokemonId" @bind-Value="NewPokemon.PokemonId" class="form-control" required />
</InputSelect> <!-- Pokemon Name-->
</div> <InputText placeholder="Pokemon Name" id="PokemonName" @bind-Value="NewPokemon.PokemonName" class="form-control" required />
</div>
</div>
<button type="submit" class="btn btn-primary">Add Pokémon</button> <!-- Section 2 -->
<button type="button" class="btn btn-secondary" @onclick="Cancel">Cancel</button> <div class="row m-auto">
</EditForm> <div class="col-sm-3 input-group input-group-sm mb-3">
</div> <!-- 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>
<!-- 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>
<!-- 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 mb-3">Add Pokémon</button>
<button type="button" class="btn btn-secondary mb-3" @onclick="@Cancel">Cancel</button>
</EditForm>
</div>
</div>
} }
@code { @code {
private bool HideLabel { get; set; } = true;
private void Toggle()
{
HideLabel = !HideLabel;
}
private Pokemon NewPokemon = new Pokemon private Pokemon NewPokemon = new Pokemon
{ {
PokemonId = 0, // Or any default ID logic PokemonId = 0, // Or any default ID logic

198
Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor
View File

@ -3,124 +3,149 @@
@inject IPokemonService PokemonService @inject IPokemonService PokemonService
@attribute [StreamRendering] @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) @if (pokemons == null)
{ {
<p><em>Loading...</em></p> <p><em>Loading...</em></p>
} }
else else
{ {
<div class="card shadow border-0 mt-4" style="margin: auto; width: 900px; max-width: 60%; "> <div class="card shadow border-0 mt-4" style="margin: auto; width: 900px; max-width: 60%; ">
<div class="card-header bg-secondary bg-gradient ml-0 py-3"> <div class="card-header bg-secondary bg-gradient ml-0 py-3">
<div class="row"> <div class="row">
<div class="col-12 text-center"> <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>
</div> </div>
<div class="card-body p-4"> <div class="card-body p-4 tableFixHead" >
<div class="row pb-3"> <table class="table table-striped" >
<div class="col-6"> <thead class="thead-dark text-light">
</div> <tr>
<div class="col-6 text-end"> <th scope="col" style="width: 50%;"></th>
<!-- <th scope="col">#</th>
<button @onclick="ShowCreateForm" class="btn btn-outline-primary"> <th scope="col">Pokemon</th>
<i class="bi bi-plus-square"></i> Add New Pokemon <th scope="col">Sleep Type</th>
</button> <th scope="col" style="padding-right: 30px;">Speciality</th>
--> <th scope="col"></th>
<NavLink class="btn btn-outline-primary" href="pokemonsleep/add-new-pokemon"> </tr>
<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"> </thead>
<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" /> <tbody >
</svg> Add New Pokemon @foreach (var pokemon in pokemons)
</NavLink> {
</div> <tr style=" text-align: center; margin:0; padding: 0;">
</div>
<!-- Section 1: Pokemon Image -->
<table class="table"> @if (pokemon.IsVariation)
<thead>
<tr>
<th scope="col" style="width: 50%;"></th>
<th scope="col">#</th>
<th scope="col">Pokemon</th>
<th scope="col">Sleep Type</th>
<th scope="col" style="padding-right: 30px;">Speciality</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
@foreach (var pokemon in pokemons)
{
<tr style=" text-align: center; margin:0; padding: 0;">
@if (pokemon.IsVariation)
{
@if (pokemon.VariationName == "Alolan")
{ {
@if (pokemon.VariationName == "Alolan")
{
string URL = $"/pokemon_images/normal/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png"; string URL = $"/pokemon_images/normal/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png";
string ShinyURL = $"/pokemon_images/shiny/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png"; string ShinyURL = $"/pokemon_images/shiny/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png";
<td> <td>
<img style=" width: 90px; height: 90px; " src=@URL /> <img style=" width: 90px; height: 90px; " src=@URL />
<img style=" width: 90px; height: 90px; " src=@ShinyURL /> <img style=" width: 90px; height: 90px; " src=@ShinyURL />
</td> </td>
} }
@if (pokemon.VariationName == "Paldean") @if (pokemon.VariationName == "Paldean")
{ {
string URL = $"/pokemon_images/normal/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png"; string URL = $"/pokemon_images/normal/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png";
string ShinyURL = $"/pokemon_images/shiny/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png"; string ShinyURL = $"/pokemon_images/shiny/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png";
<td> <td>
<img style=" width: 90px; height: 90px; " src=@URL /> <img style=" width: 90px; height: 90px; " src=@URL />
<img style=" width: 90px; height: 90px; " src=@ShinyURL /> <img style=" width: 90px; height: 90px; " src=@ShinyURL />
</td> </td>
}
} }
} else // Base Case
else // Base Case
{
string URL = $"/pokemon_images/normal/{pokemon.PokemonId}.png"; ;
string ShinyURL = $"/pokemon_images/shiny/{pokemon.PokemonId}.png";
<td>
<img style=" width: 90px; height: 90px; " src=@URL />
<img style=" width: 90px; height: 90px; " src=@ShinyURL />
</td>
}
<th scope="row">@pokemon.PokemonId</th>
@if (pokemon.IsVariation)
{
@if (pokemon.VariationName == "Alolan")
{ {
<td> Alolan @pokemon.PokemonName</td> string URL = $"/pokemon_images/normal/{pokemon.PokemonId}.png"; ;
string ShinyURL = $"/pokemon_images/shiny/{pokemon.PokemonId}.png";
<td>
<img style=" width: 90px; height: 90px; " src=@URL />
<img style=" width: 90px; height: 90px; " src=@ShinyURL />
</td>
} }
@if (pokemon.VariationName == "Paldean")
<!-- Section 2: Pokemon # -->
<th scope="row">@pokemon.PokemonId</th>
<!-- Section 3: Pokemon Name -->
@if (pokemon.IsVariation) // If a Variant
{ {
<td> Paldean @pokemon.PokemonName</td> @if (pokemon.VariationName == "Alolan")
{
<td> Alolan @pokemon.PokemonName</td>
}
@if (pokemon.VariationName == "Paldean")
{
<td> Paldean @pokemon.PokemonName</td>
}
} }
} else // Otherwise, Base Case
else // Base Case {
{
<td> @pokemon.PokemonName</td> <td> @pokemon.PokemonName</td>
} }
<!-- Section 4: Sleep Type -->
<td>@pokemon.SleepType</td>
<td>@pokemon.SleepType</td> <!-- Section 5: Speciality -->
<td style="padding-right: 30px;">@pokemon.Speciality</td> <td style="padding-right: 30px;">@pokemon.Speciality</td>
<td>
<a asp-controller="Pokemon" asp-action="PokemonDelete" asp-route-Id="@pokemon.Id" class="btn btn-danger"> <!-- Section 6: Delete Button -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16"> <td>
<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="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" /> <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" />
</svg> </svg>
</a> </a>
</td> </td>
</tr> </tr>
} }
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
} }
@ -128,7 +153,6 @@ else
@code { @code {
private List<Pokemon> pokemons = new List<Pokemon>(); private List<Pokemon> pokemons = new List<Pokemon>();
private bool showForm = true;
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
@ -138,8 +162,10 @@ else
if (result is not null) if (result is not null)
{ {
pokemons = result; pokemons = result;
pokemons.Sort((x,y) => x.PokemonId.CompareTo(y.PokemonId));
} }
} }
} }

6
Portfolio.WebUI.Server/Program.cs
View File

@ -5,7 +5,8 @@ using Portfolio.Infrastructure;
var builder = WebApplication.CreateBuilder(args); var builder = WebApplication.CreateBuilder(args);
// Add services to the container. // Add services to the container.
builder.Services.AddRazorComponents(); builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
builder.Services.AddApplication(); builder.Services.AddApplication();
builder.Services.AddInfrastructure(builder.Configuration); builder.Services.AddInfrastructure(builder.Configuration);
@ -25,6 +26,7 @@ app.UseHttpsRedirection();
app.UseStaticFiles(); app.UseStaticFiles();
app.UseAntiforgery(); app.UseAntiforgery();
app.MapRazorComponents<App>(); app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();
app.Run(); app.Run();