140 lines
6.3 KiB
Plaintext
140 lines
6.3 KiB
Plaintext
@inject IPokemonService PokemonService
|
|
@inject IJSRuntime JS
|
|
@inject NavigationManager Navigation
|
|
|
|
@attribute [StreamRendering]
|
|
@rendermode InteractiveServer
|
|
|
|
|
|
<!-- Main UI -->
|
|
<div class="card shadow border-0 mt-4 m-auto w-75">
|
|
|
|
<!-- Table Header -->
|
|
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
|
<div class="row">
|
|
<div class="col-12 text-center position-relative">
|
|
<h2 class="text-info">Available Pokémon</h2>
|
|
<div class="m-1 col-1 badge bg-info position-absolute top-0 end-0"><p class="statText">@(pokemons.Count()) Pokemon</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="tableFixHead">
|
|
<table class="table table-striped">
|
|
|
|
<!-- Table Head -->
|
|
<thead>
|
|
<tr>
|
|
<th class="text-bg-info col" scope="col"></th>
|
|
<th class="text-bg-info col pokemon-dex-width" scope="col">#</th>
|
|
<th class="text-bg-info col pokemon-name-width" scope="col">Pokemon</th>
|
|
<th class="text-bg-info col " scope="col">Type</th>
|
|
<th class="text-bg-info col " scope="col">Sleep Type</th>
|
|
<th class="text-bg-info col " scope="col">Speciality</th>
|
|
<th class="text-bg-info col " scope="col"></th>
|
|
</tr>
|
|
</thead>
|
|
@if(pokemons == null)
|
|
{
|
|
<tbody>
|
|
<Loading />
|
|
</tbody>
|
|
}
|
|
else
|
|
{
|
|
<!-- Table Body -->
|
|
<tbody>
|
|
@foreach (var pokemon in pokemons)
|
|
{
|
|
<tr>
|
|
|
|
<!-- Section: Pokemon Image -->
|
|
@{
|
|
string baseUrl = pokemon.PokemonImageUrl;
|
|
string shinyUrl = pokemon.PokemonShinyImageUrl;
|
|
}
|
|
<td style="text-align: center;">
|
|
@if (shinyUrl == null)
|
|
{
|
|
<div class="flip-container">
|
|
<div class="flipper">
|
|
<img class="front" src="@baseUrl" />
|
|
</div>
|
|
</div>
|
|
|
|
}
|
|
else
|
|
{
|
|
<div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
|
|
<div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
|
|
<img class="front" src="@baseUrl" />
|
|
<img class="back" src="@shinyUrl" />
|
|
</div>
|
|
</div>
|
|
|
|
}
|
|
</td>
|
|
|
|
<!-- Section 2: Pokemon # -->
|
|
<th scope="row">@pokemon.PokemonId</th>
|
|
|
|
<!-- Section 3: Pokemon Name -->
|
|
@if (pokemon.IsVariation) // If a Variant
|
|
{
|
|
@if (pokemon.VariationName == "Alolan")
|
|
{
|
|
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" style="vertical-align: auto;"> Alolan @pokemon.PokemonName</td>
|
|
}
|
|
@if (pokemon.VariationName == "Paldean")
|
|
{
|
|
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" style="vertical-align: auto;"> Paldean @pokemon.PokemonName</td>
|
|
}
|
|
}
|
|
else // Otherwise, Base Case
|
|
{
|
|
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" style="vertical-align: auto;"> @pokemon.PokemonName</td>
|
|
}
|
|
|
|
|
|
<!-- Section 4: Pokemon Type -->
|
|
<td>
|
|
<div class="m-1 col-1">
|
|
<img src="@GetTypeImageUrl(pokemon.PokemonType)" class="" style="width:60px; height:60px;" />
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Section 5: Sleep Type -->
|
|
<td style="vertical-align: auto;">
|
|
<div class="m-1 col-1 badge @pokemon.SleepType.ToLower()"><p class="statText">@pokemon.SleepType</p></div>
|
|
</td>
|
|
|
|
<!-- Section 6: Speciality -->
|
|
<td style="padding-right: 30px; vertical-align: auto;">
|
|
<div class="m-1 col-1 badge @pokemon.Speciality.ToLower()"><p class="statText">@pokemon.Speciality</p></div>
|
|
</td>
|
|
|
|
<!-- Section 7: Functional Buttons -->
|
|
<td>
|
|
<PokemonEditButton PokemonId="pokemon.Id" />
|
|
<button class="btn btn-danger" @onclick="() => ConfirmDelete(pokemon.Id)">
|
|
<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>
|
|
</button>
|
|
</td>
|
|
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
}
|
|
|
|
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|