Skip to content

S
seat-booking
Commit 58c584aa by Syed Abdul Rahman
Options

changes in layoutwrapper

parent b695a147
Showing with 262 additions and 53 deletions
db.json 0 → 100644
{
"users": [
{
"id": 1,
"email": "john@gmail.com"
},
{
"id": 2,
"email": "lucy@gmail.com"
},
{
"id": 3,
"email": "abdul@gmail.com"
}
]
}
\ No newline at end of file
src/components/Base/Button/styles.module.css
...@@ -14,6 +14,11 @@ ...@@ -14,6 +14,11 @@
} }
.button:hover{
background-color: rgba(161, 161, 245, 0.358);
color: white;
}
.sm { .sm {
padding: 0.5rem 1.5rem; padding: 0.5rem 1.5rem;
font-size: 12px; font-size: 12px;
...@@ -22,7 +27,7 @@ ...@@ -22,7 +27,7 @@
} }
.md { .md {
padding: 0.7rem 3rem; padding: 0.7rem 1.5rem;
font-size: 16px; font-size: 16px;
font-size: clamp(1rem, 2vw, 1.5rem); font-size: clamp(1rem, 2vw, 1.5rem);
...@@ -68,6 +73,10 @@ ...@@ -68,6 +73,10 @@
cursor: not-allowed; cursor: not-allowed;
} }
.disabled:hover{
background-color: rgba(168, 166, 166, 0.214);
}
@keyframes rotate { @keyframes rotate {
0% { 0% {
......
src/components/Base/Input/styles.module.css
...@@ -6,17 +6,18 @@ ...@@ -6,17 +6,18 @@
.label { .label {
font-family: 'Inter-Medium'; font-family: 'Inter-Medium';
font-size: clamp(1rem, 2vw, 1.5rem); font-size: clamp(0.8rem, 2vw, 1rem);
} }
.input { .input {
outline: none; outline: none;
padding: 3% 5%; padding: 2% 2%;
border-radius: 5px; border-radius: 5px;
width: 90%; width: 95%;
font-family: 'Inter-Medium'; font-family: 'Inter-Medium';
color: #000000db; color: #000000db;
font-size: clamp(1rem, 2vw, 1.5rem); font-size: clamp(0.8rem, 2vw, 1rem);
border: none;
outline: none;
} }
\ No newline at end of file
src/components/Base/Legend/Index.jsx
...@@ -11,7 +11,7 @@ const Legend = ({ children, type="available" }) => { ...@@ -11,7 +11,7 @@ const Legend = ({ children, type="available" }) => {
) )
} }
Legend.propTypes = { Legend.propTypes = {
children: PropTypes.node.isRequired, // children: PropTypes.node,
type: PropTypes.oneOf(["selected", "reserved", "available"]) type: PropTypes.oneOf(["selected", "reserved", "available"])
} }
export default Legend; export default Legend;
......
src/components/Base/Legend/Legend.stories.jsx
...@@ -28,7 +28,9 @@ const getStoryTitle = (type) => { ...@@ -28,7 +28,9 @@ const getStoryTitle = (type) => {
} }
export const Default = { export const Default = {
args:{
type: "available"
},
render: (args) => { render: (args) => {
return <Legend type={args.type}>{getStoryTitle(args.type)}</Legend> return <Legend type={args.type}>{getStoryTitle(args.type)}</Legend>
} }
......
src/components/Layout/BookingWrapper/BookingWrapper.stories.jsx
...@@ -5,11 +5,156 @@ export default { ...@@ -5,11 +5,156 @@ export default {
component: BookingWrapper, component: BookingWrapper,
argTypes: { argTypes: {
onSeatClick: { action: 'Seat clicked' }, onSeatClick: { action: 'Seat clicked' },
} }
} }
export const Default = { export const Default = {
args: { args: {
selectedSeats: [
{
userid: 1,
selected: [
{ row: 1, seat: 1 }, { row: 1, seat: 2 }
]
},
{
userid: 2,
selected: [
{ row: 2, seat: 1 }, { row: 2, seat: 2 }, { row: 5, seat: 1 }
]
}
],
seatData: [
{
row_id: 1,
columnData: [
{ id: 0, status: 'aisle' },
{ id: 1, status: 'reserved' },
{ id: 2, status: 'available' },
{ id: 3, status: 'reserved' },
{ id: 4, status: 'available' },
{ id: 0, status: 'aisle' },
{ id: 5, status: 'available' },
{ id: 6, status: 'reserved' },
{ id: 7, status: 'available' },
{ id: 8, status: 'reserved' },
{ id: 0, status: 'aisle' },
]
},
{
row_id: 2,
columnData: [
{ id: 1, status: 'available' },
{ id: 2, status: 'available' },
{ id: 3, status: 'available' },
{ id: 4, status: 'available' },
{ id: 5, status: 'available' },
{ id: 0, status: 'aisle' },
{ id: 6, status: 'available' },
{ id: 7, status: 'available' },
{ id: 8, status: 'available' },
{ id: 9, status: 'available' },
{ id: 10, status: 'available' },
]
},
{
row_id: 3,
columnData: [
{ id: 1, status: 'available' },
{ id: 2, status: 'available' },
{ id: 3, status: 'available' },
{ id: 4, status: 'available' },
{ id: 5, status: 'available' },
{ id: 0, status: 'aisle' },
{ id: 6, status: 'available' },
{ id: 7, status: 'available' },
{ id: 8, status: 'available' },
{ id: 9, status: 'available' },
{ id: 10, status: 'available' },
]
},
{
row_id: 4,
columnData: [
{ id: 1, status: 'available' },
{ id: 2, status: 'available' },
{ id: 3, status: 'available' },
{ id: 4, status: 'available' },
{ id: 5, status: 'available' },
{ id: 0, status: 'aisle' },
{ id: 6, status: 'available' },
{ id: 7, status: 'available' },
{ id: 8, status: 'available' },
{ id: 9, status: 'available' },
{ id: 10, status: 'available' },
]
},
{
row_id: 5,
columnData: [
{ id: 1, status: 'available' },
{ id: 2, status: 'available' },
{ id: 3, status: 'available' },
{ id: 4, status: 'available' },
{ id: 5, status: 'available' },
{ id: 0, status: 'aisle' },
{ id: 6, status: 'available' },
{ id: 7, status: 'available' },
{ id: 8, status: 'available' },
{ id: 9, status: 'available' },
{ id: 10, status: 'available' },
]
},
{
row_id: 6,
columnData: [
{ id: 1, status: 'available' },
{ id: 2, status: 'available' },
{ id: 3, status: 'available' },
{ id: 4, status: 'available' },
{ id: 5, status: 'available' },
{ id: 0, status: 'aisle' },
{ id: 6, status: 'available' },
{ id: 7, status: 'available' },
{ id: 8, status: 'available' },
{ id: 9, status: 'available' },
{ id: 10, status: 'available' },
]
},
{
row_id: 7,
columnData: [
{ id: 1, status: 'available' },
{ id: 2, status: 'available' },
{ id: 3, status: 'available' },
{ id: 4, status: 'available' },
{ id: 5, status: 'available' },
{ id: 0, status: 'aisle' },
{ id: 6, status: 'available' },
{ id: 7, status: 'available' },
{ id: 8, status: 'available' },
{ id: 9, status: 'available' },
{ id: 10, status: 'available' },
]
},
{
row_id: 8,
columnData: [
{ id: 0, status: 'aisle' },
{ id: 1, status: 'reserved' },
{ id: 2, status: 'available' },
{ id: 3, status: 'reserved' },
{ id: 4, status: 'available' },
{ id: 0, status: 'aisle' },
{ id: 5, status: 'available' },
{ id: 6, status: 'reserved' },
{ id: 7, status: 'available' },
{ id: 8, status: 'reserved' },
{ id: 9, status: 'available' },
]
},
]
} }
} }
\ No newline at end of file
src/components/Layout/BookingWrapper/Index.jsx
import styles from './styles.module.css'; import styles from './styles.module.css';
import Seat from './Seat'; import Seat from './Seat';
const BookingWrapper = ({ onSeatClick }) => {
const BookingWrapper = ({ onSeatClick, selectedSeats, seatData }) => {
const aisleIndex = 5; const aisleIndex = 5;
const seatData = [ const currentUser = 2;
{ id: 0, status: 'aisle' },
{ id: 1, status: 'reserved' },
{ id: 2, status: 'available' }, const selectedSeatMap = new Map();
{ id: 3, status: 'reserved' },
{ id: 4, status: 'available' },
{ id: 0, status: 'aisle' },
{ id: 5, status: 'available' },
{ id: 6, status: 'reserved' },
{ id: 7, status: 'available' },
{ id: 8, status: 'reserved' },
{ id: 9, status: 'available' },
];
selectedSeats?.forEach(user => {
user.selected.forEach(seat => {
const key = `${seat.row}-${seat.seat}`;
selectedSeatMap.set(key, user.userid);
});
});
const isLeftBlock = (col) => col < aisleIndex; const isLeftBlock = (col) => col < aisleIndex;
...@@ -26,24 +25,23 @@ const BookingWrapper = ({ onSeatClick }) => { ...@@ -26,24 +25,23 @@ const BookingWrapper = ({ onSeatClick }) => {
return ( return (
<div> <div>
<div className={styles['theatre']}> <div className={styles['theatre']}>
{Array.from({ length: 2 }, (_, row_index) => ( {seatData?.map((row, row_index) => (
<div className={styles['seat-row']}> <div className={styles['seat-row']}>
{seatData.map((ele, column_index) => { {row.columnData?.map((column, column_index) => {
const isFirstRow = row_index === 0; const isFirstRow = row_index === 0;
const isLastRow = row_index === 2 - 1; const isLastRow = row_index === seatData.length - 1;
if (isLeftBlock(column_index) && column_index === 0 && (isFirstRow || isLastRow)) { if (isLeftBlock(column_index) && column_index === 0 && (isFirstRow || isLastRow)) {
// return <div key={`gap-left-${row_index}-${column_index}`} className={styles["seat-gap"]} />; return <div key={`gap-left-${row_index}-${column_index}`} className={styles["seat-gap"]} />;
return <div className={styles['aisle']}></div>;
} }
if ( if (
isRightBlock(column_index) && isRightBlock(column_index) &&
column_index === seatData.length - 1 && column_index === row.columnData.length - 1 &&
(isFirstRow || isLastRow) (isFirstRow || isLastRow)
) { ) {
// return <div key={`gap-right-${row_index}-${row_index}`} className={styles["seat-gap"]} />; return <div key={`gap-right-${row_index}-${row_index}`} className={styles["seat-gap"]} />;
return <div className={styles['aisle']}></div>;
} }
if (column_index == aisleIndex) { if (column_index == aisleIndex) {
...@@ -51,8 +49,15 @@ const BookingWrapper = ({ onSeatClick }) => { ...@@ -51,8 +49,15 @@ const BookingWrapper = ({ onSeatClick }) => {
<div className={styles['aisle']}></div> <div className={styles['aisle']}></div>
) )
} }
const seatKey = `${row.row_id}-${column.id}`;
const selectedBy = selectedSeatMap.get(seatKey);
let seatClass = ``;
if (selectedBy) {
seatClass += selectedBy === currentUser ? 'selected-by-me' : 'selected-by-other';
}
return ( return (
<Seat status={ele.status} id={ele.id} onClick={() => onSeatClick(ele.id)} /> <Seat status={seatClass} id={column.id} onClick={() => onSeatClick(row.row_id, column.id)} />
) )
})} })}
</div> </div>
......
src/components/Layout/BookingWrapper/Seat.jsx
...@@ -2,15 +2,15 @@ import styles from './styles.module.css' ...@@ -2,15 +2,15 @@ import styles from './styles.module.css'
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
const Seat = ({ id,status, ...rest }) => { const Seat = ({ id,status, ...rest }) => {
console.log(status, "status")
return ( return (
<div {...rest} className={` ${styles[status]} ${styles.seat} `}>{id}</div> <div {...rest} className={` ${styles[status]} ${styles.seat} `}></div>
) )
} }
Seat.propTypes = { Seat.propTypes = {
onClick: PropTypes.func.isRequired, onClick: PropTypes.func.isRequired,
status: PropTypes.oneOf(['available', 'reserved', 'selected']) // status: PropTypes.oneOf(['available', 'reserved', 'selected'])
} }
export default Seat; export default Seat;
\ No newline at end of file
src/components/Layout/BookingWrapper/Seat.stories.jsx
...@@ -9,7 +9,7 @@ export default { ...@@ -9,7 +9,7 @@ export default {
control: { type: 'select' }, control: { type: 'select' },
options: ['available', 'reserved', 'selected'], options: ['available', 'reserved', 'selected'],
}, },
onClick: {action: "clicked"} , // onClick: {action: "clicked"} ,
}, },
}; };
......
src/components/Layout/BookingWrapper/styles.module.css
.seat { .seat {
width: 20px; width: 1.2em;
height: 20px; height: 1.2em;
border: .5px solid rgba(255, 255, 255, 0.603); border: .5px solid rgba(255, 255, 255, 0.603);
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
...@@ -49,13 +49,22 @@ ...@@ -49,13 +49,22 @@
visibility: hidden; visibility: hidden;
} }
.selected-by-me {
background-color: aqua !important; /* your color */
border: unset;
}
.selected-by-other {
background-color: #bec0c26d !important; /* another color */
}
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.seat { .seat {
width: 40px; width: 2em;
height: 40px; height: 2em;
} }
.aisle { .aisle {
...@@ -63,8 +72,8 @@ ...@@ -63,8 +72,8 @@
} }
.seat-gap { .seat-gap {
width: 40px; width: 30px;
height: 40px; height: 30px;
} }
......
src/components/Layout/Header/Index.jsx
...@@ -9,7 +9,7 @@ const Header = ({ children }) => { ...@@ -9,7 +9,7 @@ const Header = ({ children }) => {
{children} {children}
</div> </div>
<div className={styles.screenWrapper}> <div className={styles.screenWrapper}>
<svg viewBox="0 0 480 260" xmlns="http://www.w3.org/2000/svg"> {/* <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" /> <path d="M 30 70 Q 240 20 450 70" stroke="white" stroke-width="5" fill="none" />
<defs> <defs>
<linearGradient id="glowGradient" x1="0" y1="70" x2="0" y2="180" gradientUnits="userSpaceOnUse"> <linearGradient id="glowGradient" x1="0" y1="70" x2="0" y2="180" gradientUnits="userSpaceOnUse">
...@@ -28,6 +28,29 @@ const Header = ({ children }) => { ...@@ -28,6 +28,29 @@ const Header = ({ children }) => {
<rect x="0" y="0" width="480" height="260" <rect x="0" y="0" width="480" height="260"
fill="url(#glowGradient)" fill="url(#glowGradient)"
clip-path="url(#glowClip)" /> clip-path="url(#glowClip)" />
</svg> */}
<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="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>
<rect x="0" y="0" width="480" height="260"
fill="url(#glowGradient)"
clip-path="url(#glowClip)" />
</svg> </svg>
</div> </div>
</section> </section>
......
src/components/Layout/Header/styles.module.css
...@@ -2,9 +2,7 @@ ...@@ -2,9 +2,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
/* justify-content: center; */
width: 100%; width: 100%;
/* outline: 2px solid red; */
} }
.title { .title {
......
src/components/TopLevel/Login/Index.jsx
...@@ -22,13 +22,12 @@ const Login = () => { ...@@ -22,13 +22,12 @@ const Login = () => {
name="email" name="email"
type="email" type="email"
/> />
{/* <br /> */} {/* <Input
<Input
label="Password" label="Password"
name="email" name="email"
type="password" type="password"
/> /> */}
<Button size={"md"}>Confirm</Button> <Button size={"sm"}>Confirm</Button>
</form> </form>
</section> </section>
</div> </div>
......
src/components/TopLevel/Login/styles.module.css
...@@ -31,9 +31,6 @@ ...@@ -31,9 +31,6 @@
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
border-radius: 10px; border-radius: 10px;
padding: 3% 5% ; padding: 3% 5% ;
max-height: 70%;
max-width: 70%;
min-height: max(550px, 30vh);
box-sizing: border-box; box-sizing: border-box;
z-index: 1; z-index: 1;
color: white; color: white;
...@@ -55,7 +52,7 @@ ...@@ -55,7 +52,7 @@
.title { .title {
font-family: 'Inter-Medium'; font-family: 'Inter-Medium';
font-size: clamp(1rem,2vw,3rem); font-size: clamp(1rem,2vw,2rem);
color: #f1f1f1c4; color: #f1f1f1c4;
padding: 1% 0; padding: 1% 0;
} }
...@@ -64,7 +61,7 @@ ...@@ -64,7 +61,7 @@
font-family: 'Inter-Medium'; font-family: 'Inter-Medium';
font-size: 16px; font-size: 16px;
color: #bdbcbc97; color: #bdbcbc97;
font-size: clamp(0.5rem,3vw,1.5rem); font-size: clamp(0.5rem,3vw,1rem);
padding: 1% 0; padding: 1% 0;
} }
......
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