From 2bf560f6f01f0df72429e5d19947e97be1e79755 Mon Sep 17 00:00:00 2001
From: Kira Jiroux <microsoft.com@kirajiroux.com>
Date: Fri, 27 Jun 2025 21:07:34 -0400
Subject: [PATCH] Made a download button and made an edit button toggleable

---
 .../Pokemon Components/PokemonDownload.razor  |  9 ++++++
 .../PokemonDownload.razor.cs                  | 31 +++++++++++++++++++
 .../Pokemon Components/PokemonHeader.razor    | 12 +++----
 .../Pokemon Components/PokemonTable.razor     | 31 ++++++++++++++++---
 .../Pokemon Components/PokemonTable.razor.cs  |  9 +++++-
 .../Pages/Pokemon Pages/PokemonAdmin.razor    | 23 ++++++++++++++
 Portfolio.WebUI.Server/wwwroot/js/site.js     | 12 ++++++-
 7 files changed, 115 insertions(+), 12 deletions(-)
 create mode 100644 Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor
 create mode 100644 Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor.cs
 create mode 100644 Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonAdmin.razor

diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor
new file mode 100644
index 0000000..0962c2f
--- /dev/null
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor	
@@ -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>
\ No newline at end of file
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor.cs b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor.cs
new file mode 100644
index 0000000..3a67e1d
--- /dev/null
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor.cs	
@@ -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);
+        }
+    }
+}
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonHeader.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonHeader.razor
index efc9290..02a2321 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonHeader.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonHeader.razor	
@@ -13,7 +13,7 @@
             <!-- Home -->
             <button class="btn btn-primary mx-1 align-content-center" style="border-radius: 50px 15px; max-width: 60px;">
                 <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 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>
@@ -23,7 +23,7 @@
             <!-- Pokemon Table-->
             <button class="btn btn-info mx-1" style="border-radius: 50px 15px; max-width: 60px;">
                 <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" />
                     </svg>
                 </NavLink>
@@ -32,7 +32,7 @@
             <!-- Rate Pokemon -->
             <button class="btn btn-success mx-1" style="border-radius: 50px 15px; max-width: 60px;">
                 <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="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z" />
                     </svg>
@@ -40,11 +40,11 @@
             </button>
 
             <!-- 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">
-                    <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" />
-                    </svg> 
+                    </svg>
                 </NavLink>
             </button>
 
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor
index 293109c..24bfa6c 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor	
@@ -5,10 +5,14 @@
 @attribute [StreamRendering]
 @rendermode InteractiveServer
 
+<div class="d-flex justify-content-end mb-2">
+
+    <PokemonDownload _Pokemon="pokemons" />
+</div>
 <!-- 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 -->
-    <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 -->
         <div class="row bg-secondary bg-gradient py-3 border-0">
             <div class="flex-row justify-content-between">
@@ -17,6 +21,7 @@
 
                     <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>
             </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-2 text-center" scope="col">Sleep Type</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>
                 </thead>
                 <!-- If/Else Pokemon Loaded-->
@@ -113,6 +122,16 @@
                                         </div>
                                     </td>
 
+                                    @if (adminToggle)
+                                    {
+                                        <td class="" style="">
+                                            <div class="d-flex justify-content-center">
+                                                <PokemonEditButton PokemonId="@pokemon.PokemonId" />
+
+                                            </div>
+                                        </td>
+                                    }
+
 
                                 </tr>
                             }
@@ -133,10 +152,14 @@
 
             </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 -->
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.cs b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.cs
index 3b61bc8..1ccbbca 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.cs	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.cs	
@@ -2,6 +2,7 @@
 using Microsoft.EntityFrameworkCore.Metadata.Internal;
 using Microsoft.JSInterop;
 using Portfolio.Domain.Features.Pokemon;
+using System.Text.Json;
 
 namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
 {
@@ -10,9 +11,12 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
         [Parameter]
         public List<Pokemon> AllPokemon {  get; set; }
 
+
         private List<Pokemon> pokemons = new List<Pokemon>();
         private Dictionary<int, bool> isShiny = new Dictionary<int, bool>();
 
+        private bool adminToggle = false;
+
 
         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";
         }
-
+        private void HandleToggleChange(ChangeEventArgs e)
+        {
+            Console.WriteLine($"Admin Toggle is now: {adminToggle}");
+        }
     }
 }
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonAdmin.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonAdmin.razor
new file mode 100644
index 0000000..077cba4
--- /dev/null
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonAdmin.razor	
@@ -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>
+
diff --git a/Portfolio.WebUI.Server/wwwroot/js/site.js b/Portfolio.WebUI.Server/wwwroot/js/site.js
index cd486ce..e21d70b 100644
--- a/Portfolio.WebUI.Server/wwwroot/js/site.js
+++ b/Portfolio.WebUI.Server/wwwroot/js/site.js
@@ -6,4 +6,14 @@ window.registerResizeCallback = (dotNetHelper) => {
     window.onresize = () => {
         dotNetHelper.invokeMethodAsync('UpdateScreenWidth', window.innerWidth);
     };
-};
\ No newline at end of file
+};
+
+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);
+}
\ No newline at end of file