rewrite UI into collapsed view

This commit is contained in:
Ryan Peters 2022-11-28 09:47:06 -05:00
parent af9dc7be36
commit cc60c7ae9b
2 changed files with 28 additions and 29 deletions

View File

@ -6,38 +6,43 @@
var hasDelays = busRoutes.Any(); var hasDelays = busRoutes.Any();
var userBusRoutes = Model.User.Routes var userBusRoutes = Model.User.Routes
.OrderBy(r => r.BusNumber) .GroupJoin(busRoutes, ur => ur.BusNumber, br => br.BusNumber, (ur, routes) => new
{
UserRoute = ur,
RouteDisruptions = routes
})
.OrderBy(r => r.UserRoute.BusNumber)
.ToList(); .ToList();
} }
@if (hasDelays) @if (hasDelays)
{ {
<div class="alert alert-danger"> <h3 class="alert-heading">Uh oh! We have @busRoutes.Count delays</h3>
<h3 class="alert-heading">Uh oh</h3>
We have @busRoutes.Count delays
</div>
} }
else else
{ {
<div class="alert alert-success"> <h3 class="alert-heading">Good news! No delays today!</h3>
<h3 class="alert-heading">Good news!</h3>
No delays today!
</div>
} }
<h4>My Buses</h4>
@foreach (var busRoute in userBusRoutes) @foreach (var busRoute in userBusRoutes)
{ {
<div><strong>@busRoute.BusNumber - @busRoute.Label</strong></div> var hasUserDelays = busRoute.RouteDisruptions.Any();
}
<ul id="route-list"> <div class="alert @(hasUserDelays ? "alert-danger" : "alert-success")">
@foreach (var busRoute in busRoutes) <strong>@busRoute.UserRoute.Label (@busRoute.UserRoute.BusNumber) - </strong>
@if (busRoute.RouteDisruptions.Any())
{ {
<li> var delayList = string.Join(", ", busRoute.RouteDisruptions
<strong>@busRoute.BusNumber - @busRoute.Schools</strong> .Select(r => $"{r.Impact} ({r.Schedules}) for {r.Schools}")
<p>@busRoute.Impact @busRoute.Schedules</p> .ToArray());
</li>
<strong>@delayList</strong>
} }
</ul> else
{
@:No Delays!
}
</div>
}

View File

@ -16,9 +16,3 @@ html {
body { body {
margin-bottom: 60px; margin-bottom: 60px;
} }
#route-list {
margin: 20px 0 0;
padding: 0;
list-style-type: none;
}