exciting-aftermath/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor

91 lines
2.7 KiB
Plaintext

@page "/pokemonsleep"
@inject IPokemonService PokemonService
@attribute [StreamRendering]
<PageTitle>Pokemon Sleep</PageTitle>
<h1>Pokemon Sleep</h1>
@if (pokemons == null)
{
<p><em>Loading...</em></p>
}
else
{
<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">
<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>
</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";
<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>
</div>
</div>
}
@code {
private List<Pokemon> pokemons;
protected override async Task OnInitializedAsync()
{
// Simulate asynchronous loading to demonstrate streaming rendering
await Task.Delay(500);
var result = PokemonService.GetAllPokemon();
if (result is not null)
{
pokemons = result;
}
}
}