MudBlazor to IgniteUI.Blazor.Controls

ClientHub/OI.Metrology.ClientHub.csproj

@@ -6,7 +6,7 @@
     <RuntimeIdentifier>win-x64</RuntimeIdentifier>
   </PropertyGroup>
   <ItemGroup>
-    <PackageReference Include="MudBlazor" Version="6.1.8" />
+    <PackageReference Include="IgniteUI.Blazor" Version="22.2.24" />
     <PackageReference Include="Serilog.Sinks.BrowserConsole" Version="1.0.0" />
     <PackageReference Include="Serilog.Sinks.BrowserHttp" Version="1.0.0-dev-00032" />
     <PackageReference Include="System.Net.Http.Json" Version="7.0.0" />

ClientHub/Pages/AwaitingDisposition.razor

@@ -2,7 +2,6 @@
 @page "/AwaitingDisposition"
 
 @using Microsoft.AspNetCore.Components.Web
-@using MudBlazor
 
 @namespace OI.Metrology.ClientHub.Pages
 
@@ -15,57 +14,13 @@
 
 <div class="row" style="margin-top: 10px; margin-bottom: 20px;">
     <div class="col-xs-1">
-        <MudButton Variant="Variant.Filled" Color="Color.Info" id="OpenButton">Open</MudButton>
+        <input type="button" class="btn" id="OpenButton" value="Open" />
     </div>
     <div class="col-xs-1">
-        <MudButton Variant="Variant.Filled" Color="Color.Primary" id="RefreshButton" OnClick=RefreshClick>Refresh</MudButton>
+        <input type="button" class="btn" id="RefreshButton" value="Refresh" />
-    </div>
-    <div class="col-xs-1">
-        <MudButton Variant="Variant.Filled" Color="Color.Default" OnClick=LoadClickAsync>View</MudButton>
     </div>
 </div>
 
-@if (_Records == null)
-{
-    <MudProgressCircular Color="Color.Default" Indeterminate="true" />
-}
-else if (_Records.Any())
-{
-    <MudTable Items="_Records" FixedHeader="true" SortLabel="Sort By" Elevation="0" Dense="true" Hover="true" Bordered="true" Striped="true" Height="400px" Filter="new Func<Metrology.Shared.DataModels.AwaitingDisposition, bool>(FilterRecords)">
-        <ToolBarContent>
-            <MudTextField @bind-Value="@_ToolTypeFilter" Placeholder="Tool Type" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
-            <MudTextField @bind-Value="@_ToolFilter" Placeholder="Tool" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
-            <MudTextField @bind-Value="@_ReactorFilter" Placeholder="Reactor" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
-            <MudTextField @bind-Value="@_RdsFilter" Placeholder="RDS" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
-            <MudTextField @bind-Value="@_PSNFilter" Placeholder="PSN" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
-            <MudTextField @bind-Value="@_LayerFilter" Placeholder="Layer" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
-            <MudTextField @bind-Value="@_ZoneFilter" Placeholder="Zone" Adornment="Adornment.Start" AdornmentIcon="@Icons.Material.Filled.Search" IconSize="Size.Medium" Class="mt-0"></MudTextField>
-        </ToolBarContent>
-        <HeaderContent>
-            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, string?>(x=>x.ToolType)">ToolType</MudTableSortLabel></MudTh>
-            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, string?>(x=>x.Tool)">Tool</MudTableSortLabel></MudTh>
-            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, string?>(x=>x.Reactor)">Reactor</MudTableSortLabel></MudTh>
-            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, string?>(x=>x.RDS)">RDS</MudTableSortLabel></MudTh>
-            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, string?>(x=>x.PSN)">PSN</MudTableSortLabel></MudTh>
-            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, string?>(x=>x.Layer)">Layer</MudTableSortLabel></MudTh>
-            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, string?>(x=>x.Zone)">Zone</MudTableSortLabel></MudTh>
-            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, object>(x=>x.InsertDate)">InsertDate</MudTableSortLabel></MudTh>
-            <MudTh><MudTableSortLabel SortBy="new Func<OI.Metrology.Shared.DataModels.AwaitingDisposition, object>(x=>x.Expiration)">Expiration</MudTableSortLabel></MudTh>
-        </HeaderContent>
-        <RowTemplate>
-            <MudTd DataLabel="ToolType">@context.ToolType</MudTd>
-            <MudTd DataLabel="Tool">@context.Tool</MudTd>
-            <MudTd DataLabel="Reactor">@context.Reactor</MudTd>
-            <MudTd DataLabel="RDS">@context.RDS</MudTd>
-            <MudTd DataLabel="PSN">@context.PSN</MudTd>
-            <MudTd DataLabel="Layer">@context.Layer</MudTd>
-            <MudTd DataLabel="Zone">@context.Zone</MudTd>
-            <MudTd DataLabel="InsertDate">@context.InsertDate</MudTd>
-            <MudTd DataLabel="Expiration">@context.Expiration</MudTd>
-        </RowTemplate>
-    </MudTable>
-}
-
 <script suppress-error="BL9992">
     setInterval(function () { $("#RefreshButton").click(); }, 60000);
 </script>

