From 1b3ac474b8f3fecc49cda2857ba89c994a66394d Mon Sep 17 00:00:00 2001
From: cuqmbr <dr.juniorf@gmail.com>
Date: Fri, 13 May 2022 13:39:18 +0300
Subject: [PATCH] feat: add info popup, project cleanup

---
 TicketOffice/Pages/Auth/Account.cshtml        | 250 ++++++++++--------
 TicketOffice/Pages/Routes/Index.cshtml        |  12 +-
 TicketOffice/wwwroot/css/Account.css          |   4 +-
 TicketOffice/wwwroot/css/CityListPopup.css    |  16 --
 TicketOffice/wwwroot/css/InfoPopup.css        |  68 +++++
 TicketOffice/wwwroot/css/TicketOrderPopup.css |   4 +-
 6 files changed, 209 insertions(+), 145 deletions(-)
 create mode 100644 TicketOffice/wwwroot/css/InfoPopup.css

diff --git a/TicketOffice/Pages/Auth/Account.cshtml b/TicketOffice/Pages/Auth/Account.cshtml
index 032e973..90b89ce 100644
--- a/TicketOffice/Pages/Auth/Account.cshtml
+++ b/TicketOffice/Pages/Auth/Account.cshtml
@@ -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>
+    }
+}
+
+
diff --git a/TicketOffice/Pages/Routes/Index.cshtml b/TicketOffice/Pages/Routes/Index.cshtml
index e917c05..c326855 100644
--- a/TicketOffice/Pages/Routes/Index.cshtml
+++ b/TicketOffice/Pages/Routes/Index.cshtml
@@ -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">
diff --git a/TicketOffice/wwwroot/css/Account.css b/TicketOffice/wwwroot/css/Account.css
index 6e8d888..fd05eea 100644
--- a/TicketOffice/wwwroot/css/Account.css
+++ b/TicketOffice/wwwroot/css/Account.css
@@ -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;
diff --git a/TicketOffice/wwwroot/css/CityListPopup.css b/TicketOffice/wwwroot/css/CityListPopup.css
index e7cf574..21e6fad 100644
--- a/TicketOffice/wwwroot/css/CityListPopup.css
+++ b/TicketOffice/wwwroot/css/CityListPopup.css
@@ -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;
 }
diff --git a/TicketOffice/wwwroot/css/InfoPopup.css b/TicketOffice/wwwroot/css/InfoPopup.css
new file mode 100644
index 0000000..032663d
--- /dev/null
+++ b/TicketOffice/wwwroot/css/InfoPopup.css
@@ -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;
+}
\ No newline at end of file
diff --git a/TicketOffice/wwwroot/css/TicketOrderPopup.css b/TicketOffice/wwwroot/css/TicketOrderPopup.css
index 821ddef..3d178e2 100644
--- a/TicketOffice/wwwroot/css/TicketOrderPopup.css
+++ b/TicketOffice/wwwroot/css/TicketOrderPopup.css
@@ -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;