Commit 479e16af by Syed Abdul Rahman

seat booking functionality completed

parent 0978e293
...@@ -16,16 +16,102 @@ ...@@ -16,16 +16,102 @@
"selectionCount": "3" "selectionCount": "3"
}, },
{ {
"id": "92dd", "id": "d17b",
"email": "", "email": "test@gmail.com",
"selectionCount": "3" "selectionCount": "3"
},
{
"id": "84ca",
"email": "anas@krds.fr",
"selectionCount": "22"
} }
], ],
"selectedSeats": [ "selectedSeats": [
{ {
"id": "8329", "id": "8329",
"userid": "8329", "userid": "8329",
"selected": [] "selected": [
{
"row": 8,
"seat": 2
},
{
"row": 8,
"seat": 3
},
{
"row": 7,
"seat": 1
}
]
},
{
"id": "3450",
"userid": "3450",
"selected": [
{
"row": 7,
"seat": 7
},
{
"row": 7,
"seat": 8
},
{
"row": 1,
"seat": 6
},
{
"row": 1,
"seat": 5
}
]
},
{
"id": "06b5",
"userid": "06b5",
"selected": [
{
"row": 8,
"seat": 5
},
{
"row": 8,
"seat": 4
},
{
"row": 8,
"seat": 6
}
]
},
{
"id": "d17b",
"userid": "d17b",
"selected": [
{
"row": 1,
"seat": 2
},
{
"row": 1,
"seat": 1
},
{
"row": 1,
"seat": 3
}
]
},
{
"id": "4d39",
"userid": "4d39",
"selected": [
{
"row": 2,
"seat": 5
}
]
} }
] ]
} }
\ No newline at end of file
File added
...@@ -8,6 +8,7 @@ const BookingWrapper = ({ ...@@ -8,6 +8,7 @@ const BookingWrapper = ({
seatData, seatData,
currentSeats currentSeats
}) => { }) => {
console.log(currentSeats, 'currentSeats in CHILD');
const aisleIndex = 4; const aisleIndex = 4;
let currentUser = getItem('user'); let currentUser = getItem('user');
const selectedSeatMap = new Map(); const selectedSeatMap = new Map();
...@@ -21,7 +22,6 @@ const BookingWrapper = ({ ...@@ -21,7 +22,6 @@ const BookingWrapper = ({
const isLeftBlock = (col) => col < aisleIndex; const isLeftBlock = (col) => col < aisleIndex;
const isRightBlock = (col) => col > aisleIndex; const isRightBlock = (col) => col > aisleIndex;
return ( return (
<div className={styles['booking-wrapper']}> <div className={styles['booking-wrapper']}>
<div className={styles['theatre']}> <div className={styles['theatre']}>
...@@ -71,16 +71,8 @@ const BookingWrapper = ({ ...@@ -71,16 +71,8 @@ const BookingWrapper = ({
seatClass += 'current-selected'; seatClass += 'current-selected';
} else { } else {
if (selectedBy) { if (selectedBy) {
console.log(
selectedBy == currentUser,
selectedBy,
currentUser,
'FINAL'
);
seatClass += seatClass +=
selectedBy == currentUser selectedBy == currentUser ? '' : 'selected-by-other';
? 'selected-by-me'
: 'selected-by-other';
} }
} }
......
...@@ -26,7 +26,6 @@ const BookingPage = () => { ...@@ -26,7 +26,6 @@ const BookingPage = () => {
const [showSeatsModal, setShowSeatsModal] = useState( const [showSeatsModal, setShowSeatsModal] = useState(
getItem(appConstants.MODAL) getItem(appConstants.MODAL)
); );
const [showSeatsConfirmationModal, setShowSeatsConfirmationModal] = const [showSeatsConfirmationModal, setShowSeatsConfirmationModal] =
useState(false); useState(false);
const [noOfSeats, setNoOfSeats] = useState(); const [noOfSeats, setNoOfSeats] = useState();
...@@ -34,9 +33,10 @@ const BookingPage = () => { ...@@ -34,9 +33,10 @@ const BookingPage = () => {
useEffect(() => { useEffect(() => {
const fetchSelectedSeats = async () => { const fetchSelectedSeats = async () => {
const data = await getSelectedSeatsApi(); const data = await getSelectedSeatsApi();
const currentData = data.find((e) => e.userid == userId); const currentData = data?.find((e) => e.userid == userId);
setSelectedSeats(data); setSelectedSeats(data);
setCurrentSeats(currentData.selected); setCurrentSeats(currentData?.selected);
console.log(data, 'currentSeats & selectedSeats', currentSeats.length);
}; };
const fetchSeatSelectionCount = async () => { const fetchSeatSelectionCount = async () => {
const data = await getSeatSelectionCountApi(userId); const data = await getSeatSelectionCountApi(userId);
...@@ -364,59 +364,28 @@ const BookingPage = () => { ...@@ -364,59 +364,28 @@ const BookingPage = () => {
}; };
const onSelectSeats = (rowId, columnId) => { const onSelectSeats = (rowId, columnId) => {
const currentData = data.find((e) => e.userid == userId);
const currentSelected = currentData.selected;
let totalAllowedCount = currentSelected.length + currentSeats.length;
setCurrentSeats((prev) => { setCurrentSeats((prev) => {
const found = prev.find((e) => e.row == rowId && e.seat == columnId); const found = prev?.find((e) => e.row == rowId && e.seat == columnId);
if (found) { if (found) {
return currentSeats.filter( return currentSeats.filter(
(e) => !(e.row == rowId && e.seat == columnId) (e) => !(e.row == rowId && e.seat == columnId)
); );
} else { } else {
if (totalAllowedCount < noOfSeats) { if (currentSeats?.length < noOfSeats) {
if (currentSeats.length < noOfSeats) {
let obj = { let obj = {
row: rowId, row: rowId,
seat: columnId seat: columnId
}; };
return [...prev, obj]; return [...prev, obj];
} else { } else {
return [...prev]; return prev ? [...prev] : [];
}
} }
} }
}); });
}; };
const onSeatsConfirm = () => { const onSeatsConfirm = () => {
const current = selectedSeats?.find((ele) => ele.userid == userId);
const found = current?.selected.some((e) =>
currentSeats.some((e2) => e2.row == e.row && e2.seat == e.seat)
);
if (found) {
const mergedSeats = [
...currentSeats.filter(
(cs) =>
!current?.selected.some(
(ss) => ss.row === cs.row && ss.seat === cs.seat
)
),
...current?.selected.filter(
(ss) =>
!currentSeats.some((cs) => cs.row === ss.row && cs.seat === ss.seat)
)
];
setCurrentSeats(mergedSeats);
} else {
if (current) {
setCurrentSeats([...currentSeats, ...current.selected]);
} else {
setCurrentSeats([...currentSeats]); setCurrentSeats([...currentSeats]);
}
}
setShowSeatsConfirmationModal(true); setShowSeatsConfirmationModal(true);
}; };
...@@ -440,7 +409,6 @@ const BookingPage = () => { ...@@ -440,7 +409,6 @@ const BookingPage = () => {
fetchData(); fetchData();
setShowSeatsConfirmationModal(false); setShowSeatsConfirmationModal(false);
}; };
console.log(currentSeats, 'currentSeats');
return ( return (
<div className={styles['seat-booking-wrapper']}> <div className={styles['seat-booking-wrapper']}>
<img <img
...@@ -462,7 +430,7 @@ const BookingPage = () => { ...@@ -462,7 +430,7 @@ const BookingPage = () => {
<Button <Button
size={'lg'} size={'lg'}
onClick={onSeatsConfirm} onClick={onSeatsConfirm}
disabled={currentSeats.length > 0 ? false : true}> disabled={currentSeats?.length == noOfSeats ? true : false}>
Confirm Confirm
</Button> </Button>
</div> </div>
......
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