From 404db2b8627ebbad586ff69da24746cb84d0ec59 Mon Sep 17 00:00:00 2001
From: Jonathan McCaffrey <jonmcc.0723@gmail.com>
Date: Sat, 27 Aug 2022 21:46:52 -0400
Subject: [PATCH] Adding MudBlazor UI with new Nav

---
 Components/Components.csproj                  |   2 +-
 Components/Inputs/ButtonComponent.razor       |  12 +-
 .../Inputs/{ButtonType.cs => MyButtonType.cs} |   2 +-
 IGP/Dialog/ConfirmationDialogComponent.razor  |  23 ++--
 IGP/IGP.csproj                                |   1 +
 IGP/PageLayout.razor                          | 111 ++++++++++++++----
 IGP/PageLayout.razor.css                      |  13 --
 .../BuildCalculator/BuildCalculatorPage.razor |   2 +-
 .../Parts/UnitMemoryManager.razor             |   4 +-
 IGP/Pages/PermissionsPage.razor               |   8 +-
 IGP/Portals/ConfirmationDialogPortal.razor    |   6 +-
 IGP/Program.cs                                |   4 +-
 IGP/_Imports.razor                            |   1 +
 IGP/global.json                               |   2 +-
 IGP/wwwroot/index.html                        |   3 +-
 Playground/Program.cs                         |   2 -
 Services/IServices.cs                         |   2 +-
 .../{DialogService.cs => MyDialogService.cs}  |   2 +-
 18 files changed, 127 insertions(+), 73 deletions(-)
 rename Components/Inputs/{ButtonType.cs => MyButtonType.cs} (80%)
 rename Services/Website/{DialogService.cs => MyDialogService.cs} (95%)

diff --git a/Components/Components.csproj b/Components/Components.csproj
index 1e439c7..8fe7554 100644
--- a/Components/Components.csproj
+++ b/Components/Components.csproj
@@ -21,7 +21,7 @@
     <ItemGroup>
         <PackageReference Include="Markdig" Version="0.28.1" />
         <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.8" />
-        <PackageReference Include="Microsoft.Extensions.Localization" Version="6.0.8" />
+        <PackageReference Include="Microsoft.Extensions.Localization" Version="7.0.0-preview.7.22376.6" />
     </ItemGroup>
 
     <ItemGroup>
diff --git a/Components/Inputs/ButtonComponent.razor b/Components/Inputs/ButtonComponent.razor
index 86a5224..5cec095 100644
--- a/Components/Inputs/ButtonComponent.razor
+++ b/Components/Inputs/ButtonComponent.razor
@@ -1,4 +1,4 @@
-<button class="buttonContainer @ButtonType.ToString().ToLower()" @onclick="ButtonClicked">@ChildContent</button>
+<button class="buttonContainer @MyButtonType.ToString().ToLower()" @onclick="ButtonClicked">@ChildContent</button>
 
 <style>
     .buttonContainer {
@@ -9,23 +9,23 @@
         font-size: 1.2rem;
     }
 
