replacing nav menu, filtering, collumn picking and reordering
Some checks are pending
ci / build (8.0.x) (push) Waiting to run
ci / build-Docker (push) Blocked by required conditions

This commit is contained in:
Andy Pack 2024-06-09 22:52:09 +01:00
parent ea631960c5
commit ff3db603ba
Signed by: sarsoo
GPG Key ID: A55BA3536A5E0ED7
6 changed files with 43 additions and 176 deletions

View File

@ -1,4 +1,5 @@
@using Overflow.SouthernWater @using System.Globalization
@using Overflow.SouthernWater
@rendermode RenderMode.InteractiveAuto @rendermode RenderMode.InteractiveAuto
@if (Job == null) @if (Job == null)
@ -9,28 +10,32 @@
} }
else else
{ {
<RadzenDataGrid Data="@Job.Spills" TItem="Spill" <RadzenDataGrid @ref="spillsGrid" Data="@Job.Spills" TItem="Spill"
AllowFiltering="true" AllowFiltering="true"
FilterMode="FilterMode.CheckBoxList"
AllowColumnResize="true" AllowColumnResize="true"
AllowSorting="true" AllowSorting="true"
PageSize="25" PageSize="25"
AllowPaging="true" AllowPaging="true"
ShowPagingSummary="true" ShowPagingSummary="true"
AllowColumnPicking="true"
AllowColumnReorder="true"
> >
<Columns> <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="bathingSite" Title="Bathing Site"/>
<RadzenDataGridColumn TItem="Spill" Property="outfallName" Title="Outfall"/> <RadzenDataGridColumn TItem="Spill" Property="outfallName" Title="Outfall"/>
<RadzenDataGridColumn TItem="Spill" Property="eventStart" Title="Event Start"/> <RadzenDataGridColumn TItem="Spill" Property="eventStart" Title="Event Start"/>
<RadzenDataGridColumn TItem="Spill" Property="eventStop" Title="Event End"/> <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="status" Title="Status"/>
<RadzenDataGridColumn TItem="Spill" Property="isImpacting" Title="Is Impacting"/> <RadzenDataGridColumn TItem="Spill" Property="isImpacting" Title="Is Impacting"/>
</Columns> </Columns>
@ -38,6 +43,6 @@ else
} }
@code { @code {
RadzenDataGrid<Spill> spillsGrid;
[Parameter] public SouthernWaterApiJob? Job { get; set; } [Parameter] public SouthernWaterApiJob? Job { get; set; }
[Parameter] public bool ShowIds { get; set; }
} }

View File

@ -1,15 +1,9 @@
@inherits LayoutComponentBase @inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu/> <NavMenu/>
</div>
<div class="page">
<main> <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"> <article class="content px-4">
@Body @Body
</article> </article>

View File

@ -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>

View File

@ -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;
}
}

View File

@ -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++;
}
}

View File

@ -7,21 +7,23 @@
<h1>Spills</h1> <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"> <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> </RadzenStack>
</RadzenCard> </RadzenCard>
<SpillsTable Job=@job ShowIds=@showIds /> <SpillsTable Job=@job />
@code { @code {
private SouthernWaterApiJob? job; private SouthernWaterApiJob? job;
[Inject] private IMongoDatabase database { get; set; } [Inject] private IMongoDatabase database { get; set; }
private bool showIds; // private bool showIds;
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {