kira
/
exciting-aftermath
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Made a download button and made an edit button toggleable

This commit is contained in:
Kira Jiroux 2025-06-27 21:07:34 -04:00
parent 568e66f7aa
commit 2bf560f6f0
7 changed files with 115 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor Normal file
View File

@ -0,0 +1,9 @@
@inject IJSRuntime JS
<div class="">
<button class="btn btn-primary mt-1 p-2 rounded rounded-5 align-self-start text-white " @onclick="DownloadPokemonJson">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-down-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293z" />
</svg>
</button>
</div>

31
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor.cs Normal file
View File

@ -0,0 +1,31 @@
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;
using Portfolio.Domain.Features.Pokemon;
using System.Text.Json;
namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
{
partial class PokemonDownload
{
[Parameter]
public List<Pokemon> _Pokemon { get; set; }
private List<Pokemon> pokemons = new List<Pokemon>();
protected override void OnParametersSet()
{
if (_Pokemon != null)
{
pokemons = _Pokemon.ToList();
}
}
private async Task DownloadPokemonJson()
{
var json = JsonSerializer.Serialize(pokemons, new JsonSerializerOptions { WriteIndented = true });
await JS.InvokeVoidAsync("downloadFileFromText", "pokemon.json", "application/json", json);
}
}
}

10
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonHeader.razor
View File

@ -13,7 +13,7 @@
<!-- Home --> <!-- Home -->
<button class="btn btn-primary mx-1 align-content-center" style="border-radius: 50px 15px; max-width: 60px;"> <button class="btn btn-primary mx-1 align-content-center" style="border-radius: 50px 15px; max-width: 60px;">
<NavLink href="/pokemonsleep"> <NavLink href="/pokemonsleep">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF" class="bi bi-house-fill mb-1" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill mb-1 text-white" viewBox="0 0 16 16">
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z" /> <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z" />
<path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z" /> <path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z" />
</svg> </svg>
@ -23,7 +23,7 @@
<!-- Pokemon Table--> <!-- Pokemon Table-->
<button class="btn btn-info mx-1" style="border-radius: 50px 15px; max-width: 60px;"> <button class="btn btn-info mx-1" style="border-radius: 50px 15px; max-width: 60px;">
<NavLink href="/pokemon"> <NavLink href="/pokemon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF" class="bi bi-table mb-1" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table mb-1 text-white" 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" /> <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> </svg>
</NavLink> </NavLink>
@ -32,7 +32,7 @@
<!-- Rate Pokemon --> <!-- Rate Pokemon -->
<button class="btn btn-success mx-1" style="border-radius: 50px 15px; max-width: 60px;"> <button class="btn btn-success mx-1" style="border-radius: 50px 15px; max-width: 60px;">
<NavLink href="/rate-pokemon"> <NavLink href="/rate-pokemon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF" class="bi bi-award-fill mb-1" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award-fill mb-1 text-white" 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="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" /> <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z" />
</svg> </svg>
@ -40,9 +40,9 @@
</button> </button>
<!-- Add Pokemon (Wrap in Auth) --> <!-- Add Pokemon (Wrap in Auth) -->
<button class="btn btn-warning mx-1" style="border-radius: 50px 15px; max-width: 60px;"> <button class="btn btn-warning mx-1 " style="border-radius: 50px 15px; max-width: 60px;">
<NavLink href="/pokemonsleep/add-new-pokemon"> <NavLink href="/pokemonsleep/add-new-pokemon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF" class="bi bi-plus-circle-fill mb-1" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill text-white" 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" /> <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> </svg>
</NavLink> </NavLink>

31
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor
View File

@ -5,10 +5,14 @@
@attribute [StreamRendering] @attribute [StreamRendering]
@rendermode InteractiveServer @rendermode InteractiveServer
<div class="d-flex justify-content-end mb-2">
<PokemonDownload _Pokemon="pokemons" />
</div>
<!-- Table A: Desktop View--> <!-- Table A: Desktop View-->
<div class="container d-none d-md-block" style="height: 70vh;"> <div class="container d-none d-md-block " style="height: 70vh;">
<!-- Main UI --> <!-- Main UI -->
<div class="border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable "> <div class="border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable ">
<!-- Table Header --> <!-- Table Header -->
<div class="row bg-secondary bg-gradient py-3 border-0"> <div class="row bg-secondary bg-gradient py-3 border-0">
<div class="flex-row justify-content-between"> <div class="flex-row justify-content-between">
@ -17,6 +21,7 @@
<h2 class="text-white text-decoration-underline">Available Pokémon</h2> <h2 class="text-white 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()) Pokémon</p></div> <div class="m-1 badge bg-info position-absolute top-0 end-0 border-0"><p class="statText">@(pokemons.Count()) Pokémon</p></div>
</div> </div>
</div> </div>
</div> </div>
@ -33,7 +38,11 @@
<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">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">Sleep Type</th>
<th class="text-white text-bg-info col-2 text-center" scope="col">Speciality</th> <th class="text-white text-bg-info col-2 text-center" scope="col">Speciality</th>
@if (adminToggle)
{
<th class="text-white text-bg-info col-1 text-center" scope="col">Edit</th>
}
</tr> </tr>
</thead> </thead>
<!-- If/Else Pokemon Loaded--> <!-- If/Else Pokemon Loaded-->
@ -113,6 +122,16 @@
</div> </div>
</td> </td>
@if (adminToggle)
{
<td class="" style="">
<div class="d-flex justify-content-center">
<PokemonEditButton PokemonId="@pokemon.PokemonId" />
</div>
</td>
}
</tr> </tr>
} }
@ -133,10 +152,14 @@
</table> </table>
</div> </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> </div>
<!-- Desktop B: Mobile View --> <!-- Desktop B: Mobile View -->

9
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.cs
View File

@ -2,6 +2,7 @@
using Microsoft.EntityFrameworkCore.Metadata.Internal; using Microsoft.EntityFrameworkCore.Metadata.Internal;
using Microsoft.JSInterop; using Microsoft.JSInterop;
using Portfolio.Domain.Features.Pokemon; using Portfolio.Domain.Features.Pokemon;
using System.Text.Json;
namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
{ {
@ -10,9 +11,12 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
[Parameter] [Parameter]
public List<Pokemon> AllPokemon { get; set; } public List<Pokemon> AllPokemon { get; set; }
private List<Pokemon> pokemons = new List<Pokemon>(); private List<Pokemon> pokemons = new List<Pokemon>();
private Dictionary<int, bool> isShiny = new Dictionary<int, bool>(); private Dictionary<int, bool> isShiny = new Dictionary<int, bool>();
private bool adminToggle = false;
protected override void OnParametersSet() protected override void OnParametersSet()
{ {
@ -92,6 +96,9 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
return $"https://www.serebii.net/pokemonsleep/pokemon/type/{pokemonType.ToLower()}.png"; return $"https://www.serebii.net/pokemonsleep/pokemon/type/{pokemonType.ToLower()}.png";
} }
private void HandleToggleChange(ChangeEventArgs e)
{
Console.WriteLine($"Admin Toggle is now: {adminToggle}");
}
} }
} }

23
Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonAdmin.razor Normal file
View File

@ -0,0 +1,23 @@
@page "/pokemonsleep/admincontrol"
<div class="w-100">
<!-- <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" /> -->
<PokemonHeader />
<hr class="mt-5" />
<!-- Add Pokemon (Wrap in Auth) -->
<button class="btn btn-warning mx-1" style="border-radius: 50px 15px; max-width: 60px;">
<NavLink href="/pokemonsleep/addmincontrol/add-new-pokemon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF" class="bi bi-plus-circle-fill mb-1" 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>
</NavLink>
</button>
</div>

10
Portfolio.WebUI.Server/wwwroot/js/site.js
View File

@ -7,3 +7,13 @@ window.registerResizeCallback = (dotNetHelper) => {
dotNetHelper.invokeMethodAsync('UpdateScreenWidth', window.innerWidth); dotNetHelper.invokeMethodAsync('UpdateScreenWidth', window.innerWidth);
}; };
}; };
window.downloadFileFromText = (filename, contentType, content) => {
const blob = new Blob([content], { type: contentType });
const url = URL.createObjectURL(blob);
const anchor = document.createElement('a');
anchor.href = url;
anchor.download = filename;
anchor.click();
URL.revokeObjectURL(url);
}