replacing nav menu, filtering, collumn picking and reordering

Overflow.Web.Client/Components/SpillsTable.razor

@@ -1,4 +1,5 @@
-@using Overflow.SouthernWater
+@using System.Globalization
+@using Overflow.SouthernWater
 @rendermode RenderMode.InteractiveAuto
 
 @if (Job == null)
@@ -9,28 +10,32 @@
 }
 else
 {
-    <RadzenDataGrid Data="@Job.Spills" TItem="Spill"
+    <RadzenDataGrid @ref="spillsGrid" Data="@Job.Spills" TItem="Spill"
                     AllowFiltering="true"
+                    FilterMode="FilterMode.CheckBoxList"
                     AllowColumnResize="true"
                     AllowSorting="true"
                     PageSize="25"
                     AllowPaging="true"
                     ShowPagingSummary="true"
+                    AllowColumnPicking="true"
+                    AllowColumnReorder="true"
                     >
         <Columns>
-            @if (ShowIds)
+            <RadzenDataGridColumn Visible="false" TItem="Spill" Property="sw_id" Title="Id"/>
-            {
+            <RadzenDataGridColumn Visible="false" TItem="Spill" Property="eventId" Title="Event Id"/>
-                <RadzenDataGridColumn TItem="Spill" Property="sw_id" Title="Id"/>
+            <RadzenDataGridColumn Visible="false" TItem="Spill" Property="siteUnitNumber" Title="Site Unit Number"/>
-                <RadzenDataGridColumn TItem="Spill" Property="eventId" Title="Event Id"/>
+            <RadzenDataGridColumn Visible="false" TItem="Spill" Property="associatedSiteId" Title="Associated Site Id"/>
-                <RadzenDataGridColumn TItem="Spill" Property="siteUnitNumber" Title="Site Unit Number"/>
+            <RadzenDataGridColumn Visible="false" TItem="Spill" Property="overFlowSiteId" Title="OverFlow Site Id"/>
-                <RadzenDataGridColumn TItem="Spill" Property="associatedSiteId" Title="Associated Site Id"/>
-                <RadzenDataGridColumn TItem="Spill" Property="overFlowSiteId" Title="OverFlow Site Id"/>
-            }
             <RadzenDataGridColumn TItem="Spill" Property="bathingSite" Title="Bathing Site"/>
             <RadzenDataGridColumn TItem="Spill" Property="outfallName" Title="Outfall"/>
             <RadzenDataGridColumn TItem="Spill" Property="eventStart" Title="Event Start"/>
             <RadzenDataGridColumn TItem="Spill" Property="eventStop" Title="Event End"/>
-            <RadzenDataGridColumn TItem="Spill" Property="duration" Title="Duration"/>
+            <RadzenDataGridColumn TItem="Spill" Property="duration" Title="Duration">
+                <FooterTemplate>
+                    Total Duration: <b>@Job.Spills.Select(j => j.duration).Sum().ToString(CultureInfo.CurrentCulture)</b> min
+                </FooterTemplate>
+            </RadzenDataGridColumn>
             <RadzenDataGridColumn TItem="Spill" Property="status" Title="Status"/>
             <RadzenDataGridColumn TItem="Spill" Property="isImpacting" Title="Is Impacting"/>
         </Columns>
@@ -38,6 +43,6 @@ else
 }
 
 @code {
+    RadzenDataGrid<Spill> spillsGrid;
     [Parameter] public SouthernWaterApiJob? Job { get; set; }
-    [Parameter] public bool ShowIds { get; set; }
 }

Overflow.Web/Components/Layout/MainLayout.razor

@@ -1,15 +1,9 @@
 @inherits LayoutComponentBase
 
+<NavMenu/>
+
 <div class="page">
-    <div class="sidebar">
-        <NavMenu/>
-    </div>
-
     <main>
-        <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
-        </div>
-
         <article class="content px-4">
             @Body
         </article>

Overflow.Web/Components/Layout/NavMenu.razor

@@ -1,29 +1,20 @@
-<div class="top-row ps-3 navbar navbar-dark">
+<RadzenMenu Click="OnParentClicked">
-    <div class="container-fluid">
+    <RadzenMenuItem Text="Home" Icon="home" Path="/">
-        <a class="navbar-brand" href="">Overflow</a>
+    </RadzenMenuItem>
-    </div>
+    <RadzenMenuItem Text="Southern Water" Icon="water_drop">
-</div>
+        <RadzenMenuItem Text="Spills Data" Path="/spills" Icon="table_view"></RadzenMenuItem>
+    </RadzenMenuItem>
+</RadzenMenu>
 
