Skip to content

build: create BuyTicket.js #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
spidero7 wants to merge 7 commits into
base: develop
Choose a base branch
from
Draft

build: create BuyTicket.js #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e6a6989
build: create BuyTicket.js
spidero7 Mar 17, 2022
f608f58
Merge branch 'develop' of https://github.com/CodersCamp2021/JoaoTeam-…
spidero7 Mar 17, 2022
625f55a
accept changes
spidero7 Mar 17, 2022
aa6ed16
build: create component to buy ticket
spidero7 Mar 17, 2022
9627722
build: create BookTicket.js
spidero7 Mar 18, 2022
d8a70b9
style the button
spidero7 Mar 20, 2022
4c232f9
refactor BookTicket.js
spidero7 Mar 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions frontend/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import MyAccount from './components/Auth/MyAccount';
import Layout from './components/Auth/Layout';
import Unauthorized from './components/Auth/Unauthorized';
import AdminPanel from './components/AdminPanel/AdminPanel';
import BookTicket from './components/Tickets/BookTicket';

export const ROLES = {
Admin: 515,
Expand Down Expand Up @@ -39,6 +40,7 @@ function App() {
{/* {protected user routes} */}
<Route element={<RequireAuth allowedRoles={[ROLES.User]} />}>
<Route path="/my-account" element={<MyAccount />} />
<Route path="/book-ticket" element={<BookTicket />} />
</Route>
{/* {protected admin routes} */}
<Route element={<RequireAuth allowedRoles={[ROLES.Admin]} />}>
Expand Down
65 changes: 65 additions & 0 deletions frontend/src/components/Tickets/BookTicket.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
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 (
<>
<div className="ticket-outer-container">
<div className="ticket-inner-container">
<div className="ticket-container">
<div>
<img
className="ticket-poster"
src="https://picsum.photos/400/600"
alt="movie-poster"></img>
</div>
<div>
<div className="ticket-title">
<h2>Book a Ticket</h2>
</div>
<div className="ticket-details">
<h3 className="ticket-movie-title">Movie Title</h3>
<div className="ticket-info">
<p>Selected screening: Today, 10:00 | SALA 9</p>
<p>Selected seat: 16 | 17</p>
<p>Your data: name | email@email.com</p>
<p>Total amount: 20 PLN</p>
</div>
<div className="ticket-quantity-container">
<Button
onClick={handleMinus}
type="submit"
label="-"
className="ticket-quantity-btn"
/>
<span className="ticket-quantity">{count}</span>
<Button
onClick={handlePlus}
type="submit"
label="+"
className="ticket-quantity-btn"
/>
</div>
<div className="ticket-btn-submit-container">
<Button type="submit" label="Book" className="ticket-btn-submit" />
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
}

export default BookTicket;
35 changes: 35 additions & 0 deletions frontend/src/components/Tickets/BuyTicket.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Button } from 'primereact/button';

function BuyTicket() {
return (
<>
<div className="outer-container-but-ticket">
<div className="inner-container-but-ticket">
<h2 className="buy-ticket-title">Select payment method</h2>
<div className="buy-ticket-movie-info">
<div>
<img src="https://picsum.photos/200/300" alt="movie-poster"></img>
</div>
<div className="buy-ticket-details">
<h3>Movie Title</h3>
<p>Selected screening: Today, 10:00 | SALA 9</p>
<p>Selected seat: 16 | 17</p>
<p>Your data: name | email@email.com</p>
<p>Total amount: 20 PLN</p>
</div>
</div>
<div className="buy-ticket-payment-options">
<div className="buy-ticket-payment-option">
<div className="buy-ticket-payment-option-payu"></div>
<div className="buy-ticket-payment-option-blik"></div>
<div className="buy-ticket-payment-option-visa"></div>
</div>
</div>
<Button type="submit" label="Buy Ticket" className="buy-ticket-sub-btn" />
</div>
</div>
</>
);
}

export default BuyTicket;
9 changes: 5 additions & 4 deletions frontend/src/styles/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@

@import './Auth.css';
@import url(../styles/CarouselDemo.css);
@import url(./Tickets.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;
}

body {
Expand Down
1 change: 0 additions & 1 deletion frontend/src/styles/Auth.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@

.inner-container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 100px;
Expand Down
130 changes: 130 additions & 0 deletions frontend/src/styles/Tickets.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}