146 lines
6.9 KiB
Plaintext
146 lines
6.9 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-50">
|
|
|
|
<!-- Table Header -->
|
|
<div class="card-header bg-secondary bg-gradient ml-0 py-3 border-0">
|
|
<div class="row">
|
|
<div class="text-center position-relative">
|
|
<h2 class="text-info text-decoration-underline">Available Pokémon</h2>
|
|
<div class="m-1 badge bg-info position-absolute top-0 end-0 border-0"><p class="statText">@(pokemons.Count()) Pokemon</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="tableFixHead">
|
|
<table class="table table-borderless border-0 table-secondary table-striped align-middle">
|
|
|
|
<!-- Table Head -->
|
|
<thead class="">
|
|
<tr class="">
|
|
<th class="text-white text-bg-info col-2" scope="col"></th>
|
|
<th class="text-white text-bg-info col-1" scope="col">#</th>
|
|
<th class="text-white text-bg-info col-2" scope="col">Pokemon</th>
|
|
<th class="text-white text-bg-info col-1 text-center" scope="col">Type</th>
|
|
<th class="text-white text-bg-info col-2 text-center" scope="col">Sleep Type</th>
|
|
<th class="text-white text-bg-info col-2 text-center" scope="col">Speciality</th>
|
|
<!-- <th class="text-bg-info text-end" scope="col">Control Buttons</th> -->
|
|
</tr>
|
|
</thead>
|
|
@if(pokemons == null)
|
|
{
|
|
<tbody>
|
|
<Loading />
|
|
</tbody>
|
|
}
|
|
else
|
|
{
|
|
<!-- Table Body -->
|
|
<tbody >
|
|
@foreach (var pokemon in pokemons)
|
|
{
|
|
<tr class="">
|
|
|
|
<!-- 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" style="cursor: default;">@pokemon.PokemonId</th>
|
|
|
|
|
|
<!-- Section 3: Pokemon Name -->
|
|
@if (pokemon.IsVariation) // If a Variant
|
|
{
|
|
@if (pokemon.VariationName == "Alolan")
|
|
{
|
|
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> Alolan @pokemon.PokemonName</td>
|
|
}
|
|
@if (pokemon.VariationName == "Paldean")
|
|
{
|
|
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> Paldean @pokemon.PokemonName</td>
|
|
}
|
|
}
|
|
else // Otherwise, Base Case
|
|
{
|
|
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> @pokemon.PokemonName</td>
|
|
}
|
|
|
|
|
|
<!-- Section 4: Pokemon Type -->
|
|
<td>
|
|
<div class="d-flex justify-content-center">
|
|
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:36px; height:36px;" />
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Section 5: Sleep Type -->
|
|
<td style="">
|
|
<div class="d-flex justify-content-center ">
|
|
<div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div>
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Section 6: Speciality -->
|
|
<td style="">
|
|
<div class="d-flex justify-content-center">
|
|
<div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div>
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Section 7: Functional Buttons -->
|
|
<!--
|
|
<td>
|
|
<div class="d-flex justify-content-end">
|
|
<PokemonEditButton PokemonId="pokemon.Id" />
|
|
<button class="btn btn-danger rounded rounded-5 mx-1" @onclick="() => ConfirmDelete(pokemon.Id)">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16">
|
|
<path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
-->
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
}
|
|
|
|
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|