Created View Project

View/App.razor

@@ -0,0 +1,18 @@
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using OI.Metrology.View.Shared
+
+@namespace OI.Metrology.View
+
+<Router AppAssembly="@typeof(App).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+    </Found>
+    <NotFound>
+        <PageTitle>Not found</PageTitle>
+        <LayoutView Layout="@typeof(MainLayout)">
+            <p role="alert">Sorry, there's nothing at this address.</p>
+        </LayoutView>
+    </NotFound>
+</Router>

View/App.razor.cs

@@ -0,0 +1,10 @@
+namespace OI.Metrology.View;
+
+public partial class App : Microsoft.AspNetCore.Components.ComponentBase
+{
+
+    public App()
+    {
+    }
+
+}

View/Models/AppSettings.cs

@@ -0,0 +1,21 @@
+using System.Text.Json;
+
+namespace OI.Metrology.View.Models;
+
+public record AppSettings(string ApiUrl,
+                          string BuildNumber,
+                          string Company,
+                          string GitCommitSeven,
+                          bool IsDevelopment,
+                          bool IsStaging,
+                          string MonAResource,
+                          string MonASite)
+{
+
+    public override string ToString()
+    {
+        string result = JsonSerializer.Serialize(this, new JsonSerializerOptions() { WriteIndented = true });
+        return result;
+    }
+
+}

View/Models/Binder/AppSettings.cs

@@ -0,0 +1,70 @@
+using Microsoft.Extensions.Configuration;
+using System.ComponentModel.DataAnnotations;
+using System.Text.Json;
+
+namespace OI.Metrology.View.Models.Binder;
+
+public class AppSettings
+{
+
+#nullable disable
+
+    [Display(Name = "Api Url"), Required] public string ApiUrl { get; set; }
+    [Display(Name = "Build Number"), Required] public string BuildNumber { get; set; }
+    [Display(Name = "Company"), Required] public string Company { get; set; }
+    [Display(Name = "Git Commit Seven"), Required] public string GitCommitSeven { get; set; }
+    [Display(Name = "Is Development"), Required] public bool? IsDevelopment { get; set; }
+    [Display(Name = "Is Staging"), Required] public bool? IsStaging { get; set; }
+    [Display(Name = "MonA Resource"), Required] public string MonAResource { get; set; }
+    [Display(Name = "MonA Site"), Required] public string MonASite { get; set; }
+
+#nullable restore
+
+    public override string ToString()
+    {
+        string result = JsonSerializer.Serialize(this, new JsonSerializerOptions() { WriteIndented = true });
+        return result;
+    }
+
+    private static Models.AppSettings Get(AppSettings? appSettings)
+    {
+        Models.AppSettings result;
+        if (appSettings is null)
+            throw new NullReferenceException(nameof(appSettings));
+        if (appSettings.ApiUrl is null)
+            throw new NullReferenceException(nameof(ApiUrl));
+        if (appSettings.BuildNumber is null)
+            throw new NullReferenceException(nameof(BuildNumber));
+        if (appSettings.Company is null)
+            throw new NullReferenceException(nameof(Company));
+        if (appSettings.GitCommitSeven is null)
+            throw new NullReferenceException(nameof(GitCommitSeven));
+        if (appSettings.IsDevelopment is null)
+            throw new NullReferenceException(nameof(IsDevelopment));
+        if (appSettings.IsStaging is null)
+            throw new NullReferenceException(nameof(IsStaging));
+        if (appSettings.MonAResource is null)
+            throw new NullReferenceException(nameof(MonAResource));
+        if (appSettings.MonASite is null)
+            throw new NullReferenceException(nameof(MonASite));
+        result = new(
+            appSettings.ApiUrl,
+            appSettings.BuildNumber,
+            appSettings.Company,
+            appSettings.GitCommitSeven,
+            appSettings.IsDevelopment.Value,
+            appSettings.IsStaging.Value,
+            appSettings.MonAResource,
+            appSettings.MonASite);
+        return result;
+    }
+
+    public static Models.AppSettings Get(IConfigurationRoot configurationRoot)
+    {
+        Models.AppSettings result;
+        AppSettings? appSettings = configurationRoot.Get<AppSettings>();
+        result = Get(appSettings);
+        return result;
+    }
+
+}

View/OI.Metrology.View.csproj

@@ -0,0 +1,22 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+	<PropertyGroup>
+		<TargetFrameworks>net7.0</TargetFrameworks>
+		<Nullable>enable</Nullable>
+		<ImplicitUsings>enable</ImplicitUsings>
+	</PropertyGroup>
+	<ItemGroup>
+		<SupportedPlatform Include="browser" />
+	</ItemGroup>
+	<ItemGroup>
+		<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.2" />
+		<PackageReference Include="IgniteUI.Blazor" Version="22.2.24" />
+		<PackageReference Include="Microsoft.Extensions.Configuration" Version="7.0.0" />
+		<PackageReference Include="Microsoft.Extensions.Logging" Version="7.0.0" />
+		<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" />
+	</ItemGroup>
+  <ItemGroup>
+    <ProjectReference Include="..\Shared\OI.Metrology.Shared.csproj" />
+  </ItemGroup>
+</Project>

View/Pages/AwaitingDisposition.razor

@@ -0,0 +1,26 @@
+@page "/"
+@page "/AwaitingDisposition"
+
+@using Microsoft.AspNetCore.Components.Web
+
+@namespace OI.Metrology.View
+
+<PageTitle>Awaiting Disposition</PageTitle>
+<h4>Awaiting Disposition</h4>
+
+<div style="height: 450px;">
+    <table id="grid"></table>
+</div>
+
+<div class="row" style="margin-top: 10px; margin-bottom: 20px;">
+    <div class="col-xs-1">
+        <input type="button" class="btn" id="OpenButton" value="Open" />
+    </div>
+    <div class="col-xs-1">
+        <input type="button" class="btn" id="RefreshButton" value="Refresh" />
+    </div>
+</div>
+
+<script suppress-error="BL9992">
+    setInterval(function () { $("#RefreshButton").click(); }, 60000);
+</script>

View/Pages/AwaitingDisposition.razor.cs

@@ -0,0 +1,29 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Logging;
+using Microsoft.JSInterop;
+using OI.Metrology.View.Models;
+
+namespace OI.Metrology.View;
+
+public partial class AwaitingDisposition
+{
+
+    [Inject] protected IJSRuntime? JSRuntime { get; set; }
+    [Inject] protected HttpClient? HttpClient { get; set; }
+    [Inject] protected AppSettings? AppSettings { get; set; }
+    [Inject] protected ILogger<AwaitingDisposition>? Logger { get; set; }
+
+    protected override Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            if (JSRuntime is null)
+                throw new NullReferenceException(nameof(JSRuntime));
+            if (AppSettings is null)
+                throw new NullReferenceException(nameof(AppSettings));
+            return JSRuntime.InvokeVoidAsync("initAwaitingDisposition", AppSettings.ApiUrl).AsTask();
+        }
+        return Task.CompletedTask;
+    }
+
+}

View/Pages/AwaitingDisposition.razor.css

@@ -0,0 +1 @@
+

View/Pages/Counter.razor

@@ -0,0 +1,13 @@
+@page "/counter"
+
+@using Microsoft.AspNetCore.Components.Web
+
+@namespace OI.Metrology.View.Pages
+
+<PageTitle>Counter</PageTitle>
+
+<h1>Counter - Bye</h1>
+
+<p role="status">Current count: @_CurrentCount</p>
+
+<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

View/Pages/Counter.razor.cs

@@ -0,0 +1,21 @@
+using Microsoft.Extensions.Logging;
+using Microsoft.AspNetCore.Components;
+
+namespace OI.Metrology.View.Pages;
+
+public partial class Counter
+{
+
+    [Inject] protected ILogger<Counter>? Logger { get; set; }
+
+    private int _CurrentCount = 0;
+
+    private void IncrementCount()
+    {
+        if (Logger is null)
+            throw new NullReferenceException(nameof(Logger));
+        Logger.LogWarning("Someone has clicked me!");
+        _CurrentCount++;
+    }
+
+}

View/Pages/Export.razor

@@ -0,0 +1,47 @@
+@page "/Export"
+
+@using IgniteUI.Blazor.Controls
+@using Microsoft.AspNetCore.Components.Web
+@using OI.Metrology.Shared.DataModels
+
+@namespace OI.Metrology.View
+
+<PageTitle>Export Data</PageTitle>
+
+<h3>Export Data</h3>
+
+<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>
+}
+else
+{
+    <table id="ExportData">
+        <tr>
+            <td>
+                <MudSelect @bind-Value="_ToolTypeNameId" ToStringFunc="@_ConvertFunc" Label="Tool Type" Placeholder="Please Select" AdornmentColor="Color.Primary">
+                    @foreach (ToolTypeNameId toolTypeNameId in _ToolTypeNameIdCollection)
+                    {
+                        <MudSelectItem Value="@toolTypeNameId" />
+                    }
+                </MudSelect>
+            </td>
+            <td>
+                <MudDateRangePicker Label="Date Range" @bind-DateRange="_DateRange" />
+            </td>
+            <td>
+                <MudTimePicker Label="Start and End Time" AmPm="true" @bind-Time="_TimeSpan" />
+            </td>
+            <td>
+                <MudButton Variant="Variant.Filled" Color="Color.Info" OnClick="DownloadAsync">Download</MudButton>
+            </td>
+        </tr>
+    </table>
+}

View/Pages/Export.razor.cs

@@ -0,0 +1,90 @@
+using IgniteUI.Blazor.Controls;
+using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Logging;
+using Microsoft.JSInterop;
+using OI.Metrology.Shared.DataModels;
+using OI.Metrology.Shared.Models.Stateless;
+using System.Net;
+using System.Net.Http.Json;
+
+namespace OI.Metrology.View;
+
+public partial class Export
+{
+
+    protected TimeSpan? _TimeSpan;
+    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; }
+    [Inject] protected ILogger<AwaitingDisposition>? Logger { get; set; }
+
+    protected Func<ToolTypeNameId, string> _ConvertFunc = toolTypeNameId => string.Concat(toolTypeNameId?.ToolTypeName);
+
+    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)
+                throw new NullReferenceException(nameof(JSRuntime));
+            if (AppSettings is null)
+                throw new NullReferenceException(nameof(AppSettings));
+            return JSRuntime.InvokeVoidAsync("initExport", AppSettings.ApiUrl, DateTime.Now.AddMonths(-1), DateTime.Now).AsTask();
+        }
+        return Task.CompletedTask;
+    }
+
+    protected override async Task OnInitializedAsync()
+    {
+        _ToolTypeNameId ??= new();
+        _TimeSpan ??= new TimeSpan(DateTime.Now.Hour, DateTime.Now.Minute, 00);
+        _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)
+            throw new NullReferenceException(nameof(HttpClient));
+        string controllerName = IToolTypesController<object>.GetRouteName();
+        try
+        {
+            Result<ToolTypeNameId[]>? result = await HttpClient.GetFromJsonAsync<Result<ToolTypeNameId[]>>($"api/{controllerName}");
+            if (result is not null)
+                _ToolTypeNameIdCollection = result.Results;
+        }
+        catch (Exception)
+        {
+            string json = await HttpClient.GetStringAsync($"api/{controllerName}");
+            Logger.LogInformation(message: json);
+        }
+    }
+
+    protected async Task DownloadAsync()
+    {
+        if (JSRuntime is null)
+            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 is null)
+            return;
+        TimeSpan timeSpan = new(_TimeSpan.Value.Ticks);
+        string controllerName = IToolTypesController<object>.GetRouteName();
+        string endTime = _DateRange.Value.Add(timeSpan).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}");
+    }
+
+}

