feat: add info popup, project cleanup
This commit is contained in:
cuqmbr
parent
a1a53156a4
commit
1b3ac474b8
@ -7,8 +7,9 @@
|
||||
CultureInfo.CurrentCulture = CultureInfo.GetCultureInfo("uk-UA");
|
||||
}
|
||||
|
||||
<link rel="stylesheet" href="~/css/CityListPopup.css"/>
|
||||
<link rel="stylesheet" href="~/css/Account.css"/>
|
||||
<link rel="stylesheet" href="~/css/CityListPopup.css"/>
|
||||
<link rel="stylesheet" href="~/css/InfoPopup.css">
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">Придбані квитки</div>
|
||||
@ -21,121 +22,39 @@
|
||||
<div class="tickets">
|
||||
@foreach (var ticket in Model.Tickets)
|
||||
{
|
||||
<div class="tickets">
|
||||
<div class="ticket">
|
||||
<div class="ticket-header">Квиток № @ticket.Id</div>
|
||||
<div class="ticket-body">
|
||||
<div class="ticket-info">
|
||||
<div class="ticket-info-line">
|
||||
<span>Пасажир, місце:</span>
|
||||
<span>@ticket.PassengerLastName @ticket.PassengerFirstName, @ticket.PassengerPlace</span>
|
||||
</div>
|
||||
<div class="ticket-info-line">
|
||||
<span>Номер рейсу:</span>
|
||||
<span> № @ticket.Route.Number</span>
|
||||
</div>
|
||||
<div class="ticket-info-line date">
|
||||
<span>Дата відправлення:</span>
|
||||
<span>
|
||||
@ticket.Route.Cities.First().DepartureTime?.ToString("f").Split(",")[0].ToLower(),
|
||||
@ticket.Route.Cities.First().DepartureTime?.ToString("dd.MM.yyyy"),
|
||||
@ticket.Route.Cities.First().DepartureTime?.ToString("HH:mm")
|
||||
</span>
|
||||
</div>
|
||||
<div class="ticket-info-line date">
|
||||
<span>Дата прибуття:</span>
|
||||
<span>
|
||||
@ticket.Route.Cities.Last().ArrivalTime?.ToString("f").Split(",")[0].ToLower(),
|
||||
@ticket.Route.Cities.Last().ArrivalTime?.ToString("dd.MM.yyyy"),
|
||||
@ticket.Route.Cities.Last().ArrivalTime?.ToString("HH:mm")
|
||||
</span>
|
||||
</div>
|
||||
<div class="ticket">
|
||||
<div class="ticket-header">Квиток № @ticket.Id</div>
|
||||
<div class="ticket-body">
|
||||
<div class="ticket-info">
|
||||
<div class="ticket-info-line">
|
||||
<span>Пасажир, місце:</span>
|
||||
<span>@ticket.PassengerLastName @ticket.PassengerFirstName, @ticket.PassengerPlace</span>
|
||||
</div>
|
||||
<div class="ticket-info-line">
|
||||
<span>Номер рейсу:</span>
|
||||
<span> № @ticket.Route.Number</span>
|
||||
</div>
|
||||
<div class="ticket-info-line date">
|
||||
<span>Дата відправлення:</span>
|
||||
<span>
|
||||
@ticket.Route.Cities.First().DepartureTime?.ToString("f").Split(",")[0].ToLower(),
|
||||
@ticket.Route.Cities.First().DepartureTime?.ToString("dd.MM.yyyy"),
|
||||
@ticket.Route.Cities.First().DepartureTime?.ToString("HH:mm")
|
||||
</span>
|
||||
</div>
|
||||
<div class="ticket-info-line date">
|
||||
<span>Дата прибуття:</span>
|
||||
<span>
|
||||
@ticket.Route.Cities.Last().ArrivalTime?.ToString("f").Split(",")[0].ToLower(),
|
||||
@ticket.Route.Cities.Last().ArrivalTime?.ToString("dd.MM.yyyy"),
|
||||
@ticket.Route.Cities.Last().ArrivalTime?.ToString("HH:mm")
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ticket-footer">
|
||||
<a class="ticket-link-btn" onclick="document.getElementById('popup-city-list-@ticket.Id').style.display = 'inherit'">Маршрут</a>
|
||||
<a class="ticket-link-btn" asp-page-handler="ReturnTicket" asp-route-ReturnTicketId="@ticket.Id">Повернути</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popup-container-city-list" id="popup-city-list-@ticket.Id">
|
||||
<div class="popup-city-list">
|
||||
<div class="popup-header-city-list">
|
||||
Автобус №@ticket.Route.Number
|
||||
</div>
|
||||
<div class="popup-body-city-list">
|
||||
<table class="city-list">
|
||||
<thead>
|
||||
<tr class="tr-intermediate city-list">
|
||||
<th class="th-route city-list">
|
||||
Інформація
|
||||
</th>
|
||||
<th class="th-route city-list">
|
||||
Місто
|
||||
</th>
|
||||
<th class="th-route city-list">
|
||||
Час прибуття
|
||||
</th>
|
||||
<th class="th-route city-list">
|
||||
Час відправлення
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="tr-departure city-list">
|
||||
<td class="td-route city-list">
|
||||
Відправлення
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
@ticket.Route.Cities.First().Name
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
-
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
@ticket.Route.Cities.First().DepartureTime?.ToString("HH:mm")
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@for (int i = 1; i < ticket.Route.Cities.Count - 1; i++)
|
||||
{
|
||||
<tr class="tr-intermediate city-list">
|
||||
<td class="td-route city-list">
|
||||
Проміжна станція
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
@ticket.Route.Cities.ToList()[i].Name
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
@ticket.Route.Cities.ToList()[i].ArrivalTime?.ToString("HH:mm")
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
@ticket.Route.Cities.ToList()[i].DepartureTime?.ToString("HH:mm")
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
|
||||
<tr class="tr-arrival city-list">
|
||||
<td class="td-route city-list">
|
||||
Прибуття
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
@ticket.Route.Cities.Last().Name
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
@ticket.Route.Cities.Last().ArrivalTime?.ToString("HH:mm")
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
-
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="popup-footer-city-list">
|
||||
<a class="popup-footer-button-city-list" onclick="document.getElementById('popup-city-list-@ticket.Id').style.display = 'none'">Закрити</a>
|
||||
</div>
|
||||
<div class="ticket-footer">
|
||||
<a class="ticket-link-btn" onclick="document.getElementById('popup-city-list-@ticket.Id').style.display = 'inherit'">Маршрут</a>
|
||||
<a class="ticket-link-btn" onclick="document.getElementById('popup-info-@ticket.Id').style.display = 'inherit'">Повернути</a>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@ -149,6 +68,105 @@
|
||||
<div class="section-header">Керування аккаунтом</div>
|
||||
</div>
|
||||
|
||||
@* <div class="popup-container-info"> *@
|
||||
@* <div class="popup-info"></div> *@
|
||||
@* </div> *@
|
||||
@* Popup windows *@
|
||||
|
||||
@if (Model.Tickets is not {Count: 0})
|
||||
{
|
||||
foreach (var ticket in Model.Tickets)
|
||||
{
|
||||
<div class="popup-container-city-list" id="popup-city-list-@ticket.Id">
|
||||
<div class="popup-city-list">
|
||||
<div class="popup-header-city-list">
|
||||
Автобус №@ticket.Route.Number
|
||||
</div>
|
||||
<div class="popup-body-city-list">
|
||||
<table class="city-list">
|
||||
<thead>
|
||||
<tr class="tr-intermediate city-list">
|
||||
<th class="th-route city-list">
|
||||
Інформація
|
||||
</th>
|
||||
<th class="th-route city-list">
|
||||
Місто
|
||||
</th>
|
||||
<th class="th-route city-list">
|
||||
Час прибуття
|
||||
</th>
|
||||
<th class="th-route city-list">
|
||||
Час відправлення
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="tr-departure city-list">
|
||||
<td class="td-route city-list">
|
||||
Відправлення
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
@ticket.Route.Cities.First().Name
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
-
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
@ticket.Route.Cities.First().DepartureTime?.ToString("HH:mm")
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@for (int i = 1; i < ticket.Route.Cities.Count - 1; i++)
|
||||
{
|
||||
<tr class="tr-intermediate city-list">
|
||||
<td class="td-route city-list">
|
||||
Проміжна станція
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
@ticket.Route.Cities.ToList()[i].Name
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
@ticket.Route.Cities.ToList()[i].ArrivalTime?.ToString("HH:mm")
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
@ticket.Route.Cities.ToList()[i].DepartureTime?.ToString("HH:mm")
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
|
||||
<tr class="tr-arrival city-list">
|
||||
<td class="td-route city-list">
|
||||
Прибуття
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
@ticket.Route.Cities.Last().Name
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
@ticket.Route.Cities.Last().ArrivalTime?.ToString("HH:mm")
|
||||
</td>
|
||||
<td class="td-route city-list">
|
||||
-
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="popup-footer-city-list">
|
||||
<a class="popup-footer-link-button-city-list" onclick="document.getElementById('popup-city-list-@ticket.Id').style.display = 'none'">Закрити</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popup-container-info" id="popup-info-@ticket.Id">
|
||||
<div class="popup-info">
|
||||
<div class="popup-info-header">Квиток № @ticket.Id</div>
|
||||
<div class="popup-info-body">
|
||||
Ви дійсно хочете повернути квиток?
|
||||
</div>
|
||||
<div class="popup-info-footer">
|
||||
<a class="popup-info-footer-link-button" onclick="document.getElementById('popup-info-@ticket.Id').style.display = 'none'">Відмінити</a>
|
||||
<a class="popup-info-footer-link-button" asp-page-handler="ReturnTicket" asp-route-ReturnTicketId="@ticket.Id">Повернути</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -190,7 +190,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
@if (Model.Routes != null)
|
||||
@if (Model.Routes is not null)
|
||||
{
|
||||
foreach (var route in Model.Routes)
|
||||
{
|
||||
@ -269,17 +269,11 @@
|
||||
</table>
|
||||
</div>
|
||||
<div class="popup-footer-city-list">
|
||||
<a class="popup-footer-button-city-list" onclick="document.getElementById('popup-city-list-@route.Id').style.display = 'none'">Закрити</a>
|
||||
<a class="popup-footer-link-button-city-list" onclick="document.getElementById('popup-city-list-@route.Id').style.display = 'none'">Закрити</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
@if (Model.Routes != null)
|
||||
{
|
||||
foreach (var route in Model.Routes)
|
||||
{
|
||||
|
||||
<div class="popup-container-ticket-order" id="popup-ticket-@route.Id" style='display:@(Model.Ticket is not null && Model.Ticket.RouteId == route.Id ? "inherit" : "none")'>
|
||||
<div class="ticket">
|
||||
<div class="ticket-header">
|
||||
|
||||
@ -92,7 +92,7 @@ body {
|
||||
display: inline-block;
|
||||
color: #1d4965;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
font-weight: 50 0;
|
||||
background: linear-gradient(0deg,#79b6db,#b3dbf2);
|
||||
border: none;
|
||||
border-radius: .3rem;
|
||||
@ -111,7 +111,7 @@ body {
|
||||
padding: 0 1rem;
|
||||
display: inline-block;
|
||||
color: #1d4965;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
background: linear-gradient(0deg,#79b6db,#b3dbf2);
|
||||
border: none;
|
||||
border-radius: .3rem;
|
||||
|
||||
@ -82,22 +82,6 @@ tr.tr-departure, tr.tr-arrival {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.popup-footer-button-city-list {
|
||||
line-height: 2.5rem;
|
||||
padding: 0 1rem;
|
||||
margin: 0 0.5rem;
|
||||
display: inline-block;
|
||||
color: #1d4965;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
background: linear-gradient(0deg,#79b6db,#b3dbf2);
|
||||
border: none;
|
||||
border-radius: .3rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.popup-footer-button-city-list:hover,
|
||||
.popup-footer-link-button-city-list:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
68
TicketOffice/wwwroot/css/InfoPopup.css
Normal file
68
TicketOffice/wwwroot/css/InfoPopup.css
Normal file
@ -0,0 +1,68 @@
|
||||
.popup-container-info {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popup-info {
|
||||
width: 30rem;
|
||||
height: 13rem;
|
||||
background: #eaeef1;
|
||||
position: fixed;
|
||||
top: calc(50% - 6.5rem);
|
||||
left: calc(50% - 15rem);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 10px 15px 5px #6c6e6f;
|
||||
}
|
||||
|
||||
.popup-info-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-info-body {
|
||||
width: calc(100% - 2rem);
|
||||
height: calc(100% - 8rem);
|
||||
padding: 0.5rem 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.popup-info-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.popup-info-footer-link-button {
|
||||
line-height: 2.5rem;
|
||||
padding: 0 1rem;
|
||||
margin: 0 0.5rem;
|
||||
display: inline-block;
|
||||
color: #1d4965;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
background: linear-gradient(0deg,#79b6db,#b3dbf2);
|
||||
border: none;
|
||||
border-radius: .3rem;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.popup-info-footer-link-button:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
@ -97,7 +97,7 @@ div.ticket-validation-error {
|
||||
color: #777a7e;
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
font-weight:700;
|
||||
line-height: 1rem;;
|
||||
margin: 0.25rem 0 0 0;
|
||||
}
|
||||
@ -156,7 +156,7 @@ div.ticket-info-line-right-block {
|
||||
margin: 0 0.5rem;
|
||||
display: inline-block;
|
||||
color: #1d4965;
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
background: linear-gradient(0deg,#79b6db,#b3dbf2);
|
||||
border: none;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user