-    .@(ButtonType.Primary.ToString().ToLower()) {
+    .@(MyButtonType.Primary.ToString().ToLower()) {
         border-color: var(--primary);
         background-color: var(--primary);
     }
 
-    .@ButtonType.Secondary.ToString().ToLower() {
+    .@MyButtonType.Secondary.ToString().ToLower() {
         border-color: var(--secondary);
         background-color: var(--secondary);
     }
 
-        .@ButtonType.Primary.ToString().ToLower():hover {
+        .@MyButtonType.Primary.ToString().ToLower():hover {
             background-color: var(--primary-hover);
             border-color: var(--primary-border-hover);
             color: white;
         }
 
-        .@ButtonType.Secondary.ToString().ToLower():hover {
+        .@MyButtonType.Secondary.ToString().ToLower():hover {
             background-color: var(--secondary-hover);
             border-color: var(--secondary-border-hover);
             color: white;
@@ -43,7 +43,7 @@
     public EventCallback<EventArgs> OnClick { get; set; } = default!;
 
     [Parameter]
-    public ButtonType ButtonType { get; set; } = default!;
+    public MyButtonType MyButtonType { get; set; } = default!;
 
     private void ButtonClicked(EventArgs eventArgs)
     {
diff --git a/Components/Inputs/ButtonType.cs b/Components/Inputs/MyButtonType.cs
similarity index 80%
rename from Components/Inputs/ButtonType.cs
rename to Components/Inputs/MyButtonType.cs
index 10e50af..d65e93d 100644
--- a/Components/Inputs/ButtonType.cs
+++ b/Components/Inputs/MyButtonType.cs
@@ -1,6 +1,6 @@
 namespace Components.Inputs;
 
-public enum ButtonType
+public enum MyButtonType
 {
     Primary, // Positive Actions
     Secondary // Destruction Action
diff --git a/IGP/Dialog/ConfirmationDialogComponent.razor b/IGP/Dialog/ConfirmationDialogComponent.razor
index b845c18..4b3f4dd 100644
--- a/IGP/Dialog/ConfirmationDialogComponent.razor
+++ b/IGP/Dialog/ConfirmationDialogComponent.razor
@@ -1,11 +1,12 @@
-@implements IDisposable;
-@inject IDialogService DialogService
+@using Services.Website
+@implements IDisposable;
+@inject IMyDialogService MyDialogService
 @inject IJSRuntime JsRuntime
 
 
 @inject NavigationManager NavigationManager
 
-@if (DialogService.IsVisible)
+@if (MyDialogService.IsVisible)
 {
     <div class="confirmDialogBackground" onclick="@CloseDialog">
         <div class="confirmDialogContainer"
@@ -13,18 +14,18 @@
              @onclick:stopPropagation="true">
 
             <div class="confirmDialogHeader">
-                @DialogService.GetDialogContents().Title
+                @MyDialogService.GetDialogContents().Title
             </div>
             <div class="confirmDialogBody">
-                @DialogService.GetDialogContents().Message
+                @MyDialogService.GetDialogContents().Message
             </div>
 
             <div class="confirmDialogFooter">
-                <ButtonComponent ButtonType="ButtonType.Secondary" OnClick="DialogService.GetDialogContents().OnCancel">
+                <ButtonComponent MyButtonType="MyButtonType.Secondary" OnClick="MyDialogService.GetDialogContents().OnCancel">
                     Cancel
                 </ButtonComponent>
-                <ButtonComponent ButtonType="ButtonType.Primary" OnClick="DialogService.GetDialogContents().OnConfirm">
-                    @DialogService.GetDialogContents().ConfirmButtonLabel
+                <ButtonComponent MyButtonType="MyButtonType.Primary" OnClick="MyDialogService.GetDialogContents().OnConfirm">
+                    @MyDialogService.GetDialogContents().ConfirmButtonLabel
                 </ButtonComponent>
             </div>
         </div>
@@ -96,18 +97,18 @@
     {
         base.OnInitialized();
 
-        DialogService.Subscribe(StateHasChanged);
+        MyDialogService.Subscribe(StateHasChanged);
     }
 
     void IDisposable.Dispose()
     {
-        DialogService.Unsubscribe(StateHasChanged);
+        MyDialogService.Unsubscribe(StateHasChanged);
     }
 
 
     public void CloseDialog()
     {
-        DialogService.Hide();
+        MyDialogService.Hide();
     }
 
 
diff --git a/IGP/IGP.csproj b/IGP/IGP.csproj
index 9eb9d08..052efa7 100644
--- a/IGP/IGP.csproj
+++ b/IGP/IGP.csproj
@@ -25,6 +25,7 @@
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.0-preview.7.22376.6" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.0-preview.7.22376.6" />
         <PackageReference Include="Microsoft.Extensions.Localization" Version="7.0.0-preview.7.22376.6" />
+        <PackageReference Include="MudBlazor" Version="6.0.14" />
     </ItemGroup>
 
     <ItemGroup>
diff --git a/IGP/PageLayout.razor b/IGP/PageLayout.razor
index cdc9499..4e76ced 100644
--- a/IGP/PageLayout.razor
+++ b/IGP/PageLayout.razor
@@ -6,45 +6,108 @@
 @using Services.Website
 @implements IDisposable
 
-<div class="pageContents">
-    <div class="layoutContainer">
-        @if (!WebService.IsLoaded())
-        {
-            <LoadingComponent/>
-        }
-        else
-        {
+<MudThemeProvider/>
+
+asd
+
+<MudLayout>
+    <MudAppBar Elevation="1">
+        <MudHidden Breakpoint="Breakpoint.SmAndDown" Invert="true">
+            <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())"/>
+        </MudHidden>
+        <MudButton
+            Class="ml-3 mr-8"
+            Href="/"
+            Target="_self"
+            Variant="Variant.Text"
+            Color="Color.Default">
+            <MudText Typo="Typo.h5"> IGP Fan Reference</MudText>
+        </MudButton>
+        <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
+            <MudButton Href="/build-calculator"
+                       Variant="Variant.Text"
+                       Color="Color.Default"
+                       Class="mr-4">
+                <MudIcon Icon="fa-solid fa-helmet-battle" Class="mr-2"/>
+                Build Calculator
+            </MudButton>
+            <MudButton Href="/harass-calculator"
+                       Variant="Variant.Text"
+                       Color="Color.Default"
+                       Class="mr-4">
+                <MudIcon Icon="fa-solid fa-bow-arrow" Class="mr-2"/>
+                Harass Calculator
+            </MudButton>
+            <MudButton Href="/database"
+                       Variant="Variant.Text"
+                       Color="Color.Default"
+                       Class="mr-4">
+                <MudIcon Icon="fa-solid fa-clipboard-list" Class="mr-2"/>
+                Database
+            </MudButton>
+        </MudHidden>
+        <MudSpacer/>
+        <MudIconButton Icon="@Icons.Material.Filled.Settings" Color="Color.Inherit" Edge="Edge.End"/>
+    </MudAppBar>
+    <MudHidden Breakpoint="Breakpoint.SmAndDown" Invert="true">
+        <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
+            <MudPaper Width="250px" Class="d-inline-flex py-3" Elevation="0">
+                <MudNavMenu Class="mud-width-full flex-grow-1">
+                    <MudNavLink Href="/build-calculator" Icon="fa-solid fa-helmet-battle">Build Calculator</MudNavLink>
+                    <MudNavLink Href="/harass-calculator" Icon="fa-solid fa-bow-arrow">Harass Calculator</MudNavLink>
+                    <MudNavLink Href="/database" Icon="fa-solid fa-clipboard-list">Database</MudNavLink>
+                    <MudSpacer/>
+                    <MudDivider Class="my-2"/>
+                    <MudNavLink Href="/settings" Icon="fa-solid fa-gear">Settings</MudNavLink>
+                    <MudDivider Class="my-2"/>
+                </MudNavMenu>
+            </MudPaper>
+        </MudDrawer>
+    </MudHidden>
+
+    <MudMainContent>
+        <MudContainer Class="px-8" MaxWidth="MaxWidth.False">
             <div id="content" class="content">
                 @Body
             </div>
+        </MudContainer>
+    </MudMainContent>
+</MudLayout>
 
 
-            <DesktopNavComponent WebSections=WebService.WebSectionModels
-                                 WebPages=WebService.WebPageModels/>
-            <TabletNavComponent WebSections=WebService.WebSectionModels
-                                WebPages=WebService.WebPageModels/>
-            <MobileNavComponent WebSections=WebService.WebSectionModels
-                                WebPages=WebService.WebPageModels/>
-            
-            
-            <FooterComponent/>
-        }
-    </div>
+<MudThemeProvider @ref="@_mudThemeProvider" @bind-IsDarkMode="@_isDarkMode"/>
+<MudDialogProvider/>
+<MudSnackbarProvider/>
 
-    
-</div>
+@code {
 
+    private bool _isDarkMode;
+    private MudThemeProvider _mudThemeProvider;
 
-@code {
+    bool _drawerOpen = true;
+
+    void DrawerToggle()
+    {
+        _drawerOpen = !_drawerOpen;
+    }
 
     protected override void OnInitialized()
     {
         base.OnInitialized();
         WebService.Subscribe(HasChanged);
-        
+
         CollectFirstPageLoaded();
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _isDarkMode = await _mudThemeProvider.GetSystemPreference();
+            StateHasChanged();
+        }
+    }
+
     private void CollectFirstPageLoaded()
     {
         var skipBaseUri = NavigationManager.Uri.Substring(NavigationManager.BaseUri.Length,
@@ -54,7 +117,7 @@
         {
             rootUrl = "home";
         }
-        
+
         DataCollectionService.SendEvent(DataCollectionKeys.FirstPage,
             new Dictionary<string, string> { { "page", rootUrl } });
     }
diff --git a/IGP/PageLayout.razor.css b/IGP/PageLayout.razor.css
index 835963e..4e3c97c 100644
--- a/IGP/PageLayout.razor.css
+++ b/IGP/PageLayout.razor.css
@@ -5,22 +5,9 @@
 }
 
 .content {
-    margin-top: 32px;
     margin-bottom: 64px;
     display: flex;
     min-width: 100%;
     min-height: 100%;
     flex-direction: column;
-}
-
-@media only screen and (max-width: 1025px) {
-    .content {
-        margin-top: 120px;
-    }
-}
-
-@media only screen and (max-width: 480px) {
-    .content {
-        margin-top: 20px;
-    }
 }
\ No newline at end of file
diff --git a/IGP/Pages/BuildCalculator/BuildCalculatorPage.razor b/IGP/Pages/BuildCalculator/BuildCalculatorPage.razor
index 22f86c0..d95a7eb 100644
--- a/IGP/Pages/BuildCalculator/BuildCalculatorPage.razor
+++ b/IGP/Pages/BuildCalculator/BuildCalculatorPage.razor
@@ -32,7 +32,7 @@
 
     <div class="calculatorGrid">
         <div class="gridItem" style="grid-area: timing;">
-            <ButtonComponent ButtonType="ButtonType.Secondary" OnClick="OnResetClicked">Clear Build Order</ButtonComponent>
+            <ButtonComponent MyButtonType="MyButtonType.Secondary" OnClick="OnResetClicked">Clear Build Order</ButtonComponent>
             <PanelComponent>
                 <InfoTooltipComponent InfoText="@Locale["Tooltip Timing Info"]">
                     <TimingComponent></TimingComponent>
diff --git a/IGP/Pages/MemoryTester/Parts/UnitMemoryManager.razor b/IGP/Pages/MemoryTester/Parts/UnitMemoryManager.razor
index 2900c96..c8ae343 100644
--- a/IGP/Pages/MemoryTester/Parts/UnitMemoryManager.razor
+++ b/IGP/Pages/MemoryTester/Parts/UnitMemoryManager.razor
@@ -14,8 +14,8 @@
     </div>
 
     <div class="quizButtons">
-        <ButtonComponent ButtonType="ButtonType.Secondary" OnClick="OnRefreshQuiz">Refresh</ButtonComponent>
-        <ButtonComponent ButtonType="ButtonType.Primary" OnClick="OnSubmitQuiz">Submit</ButtonComponent>
+        <ButtonComponent MyButtonType="MyButtonType.Secondary" OnClick="OnRefreshQuiz">Refresh</ButtonComponent>
+        <ButtonComponent MyButtonType="MyButtonType.Primary" OnClick="OnSubmitQuiz">Submit</ButtonComponent>
     </div>
 </div>
 
diff --git a/IGP/Pages/PermissionsPage.razor b/IGP/Pages/PermissionsPage.razor
index 513d193..31c9372 100644
--- a/IGP/Pages/PermissionsPage.razor
+++ b/IGP/Pages/PermissionsPage.razor
@@ -3,7 +3,7 @@
 @inject IPermissionService PermissionService
 @layout PageLayout
 
-@inject IDialogService DialogService 
+@inject IMyDialogService MyDialogService 
 
 @inherits BasePage
 @using Services.Website
@@ -96,17 +96,17 @@
         void OnDataCollectionConfirmClicked(MouseEventArgs mouseEventArgs)
         {
             PermissionService.SetIsDataCollectionEnabled(!PermissionService.GetIsDataCollectionEnabled());
-            DialogService.Hide();
+            MyDialogService.Hide();
         }
 
         void OnDataCollectionCancelClicked(MouseEventArgs mouseEventArgs)
         {
-            DialogService.Hide();
+            MyDialogService.Hide();
         }
 
         if (_storageEnabled && !PermissionService.GetIsDataCollectionEnabled())
         {
-            DialogService.Show(new DialogContents
+            MyDialogService.Show(new DialogContents
             {
                 Title = "Permission Request",
                 Message = "Are you sure you want to enable data collection? This feature is implemented with Google Analytics, and your data will be used to gauge interests, find bugs, and optimize updates in IGP Fan Reference.",
diff --git a/IGP/Portals/ConfirmationDialogPortal.razor b/IGP/Portals/ConfirmationDialogPortal.razor
index bf998ba..4ad719d 100644
--- a/IGP/Portals/ConfirmationDialogPortal.razor
+++ b/IGP/Portals/ConfirmationDialogPortal.razor
@@ -1,6 +1,6 @@
 @implements IDisposable;
 
-@inject IDialogService DialogService
+@inject IMyDialogService MyDialogService
 
 <ConfirmationDialogComponent></ConfirmationDialogComponent>
 
@@ -9,12 +9,12 @@
     protected override void OnInitialized()
     {
         base.OnInitialized();
-        DialogService.Subscribe(OnUpdate);
+        MyDialogService.Subscribe(OnUpdate);
     }
 
     void IDisposable.Dispose()
     {
-        DialogService.Unsubscribe(OnUpdate);
+        MyDialogService.Unsubscribe(OnUpdate);
     }
 
     void OnUpdate()
diff --git a/IGP/Program.cs b/IGP/Program.cs
index 79c0016..f75ee3f 100644
--- a/IGP/Program.cs
+++ b/IGP/Program.cs
@@ -10,6 +10,7 @@ using Services;
 using Services.Development;
 using Services.Immortal;
 using Services.Website;
+using MudBlazor.Services;
     
 
 CultureInfo.DefaultThreadCurrentCulture = new CultureInfo("en-US");
@@ -69,7 +70,7 @@ builder.Services.AddScoped<IPermissionService, PermissionService>();
 builder.Services.AddScoped<IEconomyComparisonService, EconomyComparisionService>();
 builder.Services.AddScoped<IDataCollectionService, DataCollectionService>();
 
-builder.Services.AddScoped<IDialogService, DialogService>();
+builder.Services.AddScoped<IMyDialogService, MyDialogService>();
 
 
 builder.Services.AddScoped(sp => new HttpClient
@@ -77,6 +78,7 @@ builder.Services.AddScoped(sp => new HttpClient
     BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
 });
 
+builder.Services.AddMudServices();
 
 #if NO_SQL
 
diff --git a/IGP/_Imports.razor b/IGP/_Imports.razor
index e57bfda..ed0edd9 100644
--- a/IGP/_Imports.razor
+++ b/IGP/_Imports.razor
@@ -55,3 +55,4 @@
 @using Blazor.Analytics
 @using Blazor.Analytics.Components
 @using Blazor.Analytics.Abstractions
+@using MudBlazor
\ No newline at end of file
diff --git a/IGP/global.json b/IGP/global.json
index 9e5e1fd..7cd6a1f 100644
--- a/IGP/global.json
+++ b/IGP/global.json
@@ -1,6 +1,6 @@
 {
   "sdk": {
-    "version": "6.0.0",
+    "version": "7.0.0",
     "rollForward": "latestMajor",
     "allowPrerelease": true
   }
diff --git a/IGP/wwwroot/index.html b/IGP/wwwroot/index.html
index 2328b93..40a5606 100644
--- a/IGP/wwwroot/index.html
+++ b/IGP/wwwroot/index.html
@@ -16,6 +16,7 @@
 
     <link href="manifest.json" rel="manifest"/>
     <link href="icon-512.png" rel="apple-touch-icon" sizes="512x512"/>
+    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="fontawesome-pro-6.1.1-web/css/fontawesome.min.css" />
 </head>
 
@@ -60,7 +61,7 @@
     });
     
 </script>
-
+<script src="_content/MudBlazor/MudBlazor.min.js"></script>
 <script>navigator.serviceWorker.register('service-worker.js');</script>
 </body>
 
diff --git a/Playground/Program.cs b/Playground/Program.cs
index 80f4954..023b655 100644
--- a/Playground/Program.cs
+++ b/Playground/Program.cs
@@ -4,8 +4,6 @@ using Playground;
 
 using MudBlazor.Services;
 
-
-
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.RootComponents.Add<App>("#app");
 builder.RootComponents.Add<HeadOutlet>("head::after");
diff --git a/Services/IServices.cs b/Services/IServices.cs
index 18cd839..fb46369 100644
--- a/Services/IServices.cs
+++ b/Services/IServices.cs
@@ -73,7 +73,7 @@ public interface ISearchService
     void Hide();
 }
 
-public interface IDialogService
+public interface IMyDialogService
 {
     public bool IsVisible { get; set; }
     public void Subscribe(Action action);
diff --git a/Services/Website/DialogService.cs b/Services/Website/MyDialogService.cs
similarity index 95%
rename from Services/Website/DialogService.cs
rename to Services/Website/MyDialogService.cs
index ce56447..4201811 100644
--- a/Services/Website/DialogService.cs
+++ b/Services/Website/MyDialogService.cs
@@ -11,7 +11,7 @@ public class DialogContents
     public EventCallback<EventArgs> OnCancel { get; set; }
 }
 
-public class DialogService : IDialogService
+public class MyDialogService : IMyDialogService
 {
     private DialogContents _dialogContents;