View/Pages/Export.razor.css

@@ -0,0 +1,4 @@
+td {
+  padding-bottom: 2em;
+  padding-right: 1em;
+}

View/Pages/Index.razor

@@ -0,0 +1,7 @@
+@page "/index"
+
+@using Microsoft.AspNetCore.Components.Web
+
+@namespace OI.Metrology.View
+
+<PageTitle>Index</PageTitle>

View/Pages/Index.razor.cs

@@ -0,0 +1,4 @@
+namespace OI.Metrology.View;
+
+public partial class Index
+{ }

View/Pages/RunHeaders.razor

@@ -0,0 +1,40 @@
+@page "/RunHeaders"
+
+@using Microsoft.AspNetCore.Components.Web
+
+@namespace OI.Metrology.View
+
+<PageTitle>Run Headers</PageTitle>
+
+<h4>Run Headers</h4>
+
+<table>
+    <tr>
+        <td>
+            <label for="ToolType">Tool Type:</label>
+        </td>
+        <td>
+            <div id="ToolType"></div>
+        </td>
+    </tr>
+</table>
+
+<table width="100%" height="80%" style="min-height:480px;">
+    <tr>
+        <td width="50%">
+            <table id="HeaderGrid"></table>
+        </td>
+        <td width="50%">
+            <table id="FieldsGrid"></table>
+        </td>
+    </tr>
+</table>
+
+<div class="row" style="margin-top: 10px; margin-bottom: 20px;">
+    <div class="col-xs-1">
+        <input type="button" class="btn" id="OpenButton" value="Open" />
+    </div>
+    <div class="col-xs-1">
+        <input type="button" class="btn" id="RefreshButton" value="Refresh" />
+    </div>
+</div>

View/Pages/RunHeaders.razor.cs

@@ -0,0 +1,25 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace OI.Metrology.View;
+
+public partial class RunHeaders
+{
+
+    [Inject] protected IJSRuntime? JSRuntime { get; set; }
+    [Inject] protected Models.AppSettings? AppSettings { get; set; }
+
+    protected override Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            if (JSRuntime is null)
+                throw new NullReferenceException(nameof(JSRuntime));
+            if (AppSettings is null)
+                throw new NullReferenceException(nameof(AppSettings));
+            return JSRuntime.InvokeVoidAsync("initRunHeaders", AppSettings.ApiUrl).AsTask();
+        }
+        return Task.CompletedTask;
+    }
+
+}

View/Pages/RunHeaders.razor.css

@@ -0,0 +1,17 @@
+html,
+body {
+  height: 100%;
+}
+
+div.container-fluid {
+  height: 90%;
+}
+
+#HeaderGrid,
+#FieldsGrid {
+  font-size: 12px;
+}
+
+.FieldTitle {
+  font-weight: bold;
+}

View/Pages/RunInfo.razor

