feat: add routes' city list popup
This commit is contained in:
cuqmbr
parent
aeb439e2bb
commit
00b5986080
@ -45,129 +45,129 @@
|
|||||||
<div class="route-list">
|
<div class="route-list">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>
|
<th>
|
||||||
№ автобуса
|
№ автобуса
|
||||||
@if (Model.SortString == "increasingNumber")
|
@if (Model.SortString == "increasingNumber")
|
||||||
|
{
|
||||||
|
<a class="link-btn-sort" asp-page-handler="SortByNumber" asp-route-SortString="descendingNumber" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>🠕</a>
|
||||||
|
}
|
||||||
|
else if (Model.SortString == "descendingNumber")
|
||||||
|
{
|
||||||
|
<a class="link-btn-sort" asp-page-handler="SortByNumber" asp-route-SortString="increasingNumber" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>🠗</a>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<a class="link-btn-sort" asp-page-handler="SortByNumber" asp-route-SortString="increasingNumber" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>⮁</a>
|
||||||
|
}
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Звідки / Куди
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Дата
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
<div class="departure">
|
||||||
|
Відправлення
|
||||||
|
@if (Model.SortString == "increasingDeparture")
|
||||||
{
|
{
|
||||||
<a class="link-btn-sort" asp-page-handler="SortByNumber" asp-route-SortString="descendingNumber" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>🠕</a>
|
<a class="link-btn-sort" asp-page-handler="SortByDeparture" asp-route-SortString="descendingDeparture" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>🠕</a>
|
||||||
}
|
}
|
||||||
else if (Model.SortString == "descendingNumber")
|
else if (Model.SortString == "descendingDeparture")
|
||||||
{
|
{
|
||||||
<a class="link-btn-sort" asp-page-handler="SortByNumber" asp-route-SortString="increasingNumber" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>🠗</a>
|
<a class="link-btn-sort" asp-page-handler="SortByDeparture" asp-route-SortString="increasingDeparture" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>🠗</a>
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<a class="link-btn-sort" asp-page-handler="SortByNumber" asp-route-SortString="increasingNumber" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>⮁</a>
|
<a class="link-btn-sort" asp-page-handler="SortByDeparture" asp-route-SortString="increasingDeparture" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>⮁</a>
|
||||||
}
|
}
|
||||||
</th>
|
</div>
|
||||||
<th>
|
<div class="arrival">
|
||||||
Звідки / Куди
|
Прибуття
|
||||||
</th>
|
@if (Model.SortString == "increasingArrival")
|
||||||
<th>
|
|
||||||
Дата
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
<div class="departure">
|
|
||||||
Відправлення
|
|
||||||
@if (Model.SortString == "increasingDeparture")
|
|
||||||
{
|
|
||||||
<a class="link-btn-sort" asp-page-handler="SortByDeparture" asp-route-SortString="descendingDeparture" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>🠕</a>
|
|
||||||
}
|
|
||||||
else if (Model.SortString == "descendingDeparture")
|
|
||||||
{
|
|
||||||
<a class="link-btn-sort" asp-page-handler="SortByDeparture" asp-route-SortString="increasingDeparture" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>🠗</a>
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<a class="link-btn-sort" asp-page-handler="SortByDeparture" asp-route-SortString="increasingDeparture" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>⮁</a>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<div class="arrival">
|
|
||||||
Прибуття
|
|
||||||
@if (Model.SortString == "increasingArrival")
|
|
||||||
{
|
|
||||||
<a class="link-btn-sort" asp-page-handler="SortByArrival" asp-route-SortString="descendingArrival" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>🠕</a>
|
|
||||||
}
|
|
||||||
else if (Model.SortString == "descendingArrival")
|
|
||||||
{
|
|
||||||
<a class="link-btn-sort" asp-page-handler="SortByArrival" asp-route-SortString="increasingArrival" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>🠗</a>
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<a class="link-btn-sort" asp-page-handler="SortByArrival" asp-route-SortString="increasingArrival" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>⮁</a>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
Тривалість
|
|
||||||
@if (Model.SortString == "increasingDuration")
|
|
||||||
{
|
{
|
||||||
<a class="link-btn-sort" asp-page-handler="SortByDuration" asp-route-SortString="descendingDuration" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>🠕</a>
|
<a class="link-btn-sort" asp-page-handler="SortByArrival" asp-route-SortString="descendingArrival" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>🠕</a>
|
||||||
}
|
}
|
||||||
else if (Model.SortString == "descendingDuration")
|
else if (Model.SortString == "descendingArrival")
|
||||||
{
|
{
|
||||||
<a class="link-btn-sort" asp-page-handler="SortByDuration" asp-route-SortString="increasingDuration" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>🠗</a>
|
<a class="link-btn-sort" asp-page-handler="SortByArrival" asp-route-SortString="increasingArrival" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>🠗</a>
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<a class="link-btn-sort" asp-page-handler="SortByDuration" asp-route-SortString="increasingDuration" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>⮁</a>
|
<a class="link-btn-sort" asp-page-handler="SortByArrival" asp-route-SortString="increasingArrival" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>⮁</a>
|
||||||
}
|
}
|
||||||
</th>
|
</div>
|
||||||
<th>
|
</th>
|
||||||
Вільніих місць
|
<th>
|
||||||
</th>
|
Тривалість
|
||||||
<th>
|
@if (Model.SortString == "increasingDuration")
|
||||||
Дії
|
{
|
||||||
</th>
|
<a class="link-btn-sort" asp-page-handler="SortByDuration" asp-route-SortString="descendingDuration" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>🠕</a>
|
||||||
</tr>
|
}
|
||||||
|
else if (Model.SortString == "descendingDuration")
|
||||||
|
{
|
||||||
|
<a class="link-btn-sort" asp-page-handler="SortByDuration" asp-route-SortString="increasingDuration" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>🠗</a>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<a class="link-btn-sort" asp-page-handler="SortByDuration" asp-route-SortString="increasingDuration" asp-route-From=@Model.From a in a asp-route-To=@Model.To asp-route-Date=@Model.Date.ToString("yyyy-MM-dd")>⮁</a>
|
||||||
|
}
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Вільніих місць
|
||||||
|
</th>
|
||||||
|
<th>
|
||||||
|
Дії
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@foreach (var route in Model.Routes)
|
@foreach (var route in Model.Routes)
|
||||||
{
|
{
|
||||||
<tr class="table-row">
|
<tr class="table-row">
|
||||||
<td class="num">
|
<td class="num">
|
||||||
<div>@route.Number</div>
|
<div>@route.Number</div>
|
||||||
<div class="city-list-btn"><a class="city-list-btn">Маршрут</a></div>
|
<div class="city-list-btn"><a class="city-list-btn" onclick="document.getElementById('popup-city-list-@route.Id').style.display = 'inherit'">Маршрут</a></div>
|
||||||
</td>
|
</td>
|
||||||
<td class="city">
|
<td class="city">
|
||||||
<div>@route.Cities.First().Name</div>
|
<div>@route.Cities.First().Name</div>
|
||||||
<div>@route.Cities.Last().Name</div>
|
<div>@route.Cities.Last().Name</div>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div class="route-date">
|
<div class="route-date">
|
||||||
<span>
|
<span>
|
||||||
Відправлення
|
Відправлення
|
||||||
</span>
|
</span>
|
||||||
<span>
|
<span>
|
||||||
@route.Cities.First().ArrivalTime?.ToString("f").Split(",")[0].ToLower(),
|
@route.Cities.First().ArrivalTime?.ToString("f").Split(",")[0].ToLower(),
|
||||||
@route.Cities.First().DepartureTime?.ToString("dd.MM.yyyy")
|
@route.Cities.First().DepartureTime?.ToString("dd.MM.yyyy")
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="route-date">
|
<div class="route-date">
|
||||||
<span>Прибуття</span>
|
<span>Прибуття</span>
|
||||||
<span>
|
<span>
|
||||||
@route.Cities.Last().ArrivalTime?.ToString("f").Split(",")[0].ToLower(),
|
@route.Cities.Last().ArrivalTime?.ToString("f").Split(",")[0].ToLower(),
|
||||||
@route.Cities.Last().ArrivalTime?.ToString("dd.MM.yyyy")
|
@route.Cities.Last().ArrivalTime?.ToString("dd.MM.yyyy")
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="time">
|
<td class="time">
|
||||||
<div>@route.Cities.First().DepartureTime?.ToString("HH:mm")</div>
|
<div>@route.Cities.First().DepartureTime?.ToString("HH:mm")</div>
|
||||||
<div>@route.Cities.Last().ArrivalTime?.ToString("HH:mm")</div>
|
<div>@route.Cities.Last().ArrivalTime?.ToString("HH:mm")</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="duration">
|
<td class="duration">
|
||||||
@{ TimeSpan? duration = route.Cities.Last().ArrivalTime - route.Cities.First().DepartureTime; }
|
@{ TimeSpan? duration = route.Cities.Last().ArrivalTime - route.Cities.First().DepartureTime; }
|
||||||
@($"{duration?.TotalHours.ToString().Split(",")[0]}:{duration?.Minutes}")
|
@($"{duration?.TotalHours.ToString().Split(",")[0]}:{duration?.Minutes}")
|
||||||
</td>
|
</td>
|
||||||
<td class="capacity">
|
<td class="capacity">
|
||||||
@(route.Capacity - route.Tickets.Count)
|
@(route.Capacity - route.Tickets.Count)
|
||||||
</td>
|
</td>
|
||||||
<td class="action">
|
<td class="action">
|
||||||
<a class="link-btn-choose">Вибрати</a>
|
<a class="link-btn-choose">Вибрати</a>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
}
|
}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
@ -179,4 +179,94 @@
|
|||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@if (Model.Routes != null)
|
||||||
|
{
|
||||||
|
foreach (var route in Model.Routes)
|
||||||
|
{
|
||||||
|
<div class="popup-container" id="popup-city-list-@route.Id">
|
||||||
|
<div class="popup">
|
||||||
|
<div class="popup-header">
|
||||||
|
<div class="popup-header-center">
|
||||||
|
Автобус №@route.Number
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="popup-body">
|
||||||
|
<div class="popup-body-main">
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr class="tr-intermediate">
|
||||||
|
<th class="th-route">
|
||||||
|
Інформація
|
||||||
|
</th>
|
||||||
|
<th class="th-route">
|
||||||
|
Місто
|
||||||
|
</th>
|
||||||
|
<th class="th-route">
|
||||||
|
Час прибуття
|
||||||
|
</th>
|
||||||
|
<th class="th-route">
|
||||||
|
Час відправлення
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr class="tr-departure">
|
||||||
|
<td class="td-route">
|
||||||
|
Відправлення
|
||||||
|
</td>
|
||||||
|
<td class="td-route">
|
||||||
|
@route.Cities.First().Name
|
||||||
|
</td>
|
||||||
|
<td class="td-route">
|
||||||
|
-
|
||||||
|
</td>
|
||||||
|
<td class="td-route">
|
||||||
|
@route.Cities.First().DepartureTime?.ToString("HH:mm")
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
@for (int i = 1; i < route.Cities.Count - 1; i++)
|
||||||
|
{
|
||||||
|
<tr class="tr-intermediate">
|
||||||
|
<td class="td-route">
|
||||||
|
Проміжна станція
|
||||||
|
</td>
|
||||||
|
<td class="td-route">
|
||||||
|
@route.Cities.ToList()[i].Name
|
||||||
|
</td>
|
||||||
|
<td class="td-route">
|
||||||
|
@route.Cities.ToList()[i].ArrivalTime?.ToString("HH:mm")
|
||||||
|
</td>
|
||||||
|
<td class="td-route">
|
||||||
|
@route.Cities.ToList()[i].DepartureTime?.ToString("HH:mm")
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
|
|
||||||
|
<tr class="tr-arrival">
|
||||||
|
<td class="td-route">
|
||||||
|
Прибуття
|
||||||
|
</td>
|
||||||
|
<td class="td-route">
|
||||||
|
@route.Cities.Last().Name
|
||||||
|
</td>
|
||||||
|
<td class="td-route">
|
||||||
|
@route.Cities.Last().ArrivalTime?.ToString("HH:mm")
|
||||||
|
</td>
|
||||||
|
<td class="td-route">
|
||||||
|
-
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="popup-body-footer">
|
||||||
|
<a class="link-btn-choose" onclick="document.getElementById('popup-city-list-@route.Id').style.display = 'none'">Закрити</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -20,6 +20,8 @@ body {
|
|||||||
margin: 2.5rem auto;
|
margin: 2.5rem auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ~~~~~~ search block ~~~~~~ */
|
||||||
|
|
||||||
.search-block {
|
.search-block {
|
||||||
background: #eaeef1;
|
background: #eaeef1;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
@ -78,6 +80,8 @@ input.search-btn:hover {
|
|||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ~~~~~~ route list table ~~~~~~ */
|
||||||
|
|
||||||
.route-list {
|
.route-list {
|
||||||
margin-top: 3rem;
|
margin-top: 3rem;
|
||||||
}
|
}
|
||||||
@ -203,4 +207,71 @@ td.time, td.duration {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
line-height: 3rem;
|
line-height: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ~~~~~~ popup route list ~~~~~~ */
|
||||||
|
|
||||||
|
.popup-container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 100;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.25);
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup {
|
||||||
|
width: 35rem;
|
||||||
|
height: 30rem;
|
||||||
|
background: #eaeef1;
|
||||||
|
position: fixed;
|
||||||
|
top: calc(50% - 15rem);
|
||||||
|
left: calc(50% - 17.5rem);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
box-shadow: 0 10px 15px 5px #6c6e6f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-header {
|
||||||
|
border-radius: 0.5rem 0.5rem 0 0;
|
||||||
|
height: 3rem;
|
||||||
|
background: #a1b0b9;
|
||||||
|
color: white;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-body {
|
||||||
|
width: calc(100% - 2rem);
|
||||||
|
height: calc(100% - 5rem);
|
||||||
|
padding: 1rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-body-main {
|
||||||
|
height: calc(100% - 4rem);
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.tr-intermediate {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
th.th-route, td.td-route {
|
||||||
|
height: 4rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.tr-departure, tr.tr-arrival {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-body-footer {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user