From e6a6989ddae15edb8634a103e7472a01c6ba6fae Mon Sep 17 00:00:00 2001 From: spidero7 Date: Thu, 17 Mar 2022 13:04:16 +0100 Subject: [PATCH 1/6] build: create BuyTicket.js --- frontend/src/App.js | 2 ++ frontend/src/components/Tickets/BuyTicket.js | 11 +++++++++++ frontend/src/styles/App.css | 2 -- 3 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 frontend/src/components/Tickets/BuyTicket.js diff --git a/frontend/src/App.js b/frontend/src/App.js index 03d48eb..f51e49a 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -9,6 +9,7 @@ import MyAccount from './components/Auth/MyAccount'; import Layout from './components/Auth/Layout'; import Unauthorized from './components/Auth/Unauthorized'; import TestAdminPage from './components/TestComponent/TestAdminPage'; +import BuyTicket from './components/Tickets/BuyTicket'; export const ROLES = { Admin: 515, @@ -35,6 +36,7 @@ function App() { {/* {protected user routes} */} }> } /> + } /> {/* {protected admin routes} */} }> diff --git a/frontend/src/components/Tickets/BuyTicket.js b/frontend/src/components/Tickets/BuyTicket.js new file mode 100644 index 0000000..8eb5a2e --- /dev/null +++ b/frontend/src/components/Tickets/BuyTicket.js @@ -0,0 +1,11 @@ +function BuyTicket() { + return ( + <> +
+

Test

+
+ + ); +} + +export default BuyTicket; diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css index 93d2b77..0bae6a4 100644 --- a/frontend/src/styles/App.css +++ b/frontend/src/styles/App.css @@ -1,4 +1,3 @@ - @import './Auth.css'; @import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300&display=swap'); @@ -12,7 +11,6 @@ @import url(../styles/CarouselDemo.css); - body { background-color: #121212; margin: 0; From 625f55ac31ffa464ea72d4b359aab72b8294f22f Mon Sep 17 00:00:00 2001 From: spidero7 Date: Thu, 17 Mar 2022 13:16:00 +0100 Subject: [PATCH 2/6] accept changes --- frontend/src/App.js | 4 ---- frontend/src/styles/App.css | 16 ++++------------ 2 files changed, 4 insertions(+), 16 deletions(-) diff --git a/frontend/src/App.js b/frontend/src/App.js index 515414e..213d996 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -9,12 +9,8 @@ import Login from './components/Auth/Login'; import MyAccount from './components/Auth/MyAccount'; import Layout from './components/Auth/Layout'; import Unauthorized from './components/Auth/Unauthorized'; -<<<<<<< HEAD -import TestAdminPage from './components/TestComponent/TestAdminPage'; import BuyTicket from './components/Tickets/BuyTicket'; -======= import AdminPanel from './components/AdminPanel/AdminPanel'; ->>>>>>> cc26695bb15163b9de65698403f7a209bb3a3c9d export const ROLES = { Admin: 515, diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css index 1fb3753..11caf61 100644 --- a/frontend/src/styles/App.css +++ b/frontend/src/styles/App.css @@ -1,24 +1,16 @@ -<<<<<<< HEAD -======= @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap'); ->>>>>>> cc26695bb15163b9de65698403f7a209bb3a3c9d @import './Auth.css'; @import url(../styles/CarouselDemo.css); :root { --font-style: 'Roboto', sans-serif; - --font-color: #C9356D; - --webkit-box-shadow: 0px 0px 5px 0px #C9356D; - --moz-box-shadow: 0px 0px 5px 0px #C9356D; - --box-shadow: 0px 0px 5px 0px #C9356D; + --font-color: #c9356d; + --webkit-box-shadow: 0px 0px 5px 0px #c9356d; + --moz-box-shadow: 0px 0px 5px 0px #c9356d; + --box-shadow: 0px 0px 5px 0px #c9356d; } -<<<<<<< HEAD -@import url(../styles/CarouselDemo.css); - -======= ->>>>>>> cc26695bb15163b9de65698403f7a209bb3a3c9d body { background-color: #121212; margin: 0; From aa6ed16a0dc25695ef08986a7fe2e56131ce0f6e Mon Sep 17 00:00:00 2001 From: spidero7 Date: Thu, 17 Mar 2022 15:46:42 +0100 Subject: [PATCH 3/6] build: create component to buy ticket --- frontend/src/components/Tickets/BuyTicket.js | 28 ++++++- frontend/src/styles/Auth.css | 83 +++++++++++++++++++- 2 files changed, 108 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Tickets/BuyTicket.js b/frontend/src/components/Tickets/BuyTicket.js index 8eb5a2e..387eea1 100644 --- a/frontend/src/components/Tickets/BuyTicket.js +++ b/frontend/src/components/Tickets/BuyTicket.js @@ -1,8 +1,32 @@ +import { Button } from 'primereact/button'; + function BuyTicket() { return ( <> -
-

Test

+
+
+

Select payment method

+
+
+ movie-poster +
+
+

Movie Title

+

Selected screening: Today, 10:00 | SALA 9

+

Selected seat: 16 | 17

+

Your data: name | email@email.com

+

Total amount: 20 PLN

+
+
+
+
+
+
+
+
+
+
); diff --git a/frontend/src/styles/Auth.css b/frontend/src/styles/Auth.css index 10d659e..6c86a1c 100644 --- a/frontend/src/styles/Auth.css +++ b/frontend/src/styles/Auth.css @@ -36,7 +36,6 @@ .inner-container { display: flex; - justify-content: center; flex-direction: column; align-items: center; padding: 100px; @@ -47,6 +46,88 @@ box-shadow: var(--box-shadow); } +.outer-container-but-ticket { + margin-top: 1rem; + display: flex; + justify-content: center; +} + +.inner-container-but-ticket { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 30px; + background-color: #1e1e1e; + color: var(--font-color); + -webkit-box-shadow: var(--webkit-box-shadow); + -moz-box-shadow: var(--moz-box-shadow); + box-shadow: var(--box-shadow); +} + +.buy-ticket-title { + border-bottom: var(--font-color) solid 1px; +} + +.buy-ticket-movie-info { + margin-top: 10px; + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 20px; +} + +.buy-ticket-details { + display: flex; + flex-direction: column; + justify-content: center; +} + +.buy-ticket-payment-options { + margin-top: 40px; +} + +.buy-ticket-payment-option { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 20px; + justify-items: center; + align-items: center; + border-bottom: var(--font-color) solid 1px; + border-top: var(--font-color) solid 1px; + margin-bottom: 20px; +} + +.buy-ticket-payment-option-payu, +.buy-ticket-payment-option-blik, +.buy-ticket-payment-option-visa { + cursor: pointer; +} + +.buy-ticket-payment-option-payu { + width: 100px; + height: 100px; + background-image: url('https://cdn-icons-png.flaticon.com/512/825/825520.png'); + background-size: 100px; +} + +.buy-ticket-payment-option-blik { + width: 100px; + height: 50px; + background-image: url('https://iconape.com/wp-content/files/fw/164902/png/blik-logo.png'); + background-size: 100px; +} + +.buy-ticket-payment-option-visa { + width: 120px; + height: 120px; + background-image: url('https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/visa-512.png'); + background-size: 120px; +} + +.buy-ticket-sub-btn { + background: var(--font-color) !important; +} + .links { text-decoration: none; } From 9627722b00979bca1978c87c0fbc8da63d66a1a8 Mon Sep 17 00:00:00 2001 From: spidero7 Date: Fri, 18 Mar 2022 11:38:56 +0100 Subject: [PATCH 4/6] build: create BookTicket.js --- frontend/src/App.js | 2 + frontend/src/components/Tickets/BookTicket.js | 44 +++++++++++++++++++ frontend/src/styles/Auth.css | 17 ++++--- 3 files changed, 57 insertions(+), 6 deletions(-) create mode 100644 frontend/src/components/Tickets/BookTicket.js diff --git a/frontend/src/App.js b/frontend/src/App.js index 213d996..18ae90f 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -11,6 +11,7 @@ import Layout from './components/Auth/Layout'; import Unauthorized from './components/Auth/Unauthorized'; import BuyTicket from './components/Tickets/BuyTicket'; import AdminPanel from './components/AdminPanel/AdminPanel'; +import BookTicket from './components/Tickets/BookTicket'; export const ROLES = { Admin: 515, @@ -41,6 +42,7 @@ function App() { }> } /> } /> + } /> {/* {protected admin routes} */} }> diff --git a/frontend/src/components/Tickets/BookTicket.js b/frontend/src/components/Tickets/BookTicket.js new file mode 100644 index 0000000..0795c59 --- /dev/null +++ b/frontend/src/components/Tickets/BookTicket.js @@ -0,0 +1,44 @@ +import { Button } from 'primereact/button'; +import { useState } from 'react'; + +function BookTicket() { + const [count, setCount] = useState(0); + + function handleMinus() { + setCount(count - 1); + } + + function handlePlus() { + setCount(count + 1); + } + + return ( + <> +
+
+

Book a Ticket

+
+
+ movie-poster +
+
+

Movie Title

+

Selected screening: Today, 10:00 | SALA 9

+

Selected seat: 16 | 17

+

Your data: name | email@email.com

+

Total amount: 20 PLN

+
+
+
+
+
+
+ + ); +} + +export default BookTicket; diff --git a/frontend/src/styles/Auth.css b/frontend/src/styles/Auth.css index 6c86a1c..49ce3f3 100644 --- a/frontend/src/styles/Auth.css +++ b/frontend/src/styles/Auth.css @@ -65,10 +65,6 @@ box-shadow: var(--box-shadow); } -.buy-ticket-title { - border-bottom: var(--font-color) solid 1px; -} - .buy-ticket-movie-info { margin-top: 10px; display: grid; @@ -92,8 +88,6 @@ grid-gap: 20px; justify-items: center; align-items: center; - border-bottom: var(--font-color) solid 1px; - border-top: var(--font-color) solid 1px; margin-bottom: 20px; } @@ -128,6 +122,17 @@ background: var(--font-color) !important; } +.book-ticket-amount { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; + align-items: center; + justify-items: center; + margin-top: 20px; + margin-bottom: 20px; + padding: 20px 0 20px 0; +} + .links { text-decoration: none; } From d8a70b9966958dd421bf538a2bc5c2f8cd21633c Mon Sep 17 00:00:00 2001 From: spidero7 Date: Sun, 20 Mar 2022 08:23:53 +0100 Subject: [PATCH 5/6] style the button --- frontend/src/components/Tickets/BookTicket.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Tickets/BookTicket.js b/frontend/src/components/Tickets/BookTicket.js index 0795c59..77fb5ac 100644 --- a/frontend/src/components/Tickets/BookTicket.js +++ b/frontend/src/components/Tickets/BookTicket.js @@ -30,7 +30,12 @@ function BookTicket() {
-
From 4c232f978fee0343646f54243c1003f6e412cba6 Mon Sep 17 00:00:00 2001 From: spidero7 Date: Sun, 20 Mar 2022 10:25:19 +0100 Subject: [PATCH 6/6] refactor BookTicket.js --- frontend/src/App.js | 2 - frontend/src/components/Tickets/BookTicket.js | 60 +++++--- frontend/src/styles/App.css | 1 + frontend/src/styles/Auth.css | 87 ------------ frontend/src/styles/Tickets.css | 130 ++++++++++++++++++ 5 files changed, 169 insertions(+), 111 deletions(-) create mode 100644 frontend/src/styles/Tickets.css diff --git a/frontend/src/App.js b/frontend/src/App.js index 18ae90f..18197b9 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -9,7 +9,6 @@ import Login from './components/Auth/Login'; import MyAccount from './components/Auth/MyAccount'; import Layout from './components/Auth/Layout'; import Unauthorized from './components/Auth/Unauthorized'; -import BuyTicket from './components/Tickets/BuyTicket'; import AdminPanel from './components/AdminPanel/AdminPanel'; import BookTicket from './components/Tickets/BookTicket'; @@ -41,7 +40,6 @@ function App() { {/* {protected user routes} */} }> } /> - } /> } /> {/* {protected admin routes} */} diff --git a/frontend/src/components/Tickets/BookTicket.js b/frontend/src/components/Tickets/BookTicket.js index 77fb5ac..cb1e35e 100644 --- a/frontend/src/components/Tickets/BookTicket.js +++ b/frontend/src/components/Tickets/BookTicket.js @@ -14,32 +14,48 @@ function BookTicket() { return ( <> -
-
-

Book a Ticket

-
+
+
+
- movie-poster + movie-poster
-
-

Movie Title

-

Selected screening: Today, 10:00 | SALA 9

-

Selected seat: 16 | 17

-

Your data: name | email@email.com

-

Total amount: 20 PLN

+
+
+

Book a Ticket

+
+
+

Movie Title

+
+

Selected screening: Today, 10:00 | SALA 9

+

Selected seat: 16 | 17

+

Your data: name | email@email.com

+

Total amount: 20 PLN

+
+
+
+
+
+
-
-
-
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css index 11caf61..f5d9de4 100644 --- a/frontend/src/styles/App.css +++ b/frontend/src/styles/App.css @@ -2,6 +2,7 @@ @import './Auth.css'; @import url(../styles/CarouselDemo.css); +@import url(./Tickets.css); :root { --font-style: 'Roboto', sans-serif; diff --git a/frontend/src/styles/Auth.css b/frontend/src/styles/Auth.css index 49ce3f3..9c22d1e 100644 --- a/frontend/src/styles/Auth.css +++ b/frontend/src/styles/Auth.css @@ -46,93 +46,6 @@ box-shadow: var(--box-shadow); } -.outer-container-but-ticket { - margin-top: 1rem; - display: flex; - justify-content: center; -} - -.inner-container-but-ticket { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: 30px; - background-color: #1e1e1e; - color: var(--font-color); - -webkit-box-shadow: var(--webkit-box-shadow); - -moz-box-shadow: var(--moz-box-shadow); - box-shadow: var(--box-shadow); -} - -.buy-ticket-movie-info { - margin-top: 10px; - display: grid; - grid-template-columns: 1fr 1fr; - grid-gap: 20px; -} - -.buy-ticket-details { - display: flex; - flex-direction: column; - justify-content: center; -} - -.buy-ticket-payment-options { - margin-top: 40px; -} - -.buy-ticket-payment-option { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 20px; - justify-items: center; - align-items: center; - margin-bottom: 20px; -} - -.buy-ticket-payment-option-payu, -.buy-ticket-payment-option-blik, -.buy-ticket-payment-option-visa { - cursor: pointer; -} - -.buy-ticket-payment-option-payu { - width: 100px; - height: 100px; - background-image: url('https://cdn-icons-png.flaticon.com/512/825/825520.png'); - background-size: 100px; -} - -.buy-ticket-payment-option-blik { - width: 100px; - height: 50px; - background-image: url('https://iconape.com/wp-content/files/fw/164902/png/blik-logo.png'); - background-size: 100px; -} - -.buy-ticket-payment-option-visa { - width: 120px; - height: 120px; - background-image: url('https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/visa-512.png'); - background-size: 120px; -} - -.buy-ticket-sub-btn { - background: var(--font-color) !important; -} - -.book-ticket-amount { - display: grid; - grid-template-columns: repeat(3, 1fr); - grid-gap: 10px; - align-items: center; - justify-items: center; - margin-top: 20px; - margin-bottom: 20px; - padding: 20px 0 20px 0; -} - .links { text-decoration: none; } diff --git a/frontend/src/styles/Tickets.css b/frontend/src/styles/Tickets.css new file mode 100644 index 0000000..a2ae47b --- /dev/null +++ b/frontend/src/styles/Tickets.css @@ -0,0 +1,130 @@ +.ticket-outer-container { + display: flex; + justify-content: center; + margin-top: 20px; +} + +.ticket-inner-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.ticket-title { + margin-bottom: 40px; + color: var(--font-color); + display: flex; + justify-content: center; +} + +.ticket-poster { + -webkit-box-shadow: var(--webkit-box-shadow); + -moz-box-shadow: var(--moz-box-shadow); + box-shadow: var(--box-shadow); +} + +.ticket-movie-title { + font-size: 1.3rem; +} + +.ticket-info { + font-size: 1.2rem; +} + +.ticket-container { + margin-top: 10px; + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 120px; +} + +.ticket-details { + display: flex; + flex-direction: column; + justify-content: center; + color: azure; +} + +.ticket-quantity-btn { + background: var(--font-color) !important; + font-size: 1.5rem !important; + border-radius: 15px !important; +} + +.ticket-btn-submit { + background: var(--font-color) !important; + font-size: 1.2rem !important; + border-radius: 15px !important; + min-width: 150px !important; + min-height: 50px; +} + +.ticket-btn-submit-container { + display: flex; + justify-content: center; +} + +.ticket-quantity-container { + display: grid; + grid-template-columns: repeat(3, 1fr); + align-items: center; + justify-items: center; + margin-top: 20px; + margin-bottom: 40px; + padding: 20px 0 20px 0; +} + +.ticket-quantity { + font-size: 1.5rem; +} + +.buy-ticket-payment-options { + margin-top: 40px; +} + +.buy-ticket-payment-option { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 20px; + justify-items: center; + align-items: center; + margin-bottom: 20px; +} + +.buy-ticket-payment-option-payu, +.buy-ticket-payment-option-blik, +.buy-ticket-payment-option-visa { + cursor: pointer; +} + +.buy-ticket-payment-option-payu { + width: 100px; + height: 100px; + background-image: url('https://cdn-icons-png.flaticon.com/512/825/825520.png'); + background-size: 100px; +} + +.buy-ticket-payment-option-blik { + width: 100px; + height: 50px; + background-image: url('https://iconape.com/wp-content/files/fw/164902/png/blik-logo.png'); + background-size: 100px; +} + +.buy-ticket-payment-option-visa { + width: 120px; + height: 120px; + background-image: url('https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/visa-512.png'); + background-size: 120px; +} + +@media only screen and (max-width: 1000px) { + .ticket-container { + grid-template-columns: 1fr; + } + + .outer-container-but-ticket { + margin-bottom: 30px; + } +}