Commit 1ebb4626 by Syed Abdul Rahman

Impemented remove seats in json-server

parent 33d00106
...@@ -23,74 +23,21 @@ ...@@ -23,74 +23,21 @@
{ {
"id": "a6af", "id": "a6af",
"email": "testing@gmail.com" "email": "testing@gmail.com"
}
],
"selectedSeats": [
{
"id": "a6af",
"userid": "a6af",
"selected": [
{
"row": 8,
"seat": 2
},
{
"row": 8,
"seat": 3
},
{
"row": 8,
"seat": 4
},
{
"row": 8,
"seat": 4
},
{
"row": 8,
"seat": 3
},
{
"row": 8,
"seat": 2
},
{
"row": 8,
"seat": 4
}, },
{ {
"row": 8, "id": "7fdf",
"seat": 3 "email": "test@gmail.com"
}, },
{ {
"row": 8, "id": "a9b6",
"seat": 2 "email": "new@gmail.com"
},
{
"row": 8,
"seat": 3
},
{
"row": 8,
"seat": 4
},
{
"row": 8,
"seat": 2
},
{
"row": 8,
"seat": 2
},
{
"row": 8,
"seat": 3
},
{
"row": 8,
"seat": 4
} }
] ],
"selectedSeats": [
{
"id": "1ad9",
"userid": "1ad9",
"selected": []
} }
] ]
} }
\ No newline at end of file
...@@ -61,7 +61,6 @@ const BookingWrapper = ({ onSeatClick, selectedSeats, seatData, currentSeats }) ...@@ -61,7 +61,6 @@ const BookingWrapper = ({ onSeatClick, selectedSeats, seatData, currentSeats })
seatClass += selectedBy == currentUser ? 'selected-by-me' : 'selected-by-other'; seatClass += selectedBy == currentUser ? 'selected-by-me' : 'selected-by-other';
} }
console.log(seatClass, "SeatCLaskk")
return ( return (
<Seat status={seatClass} id={column.id} onClick={() => onSeatClick(row.row_id, column.id)} /> <Seat status={seatClass} id={column.id} onClick={() => onSeatClick(row.row_id, column.id)} />
) )
......
...@@ -6,8 +6,6 @@ ...@@ -6,8 +6,6 @@
cursor: pointer; cursor: pointer;
} }
.seat:hover { .seat:hover {
background-color: aqua; background-color: aqua;
} }
...@@ -22,7 +20,6 @@ ...@@ -22,7 +20,6 @@
background-color: aqua; background-color: aqua;
} }
.theatre { .theatre {
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -59,6 +56,7 @@ ...@@ -59,6 +56,7 @@
.selected-by-other { .selected-by-other {
background-color: #bec0c26d !important; background-color: #bec0c26d !important;
pointer-events: none;
} }
.booking-wrapper{ .booking-wrapper{
...@@ -66,8 +64,6 @@ ...@@ -66,8 +64,6 @@
overflow: auto; overflow: auto;
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.seat { .seat {
...@@ -84,7 +80,6 @@ ...@@ -84,7 +80,6 @@
height: 2em; height: 2em;
} }
.seat-row { .seat-row {
gap: 15px; gap: 15px;
} }
......
import Input from '../../Base/Input/Index'; import Input from "../../Base/Input/Index";
import Button from '../../Base/Button/Index' import Button from "../../Base/Button/Index";
import styles from './styles.module.css'; import styles from "./styles.module.css";
const Modal = ({onConfirm, onChange}) => { const Modal = ({ onConfirm, onChange, variant, onOfSeats }) => {
return ( return (
<div className={styles["overlay-container"]}> <div className={styles["overlay-container"]}>
<div className={styles['modal-dialog']} role="dialog" aria-modal="true" > <div className={styles["modal-dialog"]} role="dialog" aria-modal="true">
<h2 className={styles['modal-title']}>Select Your Seats</h2> {variant == "input" && (
<>
<h2 className={styles["modal-title"]}>Select Your Seats</h2>
<p>Please choose how many seats you'd like to book.</p> <p>Please choose how many seats you'd like to book.</p>
<Input <Input
label={"Number of Seats"} label={"Number of Seats"}
placeholder='Enter number of seats' placeholder="Enter number of seats"
type='number' type="number"
max='10' max="10"
min='1' min="1"
onChange={(e) => onChange(e.target.value)} onChange={(e) => onChange(e.target.value)}
/> />
<div className={styles['btn-wrapper']}> <div className={`${styles["btn-wrapper"]} ${styles["flex-direction"]}`}>
<Button size={'sm'} onClick={onConfirm}>Confirm</Button> <Button size={"sm"} onClick={onConfirm}>
Confirm
</Button>
</div>
</>
)}
{variant == "confirm" && (
<>
<h2 className={styles["modal-title"]}>Confirm Your Selection</h2>
<p>
You have selected <strong>{onOfSeats}</strong> seat
{onOfSeats !== 1 ? "s" : ""}.
</p>
<p>Please confirm to proceed with your booking.</p>
<div className={styles["btn-wrapper"]}>
<Button size={"sm"} onClick={onConfirm}>
Cancel
</Button>
<Button size={"sm"} onClick={onConfirm}>
Confirm
</Button>
</div> </div>
</>
)}
</div> </div>
</div> </div>
) );
} };
export default Modal; export default Modal;
...@@ -23,10 +23,13 @@ ...@@ -23,10 +23,13 @@
.btn-wrapper { .btn-wrapper {
display: flex; display: flex;
/* justify-content: flex-end; */ justify-content: flex-end;
flex-direction: column; gap: 1rem;
margin: 1rem 0; margin: 1rem 0;
} }
.flex-direction{
flex-direction: column;
}
.modal-title { .modal-title {
font-family: 'Poppins-Medium'; font-family: 'Poppins-Medium';
......
...@@ -8,11 +8,11 @@ ...@@ -8,11 +8,11 @@
padding-bottom: 65px; padding-bottom: 65px;
display: flex; display: flex;
} }
.seat-booking-wrapper > div { .seat-booking-wrapper > div {
flex: 1; flex: 1;
} }
.btn-wrapper { .btn-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -20,11 +20,10 @@ ...@@ -20,11 +20,10 @@
flex: 1; flex: 1;
padding: 1.5rem 0; padding: 1.5rem 0;
} }
.logout{ .logout{
position: absolute; position: absolute;
right: 10px; right: 10px;
top: 10px; top: 10px;
cursor: pointer; cursor: pointer;
} }
\ No newline at end of file
export const appConstants = { export const appConstants = {
API_URL_SEATS: "http://localhost:3000/selectedSeats", API_URL_SEATS: "http://localhost:3000/selectedSeats",
API_URL_USERS: "http://localhost:3000/users" API_URL_USERS: "http://localhost:3000/users",
USER: "user",
MODAL: "modal"
} }
// 192.168.1.121 // 192.168.1.121
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment