Skip to content

S
seat-booking
Commit 0b74e4ee by Syed Abdul Rahman
Options

changes in seat booking

parent cf29a1c2
Showing with 139 additions and 325 deletions
db.json
......@@ -39,6 +39,14 @@
"userid": "1ad9",
"selected": [
{
"row": 7,
"seat": 4
},
{
"row": 2,
"seat": 5
},
{
"row": 4,
"seat": 4
},
......@@ -109,118 +117,27 @@
{
"id": "7fdf",
"userid": "7fdf",
"selected": []
},
{
"id": "06dd",
"userid": "06dd",
"selected": [
{
"row": 5,
"seat": 4
},
{
"row": 5,
"seat": 5
},
{
"row": 1,
"seat": 7
"seat": 5
},
{
"row": 1,
"seat": 8
},
{
"row": 3,
"seat": 6
},
{
"row": 3,
"seat": 7
},
{
"row": 2,
"row": 1,
"seat": 7
},
{
"row": 2,
"seat": 8
},
{
"row": 3,
"seat": 8
},
{
"row": 2,
"seat": 9
},
{
"row": 3,
"seat": 9
},
{
"row": 2,
"seat": 10
},
{
"row": 3,
"seat": 10
},
{
"row": 4,
"seat": 10
},
{
"row": 5,
"seat": 10
},
{
"row": 6,
"seat": 10
},
{
"row": 6,
"seat": 9
},
{
"row": 4,
"seat": 9
},
{
"row": 5,
"seat": 9
},
{
"row": 5,
"seat": 8
},
{
"row": 4,
"seat": 8
},
{
"row": 6,
"row": 1,
"seat": 8
},
{
"row": 6,
"seat": 7
},
{
"row": 5,
"seat": 7
},
{
"row": 4,
"seat": 7
},
{
"row": 4,
"seat": 6
},
{
"row": 5,
"seat": 6
},
{
"row": 6,
"seat": 6
}
]
}
......
src/components/Base/Button/styles.module.css
......@@ -27,7 +27,7 @@
}
.md {
padding: 0.4rem 1.5rem;
padding: 0.4rem 2rem;
font-size: 18px;
}
......
src/components/Layout/BookingWrapper/Index.jsx
......@@ -4,7 +4,7 @@ import styles from './styles.module.css';
const BookingWrapper = ({ onSeatClick, selectedSeats, seatData, currentSeats }) => {
const aisleIndex = 5;
const aisleIndex = 4;
let currentUser = getItem("user");
const selectedSeatMap = new Map();
......
src/components/Layout/BookingWrapper/styles.module.css
.seat {
width: 1.2em;
height: 1.2em;
border: .5px solid rgba(255, 255, 255, 0.603);
border: 1.5px solid rgba(255, 255, 255, 0.825);
border-radius: 5px;
cursor: pointer;
}
......@@ -46,16 +46,18 @@
.selected-by-me {
background-color: aqua !important;
border: 0.5px aqua;
border: 1px solid aqua;
}
.current-selected{
background-color: aqua !important;
border: 0.5px aqua;
border: 1px solid aqua;
}
.selected-by-other {
background-color: #bec0c26d !important;
border: 1px solid #bec0c26d;
pointer-events: none;
}
......
src/components/Layout/Header/Index.jsx
import PropTypes from 'prop-types';
import styles from './styles.module.css';
import PropTypes from "prop-types";
import styles from "./styles.module.css";
const Header = ({ children }) => {
return (
<section className={styles["header-wrapper"]}>
<div className={styles.title}>{children}</div>
<div className={styles.screenWrapper}>
<svg
viewBox="0 20 480 100"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M 30 70 Q 240 20 450 70"
stroke="white"
stroke-width="3"
fill="none"
/>
return (
<section className={styles['header-wrapper']}>
<div className={styles.title}>
{children}
</div>
<div className={styles.screenWrapper}>
{/* <svg viewBox="0 0 480 260" xmlns="http://www.w3.org/2000/svg">
<path d="M 30 70 Q 240 20 450 70" stroke="white" stroke-width="5" fill="none" />
<defs>
<linearGradient id="glowGradient" x1="0" y1="70" x2="0" y2="180" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#addfff" stop-opacity="0.15" />
<stop offset="100%" stop-color="#addfff" stop-opacity="0" />
</linearGradient>
<clipPath id="glowClip">
<path d="
M 30 70
Q 240 20 450 70
L 470 180
L 10 180
Z" />
</clipPath>
</defs>
<rect x="0" y="0" width="480" height="260"
fill="url(#glowGradient)"
clip-path="url(#glowClip)" />
</svg> */}
<svg viewBox="0 20 480 100" xmlns="http://www.w3.org/2000/svg">
<path d="M 30 70 Q 240 20 450 70" stroke="white" stroke-width="2" fill="none" />
<defs>
<linearGradient
id="glowGradient"
x1="0"
y1="80"
x2="0"
y2="130"
gradientUnits="userSpaceOnUse"
>
<stop offset="0%" stop-color="#9c6ad5d4" stop-opacity="0.3" />
<stop offset="30%" stop-color="#9c6ad5d4" stop-opacity="0.2" />
<stop offset="60%" stop-color="#9c6ad5d4" stop-opacity="0.1" />
<stop offset="70%" stop-color="#9c6ad5d4" stop-opacity="0.1" />
<stop offset="80%" stop-color="#9c6ad5d4" stop-opacity="0.1" />
<stop offset="90%" stop-color="#9c6ad5d4" stop-opacity="0.1" />
<stop offset="100%" stop-color="#9c6ad5d4" stop-opacity="0" />
</linearGradient>
<defs>
<linearGradient id="glowGradient" x1="0" y1="70" x2="0" y2="130" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#addfff" stop-opacity="0.15" />
<stop offset="100%" stop-color="#addfff" stop-opacity="0" />
</linearGradient>
<clipPath id="glowClip">
<path
d="
M 30 70
Q 240 20 450 70
L 470 130
L 10 130
Z"
/>
</clipPath>
</defs>
<clipPath id="glowClip">
<path d="
M 30 70
Q 240 20 450 70
L 470 130
L 10 130
Z" />
</clipPath>
</defs>
<rect x="0" y="0" width="480" height="150"
fill="url(#glowGradient)"
clip-path="url(#glowClip)" />
</svg>
</div>
</section>
)
}
<rect
x="0"
y="0"
width="480"
height="600"
fill="url(#glowGradient)"
clip-path="url(#glowClip)"
/>
</svg>
</div>
</section>
);
};
Header.propTypes = {
children: PropTypes.node.isRequired
}
children: PropTypes.node.isRequired,
};
export default Header
\ No newline at end of file
export default Header;
src/components/Layout/Header/styles.module.css
......@@ -9,11 +9,12 @@
font-family: 'Poppins-Bold';
color: white;
font-size: 1rem;
padding-top: 1rem;
padding-top: 2rem;
/* background-color: #9c6ad5d4; */
}
.screenWrapper {
width: 80%;
width:70%;
}
@media screen and (min-width: 768px) {
......@@ -25,6 +26,6 @@
}
.screenWrapper {
width: 50%;
width: 25%;
}
}
\ No newline at end of file
src/components/Shared/Modal/Index.jsx
......@@ -28,15 +28,15 @@ const Modal = ({ onConfirm, onChange, variant, onOfSeats, onCancel }) => {
{variant == "confirm" && (
<>
<h2 className={styles["modal-title"]}>Confirm Your Selection</h2>
<p>
{/* <p>
You have selected <strong>{onOfSeats}</strong> seat
{onOfSeats !== 1 ? "s" : ""}.
</p>
</p> */}
<p>Please confirm to proceed with your booking.</p>
<div className={styles["btn-wrapper"]}>
<Button size={"sm"} onClick={onCancel}>
{/* <Button size={"sm"} onClick={onCancel}>
Cancel
</Button>
</Button> */}
<Button size={"sm"} onClick={onConfirm}>
Confirm
</Button>
......
src/components/TopLevel/LegendWrapper/styles.module.css
.LegendWrapper {
display: flex;
background-color: #3444c5;
height: 50px;
height: 70px;
right: 0;
left: 0;
gap: 1rem;
position: fixed;
bottom: 0;
justify-content: space-evenly;
justify-content: center;
}
@media screen and (min-width: 768px) {
.LegendWrapper {
gap: 4rem;
}
}
\ No newline at end of file
src/components/TopLevel/SeatBooking/Index.jsx
......@@ -16,7 +16,6 @@ const SeatBooking = () => {
const [selectedSeats, setSelectedSeats] = useState(); //persisted seats state
const [currentSeats, setCurrentSeats] = useState([]); // currently selecting seats before booking(local)
const [showSeatsModal, setShowSeatsModal] = useState(() =>
getItem(appConstants.MODAL)
);
......@@ -38,39 +37,25 @@ const SeatBooking = () => {
},
{
id: 1,
status: "reserved",
},
{
id: 2,
status: "available",
},
{
id: 3,
status: "reserved",
},
{
id: 4,
status: "available",
id: 0,
},
{
id: 0,
status: "aisle",
id: 4,
},
{
id: 5,
status: "available",
},
{
id: 6,
status: "reserved",
},
{
id: 7,
status: "available",
},
{
id: 8,
status: "reserved",
},
{
id: 0,
......@@ -98,31 +83,24 @@ const SeatBooking = () => {
status: "available",
},
{
id: 5,
status: "available",
},
{
id: 0,
status: "aisle",
},
{
id: 6,
status: "available",
},
{
id: 7,
id: 5,
status: "available",
},
{
id: 8,
id: 6,
status: "available",
},
{
id: 9,
id: 7,
status: "available",
},
{
id: 10,
id: 8,
status: "available",
},
],
......@@ -132,47 +110,31 @@ const SeatBooking = () => {
columnData: [
{
id: 1,
status: "available",
},
{
id: 2,
status: "available",
},
{
id: 3,
status: "available",
},
{
id: 4,
status: "available",
},
{
id: 5,
status: "available",
{
id: 0,
},
{
id: 0,
status: "aisle",
id: 5,
},
{
id: 6,
status: "available",
},
{
id: 7,
status: "available",
},
{
id: 8,
status: "available",
},
{
id: 9,
status: "available",
},
{
id: 10,
status: "available",
},
],
},
......@@ -181,47 +143,31 @@ const SeatBooking = () => {
columnData: [
{
id: 1,
status: "available",
},
{
id: 2,
status: "available",
},
{
id: 3,
status: "available",
},
{
id: 4,
status: "available",
},
{
id: 5,
status: "available",
{
id: 0,
},
{
id: 0,
status: "aisle",
id: 5,
},
{
id: 6,
status: "available",
},
{
id: 7,
status: "available",
},
{
id: 8,
status: "available",
},
{
id: 9,
status: "available",
},
{
id: 10,
status: "available",
},
],
},
......@@ -230,47 +176,31 @@ const SeatBooking = () => {
columnData: [
{
id: 1,
status: "available",
},
{
id: 2,
status: "available",
},
{
id: 3,
status: "available",
},
{
id: 4,
status: "available",
},
{
id: 5,
status: "available",
{
id: 0,
},
{
id: 0,
status: "aisle",
id: 5,
},
{
id: 6,
status: "available",
},
{
id: 7,
status: "available",
},
{
id: 8,
status: "available",
},
{
id: 9,
status: "available",
},
{
id: 10,
status: "available",
},
],
},
......@@ -279,145 +209,99 @@ const SeatBooking = () => {
columnData: [
{
id: 1,
status: "available",
},
{
id: 2,
status: "available",
},
{
id: 3,
status: "available",
},
{
id: 4,
status: "available",
},
{
id: 5,
status: "available",
{
id: 0,
},
{
id: 0,
status: "aisle",
id: 5,
},
{
id: 6,
status: "available",
},
{
id: 7,
status: "available",
},
{
id: 8,
status: "available",
},
{
id: 9,
status: "available",
},
{
id: 10,
status: "available",
},
],
},
{
row_id: 7,
columnData: [
columnData: [
{
id: 1,
status: "available",
},
{
id: 2,
status: "available",
},
{
id: 3,
status: "available",
},
{
id: 4,
status: "available",
},
{
id: 5,
status: "available",
{
id: 0,
},
{
id: 0,
status: "aisle",
id: 5,
},
{
id: 6,
status: "available",
},
{
id: 7,
status: "available",
},
{
id: 8,
status: "available",
},
{
id: 9,
status: "available",
},
{
id: 10,
status: "available",
},
],
},
{
row_id: 8,
columnData: [
columnData: [
{
id: 0,
status: "aisle",
},
{
id: 1,
status: "reserved",
},
{
id: 2,
status: "available",
},
{
id: 3,
status: "reserved",
},
{
id: 4,
status: "available",
id: 0,
},
{
id: 0,
status: "aisle",
id: 4,
},
{
id: 5,
status: "available",
},
{
id: 6,
status: "reserved",
},
{
id: 7,
status: "available",
},
{
id: 8,
status: "reserved",
},
{
id: 9,
status: "available",
id: 0,
status: "aisle",
},
],
},
......@@ -529,6 +413,7 @@ const SeatBooking = () => {
];
setCurrentSeats(mergedSeats);
console.log("CULPRIT")
} else {
if (current) {
setCurrentSeats([...currentSeats, ...current.selected]);
......@@ -593,7 +478,7 @@ const SeatBooking = () => {
onConfirm={seatsFinal}
onChange={onModalChange}
variant={"confirm"}
onOfSeats={currentSeats.length}
// onOfSeats={currentSeats.length}
onCancel={finalCancel}
/>
)}
......
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