From 11460939130fcb13703120e342e4ae05cb336807 Mon Sep 17 00:00:00 2001 From: cuqmbr Date: Wed, 30 Mar 2022 19:21:32 +0300 Subject: [PATCH] feat: improve route list design and functionallity --- TicketOffice/Pages/Index.cshtml | 46 +++++-- TicketOffice/Pages/Index.cshtml.cs | 99 ++++++++++++--- TicketOffice/wwwroot/css/Routes.css | 117 ++++++++++++++++-- .../wwwroot/db/TicketOffice-SQLite.db-shm | Bin 32768 -> 0 bytes .../wwwroot/db/TicketOffice-SQLite.db-wal | 0 5 files changed, 222 insertions(+), 40 deletions(-) delete mode 100644 TicketOffice/wwwroot/db/TicketOffice-SQLite.db-shm delete mode 100644 TicketOffice/wwwroot/db/TicketOffice-SQLite.db-wal diff --git a/TicketOffice/Pages/Index.cshtml b/TicketOffice/Pages/Index.cshtml index 90edd99..97c458c 100644 --- a/TicketOffice/Pages/Index.cshtml +++ b/TicketOffice/Pages/Index.cshtml @@ -1,13 +1,16 @@ @page +@using System.Globalization +@using Newtonsoft.Json @model TicketOffice.Pages.IndexModel @{ ViewData["Title"] = "Home page"; + CultureInfo.CurrentCulture = CultureInfo.GetCultureInfo("uk-UA"); }
-
+
Звідки @@ -21,20 +24,22 @@
-
-
Дата відправлення
+
+ +
- + @if (Model.Route.Count > 0) { @@ -44,6 +49,7 @@ № автобуса + 🠕 Звідки / Куди @@ -52,11 +58,18 @@ Дата -
Відправлення
-
Прибуття
+
+ Відправлення + 🠕 +
+
+ Прибуття + 🠕 +
Тривалість + 🠕 Вільніих місць @@ -71,7 +84,8 @@ { - @route.Number +
@route.Number
+
Маршрут
@route.Cities.First().Name
@@ -79,12 +93,20 @@
- Відправлення - @route.Cities.First().DepartureTime?.ToString("dd.MM.yyy") + + Відправлення + + + @route.Cities.First().ArrivalTime?.ToString("f").Split(",")[0].ToLower(), + @route.Cities.First().DepartureTime?.ToString("dd.MM.yyyy") +
Прибуття - @route.Cities.Last().ArrivalTime?.ToString("dd.MM.yyy") + + @route.Cities.Last().ArrivalTime?.ToString("f").Split(",")[0].ToLower(), + @route.Cities.Last().ArrivalTime?.ToString("dd.MM.yyyy") +
@@ -93,13 +115,13 @@ @{ TimeSpan? duration = route.Cities.Last().ArrivalTime - route.Cities.First().DepartureTime; } - @($"{duration?.TotalHours.ToString().Split(".")[0]}:{duration?.Minutes}") + @($"{duration?.TotalHours.ToString().Split(",")[0]}:{duration?.Minutes}") @(route.Capacity - route.Tickets.Count) - Вибрати + Вибрати } diff --git a/TicketOffice/Pages/Index.cshtml.cs b/TicketOffice/Pages/Index.cshtml.cs index 7c7ee19..569f546 100644 --- a/TicketOffice/Pages/Index.cshtml.cs +++ b/TicketOffice/Pages/Index.cshtml.cs @@ -1,6 +1,8 @@ using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Mvc.RazorPages; using Microsoft.EntityFrameworkCore; +using System.Globalization; +using Newtonsoft.Json; using TicketOffice.Data; using TicketOffice.Models; using Route = TicketOffice.Models.Route; @@ -22,38 +24,95 @@ public class IndexModel : PageModel [BindProperty(SupportsGet = true)] public string from { get; set; } [BindProperty(SupportsGet = true)] public string to { get; set; } [BindProperty(SupportsGet = true)] public DateTime date { get; set; } = new DateTime(2022, 03, 28, 0, 0, 0).Date; + [BindProperty(SupportsGet = true)] public string SortString { get; set; } public void OnGet() + { + RetrieveAllRoutes(); + + if (!string.IsNullOrWhiteSpace(from)) + { + FilterRoutesByFrom(); + } + + if (!string.IsNullOrWhiteSpace(to)) + { + FilterRoutesByTo(); + } + + FilterRoutesByDate(); + } + + public void OnGetSortByNumber() + { + OnGet(); + + Route.Sort((x, y) => Math.Clamp(x.Number - y.Number, -1, 1)); + } + + public void OnGetSortByDeparture() + { + OnGet(); + + Route.Sort((x, y) => Math.Clamp((int)(x.Cities.First().DepartureTime - y.Cities.First().DepartureTime).Value.TotalMilliseconds, -1, 1)); + } + + public void OnGetSortByArrival() + { + OnGet(); + + Route.Sort((x, y) => + { + TimeSpan? totalDuration = x.Cities.Last().ArrivalTime - y.Cities.Last().ArrivalTime; + + return Math.Clamp((int)totalDuration.Value.TotalMilliseconds, -1, 1); + }); + } + + public void OnGetSortByDuration() + { + OnGet(); + + Route.Sort((x, y) => + { + TimeSpan? xDuration = x.Cities.Last().ArrivalTime - x.Cities.First().DepartureTime; + TimeSpan? yDuration = y.Cities.Last().ArrivalTime - y.Cities.First().DepartureTime; + TimeSpan? totalDuration = xDuration - yDuration; + + return Math.Clamp((int)totalDuration.Value.TotalMilliseconds, -1, 1); + }); + } + + private void RetrieveAllRoutes() { Route = _context.Route .Include(r => r.Cities) .Include(r => r.Tickets) .ToList(); - - if (!string.IsNullOrWhiteSpace(from) && !string.IsNullOrWhiteSpace(to)) - { - FilterRoutes(); - } } - public void OnGetSortByDuration(bool isDescending) - { - OnGet(); - - Route.Sort((x, y) => (isDescending ? -1 : 1) * - (x.Cities.Last().ArrivalTime - x.Cities.First().DepartureTime).Value - .CompareTo((y.Cities.Last().ArrivalTime - y.Cities.First().DepartureTime).Value) + 1); - } - - -private void FilterRoutes() + private void FilterRoutesByFrom() { + Route.ForEach(r => r.Cities = r.Cities - .SkipWhile(c => c.Name != from).Reverse() - .SkipWhile(c => c.Name != to).Reverse() + .SkipWhile(c => c.Name != from) .ToList()); - Route.RemoveAll(r => - r.Cities.Count < 2 || r.Cities.First().DepartureTime.Value.DayOfYear != date.DayOfYear); + Route.RemoveAll(r => r.Cities.Count < 2); + } + + private void FilterRoutesByTo() + { + + Route.ForEach(r => r.Cities = r.Cities + .Reverse().SkipWhile(c => c.Name != to) + .Reverse().ToList()); + + Route.RemoveAll(r => r.Cities.Count < 2); + } + + private void FilterRoutesByDate() + { + Route.RemoveAll(r => r.Cities.First().DepartureTime.Value.DayOfYear != date.DayOfYear); } } \ No newline at end of file diff --git a/TicketOffice/wwwroot/css/Routes.css b/TicketOffice/wwwroot/css/Routes.css index 7eb4655..8d9ed0d 100644 --- a/TicketOffice/wwwroot/css/Routes.css +++ b/TicketOffice/wwwroot/css/Routes.css @@ -20,6 +20,64 @@ body { margin: 0 auto; } +.search-block { + background: #eaeef1; + box-shadow: 0 1px 2.4rem 0 #c3c9d0; + padding: 1.5rem 1.5rem 1.5rem 1.5rem; + margin: 1.5rem 0; + border-radius: 0.5rem; +} + +.station, .date, div.search-btn { + display: inline-block; + margin: 0 1.5rem; +} + +.title { + font-weight: 500; + color: #777a7e; + margin-bottom: .3rem; +} + +input[type=text], input[type=date] { + font-size: 1.5rem; + color: #262626; + font-weight: 500; + line-height: 4.7rem; + width: 15rem; + height: 3rem; + box-sizing: border-box; + background: #dfe3e5; + border: 1px solid #b8bfc7; + box-shadow: 0 1px 0 0 #fff; + border-radius: .3rem; + padding: 0 1.1rem; + text-align: left; +} + +input[type=text]:focus, input[type=date]:focus { + outline: 0; + border-color: #68b2dd; + background-color: #fff; +} + +input.search-btn { + color: #1d4965; + font-size: 1.6rem; + font-weight: 700; + line-height: 3rem; + padding: 0 1.5rem; + display: inline-block; + background: linear-gradient(0deg,#79b6db,#b3dbf2); + border: none; + border-radius: .3rem; + cursor: pointer; +} + +input.search-btn:hover { + opacity: 0.8; +} + .route-list { margin-top: 3rem; } @@ -45,8 +103,22 @@ th { line-height: 1.6rem; } +.link-btn-sort { + color: #777a7e; + text-decoration: none; +} + +.link-btn-sort:hover { + color: #1d4965; + cursor: pointer; +} + +.link-btn-sort:visited, .link-btn-sort:active { + text-decoration: none; +} + tr { - line-height: 6rem; + line-height: 5rem; background-color: white; } @@ -66,6 +138,23 @@ td.num, td.capacity { line-height: 2rem; } +.city-list-btn { + font-size: 0.8rem; + font-weight: 700; + line-height: 0.5rem; + color: #245c78; + text-decoration: none; + cursor: pointer; +} + +.city-list-btn:visited { + text-decoration: none; +} + +.city-list-btn:hover { + text-decoration: underline; +} + td.city { font-size: 1rem; font-weight: 700; @@ -75,28 +164,40 @@ td.city { td.time, td.duration { font-size: 1.2rem; font-weight: 900; - line-height: 1.8rem; + line-height: 1.4rem; } .route-date { display: flex; justify-content: space-between; border-bottom: 1px solid #c5c7cc; - font-size: 0.75rem; + font-size: 0.7rem; + font-weight: 700; line-height: 1.25rem; } -.search-block { - background: #eaeef1; - box-shadow: 0 1px 2.4rem 0 #c3c9d0; - padding: 1.5rem 2.5rem 3.5rem 2.5rem; +.link-btn-choose { + line-height: 2.5rem; + padding: 0 1rem; + display: inline-block; + color: #1d4965; + font-weight: 500; + background: linear-gradient(0deg,#79b6db,#b3dbf2); + border: none; + border-radius: .3rem; + cursor: pointer; + text-decoration: none; +} + +.link-btn-choose:hover { + opacity: 0.8; } .search-error { background: #f1f2f4; border: 1px solid #d7dce1; box-shadow: 0 0 4px 0 rgba(195,201,208,.5); - font-weight: 700; + font-weight: 500; font-size: 1.5rem; padding: 4rem 4rem; text-align: center; diff --git a/TicketOffice/wwwroot/db/TicketOffice-SQLite.db-shm b/TicketOffice/wwwroot/db/TicketOffice-SQLite.db-shm deleted file mode 100644 index fe9ac2845eca6fe6da8a63cd096d9cf9e24ece10..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 32768 zcmeIuAr62r3