-<input type="checkbox" title="Navigation menu" class="navbar-toggler"/>
+@code {
 
-<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
+    void OnParentClicked(MenuItemEventArgs args)
-    <nav class="flex-column">
+    {
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
-            </NavLink>
-        </div>
 
-        <div class="nav-item px-3">
+    }
-            <NavLink class="nav-link" href="counter">
-                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
-            </NavLink>
-        </div>
 
-        <div class="nav-item px-3">
+    void OnChildClicked(MenuItemEventArgs args)
-            <NavLink class="nav-link" href="spills">
+    {
-                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Spills
+
-            </NavLink>
+    }
-        </div>
+}
-    </nav>
-</div>

Overflow.Web/Components/Layout/NavMenu.razor.css

@@ -1,105 +0,0 @@
-.navbar-toggler {
-    appearance: none;
-    cursor: pointer;
-    width: 3.5rem;
-    height: 2.5rem;
-    color: white;
-    position: absolute;
-    top: 0.5rem;
-    right: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
-}
-
-.navbar-toggler:checked {
-    background-color: rgba(255, 255, 255, 0.5);
-}
-
-.top-row {
-    height: 3.5rem;
-    background-color: rgba(0,0,0,0.4);
-}
-
-.navbar-brand {
-    font-size: 1.1rem;
-}
-
-.bi {
-    display: inline-block;
-    position: relative;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-right: 0.75rem;
-    top: -1px;
-    background-size: cover;
-}
-
-.bi-house-door-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
-}
-
-.bi-plus-square-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
-}
-
-.bi-list-nested-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
-}
-
-.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 .nav-link {
-        color: #d7d7d7;
-        background: none;
-        border: none;
-        border-radius: 4px;
-        height: 3rem;
-        display: flex;
-        align-items: center;
-        line-height: 3rem;
-        width: 100%;
-    }
-
-.nav-item ::deep a.active {
-    background-color: rgba(255,255,255,0.37);
-    color: white;
-}
-
-.nav-item ::deep .nav-link:hover {
-    background-color: rgba(255,255,255,0.1);
-    color: white;
-}
-
-.nav-scrollable {
-    display: none;
-}
-
-.navbar-toggler:checked ~ .nav-scrollable {
-    display: block;
-}
-
-@media (min-width: 641px) {
-    .navbar-toggler {
-        display: none;
-    }
-
-    .nav-scrollable {
-        /* Never collapse the sidebar for wide screens */
-        display: block;
-
-        /* Allow sidebar to scroll for tall menus */
-        height: calc(100vh - 3.5rem);
-        overflow-y: auto;
-    }
-}

Overflow.Web/Components/Pages/Counter.razor

@@ -1,20 +0,0 @@
-@page "/counter"
-@rendermode InteractiveServer
-
-<PageTitle>Counter</PageTitle>
-
-<h1>Counter</h1>
-
-<p role="status">Current count: @currentCount</p>
-
-<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
-
-@code {
-    private int currentCount = 0;
-
-    private void IncrementCount()
-    {
-        currentCount++;
-    }
-
-}

Overflow.Web/Components/Pages/Spills.razor

@@ -7,21 +7,23 @@
 
 <h1>Spills</h1>
 
-<p>This component demonstrates showing data.</p>
+<p>This shows the data that you can see on the Southern Water Beachbuoy system</p>
 
 <RadzenCard class="my-4">
-    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start"  Wrap="FlexWrap.Wrap">
+    <RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Start" Wrap="FlexWrap.Wrap">
-        <RadzenCheckBox @bind-Value=@showIds Name="ShowIds" />
+        @if (job is not null)
-        <RadzenLabel Text="Show IDs" Component="ShowIds" Style="margin-left: 8px; vertical-align: middle;" />
+        {
+            <RadzenText TextStyle="TextStyle.Body1">Last updated at <b>@job.EndTime</b></RadzenText>
+        }
     </RadzenStack>
 </RadzenCard>
 
-<SpillsTable Job=@job ShowIds=@showIds />
+<SpillsTable Job=@job />
 
 @code {
     private SouthernWaterApiJob? job;
     [Inject] private IMongoDatabase database { get; set; }
-    private bool showIds;
+    // private bool showIds;
 
     protected override async Task OnInitializedAsync()
     {