373 lines
18 KiB
Plaintext
373 lines
18 KiB
Plaintext
@inject IPokemonService PokemonService
|
|
@inject IJSRuntime JS
|
|
@inject NavigationManager Navigation
|
|
|
|
@attribute [StreamRendering]
|
|
@rendermode InteractiveServer
|
|
|
|
|
|
<!-- Table A: Desktop View-->
|
|
<div class="container d-none d-lg-block d-md-none mt-4">
|
|
<!-- Main UI -->
|
|
<div class="border-0 mx-auto col-8 ">
|
|
<!-- UI Header -->
|
|
<div class="row bg-secondary py-3 border-0 rounded-top">
|
|
<div class="d-flex align-items-center justify-content-between w-100 position-relative px-3">
|
|
|
|
<!-- Left: Search -->
|
|
<input class="form-control w-25 me-3 rounded rounded-5"
|
|
placeholder="Search Pokémon..."
|
|
@bind="SearchTerm"
|
|
@oninput="HandleSearch" />
|
|
|
|
<!-- Center: Title -->
|
|
<h2 class="text-white mb-0 position-absolute start-50 translate-middle-x">
|
|
Available Pokémon
|
|
</h2>
|
|
|
|
<!-- Right: Count + Download -->
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class="badge bg-light">
|
|
<p class="statText text-primary fw-medium shadow mb-0">@(pokemons.Count()) Pokémon</p>
|
|
</div>
|
|
<PokemonDownloadButton _Pokemon="pokemons" />
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="tableFixHead d-flex flex-column justify-content-start bg-secondary table-responsive row ">
|
|
<table class="table table-borderless border-0 table-secondary table-striped align-middle">
|
|
<!-- Table Head -->
|
|
<thead>
|
|
<tr>
|
|
<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">Pokémon</th>
|
|
<th class="text-white text-bg-info col-1 text-center" scope="col">Type</th>
|
|
<th class="text-white text-bg-info col-1 text-center" scope="col">Sleep Type</th>
|
|
<th class="text-white text-bg-info col-1 text-center" scope="col">Speciality</th>
|
|
@if (adminToggle)
|
|
{
|
|
<th class="text-white text-bg-info col-2 text-center" scope="col">Admin</th>
|
|
|
|
}
|
|
</tr>
|
|
</thead>
|
|
<!-- If/Else Pokemon Loaded-->
|
|
@if(pokemons == null)
|
|
{
|
|
<tbody>
|
|
<Loading />
|
|
</tbody>
|
|
}
|
|
else
|
|
{
|
|
<!-- Table Body -->
|
|
<tbody>
|
|
@if (FilteredPokemon != null && FilteredPokemon.Any())
|
|
{
|
|
@foreach (var pokemon in FilteredPokemon)
|
|
{
|
|
<tr>
|
|
<!-- Section 1: Pokemon Image -->
|
|
<td class="pokeimage">
|
|
<PokemonImage baseUrl="@pokemon.PokemonImageUrl" shinyUrl="@pokemon.PokemonShinyImageUrl" />
|
|
</td>
|
|
|
|
<!-- Section 2: Pokemon # -->
|
|
<th scope="row" style="cursor: default;">@pokemon.PokemonId</th>
|
|
|
|
|
|
<!-- Section 3: Pokemon Name -->
|
|
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style fw-light col-2">@(pokemon.IsVariation && ToggleVariationName(pokemon.Id, pokemon.PokemonId) ? $"{pokemon.VariationName} {pokemon.PokemonName}" : 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;box-shadow: 0 1px 2px 1px rgba(0,0,0,0.35);border-radius: 20px;" />
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Section 5: Sleep Type -->
|
|
<td>
|
|
<div class="d-flex justify-content-center ">
|
|
<PokemonBadge BadgeItem="@pokemon.SleepType" />
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Section 6: Speciality -->
|
|
<td>
|
|
<div class="d-flex justify-content-center">
|
|
<PokemonBadge BadgeItem="@pokemon.Speciality" />
|
|
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Section 7: Admin Controls -->
|
|
@if (adminToggle)
|
|
{
|
|
<td>
|
|
<div class="d-flex justify-content-center gap-1">
|
|
<PokemonEditButton PokemonId="@pokemon.PokemonId" />
|
|
<button class="btn btn-danger rounded rounded-5 text-white " @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>
|
|
}
|
|
}
|
|
else
|
|
{
|
|
<tr>
|
|
<td colspan="100%">
|
|
<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
|
|
<p class="text-muted">Pokémon could not be found.</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
}
|
|
|
|
|
|
</table>
|
|
|
|
</div>
|
|
<!-- Wrap in Auth -->
|
|
<div class="d-flex justify-content-end mt-1">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input rounded rounded-3" type="checkbox" role="switch" id="flexSwitchCheckDefault" @bind="adminToggle">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="container d-none d-lg-none d-md-block mt-4">
|
|
<!-- Main UI -->
|
|
<div class="border-0 mx-auto col-8 ">
|
|
<!-- UI Header -->
|
|
<div class="row bg-secondary py-3 border-0 rounded-top">
|
|
<div class="d-flex flex-row align-items-center justify-content-between w-100 gap-3 ms-0 me-0">
|
|
<div class="col">
|
|
<input class="form-control rounded rounded-5 fs-6 fw-lighter"
|
|
placeholder="Search Pokémon..."
|
|
@bind="SearchTerm"
|
|
@oninput="HandleSearch" />
|
|
|
|
</div>
|
|
<!-- Left: Search -->
|
|
|
|
<!-- Center: Title -->
|
|
<div class="col">
|
|
<h2 class="text-white text-center pt-2 fs-6 fw-light">
|
|
Available Pokémon
|
|
</h2>
|
|
</div>
|
|
|
|
|
|
<!-- Right: Count + Download -->
|
|
<div class="col">
|
|
<div class="d-flex align-items-center gap-1">
|
|
<div class="badge bg-light">
|
|
<p class="statText text-primary fw-medium shadow mb-0">@(pokemons.Count()) Pokémon</p>
|
|
</div>
|
|
<PokemonDownloadButton _Pokemon="pokemons" />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="tableFixHead d-flex flex-column justify-content-start bg-secondary table-responsive row ">
|
|
<table class="table table-borderless border-0 table-secondary table-striped align-middle">
|
|
<!-- Table Head -->
|
|
<thead>
|
|
<tr>
|
|
<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">Pokémon</th>
|
|
<th class="text-white text-bg-info col-1 text-center" scope="col">Type</th>
|
|
<th class="text-white text-bg-info col-1 text-center" scope="col">Sleep Type</th>
|
|
<th class="text-white text-bg-info col-1 text-center" scope="col">Speciality</th>
|
|
@if (adminToggle)
|
|
{
|
|
<th class="text-white text-bg-info col-2 text-center" scope="col">Admin</th>
|
|
|
|
}
|
|
</tr>
|
|
</thead>
|
|
<!-- If/Else Pokemon Loaded-->
|
|
@if (pokemons == null)
|
|
{
|
|
<tbody>
|
|
<Loading />
|
|
</tbody>
|
|
}
|
|
else
|
|
{
|
|
<!-- Table Body -->
|
|
<tbody>
|
|
@if (FilteredPokemon != null && FilteredPokemon.Any())
|
|
{
|
|
@foreach (var pokemon in FilteredPokemon)
|
|
{
|
|
<tr>
|
|
<!-- Section 1: Pokemon Image -->
|
|
<td class="">
|
|
<img src="@pokemon.PokemonImageUrl" style="width:100px;" />
|
|
</td>
|
|
|
|
<!-- Section 2: Pokemon # -->
|
|
<th scope="row" style="cursor: default;">@pokemon.PokemonId</th>
|
|
|
|
|
|
<!-- Section 3: Pokemon Name -->
|
|
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style fw-light col-2">@(pokemon.IsVariation && ToggleVariationName(pokemon.Id, pokemon.PokemonId) ? $"{pokemon.VariationName} {pokemon.PokemonName}" : 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>
|
|
<div class="d-flex justify-content-center ">
|
|
<PokemonBadge BadgeItem="@pokemon.SleepType" />
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Section 6: Speciality -->
|
|
<td>
|
|
<div class="d-flex justify-content-center">
|
|
<PokemonBadge BadgeItem="@pokemon.Speciality" />
|
|
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Section 7: Admin Controls -->
|
|
@if (adminToggle)
|
|
{
|
|
<td>
|
|
<div class="d-flex justify-content-center gap-1">
|
|
<PokemonEditButton PokemonId="@pokemon.PokemonId" />
|
|
<button class="btn btn-danger rounded rounded-5 text-white " @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>
|
|
}
|
|
}
|
|
else
|
|
{
|
|
<tr>
|
|
<td colspan="100%">
|
|
<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
|
|
<p class="text-muted">Pokémon could not be found.</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
}
|
|
|
|
|
|
</table>
|
|
|
|
</div>
|
|
<!-- Wrap in Auth -->
|
|
<div class="d-flex justify-content-end mt-1">
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input rounded rounded-3" type="checkbox" role="switch" id="flexSwitchCheckDefault" @bind="adminToggle">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Desktop B: Mobile View -->
|
|
@* <div class="container card border-0 d-block d-md-none mx-auto mt-4 shadow-sm">
|
|
<!-- Table Header -->
|
|
<div class="row card-header bg-secondary bg-gradient ml-0 py-3 border-0 bg-info">
|
|
<div class="flex-row justify-content-between">
|
|
<div class="text-center position-relative">
|
|
<h2 class="text-white text-decoration-underline">Pokémon</h2>
|
|
<div class="m-1 badge bg-white text-info position-absolute top-0 end-0 border-0 w-auto"><p class="statText">@(pokemons.Count()) Pokémon</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Table Body -->
|
|
<div class="tableFixHead row">
|
|
<table class="table table-striped border-0">
|
|
|
|
|
|
<tbody>
|
|
@if (pokemons == null)
|
|
{
|
|
<Loading />
|
|
}
|
|
else
|
|
{
|
|
|
|
@foreach (var pokemon in pokemons)
|
|
{
|
|
<tr class="border-0">
|
|
<div class="d-flex align-items-center" style="border: 1px dashed hotpink;">
|
|
|
|
<!-- Pokemon Image -->
|
|
<div class="me-3" style="border: 1px dashed hotpink;">
|
|
<div class="flip-container-sm" @onclick="() => ToggleImage(pokemon.Id)">
|
|
<div class="flipper-sm @(isShiny[pokemon.Id] ? "flipped" : "")">
|
|
<img class="front img-fluid" src="@pokemon.PokemonImageUrl" />
|
|
@if (pokemon.PokemonShinyImageUrl != null)
|
|
{
|
|
<img class="back img-fluid" src="@pokemon.PokemonShinyImageUrl" />
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="border: 1px dashed hotpink;">
|
|
<!-- Number and Name -->
|
|
<h5>
|
|
@pokemon.PokemonId -
|
|
<span class="pokemon-name-style fw-light" @onclick="() => ViewPokemon(pokemon.PokemonId)">
|
|
@(pokemon.IsVariation && ToggleVariationName(pokemon.Id, pokemon.PokemonId) ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName)
|
|
</span>
|
|
</h5>
|
|
<!-- Stats -->
|
|
<div class="d-flex flex-wrap align-items-center gap-2">
|
|
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:28px;" />
|
|
<PokemonBadge BadgeItem="@pokemon.SleepType" />
|
|
<PokemonBadge BadgeItem="@pokemon.Speciality" />
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</tr>
|
|
}
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div> *@
|