ClientHub/Pages/AwaitingDisposition.razor.cs

@@ -1,7 +1,6 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 using OI.Metrology.ClientHub.Models;
-using OI.Metrology.Shared.Models.Stateless;
 
 namespace OI.Metrology.ClientHub.Pages;
 
@@ -13,17 +12,6 @@ public partial class AwaitingDisposition
     [Inject] protected AppSettings? AppSettings { get; set; }
     [Inject] protected ILogger<AwaitingDisposition>? Logger { get; set; }
 
-    private string? _ToolTypeFilter;
-    private string? _ToolFilter;
-    private string? _ReactorFilter;
-    private string? _RdsFilter;
-    private string? _PSNFilter;
-    private string? _LayerFilter;
-    private string? _ZoneFilter;
-    private readonly List<Metrology.Shared.DataModels.AwaitingDisposition> _Records;
-
-    public AwaitingDisposition() => _Records = new();
-
     protected override Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender)
@@ -37,46 +25,4 @@ public partial class AwaitingDisposition
         return Task.CompletedTask;
     }
 
-    private bool FilterRecords(Metrology.Shared.DataModels.AwaitingDisposition? record)
-    {
-        bool? result = _ToolTypeFilter is not null ? record?.ToolType?.Contains(_ToolTypeFilter, StringComparison.CurrentCultureIgnoreCase) : null;
-        if (result is null || result.Value)
-            result = _ToolFilter is not null ? record?.Tool?.Contains(_ToolFilter, StringComparison.CurrentCultureIgnoreCase) : null;
-        if (result is null || result.Value)
-            result = _ReactorFilter is not null ? record?.Reactor?.Contains(_ReactorFilter, StringComparison.CurrentCultureIgnoreCase) : null;
-        if (result is null || result.Value)
-            result = _RdsFilter is not null ? record?.RDS?.Contains(_RdsFilter, StringComparison.CurrentCultureIgnoreCase) : null;
-        if (result is null || result.Value)
-            result = _PSNFilter is not null ? record?.PSN?.Contains(_PSNFilter, StringComparison.CurrentCultureIgnoreCase) : null;
-        if (result is null || result.Value)
-            result = _LayerFilter is not null ? record?.Layer?.Contains(_LayerFilter, StringComparison.CurrentCultureIgnoreCase) : null;
-        if (result is null || result.Value)
-            result = _ZoneFilter is not null ? record?.Zone?.Contains(_ZoneFilter, StringComparison.CurrentCultureIgnoreCase) : null;
-        result ??= true;
-        return result.Value;
-    }
-
-    private void RefreshClick() => _Records.Clear();
-
-    private async Task LoadClickAsync()
-    {
-        if (Logger is null)
-            throw new NullReferenceException(nameof(Logger));
-        if (HttpClient is null)
-            throw new NullReferenceException(nameof(HttpClient));
-        _Records.Clear();
-        string controllerName = IAwaitingDispoController<object>.GetRouteName();
-        try
-        {
-            Metrology.Shared.DataModels.AwaitingDisposition[]? collection = await HttpClient.GetFromJsonAsync<Metrology.Shared.DataModels.AwaitingDisposition[]>($"api/{controllerName}");
-            if (collection is not null)
-                _Records.AddRange(collection);
-        }
-        catch (Exception)
-        {
-            string json = await HttpClient.GetStringAsync($"api/{controllerName}");
-            Logger.LogInformation(message: json);
-        }
-    }
-
 }

