Table appropriately parsed into correct files, same with Headers, Rating page,Create page, and Sleep Page.
This commit is contained in:
Kira Jiroux
parent
2a01c2fae2
commit
c9b584abcd
|
|
@ -0,0 +1,35 @@
|
||||||
|
|
||||||
|
<!-- Heading + Buttons -->
|
||||||
|
<div class="top-row bg-gradient bg-secondary py-3">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4"></div>
|
||||||
|
<div class="col-4 text-center">
|
||||||
|
<h1 class="text-primary">Pokémon Sleep</h1>
|
||||||
|
</div>
|
||||||
|
<div class="col-4 text-end">
|
||||||
|
<div class="btn-group col mx-1 my-1">
|
||||||
|
<NavLink class="btn btn-danger" style="border-radius: 50px 15px;" href="/pokemonsleep">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table" viewBox="0 0 16 16">
|
||||||
|
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z" />
|
||||||
|
</svg>
|
||||||
|
<span class="mx-2">Pokémon</span>
|
||||||
|
</NavLink>
|
||||||
|
<NavLink class="btn btn-primary" style="border-radius: 50px 15px;" href="/pokemonsleep/rate-pokemon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864z" />
|
||||||
|
<path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z" />
|
||||||
|
</svg>
|
||||||
|
<span class="mx-2">Rate Pokémon</span>
|
||||||
|
</NavLink>
|
||||||
|
<NavLink class="btn btn-info" style="border-radius: 50px 15px;" 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>
|
||||||
|
<span class="mx-2">Add New Pokémon</span>
|
||||||
|
</NavLink>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
@inject IPokemonService PokemonService
|
||||||
|
@inject IJSRuntime JS
|
||||||
|
|
||||||
|
@attribute [StreamRendering]
|
||||||
|
@rendermode InteractiveServer
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Main Body -->
|
||||||
|
@if (pokemons == null)
|
||||||
|
{
|
||||||
|
<p><em>Loading...</em></p>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<!-- 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">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 text-center">
|
||||||
|
<h2 class="text-info">Available Pokémon</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Table -->
|
||||||
|
<div class="tableFixHead">
|
||||||
|
<table class="table table-striped">
|
||||||
|
|
||||||
|
<!-- Table Head -->
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="text-bg-info" scope="col"></th>
|
||||||
|
<th class="text-bg-info" scope="col">#</th>
|
||||||
|
<th class="text-bg-info" scope="col">Pokemon</th>
|
||||||
|
<th class="text-bg-info" scope="col">Sleep Type</th>
|
||||||
|
<th class="text-bg-info" scope="col">Speciality</th>
|
||||||
|
<th class="text-bg-info" scope="col"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<!-- Table Body -->
|
||||||
|
<tbody>
|
||||||
|
@foreach (var pokemon in pokemons)
|
||||||
|
{
|
||||||
|
<tr>
|
||||||
|
|
||||||
|
<!-- Section: Pokemon Image -->
|
||||||
|
@{
|
||||||
|
string baseUrl = pokemon.IsVariation
|
||||||
|
? $"/pokemon_images/normal/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png"
|
||||||
|
: $"/pokemon_images/normal/{pokemon.PokemonId}.png";
|
||||||
|
|
||||||
|
string shinyUrl = pokemon.IsVariation
|
||||||
|
? $"/pokemon_images/shiny/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png"
|
||||||
|
: $"/pokemon_images/shiny/{pokemon.PokemonId}.png";
|
||||||
|
}
|
||||||
|
<td style="text-align: center;">
|
||||||
|
<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 style="vertical-align: auto;"> Alolan @pokemon.PokemonName</td>
|
||||||
|
}
|
||||||
|
@if (pokemon.VariationName == "Paldean")
|
||||||
|
{
|
||||||
|
<td style="vertical-align: auto;"> Paldean @pokemon.PokemonName</td>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else // Otherwise, Base Case
|
||||||
|
{
|
||||||
|
<td style="vertical-align: auto;"> @pokemon.PokemonName</td>
|
||||||
|
}
|
||||||
|
|
||||||
|
<!-- Section 4: 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 5: 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 6: Delete Button -->
|
||||||
|
<td>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
using Microsoft.JSInterop;
|
||||||
|
using Portfolio.Domain.Features.Pokemon;
|
||||||
|
|
||||||
|
namespace Portfolio.WebUI.Server.Components.Component
|
||||||
|
{
|
||||||
|
public partial class PokemonTable
|
||||||
|
{
|
||||||
|
private List<Pokemon> pokemons = new List<Pokemon>();
|
||||||
|
private Dictionary<int, bool> isShiny = new Dictionary<int, bool>();
|
||||||
|
|
||||||
|
|
||||||
|
protected override async Task OnInitializedAsync()
|
||||||
|
{
|
||||||
|
var result = await PokemonService.GetAllPokemonAsync();
|
||||||
|
if (result is not null)
|
||||||
|
{
|
||||||
|
pokemons = result;
|
||||||
|
pokemons.Sort((x, y) => x.PokemonId.CompareTo(y.PokemonId));
|
||||||
|
|
||||||
|
// Initialize dictionary with false (show base image first)
|
||||||
|
foreach (var pokemon in pokemons)
|
||||||
|
{
|
||||||
|
isShiny[pokemon.Id] = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ToggleImage(int Id)
|
||||||
|
{
|
||||||
|
if (isShiny.ContainsKey(Id))
|
||||||
|
{
|
||||||
|
isShiny[Id] = !isShiny[Id];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task ConfirmDelete(int Id)
|
||||||
|
{
|
||||||
|
bool confirm = await JS.InvokeAsync<bool>("confirm", "Are you sure you want to delete this Pokémon?");
|
||||||
|
if (confirm)
|
||||||
|
{
|
||||||
|
await DeletePokemon(Id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task DeletePokemon(int Id)
|
||||||
|
{
|
||||||
|
await PokemonService.DeletePokemonAsync(Id);
|
||||||
|
pokemons.RemoveAll(p => p.Id == Id); // Remove from the list locally
|
||||||
|
StateHasChanged(); // Refresh the UI
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
|
||||||
|
.tableFixHead {
|
||||||
|
overflow: auto;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableFixHead thead th {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-container {
|
||||||
|
perspective: 1000px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flipper {
|
||||||
|
transition: transform 0.6s;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flipped {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.front, .back {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
color: white;
|
||||||
|
padding: 4px 8px;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-radius: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.statText {
|
||||||
|
position: relative;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dozing {
|
||||||
|
background-color: #fcdc5e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.snoozing {
|
||||||
|
background-color: #4ce8ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slumbering {
|
||||||
|
background-color: #4588fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.berries {
|
||||||
|
background-color: #24d86b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ingredients {
|
||||||
|
background-color: #fdbe4d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills {
|
||||||
|
background-color: #47a0fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,8 +1,9 @@
|
||||||
@inherits LayoutComponentBase
|
@inherits LayoutComponentBase
|
||||||
|
|
||||||
<NavMenu3 />
|
<!-- <NavMenu3 />-->
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<div class="sidebar">
|
<div class="sidebar">
|
||||||
|
<NavMenu />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
|
|
||||||
|
|
@ -8,22 +8,16 @@
|
||||||
|
|
||||||
|
|
||||||
<PageTitle>Add New Pokémon</PageTitle>
|
<PageTitle>Add New Pokémon</PageTitle>
|
||||||
|
<PokemonHeader />
|
||||||
|
|
||||||
|
|
||||||
<div class="top-row bg-secondary bg-gradient ml-0 py-3">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12 text-center">
|
|
||||||
<h1 class="text-primary">Pokémon Sleep</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@if (isSubmitting)
|
@if (isSubmitting)
|
||||||
{
|
{
|
||||||
<p><em>Submitting...</em></p>
|
<p><em>Submitting...</em></p>
|
||||||
}
|
}
|
||||||
else
|
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="w-50 mt-5 m-auto create-container">
|
||||||
|
|
||||||
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
@ -34,31 +28,37 @@ else
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="container shadow m-lg-1" >
|
<div class="container m-lg-1" >
|
||||||
<EditForm class=" col mb-3" Model="NewPokemon" OnValidSubmit="HandleSubmit">
|
<EditForm class=" col mb-3" Model="NewPokemon" OnValidSubmit="HandleSubmit">
|
||||||
<DataAnnotationsValidator />
|
<DataAnnotationsValidator />
|
||||||
|
|
||||||
<!-- Section 1 -->
|
<!-- Section 1 -->
|
||||||
<div class="row m-auto">
|
<div class="row ">
|
||||||
<div class="col-sm-3 input-group input-group-sm mb-3 ">
|
<div class="col-sm-3 input-group mb-3 ">
|
||||||
<!-- Pokemon #-->
|
<!-- Pokemon #-->
|
||||||
<span for="PokemonId" class="input-group-text">#</span>
|
<span for="PokemonId" class="input-group-text">#</span>
|
||||||
<InputNumber min="0" placeholder="Pokedex #" id="PokemonId" @bind-Value="NewPokemon.PokemonId" class="form-control " required />
|
<InputNumber min="0" placeholder="Pokedex #" id="PokemonId" @bind-Value="NewPokemon.PokemonId" class="form-control " required />
|
||||||
<!-- Pokemon Name-->
|
<!-- Pokemon Name-->
|
||||||
<InputText placeholder="Pokemon Name" id="PokemonName" @bind-Value="NewPokemon.PokemonName" class="form-control" required />
|
<InputText placeholder="Pokemon Name" id="PokemonName" @bind-Value="NewPokemon.PokemonName" class="form-control w-75" required />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Section 2 -->
|
<!-- Section 2 -->
|
||||||
<div class="row m-auto">
|
<div class="row">
|
||||||
<div class="col-sm-3 input-group input-group-sm mb-3">
|
<div class="input-group mb-3">
|
||||||
<!-- Variation Check -->
|
<!-- Variation Check -->
|
||||||
<InputCheckbox id="IsVariation" @bind-Value="NewPokemon.IsVariation" @onclick="@Toggle" class=" form-check-input" style="border: 1px solid black;" />
|
<div class=" d-inline-flex">
|
||||||
<span for="IsVariation" class="input-group-text">Variation?</span>
|
<InputCheckbox id="IsVariation" @bind-Value="NewPokemon.IsVariation" @onclick="@Toggle" class="form-check-input checkbox-styling p-3 mt-1" />
|
||||||
|
<span for="IsVariation" class="input-group-text m-1">Variation?</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Variation Region Input -->
|
<!-- Variation Region Input -->
|
||||||
|
<div class="w-75 mx-2 mt-1">
|
||||||
|
|
||||||
<InputText placeholder="What Variant? (Alolan, Paldean)" hidden="@HideLabel" id="VariationName" @bind-Value="NewPokemon.VariationName" class="form-control" />
|
<InputText placeholder="What Variant? (Alolan, Paldean)" hidden="@HideLabel" id="VariationName" @bind-Value="NewPokemon.VariationName" class="form-control" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<!-- Section 3 -->
|
<!-- Section 3 -->
|
||||||
|
|
@ -89,46 +89,3 @@ else
|
||||||
</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");
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
using Microsoft.AspNetCore.Components.Web;
|
||||||
|
using Portfolio.Domain.Features.Pokemon;
|
||||||
|
|
||||||
|
namespace Portfolio.WebUI.Server.Components.Pages
|
||||||
|
{
|
||||||
|
public partial class PokemonCreate
|
||||||
|
{
|
||||||
|
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");
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
|
||||||
|
.create-container {
|
||||||
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(255,255, 255, 0.19);
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-styling {
|
||||||
|
border: 1px solid black;
|
||||||
|
}
|
||||||
|
|
@ -10,13 +10,7 @@
|
||||||
|
|
||||||
<PageTitle>Rate Pokémon</PageTitle>
|
<PageTitle>Rate Pokémon</PageTitle>
|
||||||
|
|
||||||
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
<PokemonHeader />
|
||||||
<div class="row">
|
|
||||||
<div class="col-12 text-center">
|
|
||||||
<h1 class="text-primary">Pokémon Sleep</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@if (PokemonList == null || NatureList == null || SubskillList == null)
|
@if (PokemonList == null || NatureList == null || SubskillList == null)
|
||||||
{
|
{
|
||||||
|
|
@ -24,7 +18,7 @@
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<div class="w-75 mt-3 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="w-75 mt-3 m-auto rate-container">
|
||||||
|
|
||||||
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
@ -72,8 +66,9 @@ else
|
||||||
{
|
{
|
||||||
<div class="border rounded p-3 row">
|
<div class="border rounded p-3 row">
|
||||||
<div class="d-flex align-top col">
|
<div class="d-flex align-top col">
|
||||||
|
|
||||||
<!-- Pokemon Interface -->
|
<!-- Pokemon Interface -->
|
||||||
<div class="m-1 p-1 col-5">
|
<div class="m-3 p-1 col-5">
|
||||||
<!-- Image and other Pokemon info -->
|
<!-- Image and other Pokemon info -->
|
||||||
<div class="flip-container" @onclick="() => ToggleImage(SelectedPokemon.Id)">
|
<div class="flip-container" @onclick="() => ToggleImage(SelectedPokemon.Id)">
|
||||||
<div class="flipper @(isShiny[SelectedPokemon.Id] ? "flipped" : "")">
|
<div class="flipper @(isShiny[SelectedPokemon.Id] ? "flipped" : "")">
|
||||||
|
|
@ -109,7 +104,7 @@ else
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Nature / Subskill Selection Dropdowns-->
|
<!-- Nature / Subskill Selection Dropdowns-->
|
||||||
<div class="m-1 p-1 col">
|
<div class="m-3 p-1 col">
|
||||||
<h4 class="mb-3">Select Nature & Subskills</h4>
|
<h4 class="mb-3">Select Nature & Subskills</h4>
|
||||||
|
|
||||||
<!-- Nature -->
|
<!-- Nature -->
|
||||||
|
|
@ -128,9 +123,10 @@ else
|
||||||
|
|
||||||
<!-- Subskills -->
|
<!-- Subskills -->
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
<!-- Subskill 1 -->
|
||||||
<div class="col-4">
|
<div class="col-4">
|
||||||
<label for="subskillSelect1">Select Level 10 Subskill</label>
|
<label for="subskillSelect1">Select Level 10 Subskill</label>
|
||||||
<select id="subskillSelect1" class="form-control form-control-lg mb-2" @bind="subskillSelect1">
|
<select id="subskillSelect1" class="form-control form-control mb-2" @bind="subskillSelect1">
|
||||||
<option value="" disabled selected>Choose Subskill...</option>
|
<option value="" disabled selected>Choose Subskill...</option>
|
||||||
@foreach (var subskill in SubskillList)
|
@foreach (var subskill in SubskillList)
|
||||||
{
|
{
|
||||||
|
|
@ -138,9 +134,10 @@ else
|
||||||
}
|
}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Subskill 2 -->
|
||||||
<div class="col-4">
|
<div class="col-4">
|
||||||
<label for="subskillSelect2">Select Level 25 Subskill</label>
|
<label for="subskillSelect2">Select Level 25 Subskill</label>
|
||||||
<select id="subskillSelect2" class="form-control form-control-lg mb-2" @bind="subskillSelect2">
|
<select id="subskillSelect2" class="form-control form-control mb-2" @bind="subskillSelect2">
|
||||||
<option value="" disabled selected>Choose Subskill...</option>
|
<option value="" disabled selected>Choose Subskill...</option>
|
||||||
@foreach (var subskill in SubskillList)
|
@foreach (var subskill in SubskillList)
|
||||||
{
|
{
|
||||||
|
|
@ -148,9 +145,34 @@ else
|
||||||
}
|
}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Subskill 3 -->
|
||||||
<div class="col-4">
|
<div class="col-4">
|
||||||
<label for="subskillSelect3">Select Level 50 Subskill</label>
|
<label for="subskillSelect3">Select Level 50 Subskill</label>
|
||||||
<select id="subskillSelect3" class="form-control form-control-lg mb-2" @bind="subskillSelect3">
|
<select id="subskillSelect3" class="form-control form-control mb-2" @bind="subskillSelect3">
|
||||||
|
<option value="" disabled selected>Choose Subskill...</option>
|
||||||
|
@foreach (var subskill in SubskillList)
|
||||||
|
{
|
||||||
|
<option value="@subskill.Id">@subskill.SubSkill</option>
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<!-- Subskill 4 -->
|
||||||
|
<div class="col-4">
|
||||||
|
<label for="subskillSelect4">Select Level 75 Subskill</label>
|
||||||
|
<select id="subskillSelect4" disabled class="form-control form-control mb-2" @bind="subskillSelect4">
|
||||||
|
<option value="" disabled selected>Choose Subskill...</option>
|
||||||
|
@foreach (var subskill in SubskillList)
|
||||||
|
{
|
||||||
|
<option value="@subskill.Id">@subskill.SubSkill</option>
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<!-- Subskill 5 -->
|
||||||
|
<div class="col-4">
|
||||||
|
<label for="subskillSelect5">Select Level 100 Subskill</label>
|
||||||
|
<select id="subskillSelect5" disabled class="form-control form-control mb-2" @bind="subskillSelect5">
|
||||||
<option value="" disabled selected>Choose Subskill...</option>
|
<option value="" disabled selected>Choose Subskill...</option>
|
||||||
@foreach (var subskill in SubskillList)
|
@foreach (var subskill in SubskillList)
|
||||||
{
|
{
|
||||||
|
|
@ -166,7 +188,7 @@ else
|
||||||
|
|
||||||
<!-- Calculate -->
|
<!-- Calculate -->
|
||||||
<div class="d-flex justify-content-between align-items-center mt-3 ">
|
<div class="d-flex justify-content-between align-items-center mt-3 ">
|
||||||
<button class="btn btn-primary" @onclick="CalculateScore">Calculate Final Score</button>
|
<button class="btn btn-primary mx-2" @onclick="CalculateScore">Calculate Final Score</button>
|
||||||
<h4>Final Score: <span class="finalScore" style="background-color: @ScoreBackgroundColor">@FinalScore</span></h4>
|
<h4>Final Score: <span class="finalScore" style="background-color: @ScoreBackgroundColor">@FinalScore</span></h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -28,6 +28,8 @@ namespace Portfolio.WebUI.Server.Components.Pages
|
||||||
private int subskillSelect1;
|
private int subskillSelect1;
|
||||||
private int subskillSelect2;
|
private int subskillSelect2;
|
||||||
private int subskillSelect3;
|
private int subskillSelect3;
|
||||||
|
private int subskillSelect4;
|
||||||
|
private int subskillSelect5;
|
||||||
|
|
||||||
private int[] SelectedSubskills = new int[3];
|
private int[] SelectedSubskills = new int[3];
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,10 @@
|
||||||
|
|
||||||
|
.rate-container {
|
||||||
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
|
||||||
|
0 6px 20px 0 rgba(255,255, 255, 0.19);
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
.flip-container {
|
.flip-container {
|
||||||
perspective: 1000px;
|
perspective: 1000px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -33,7 +39,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
width: 100px;
|
width: 90px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
|
|
|
||||||
|
|
@ -1,208 +1,14 @@
|
||||||
@page "/pokemonsleep"
|
@page "/pokemonsleep"
|
||||||
|
|
||||||
|
|
||||||
@inject IPokemonService PokemonService
|
|
||||||
@inject IJSRuntime JS
|
|
||||||
|
|
||||||
@attribute [StreamRendering]
|
@attribute [StreamRendering]
|
||||||
@rendermode InteractiveServer
|
@rendermode InteractiveServer
|
||||||
|
|
||||||
|
|
||||||
<PageTitle>Pokémon Sleep</PageTitle>
|
<PageTitle>Pokémon Sleep</PageTitle>
|
||||||
|
|
||||||
|
|
||||||
<PokemonBackground />
|
<PokemonBackground />
|
||||||
<!-- Heading + Buttons -->
|
|
||||||
<div class="top-row bg-secondary bg-gradient ml-0 py-3 page-content">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-4"></div>
|
|
||||||
<div class="col-4 text-center">
|
|
||||||
<h1 class="text-primary">Pokémon Sleep</h1>
|
|
||||||
</div>
|
|
||||||
<div class="col-4 text-end">
|
|
||||||
<div class="btn-group col">
|
|
||||||
<NavLink class="btn btn-info" 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 Pokémon
|
|
||||||
</NavLink>
|
|
||||||
<NavLink class="btn btn-primary" style="border-radius: 15px 50px;" href="/pokemonsleep/rate-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> Rate Pokémon
|
|
||||||
</NavLink>
|
|
||||||
|
|
||||||
</div>
|
<PokemonHeader />
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<PokemonTable />
|
||||||
<!-- Main Body -->
|
|
||||||
@if (pokemons == null)
|
|
||||||
{
|
|
||||||
<p><em>Loading...</em></p>
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<!-- 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">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12 text-center">
|
|
||||||
<h2 class="text-info">Available Pokémon</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Table -->
|
|
||||||
<div class="tableFixHead" >
|
|
||||||
<table class="table table-striped" >
|
|
||||||
|
|
||||||
<!-- Table Head -->
|
|
||||||
<thead >
|
|
||||||
<tr>
|
|
||||||
<th class="text-bg-info" scope="col"></th>
|
|
||||||
<th class="text-bg-info" scope="col">#</th>
|
|
||||||
<th class="text-bg-info" scope="col">Pokemon</th>
|
|
||||||
<th class="text-bg-info" scope="col">Sleep Type</th>
|
|
||||||
<th class="text-bg-info" scope="col" style="padding-right: 30px;">Speciality</th>
|
|
||||||
<th class="text-bg-info" scope="col"></th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
|
|
||||||
<!-- Table Body -->
|
|
||||||
<tbody >
|
|
||||||
@foreach (var pokemon in pokemons)
|
|
||||||
{
|
|
||||||
<tr>
|
|
||||||
|
|
||||||
<!-- Section 1: Pokemon Image -->
|
|
||||||
@if (pokemon.IsVariation)
|
|
||||||
{
|
|
||||||
string BaseURL = $"/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 style="text-align: center;">
|
|
||||||
<div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
|
|
||||||
<div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
|
|
||||||
<img class="front" src="/pokemon_images/normal/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
|
|
||||||
|
|
||||||
<img class="back" src="/pokemon_images/shiny/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
}
|
|
||||||
else // Base Case
|
|
||||||
{
|
|
||||||
string BaseURL = $"/pokemon_images/normal/{pokemon.PokemonId}.png"; ;
|
|
||||||
string ShinyURL = $"/pokemon_images/shiny/{pokemon.PokemonId}.png";
|
|
||||||
<td style="text-align: center;">
|
|
||||||
<div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
|
|
||||||
<div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
|
|
||||||
<img class="front" src="/pokemon_images/normal/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
|
|
||||||
|
|
||||||
<img class="back" src="/pokemon_images/shiny/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
|
|
||||||
</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 style="vertical-align: auto;"> Alolan @pokemon.PokemonName</td>
|
|
||||||
}
|
|
||||||
@if (pokemon.VariationName == "Paldean")
|
|
||||||
{
|
|
||||||
<td style="vertical-align: auto;"> Paldean @pokemon.PokemonName</td>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else // Otherwise, Base Case
|
|
||||||
{
|
|
||||||
<td style="vertical-align: auto;"> @pokemon.PokemonName</td>
|
|
||||||
}
|
|
||||||
|
|
||||||
<!-- Section 4: 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 5: 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 6: Delete Button -->
|
|
||||||
<td>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@code {
|
|
||||||
private List<Pokemon> pokemons = new List<Pokemon>();
|
|
||||||
private Dictionary<int, bool> isShiny = new Dictionary<int, bool>();
|
|
||||||
|
|
||||||
|
|
||||||
protected override async Task OnInitializedAsync()
|
|
||||||
{
|
|
||||||
|
|
||||||
var result = await PokemonService.GetAllPokemonAsync();
|
|
||||||
if (result is not null)
|
|
||||||
{
|
|
||||||
pokemons = result;
|
|
||||||
pokemons.Sort((x,y) => x.PokemonId.CompareTo(y.PokemonId));
|
|
||||||
|
|
||||||
// Initialize dictionary with false (show base image first)
|
|
||||||
foreach (var pokemon in pokemons)
|
|
||||||
{
|
|
||||||
isShiny[pokemon.Id] = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private void ToggleImage(int Id)
|
|
||||||
{
|
|
||||||
if (isShiny.ContainsKey(Id))
|
|
||||||
{
|
|
||||||
isShiny[Id] = !isShiny[Id];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
private async Task ConfirmDelete(int Id)
|
|
||||||
{
|
|
||||||
bool confirm = await JS.InvokeAsync<bool>("confirm", "Are you sure you want to delete this Pokémon?");
|
|
||||||
if (confirm)
|
|
||||||
{
|
|
||||||
await DeletePokemon(Id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private async Task DeletePokemon(int Id)
|
|
||||||
{
|
|
||||||
await PokemonService.DeletePokemonAsync(Id);
|
|
||||||
pokemons.RemoveAll(p => p.Id == Id); // Remove from the list locally
|
|
||||||
StateHasChanged(); // Refresh the UI
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue