Compare commits
2 Commits
f083ff3f23
...
7a797c558b
| Author | SHA1 | Date |
|---|---|---|
Kira Jiroux
|
7a797c558b | |
|
Kira Jiroux
|
9dd4765780 |
|
|
@ -10,5 +10,6 @@ namespace Portfolio.Application.Services.PokemonService
|
|||
public interface IPokemonService
|
||||
{
|
||||
Task<List<Pokemon>> GetAllPokemonAsync();
|
||||
Task AddPokemonAsync(Pokemon pokemon);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ using Portfolio.Domain.Features.Pokemon;
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
using System.Linq;
|
||||
using System.Net.Http;
|
||||
using System.Text;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
|
|
@ -16,72 +17,16 @@ namespace Portfolio.Application.Services.PokemonService
|
|||
{
|
||||
_pokemonRepository = pokemonRepository;
|
||||
}
|
||||
|
||||
public async Task AddPokemonAsync(Pokemon pokemon)
|
||||
{
|
||||
await _pokemonRepository.AddPokemonAsync(pokemon);
|
||||
}
|
||||
|
||||
public async Task<List<Pokemon>> GetAllPokemonAsync()
|
||||
{
|
||||
return await _pokemonRepository.GetAllPokemonsAsync();
|
||||
//return new List<Pokemon>() {
|
||||
|
||||
// new Pokemon
|
||||
// {
|
||||
// PokemonId = 1,
|
||||
// PokemonName = "Bulbasaur",
|
||||
// SleepType = "Dozing",
|
||||
// Speciality = "Ingredients"
|
||||
|
||||
// },
|
||||
// new Pokemon
|
||||
// {
|
||||
// PokemonId = 2,
|
||||
// PokemonName = "Ivysaur",
|
||||
// SleepType = "Dozing",
|
||||
// Speciality = "Ingredients"
|
||||
|
||||
// },
|
||||
// new Pokemon
|
||||
// {
|
||||
// PokemonId = 3,
|
||||
// PokemonName = "Venasaur",
|
||||
// SleepType = "Dozing",
|
||||
// Speciality = "Ingredients"
|
||||
|
||||
// },
|
||||
// new Pokemon
|
||||
// {
|
||||
// PokemonId = 37,
|
||||
// PokemonName = "Vulpix",
|
||||
// SleepType = "Snoozing",
|
||||
// Speciality = "Berries"
|
||||
|
||||
// },
|
||||
// new Pokemon
|
||||
// {
|
||||
// PokemonId = 38,
|
||||
// PokemonName = "Ninetails",
|
||||
// SleepType = "Snoozing",
|
||||
// Speciality = "Berries"
|
||||
|
||||
// },
|
||||
// new Pokemon
|
||||
// {
|
||||
// PokemonId = 37,
|
||||
// PokemonName = "Vulpix",
|
||||
// IsVariation = true,
|
||||
// VariationName = "Alolan",
|
||||
// SleepType = "Slumbering",
|
||||
// Speciality = "Berries"
|
||||
|
||||
// },
|
||||
// new Pokemon
|
||||
// {
|
||||
// PokemonId = 38,
|
||||
// PokemonName = "Ninetails",
|
||||
// IsVariation = true,
|
||||
// VariationName = "Alolan",
|
||||
// SleepType = "Slumbering",
|
||||
// Speciality = "Berries"
|
||||
|
||||
// },
|
||||
//};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,5 +9,6 @@ namespace Portfolio.Domain.Features.Pokemon
|
|||
public interface IPokemonRepository
|
||||
{
|
||||
Task<List<Pokemon>> GetAllPokemonsAsync();
|
||||
Task AddPokemonAsync(Pokemon pokemon);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,4 +17,5 @@ namespace Portfolio.Domain.Features.Pokemon
|
|||
public required string Speciality { get; set; }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,5 +21,10 @@ namespace Portfolio.Infrastructure.Repositories
|
|||
{
|
||||
return await _context.Pokemons.ToListAsync();
|
||||
}
|
||||
public async Task AddPokemonAsync(Pokemon pokemon)
|
||||
{
|
||||
_context.Pokemons.Add(pokemon);
|
||||
await _context.SaveChangesAsync();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,133 @@
|
|||
@page "/pokemonsleep/add-new-pokemon"
|
||||
|
||||
@inject IPokemonService PokemonService
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
@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="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 />
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
<!-- 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 {
|
||||
|
||||
private bool HideLabel { get; set; } = true;
|
||||
private void Toggle()
|
||||
{
|
||||
HideLabel = !HideLabel;
|
||||
}
|
||||
|
||||
private Pokemon NewPokemon = new Pokemon
|
||||
{
|
||||
PokemonId = 0, // Or any default ID logic
|
||||
PokemonName = string.Empty, // Required fields cannot be null
|
||||
SleepType = string.Empty,
|
||||
Speciality = string.Empty,
|
||||
IsVariation = false
|
||||
};
|
||||
private bool isSubmitting = false;
|
||||
|
||||
private bool ToggleVariationName { get; set; }
|
||||
|
||||
private void onDisable()
|
||||
{
|
||||
this.ToggleVariationName = true;
|
||||
}
|
||||
private async Task HandleSubmit()
|
||||
{
|
||||
isSubmitting = true;
|
||||
await PokemonService.AddPokemonAsync(NewPokemon);
|
||||
isSubmitting = false;
|
||||
Navigation.NavigateTo("/pokemonsleep");
|
||||
}
|
||||
|
||||
protected void Cancel(MouseEventArgs e)
|
||||
{
|
||||
Console.WriteLine("Testing in Cancel");
|
||||
Navigation.NavigateTo("/pokemonsleep");
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,11 +1,46 @@
|
|||
@page "/pokemonsleep"
|
||||
|
||||
@inject IPokemonService PokemonService
|
||||
|
||||
@attribute [StreamRendering]
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<PageTitle>Pokemon Sleep</PageTitle>
|
||||
<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>
|
||||
|
||||
<h1>Pokemon Sleep</h1>
|
||||
|
||||
@if (pokemons == null)
|
||||
{
|
||||
|
|
@ -13,78 +48,124 @@
|
|||
}
|
||||
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="row">
|
||||
<div class="col-12 text-center">
|
||||
<h2 class="text-info">Available Pokémon</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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;">
|
||||
|
||||
<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>
|
||||
</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">
|
||||
<a asp-controller="Pokemon" asp-action="PokemonCreate" class="btn btn-outline-primary"><i class="bi bi-plus-square"></i> Add New Pokemon</a>
|
||||
<!-- Section 1: Pokemon Image -->
|
||||
@if (pokemon.IsVariation)
|
||||
{
|
||||
@if (pokemon.VariationName == "Alolan")
|
||||
{
|
||||
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";
|
||||
<td>
|
||||
<img style=" width: 90px; height: 90px; " src=@URL />
|
||||
<img style=" width: 90px; height: 90px; " src=@ShinyURL />
|
||||
</td>
|
||||
}
|
||||
@if (pokemon.VariationName == "Paldean")
|
||||
{
|
||||
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";
|
||||
<td>
|
||||
<img style=" width: 90px; height: 90px; " src=@URL />
|
||||
<img style=" width: 90px; height: 90px; " src=@ShinyURL />
|
||||
</td>
|
||||
}
|
||||
}
|
||||
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>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<table class="table">
|
||||
<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)
|
||||
{
|
||||
string URL = "https://www.serebii.net/pokemonsleep/pokemon/" + pokemon.Id + ".png";
|
||||
string ShinyURL = "https://www.serebii.net/pokemonsleep/pokemon/shiny/" + pokemon.Id + ".png";
|
||||
<!-- Section 2: Pokemon # -->
|
||||
<th scope="row">@pokemon.PokemonId</th>
|
||||
|
||||
<tr style=" text-align: center; margin:0; padding: 0;">
|
||||
<td style="display: block; margin:0; padding: 0;">
|
||||
<img style=" width: 90px; height: 90px; " src=@URL />
|
||||
<img style=" width: 90px; height: 90px; " src=@ShinyURL />
|
||||
</td>
|
||||
<th scope="row">@pokemon.Id</th>
|
||||
<td> @pokemon.PokemonName</td>
|
||||
<td>@pokemon.SleepType</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">
|
||||
<i class="bi bi-trash"></i>
|
||||
</a>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Section 3: Pokemon Name -->
|
||||
@if (pokemon.IsVariation) // If a Variant
|
||||
{
|
||||
@if (pokemon.VariationName == "Alolan")
|
||||
{
|
||||
<td> Alolan @pokemon.PokemonName</td>
|
||||
}
|
||||
@if (pokemon.VariationName == "Paldean")
|
||||
{
|
||||
<td> Paldean @pokemon.PokemonName</td>
|
||||
}
|
||||
}
|
||||
else // Otherwise, Base Case
|
||||
{
|
||||
<td> @pokemon.PokemonName</td>
|
||||
}
|
||||
|
||||
</div>
|
||||
<!-- 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" 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" />
|
||||
</svg>
|
||||
</a>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
@code {
|
||||
private List<Pokemon> pokemons = new List<Pokemon>();
|
||||
|
||||
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
// Simulate asynchronous loading to demonstrate streaming rendering
|
||||
await Task.Delay(500);
|
||||
|
||||
var result = await PokemonService.GetAllPokemonAsync();
|
||||
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();
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
Loading…
Reference in New Issue