ClientHub/Pages/Export.razor

@@ -1,7 +1,7 @@
 @page "/Export"
 
+@using IgniteUI.Blazor.Controls
 @using Microsoft.AspNetCore.Components.Web
-@using MudBlazor
 @using OI.Metrology.Shared.DataModels
 
 @namespace OI.Metrology.ClientHub.Pages
@@ -12,6 +12,11 @@
 
 <hr />
 
+<IgbButton>
+    <IgbIcon @ref="IconRef" Size="SizableComponentSize.Small" IconName="build" Collection="material" />
+    Refresh
+</IgbButton>
+
 @if (_TimeSpan is null || _DateRange is null || _ToolTypeNameId is null || _ToolTypeNameIdCollection is null)
 {
     <p><em>Loading...</em></p>

ClientHub/Pages/Export.razor.cs

@@ -1,6 +1,6 @@
-using Microsoft.AspNetCore.Components;
+using IgniteUI.Blazor.Controls;
+using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
-using MudBlazor;
 using OI.Metrology.Shared.DataModels;
 using OI.Metrology.Shared.Models.Stateless;
 using System.Net;
@@ -11,10 +11,11 @@ public partial class Export
 {
 
     protected TimeSpan? _TimeSpan;
-    protected DateRange? _DateRange;
+    protected TimeSpan? _DateRange;
     protected ToolTypeNameId? _ToolTypeNameId;
     protected ToolTypeNameId[]? _ToolTypeNameIdCollection;
 
+    protected IgbIcon? IconRef { get; set; }
     [Inject] protected HttpClient? HttpClient { get; set; }
     [Inject] protected IJSRuntime? JSRuntime { get; set; }
     [Inject] protected Models.AppSettings? AppSettings { get; set; }
@@ -24,6 +25,15 @@ public partial class Export
 
     protected override Task OnAfterRenderAsync(bool firstRender)
     {
+        if (firstRender && IconRef is not null)
+        {
+            // _ = IconRef.EnsureReady().ContinueWith(new Action<Task>((e) =>
+            //     IconRef.RegisterIconAsync("build", "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_build_24px.svg", "material")));
+            const string buildIcon = "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/></svg>";
+            // const string review = "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-labelledby='crcode-review-desc crcode-review-title'><title id='crcode-review-title'>Code Review Icon</title><desc id='crcode-review-desc'>A picture showing encircled angle brackets with a dot between them.</desc><path d='M12 2a10 10 0 1010 10A10 10 0 0012 2zM9 14.207l-1 1L4.793 12 8 8.793l1 1L6.793 12zM12 14a2 2 0 112-2 2 2 0 01-2 2zm4 1.207l-1-1L17.207 12 15 9.793l1-1L19.207 12z'/></svg>";
+            _ = IconRef.EnsureReady().ContinueWith(new Action<Task>((e) =>
+                 IconRef.RegisterIconFromTextAsync("build", buildIcon, "material")));
+        }
         if (firstRender)
         {
             if (JSRuntime is null)
@@ -39,7 +49,7 @@ public partial class Export
     {
         _ToolTypeNameId ??= new();
         _TimeSpan ??= new TimeSpan(DateTime.Now.Hour, DateTime.Now.Minute, 00);
-        _DateRange ??= new DateRange(DateTime.Now.AddMonths(-1).Date, DateTime.Now.Date);
+        _DateRange ??= new TimeSpan(DateTime.Now.Date.Ticks - DateTime.Now.AddMonths(-1).Date.Ticks);
         if (Logger is null)
             throw new NullReferenceException(nameof(Logger));
         if (HttpClient is null)
@@ -64,11 +74,12 @@ public partial class Export
             throw new NullReferenceException(nameof(JSRuntime));
         if (HttpClient is null)
             throw new NullReferenceException(nameof(HttpClient));
-        if (_TimeSpan is null || _DateRange is null || _ToolTypeNameId is null || _ToolTypeNameIdCollection is null || _ToolTypeNameId.ToolTypeName is null || _DateRange.Start is null || _DateRange.End is null)
+        if (_TimeSpan is null || _DateRange is null || _ToolTypeNameId is null || _ToolTypeNameIdCollection is null || _ToolTypeNameId.ToolTypeName is null || _DateRange is null)
             return;
+        TimeSpan timeSpan = new(_TimeSpan.Value.Ticks);
         string controllerName = IToolTypesController<object>.GetRouteName();
-        string endTime = _DateRange.End.Value.AddTicks(_TimeSpan.Value.Ticks).ToString();
+        string endTime = _DateRange.Value.Add(timeSpan).ToString();
-        string startTime = _DateRange.Start.Value.AddTicks(_TimeSpan.Value.Ticks).ToString();
+        string startTime = _DateRange.Value.Add(new TimeSpan(_TimeSpan.Value.Ticks)).ToString();
         string fileName = $"Export_{_ToolTypeNameId.ToolTypeName}_{startTime:yyyyMMddHHmm}_to_{endTime:yyyyMMddHHmm}.csv";
         string query = $"datebegin={startTime:MM/dd/yyyy hh:mm tt}&dateend={endTime:MM/dd/yyyy hh:mm tt}&filename={WebUtility.UrlEncode(fileName)}";
         await JSRuntime.InvokeVoidAsync("triggerFileDownload", fileName, $"{HttpClient.BaseAddress}api/{controllerName}/{_ToolTypeNameId.ID}/csv?{query}");

ClientHub/Pages/RunHeaders.razor

@@ -1,7 +1,6 @@
 @page "/RunHeaders"
 
 @using Microsoft.AspNetCore.Components.Web
-@using MudBlazor
 
 @namespace OI.Metrology.ClientHub.Pages
 
@@ -33,9 +32,9 @@
 
 <div class="row" style="margin-top: 10px; margin-bottom: 20px;">
     <div class="col-xs-1">
-        <MudButton Variant="Variant.Filled" Color="Color.Info" id="OpenButton">Open</MudButton>
+        <input type="button" class="btn" id="OpenButton" value="Open" />
     </div>
     <div class="col-xs-1">
-        <MudButton Variant="Variant.Filled" Color="Color.Primary" id="RefreshButton">Refresh</MudButton>
+        <input type="button" class="btn" id="RefreshButton" value="Refresh" />
     </div>
 </div>

ClientHub/Pages/RunInfo.razor

@@ -1,7 +1,6 @@
 @page "/RunInfo/{ToolTypeId:int?}/{HeaderId:int?}"
 
 @using Microsoft.AspNetCore.Components.Web
-@using MudBlazor
 
 @namespace OI.Metrology.ClientHub.Pages
 
@@ -25,7 +24,7 @@
         <div class="form-control mb-2 mr-sm-2" id="EndTime"></div>
     </div>&nbsp;&nbsp;
     <div class="form-group">
-        <MudButton Variant="Variant.Filled" Color="Color.Info" id="LoadHeadersButton">Load Headers</MudButton>
+        <input class="btn btn-primary" type="button" value="Load Headers" id="LoadHeadersButton" />
     </div>&nbsp;&nbsp;
     <div class="form-group">
         <label class="form-check-label" for="chkAutoRefresh">
@@ -42,10 +41,10 @@
 
 <div class="row" style="margin-top: 10px; margin-bottom: 20px;">
     <div class="col-xs-1">
-        <MudButton Variant="Variant.Filled" Color="Color.Info" id="GetDataButton" Disabled="true">Get Data</MudButton>
+        <input type="button" class="btn" id="GetDataButton" value="Get Data" disabled />
     </div>
     <div class="col-xs-1">
-        <MudButton Variant="Variant.Filled" Color="Color.Secondary" id="ReviewButton" Disabled="true">Review</MudButton>
+        <input type="button" class="btn" id="ReviewButton" value="Review" disabled />
     </div>
 </div>
 
@@ -58,7 +57,7 @@
     </div>
 
     <div id="ExportDiv" style="margin-top: 10px;" hidden>
-        <MudButton Variant="Variant.Filled" Color="Color.Warning" id="OIExportButton">Send to OpenInsight</MudButton>
+        <input type="button" class="btn" value="Send to OpenInsight" id="OIExportButton" />
         <span id="OIExportResult" style="margin-left: 10px; font-weight: bold; color: #366b02;"></span>
     </div>
 

ClientHub/Pages/_Host.cshtml

@@ -24,7 +24,7 @@
     <link rel="icon" type="image/png" href="favicon.png" />
     <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
     <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
-    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
+    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
 
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
 
@@ -61,7 +61,7 @@
     </div>
 
     <script src="_framework/blazor.server.js"></script>
-    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
+    <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
     <script src="js/bootstrap.min.js" type="text/javascript" asp-append-version="true"></script>
     <script src="js/respond.min.js" type="text/javascript" asp-append-version="true"></script>
 </body>

ClientHub/Program.cs

@@ -1,4 +1,4 @@
-using MudBlazor.Services;
+using IgniteUI.Blazor.Controls;
 using OI.Metrology.ClientHub.Data;
 using OI.Metrology.ClientHub.Models;
 using Serilog;
@@ -24,7 +24,7 @@ internal class Program
             AppSettings appSettings = Models.Binder.AppSettings.Get(builder.Configuration);
             // Add services to the container.
             _ = builder.Services.AddRazorPages();
-            _ = builder.Services.AddMudServices();
+            _ = builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule));
             _ = builder.Services.AddServerSideBlazor();
             _ = builder.Services.AddHttpContextAccessor();
 

ClientHub/Shared/MainLayout.razor

@@ -1,14 +1,7 @@
 @inherits LayoutComponentBase
 @namespace OI.Metrology.ClientHub.Shared
-@using MudBlazor
 
-<MudDialogProvider />
+<div class="navbar navbar-fixed-top @(AppSettings is not null && AppSettings.IsDevelopment ? "test-database" : "" )">
-<MudSnackbarProvider />
-
-<MudThemeProvider @ref="@_MudThemeProvider" @bind-IsDarkMode="@_IsDarkMode" />
-
-<MudPaper Style="padding:1px;">
-    <div class="navbar navbar-fixed-top @(AppSettings is not null && AppSettings.IsDevelopment ? "test-database" : "" )">
     <div class="container-fluid">
         <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
@@ -35,21 +28,17 @@
             </ul>
         </div>
     </div>
-    </div>
+</div>
-    <div class="container-fluid body-content">
+<div class="container-fluid body-content">
     @Body
     <hr />
     <footer>
-            <p class="navbar-text navbar-right">
-                <MudSwitch @bind-Checked="@_IsDarkMode" Color="Color.Primary" Class="ma-4" T="bool" Label="Toggle Light/Dark Mode" />
-            </p>
         <p>&copy; @DateTime.Now.Year - Infineon Technologies</p>
         @if (AppSettings is not null && AppSettings.IsDevelopment)
         {
             <p><strong>Request ID:</strong><code>@_RequestId</code></p>
         }
     </footer>
-    </div>
+</div>
-</MudPaper>
 
 <div id="MessageModal"></div>

ClientHub/Shared/MainLayout.razor.cs

@@ -1,5 +1,4 @@
 using Microsoft.AspNetCore.Components;
-using MudBlazor;
 using System.Diagnostics;
 
 namespace OI.Metrology.ClientHub.Shared;
@@ -7,29 +6,15 @@ namespace OI.Metrology.ClientHub.Shared;
 public partial class MainLayout
 {
  
-    bool _DrawerOpen = true;
-    private bool _IsDarkMode;
     private string? _RequestId;
-    private MudThemeProvider? _MudThemeProvider;
 
     [Inject] protected Models.AppSettings? AppSettings { get; set; }
     [Inject] protected IHttpContextAccessor? HttpContextAccessor { get; set; }
 
-    void DrawerToggle() => _DrawerOpen = !_DrawerOpen;
-
     protected override void OnParametersSet()
     {
         base.OnParametersSet();
         _RequestId = Activity.Current?.Id ?? HttpContextAccessor?.HttpContext?.TraceIdentifier;
     }
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender && _MudThemeProvider is not null)
-        {
-            _IsDarkMode = await _MudThemeProvider.GetSystemPreference();
-            StateHasChanged();
-        }
-    }
-
 }

ClientHub/wwwroot/styles/Site.css

@@ -1,7 +1,6 @@
 body {
   padding-top: 50px;
   padding-bottom: 20px;
-  background-color: darkgrey;
 }
 
 /* Set padding to keep content from hitting the edges */