feat: add ticket buy template without db integration

This commit is contained in:
cuqmbr 2022-04-04 19:27:15 +03:00
parent 8fd36aeec8
commit a213cf928b
8 changed files with 310 additions and 23 deletions

View File

@ -11,7 +11,7 @@ using TicketOffice.Data;
namespace TicketOffice.Migrations
{
[DbContext(typeof(TicketOfficeContext))]
[Migration("20220401115407_InitialCreate")]
[Migration("20220404151700_InitialCreate")]
partial class InitialCreate
{
protected override void BuildTargetModel(ModelBuilder modelBuilder)
@ -69,6 +69,17 @@ namespace TicketOffice.Migrations
.ValueGeneratedOnAdd()
.HasColumnType("INTEGER");
b.Property<string>("PassengerFirstName")
.IsRequired()
.HasColumnType("TEXT");
b.Property<string>("PassengerLastName")
.IsRequired()
.HasColumnType("TEXT");
b.Property<int>("PassengerPlace")
.HasColumnType("INTEGER");
b.Property<int>("RouteId")
.HasColumnType("INTEGER");

View File

@ -69,6 +69,9 @@ namespace TicketOffice.Migrations
{
Id = table.Column<int>(type: "INTEGER", nullable: false)
.Annotation("Sqlite:Autoincrement", true),
PassengerFirstName = table.Column<string>(type: "TEXT", nullable: false),
PassengerLastName = table.Column<string>(type: "TEXT", nullable: false),
PassengerPlace = table.Column<int>(type: "INTEGER", nullable: false),
UserId = table.Column<int>(type: "INTEGER", nullable: false),
RouteId = table.Column<int>(type: "INTEGER", nullable: false)
},

View File

@ -67,6 +67,17 @@ namespace TicketOffice.Migrations
.ValueGeneratedOnAdd()
.HasColumnType("INTEGER");
b.Property<string>("PassengerFirstName")
.IsRequired()
.HasColumnType("TEXT");
b.Property<string>("PassengerLastName")
.IsRequired()
.HasColumnType("TEXT");
b.Property<int>("PassengerPlace")
.HasColumnType("INTEGER");
b.Property<int>("RouteId")
.HasColumnType("INTEGER");

View File

@ -8,6 +8,19 @@ public class Ticket
[Key]
public int Id { get; set; }
[Required(ErrorMessage = "Поле має бути заповненим")]
[Display(Name = "Ім'я пасажира")]
public string PassengerFirstName { get; set; }
[Required(ErrorMessage = "Поле має бути заповненим")]
[Display(Name = "Прізвище пасажира")]
public string PassengerLastName { get; set; }
[Required(ErrorMessage = "Поле має бути заповненим")]
[Display(Name = "Номер місця пасажира")]
public int PassengerPlace { get; set; }
[ForeignKey("User")]
public int UserId { get; set; }
public User User { get; set; }

View File

@ -9,7 +9,7 @@
<link rel="stylesheet" href="~/css/Routes.css" asp-append-version="true"/>
<link rel="stylesheet" href="~/css/Routes.css"/>
<div class="wrapper">
@ -19,20 +19,20 @@
<div class="title">
Звідки
</div>
<input type="text" autocomplete="off" asp-for="From">
<input class="search-input" type="text" autocomplete="off" asp-for="From">
</div>
<a class="change-dir"></a>
<div class="station">
<div class="title">
Куди
</div>
<input type="text" autocomplete="off" asp-for="To">
<input class="search-input" type="text" autocomplete="off" asp-for="To">
</div>
<div class="date">
<div class="title">
Дата відправлення
</div>
<input type="date" value="@Model.Date.ToString("yyyy-MM-dd")" asp-for="Date">
<input class="search-input" type="date" value="@Model.Date.ToString("yyyy-MM-dd")" asp-for="Date">
</div>
<div class="search-btn">
<input type="submit" class="search-btn" value="Пошук"/>
@ -164,7 +164,7 @@
@(route.Capacity - route.Tickets.Count)
</td>
<td class="action">
<a class="link-btn-choose">Вибрати</a>
<a class="link-btn-choose" onclick="document.getElementById('popup-ticket-@route.Id').style.display = 'inherit'">Обрати</a>
</td>
</tr>
}
@ -194,9 +194,7 @@
<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>
Автобус №@route.Number
</div>
<div class="popup-body">
<div class="popup-body-main">
@ -269,7 +267,92 @@
</table>
</div>
<div class="popup-body-footer">
<a class="link-btn-choose" onclick="document.getElementById('popup-city-list-@route.Id').style.display = 'none'">Закрити</a>
<a class="popup-footer-button" onclick="document.getElementById('popup-city-list-@route.Id').style.display = 'none'">Закрити</a>
</div>
</div>
</div>
</div>
}
}
@if (Model.Routes != null)
{
foreach (var route in Model.Routes)
{
<div class="popup-container" id="popup-ticket-@route.Id">
<div class="ticket">
<div class="ticket-header">
Купити квиток
</div>
<div class="ticket-body">
<div class="ticket-body-main">
<form class="ticket-form" method="post" id="ticket-form-@route.Id" novalidate>
<div class="ticket-input-item" style="margin-right: 0.5rem">
<input class="ticket-input-lastname" type="text" placeholder="Прізвище" @(HttpContext.Session.GetInt32("UserId").HasValue ? "" : "readonly") asp-for="PassengerLastName"/>
<div class="ticket-validation-error"><span asp-validation-for="PassengerLastName"></span></div>
</div>
<div class="ticket-input-item" style="margin-left: 0.5rem; margin-right: 0.5rem">
<input class="ticket-input-firstname" type="text" placeholder="Ім'я" @(HttpContext.Session.GetInt32("UserId").HasValue ? "" : "readonly") asp-for="PassengerFirstName"/>
<div class="ticket-validation-error"><span asp-validation-for="PassengerFirstName"></span></div>
</div>
<div class="ticket-input-item" style="margin-left: 0.5rem">
<select class="ticket-place-select" required @(HttpContext.Session.GetInt32("UserId").HasValue ? "" : "disabled") asp-for="PassengerPlace">
<option selected disabled value="">Місце</option>
@for (int i = 1; i <= route.Capacity; i++)
{
if (!route.Tickets.Any(t => t.PassengerPlace == i))
{
<option value="@i">@i</option>
}
}
</select>
<div class="ticket-validation-error"><span asp-validation-for="PassengerPlace"></span></div>
</div>
</form>
<div class="ticket-info">
<div class="ticket-info-line">
<div class="ticket-info-line-left">
Номер маршруту
</div>
<div class="ticket-info-line-right">
№ @route.Number
</div>
</div>
<div class="ticket-info-line">
<div class="ticket-info-line-left">
Дата відправлення
</div>
<div class="ticket-info-line-right">
@route.Cities.First().DepartureTime?.ToString("f").Split(",")[0].ToLower(),
@route.Cities.First().DepartureTime?.ToString("dd.MM.yyyy"),
@route.Cities.First().DepartureTime?.ToString("HH:mm"),
@route.Cities.First().Name
</div>
</div>
<div class="ticket-info-line">
<div class="ticket-info-line-left">
Дата прибуття
</div>
<div class="ticket-info-line-right">
<div class="ticket-info-line-right-block">
@route.Cities.Last().ArrivalTime?.ToString("f").Split(",")[0].ToLower(),&nbsp;
</div>
<div class="ticket-info-line-right-block">
@route.Cities.Last().ArrivalTime?.ToString("dd.MM.yyyy"),&nbsp;
</div>
<div class="ticket-info-line-right-block">
@route.Cities.Last().ArrivalTime?.ToString("HH:mm"),&nbsp;
</div>
<div class="ticket-info-line-right-block">
@route.Cities.Last().Name
</div>
</div>
</div>
</div>
</div>
<div class="ticket-body-footer">
<a class="popup-footer-link-button" onclick="document.getElementById('popup-ticket-@route.Id').style.display = 'none'">Закрити</a>
<input class="popup-footer-button" type="submit" form="ticket-form-@route.Id" value="Купити">
</div>
</div>
</div>

View File

@ -9,11 +9,16 @@ namespace TicketOffice.Pages.Routes;
public class IndexModel : PageModel
{
public List<Route> Routes { get; set; }
[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 string PassengerFirstName { get; set; }
public string PassengerLastName { get; set; }
public int PassengerPlace { get; set; }
private readonly TicketOfficeContext _context;
public IndexModel(TicketOfficeContext context)
@ -40,7 +45,7 @@ public class IndexModel : PageModel
if (!string.IsNullOrWhiteSpace(From) || !string.IsNullOrWhiteSpace(To))
{
FilterRoutesByDate();
//FilterRoutesByDate();
}
}
@ -125,11 +130,6 @@ public class IndexModel : PageModel
});
}
public void OnGetBuyTicket(int routeId)
{
}
private void RetrieveAllRoutes()
{
Routes = _context.Route
@ -142,7 +142,7 @@ public class IndexModel : PageModel
{
Routes.ForEach(r => r.Cities = r.Cities
.SkipWhile(c => c.Name != From)
.SkipWhile(c => c.Name.ToLower() != From.Trim().ToLower())
.ToList());
Routes.RemoveAll(r => r.Cities.Count < 2);
@ -152,7 +152,7 @@ public class IndexModel : PageModel
{
Routes.ForEach(r => r.Cities = r.Cities
.Reverse().SkipWhile(c => c.Name != To)
.Reverse().SkipWhile(c => c.Name.ToLower() != To.Trim().ToLower())
.Reverse().ToList());
Routes.RemoveAll(r => r.Cities.Count < 2);

View File

@ -41,7 +41,7 @@ body {
margin-bottom: .3rem;
}
input[type=text], input[type=date] {
input.search-input {
font-size: 1.5rem;
color: #262626;
font-weight: 500;
@ -57,7 +57,7 @@ input[type=text], input[type=date] {
text-align: left;
}
input[type=text]:focus, input[type=date]:focus {
input.search-input:focus {
outline: 0;
border-color: #68b2dd;
background-color: #fff;
@ -209,7 +209,7 @@ td.time, td.duration {
line-height: 3rem;
}
/* ~~~~~~ popup route list ~~~~~~ */
/* ~~~~~~ route city list popup ~~~~~~ */
.popup-container {
position: fixed;
@ -223,12 +223,12 @@ td.time, td.duration {
}
.popup {
width: 35rem;
width: 40rem;
height: 30rem;
background: #eaeef1;
position: fixed;
top: calc(50% - 15rem);
left: calc(50% - 17.5rem);
left: calc(50% - 20rem);
border-radius: 0.5rem;
box-shadow: 0 10px 15px 5px #6c6e6f;
}
@ -267,6 +267,12 @@ th.th-route, td.td-route {
padding: 0 0.5rem;
}
td.address {
font-size: 0.8rem;
text-align: justify;
line-height: 1rem;
}
tr.tr-departure, tr.tr-arrival {
font-weight: 700;
}
@ -274,4 +280,164 @@ tr.tr-departure, tr.tr-arrival {
.popup-body-footer {
text-align: center;
margin-top: 1rem;
}
.popup-footer-link-button {
line-height: 2.5rem;
padding: 0 1rem;
margin: 0 0.5rem;
display: inline-block;
color: #1d4965;
font-weight: 500;
background: linear-gradient(0deg,#79b6db,#b3dbf2);
border: none;
border-radius: .3rem;
cursor: pointer;
text-decoration: none;
}
.popup-footer-button {
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:hover, .popup-footer-link-button:hover {
opacity: 0.8;
}
/* ~~~~~~ ticket ordering popup ~~~~~~ */
.ticket {
width: 50rem;
height: 20rem;
background: #eaeef1;
position: fixed;
top: calc(50% - 10rem);
left: calc(50% - 25rem);
border-radius: 0.5rem;
box-shadow: 0 10px 15px 5px #6c6e6f;
}
.ticket-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;
}
.ticket-body {
width: calc(100% - 2rem);
height: calc(100% - 5rem);
padding: 1rem 1rem;
}
.ticket-body-main {
height: calc(100% - 4rem);
overflow-y: auto;
overflow-x: hidden;
text-align: center;
}
form.ticket-form {
}
div.ticket-input-item {
display: inline-block;
width: 15rem;
height: 5rem;
line-height: 4.7rem;
text-align: left;
vertical-align: top;
}
input.ticket-input-firstname, input.ticket-input-lastname,
select.ticket-place-select {
display: flex;
font-size: 1.5rem;
color: #262626;
font-weight: 500;
box-sizing: border-box;
background: #dfe3e5;
border: 1px solid #b8bfc7;
box-shadow: 0 1px 0 0 #fff;
border-radius: .3rem;
padding: 0 1rem;
margin-top: 0.25rem;
text-align: left;
width: 100%;
height: 3rem;
}
input.ticket-input-firstname:read-only, input.ticket-input-lastname:read-only,
select.ticket-place-select:disabled {
background: #bcbfc0;
outline: none;
color: #7a7c7d;
}
select {
-webkit-appearance: menulist-button;
color: #262626;
}
select:invalid {
color: #7a7c7d;
}
div.ticket-validation-error {
color: #777a7e;
text-align: center;
font-size: 0.9rem;
font-weight: 700;
line-height: 1rem;;
margin: 0.25rem 0 0 0;
}
div.ticket-info div {
font-weight: 700;
font-size: 1.1rem;
text-align: justify;
line-height: 1.4rem;
}
div.ticket-info-line {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #c5c7cc;
margin-bottom: 0.4rem;
}
div.ticket-info-line-left {
display: inline-flex;
justify-content: right;
}
div.ticket-info-line-right {
width: 70%;
display: inline-flex;
justify-content: left;
}
div.ticket-info-line-right-block {
display: inline-flex;
}
.ticket-body-footer {
text-align: center;
margin-top: 1rem;
}

Binary file not shown.