@@ -0,0 +1,69 @@
+@page "/RunInfo/{ToolTypeId:int?}/{HeaderId:int?}"
+
+@using Microsoft.AspNetCore.Components.Web
+
+@namespace OI.Metrology.View
+
+<PageTitle>Run Info</PageTitle>
+
+<h4>Run Information</h4>
+
+<form class="form-inline mb-4">
+    <div class="form-group">
+        <label for="ToolType">Tool Type</label>
+        <div class="form-control" id="ToolType"></div>
+    </div>
+    <div class="form-group">
+        <label for="StartDate">Start Time</label>
+        <div class="form-control mb-2 mr-sm-2" id="StartDate"></div>
+        <div class="form-control mb-2 mr-sm-2" id="StartTime"></div>
+    </div>
+    <div class="form-group">
+        <label for="EndDate">End Time</label>
+        <div class="form-control mb-2 mr-sm-2" id="EndDate"></div>
+        <div class="form-control mb-2 mr-sm-2" id="EndTime"></div>
+    </div>&nbsp;&nbsp;
+    <div class="form-group">
+        <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">
+            Auto-Refresh
+        </label>
+        <input class="form-check-input" type="checkbox" id="chkAutoRefresh">
+    </div>
+</form>
+
+<div style="height: 300px;" id="HeaderGridDiv">
+    <span id="ToolTypeID" hidden></span>
+    <table id="HeaderGrid"></table>
+</div>
+
+<div class="row" style="margin-top: 10px; margin-bottom: 20px;">
+    <div class="col-xs-1">
+        <input type="button" class="btn" id="GetDataButton" value="Get Data" disabled />
+    </div>
+    <div class="col-xs-1">
+        <input type="button" class="btn" id="ReviewButton" value="Review" disabled />
+    </div>
+</div>
+
+<div id="DetailsDiv" hidden>
+
+    <span id="HeaderId" hidden></span>
+    <span id="HeaderAttachmentId" hidden></span>
+    <div style="padding-bottom: 20px;" id="DetailsGridDiv">
+        <table id="DetailsGrid"></table>
+    </div>
+
+    <div id="ExportDiv" style="margin-top: 10px;" hidden>
+        <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>
+
+    <p style="text-align: center; margin-top: 20px;">
+        <iframe id="DataAttachmentFrame" style="height:900px; border-width:thin; margin-right: 10px;" hidden></iframe>
+        <iframe id="HeaderAttachmentFrame" style="height:900px; border-width:thin;" hidden></iframe>
+    </p>
+
+</div>

View/Pages/RunInfo.razor.cs

@@ -0,0 +1,32 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace OI.Metrology.View;
+
+public partial class RunInfo
+{
+
+    [Parameter] public int? HeaderId { get; set; }
+    [Parameter] public int? ToolTypeId { get; set; }
+
+    [Inject] protected IJSRuntime? JSRuntime { get; set; }
+    [Inject] protected Models.AppSettings? AppSettings { get; set; }
+
+    protected override Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            if (JSRuntime is null)
+                throw new NullReferenceException(nameof(JSRuntime));
+            if (AppSettings is null)
+                throw new NullReferenceException(nameof(AppSettings));
+            Metrology.Shared.ViewModels.RunInfo? model = null;
+            int initialHeaderId = model is not null ? model.HeaderID : HeaderId is not null ? HeaderId.Value : 0;
+            string initialHeaderAttachmentId = model is not null ? model.HeaderAttachmentID.ToString() : string.Empty;
+            int initialToolTypeID = model is not null ? model.ToolTypeID : ToolTypeId is not null ? ToolTypeId.Value : 1;
+            return JSRuntime.InvokeVoidAsync("initRunInfo", AppSettings.ApiUrl, initialToolTypeID, initialHeaderId, initialHeaderAttachmentId).AsTask();
+        }
+        return Task.CompletedTask;
+    }
+
+}

View/Pages/RunInfo.razor.css

@@ -0,0 +1,8 @@
+#HeaderGridDiv,
+#DetailsGridDiv {
+  font-size: 12px;
+}
+p { 
+  color: red;
+  background-color: aqua;
+}

View/Shared/MainLayout.razor

@@ -0,0 +1,44 @@
+@inherits LayoutComponentBase
+@namespace OI.Metrology.View.Shared
+
+<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">
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <div class="navbar-brand">
+                <a href="/"><img src="images/IFX_LOGO_RGB.png" height="20" /></a>
+                OI Metrology Viewer
+            </div>
+        </div>
+        @if (AppSettings is not null && AppSettings.IsDevelopment)
+        {
+            <p class="navbar-text hidden-xs hidden-sm"><span class="test-database-text">TEST DATABASE</span></p>
+        }
+        <div class="navbar-collapse collapse">
+            <ul class="nav navbar-nav">
+                <li><a href="AwaitingDisposition">Awaiting Disposition</a></li>
+                <li><a href="RunInfo">Run Information</a></li>
+                <li><a href="RunHeaders">Run Headers</a></li>
+                <li><a href="Export">Export</a></li>
+                <li><a href="https://oi-metrology-viewer-archive.mes.infineon.com/" target="_blank">Archive</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
+<div class="container-fluid body-content">
+    @Body
+    <hr />
+    <footer>
+        <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 id="MessageModal"></div>

View/Shared/MainLayout.razor.cs

@@ -0,0 +1,19 @@
+using Microsoft.AspNetCore.Components;
+using System.Diagnostics;
+
+namespace OI.Metrology.View.Shared;
+
+public partial class MainLayout
+{
+
+    private string? _RequestId;
+
+    [Inject] protected Models.AppSettings? AppSettings { get; set; }
+
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+        _RequestId = Activity.Current?.Id ?? string.Empty;
+    }
+
+}

View/Shared/MainLayout.razor.css

@@ -0,0 +1,70 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+    .top-row ::deep a, .top-row .btn-link {
+        white-space: nowrap;
+        margin-left: 1.5rem;
+    }
+
+    .top-row a:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+@media (max-width: 640.98px) {
+    .top-row:not(.auth) {
+        display: none;
+    }
+
+    .top-row.auth {
+        justify-content: space-between;
+    }
+
+    .top-row a, .top-row .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row, article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}

View/Shared/NavMenu.razor

@@ -0,0 +1,44 @@
+@using Microsoft.AspNetCore.Components.Web
+@using Microsoft.AspNetCore.Components.Routing
+
+@namespace OI.Metrology.View.Shared
+
+<div class="top-row ps-3 navbar navbar-dark">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="">ClientHub</a>
+        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+    </div>
+</div>
+
+<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
+    <nav class="flex-column">
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                <span class="oi oi-home" aria-hidden="true"></span> Home
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="counter">
+                <span class="oi oi-plus" aria-hidden="true"></span> Counter
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="fetchdata">
+                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
+            </NavLink>
+        </div>
+    </nav>
+</div>
+
+@code {
+    private bool collapseNavMenu = true;
+
+    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+    private void ToggleNavMenu()
+    {
+        collapseNavMenu = !collapseNavMenu;
+    }
+}

View/Shared/NavMenu.razor.cs

@@ -0,0 +1,4 @@
+namespace OI.Metrology.View.Shared;
+
+public partial class NavMenu
+{ }

View/Shared/NavMenu.razor.css

@@ -0,0 +1,68 @@
+.navbar-toggler {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.top-row {
+    height: 3.5rem;
+    background-color: rgba(0,0,0,0.4);
+}
+
+.navbar-brand {
+    font-size: 1.1rem;
+}
+
+.oi {
+    width: 2rem;
+    font-size: 1.1rem;
+    vertical-align: text-top;
+    top: -2px;
+}
+
+.nav-item {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+    .nav-item:first-of-type {
+        padding-top: 1rem;
+    }
+
+    .nav-item:last-of-type {
+        padding-bottom: 1rem;
+    }
+
+    .nav-item ::deep a {
+        color: #d7d7d7;
+        border-radius: 4px;
+        height: 3rem;
+        display: flex;
+        align-items: center;
+        line-height: 3rem;
+    }
+
+.nav-item ::deep a.active {
+    background-color: rgba(255,255,255,0.25);
+    color: white;
+}
+
+.nav-item ::deep a:hover {
+    background-color: rgba(255,255,255,0.1);
+    color: white;
+}
+
+@media (min-width: 641px) {
+    .navbar-toggler {
+        display: none;
+    }
+
+    .collapse {
+        /* Never collapse the sidebar for wide screens */
+        display: block;
+    }
+    
+    .nav-scrollable {
+        /* Allow sidebar to scroll for tall menus */
+        height: calc(100vh - 3.5rem);
+        overflow-y: auto;
+    }
+}