Skip to content

S
seat-booking
Commit 1ebb4626 by Syed Abdul Rahman
Options

Impemented remove seats in json-server

parent 33d00106
Showing with 357 additions and 423 deletions
db.json
...@@ -23,74 +23,21 @@ ...@@ -23,74 +23,21 @@
{ {
"id": "a6af", "id": "a6af",
"email": "testing@gmail.com" "email": "testing@gmail.com"
},
{
"id": "7fdf",
"email": "test@gmail.com"
},
{
"id": "a9b6",
"email": "new@gmail.com"
} }
], ],
"selectedSeats": [ "selectedSeats": [
{ {
"id": "a6af", "id": "1ad9",
"userid": "a6af", "userid": "1ad9",
"selected": [ "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,
"seat": 3
},
{
"row": 8,
"seat": 2
},
{
"row": 8,
"seat": 3
},
{
"row": 8,
"seat": 4
},
{
"row": 8,
"seat": 2
},
{
"row": 8,
"seat": 2
},
{
"row": 8,
"seat": 3
},
{
"row": 8,
"seat": 4
}
]
} }
] ]
} }
\ No newline at end of file
src/components/Layout/BookingWrapper/Index.jsx
...@@ -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)} />
) )
......
src/components/Layout/BookingWrapper/styles.module.css
...@@ -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;
} }
......
src/components/Shared/Modal/Index.jsx
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;
\ No newline at end of file
src/components/Shared/Modal/styles.module.css
...@@ -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';
......
src/components/TopLevel/SeatBooking/Index.jsx
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import BookingWrapper from '../../Layout/BookingWrapper/Index'; import BookingWrapper from "../../Layout/BookingWrapper/Index";
import Header from '../../Layout/Header/Index' import Header from "../../Layout/Header/Index";
import Modal from '../../Shared/Modal/Index'; import Modal from "../../Shared/Modal/Index";
import img from '../../../assets/images/power-button_12080802.png' import img from "../../../assets/images/power-button_12080802.png";
import Button from '../../Base/Button/Index'; import Button from "../../Base/Button/Index";
import LegendWrapper from '../LegendWrapper/Index'; import LegendWrapper from "../LegendWrapper/Index";
import { getItem, reset, setItem } from '../../../utils/localStorage'; import { getItem, reset, setItem } from "../../../utils/localStorage";
import styles from './styles.module.css'; import styles from "./styles.module.css";
import { useNavigate } from 'react-router-dom'; import { useNavigate } from "react-router-dom";
import { appConstants } from '../../../utils/AppConstants'; import { appConstants } from "../../../utils/AppConstants";
const SeatBooking = () => { const SeatBooking = () => {
let userId = getItem("user"); let userId = getItem(appConstants.USER);
const navigate = useNavigate(); const navigate = useNavigate();
const [selectedSeats, setSelectedSeats] = useState(); //persisted seats state const [selectedSeats, setSelectedSeats] = useState(); //persisted seats state
const [showSeatsModal, setShowSeatsModal] = useState(() => getItem("modal")); const [currentSeats, setCurrentSeats] = useState([]); // currently selecting seats before booking(local)
const [showSeatsModal, setShowSeatsModal] = useState(() => getItem(appConstants.MODAL));
const [showSeatsConfirmationModal, setShowSeatsConfirmationModal] = useState(false); const [showSeatsConfirmationModal, setShowSeatsConfirmationModal] = useState(false);
const [onOfSeats, setNoOfSeats] = useState(); const [onOfSeats, setNoOfSeats] = useState();
const [currentSeats, setCurrentSeats] = useState([]) // currently selecting seats before booking(local)
useEffect(() => { useEffect(() => {
getSelectedSeats(); getSelectedSeats();
}, []) }, []);
const data = [ const data = [
{ {
"row_id": 1, row_id: 1,
"columnData": [ columnData: [
{ {
"id": 0, id: 0,
"status": "aisle" status: "aisle",
}, },
{ {
"id": 1, id: 1,
"status": "reserved" status: "reserved",
}, },
{ {
"id": 2, id: 2,
"status": "available" status: "available",
}, },
{ {
"id": 3, id: 3,
"status": "reserved" status: "reserved",
}, },
{ {
"id": 4, id: 4,
"status": "available" status: "available",
}, },
{ {
"id": 0, id: 0,
"status": "aisle" status: "aisle",
}, },
{ {
"id": 5, id: 5,
"status": "available" status: "available",
}, },
{ {
"id": 6, id: 6,
"status": "reserved" status: "reserved",
}, },
{ {
"id": 7, id: 7,
"status": "available" status: "available",
}, },
{ {
"id": 8, id: 8,
"status": "reserved" status: "reserved",
}, },
{ {
"id": 0, id: 0,
"status": "aisle" status: "aisle",
} },
] ],
}, },
{ {
"row_id": 2, row_id: 2,
"columnData": [ columnData: [
{ {
"id": 1, id: 1,
"status": "available" status: "available",
}, },
{ {
"id": 2, id: 2,
"status": "available" status: "available",
}, },
{ {
"id": 3, id: 3,
"status": "available" status: "available",
}, },
{ {
"id": 4, id: 4,
"status": "available" status: "available",
}, },
{ {
"id": 5, id: 5,
"status": "available" status: "available",
}, },
{ {
"id": 0, id: 0,
"status": "aisle" status: "aisle",
}, },
{ {
"id": 6, id: 6,
"status": "available" status: "available",
}, },
{ {
"id": 7, id: 7,
"status": "available" status: "available",
}, },
{ {
"id": 8, id: 8,
"status": "available" status: "available",
}, },
{ {
"id": 9, id: 9,
"status": "available" status: "available",
}, },
{ {
"id": 10, id: 10,
"status": "available" status: "available",
} },
] ],
}, },
{ {
"row_id": 3, row_id: 3,
"columnData": [ columnData: [
{ {
"id": 1, id: 1,
"status": "available" status: "available",
}, },
{ {
"id": 2, id: 2,
"status": "available" status: "available",
}, },
{ {
"id": 3, id: 3,
"status": "available" status: "available",
}, },
{ {
"id": 4, id: 4,
"status": "available" status: "available",
}, },
{ {
"id": 5, id: 5,
"status": "available" status: "available",
}, },
{ {
"id": 0, id: 0,
"status": "aisle" status: "aisle",
}, },
{ {
"id": 6, id: 6,
"status": "available" status: "available",
}, },
{ {
"id": 7, id: 7,
"status": "available" status: "available",
}, },
{ {
"id": 8, id: 8,
"status": "available" status: "available",
}, },
{ {
"id": 9, id: 9,
"status": "available" status: "available",
}, },
{ {
"id": 10, id: 10,
"status": "available" status: "available",
} },
] ],
}, },
{ {
"row_id": 4, row_id: 4,
"columnData": [ columnData: [
{ {
"id": 1, id: 1,
"status": "available" status: "available",
}, },
{ {
"id": 2, id: 2,
"status": "available" status: "available",
}, },
{ {
"id": 3, id: 3,
"status": "available" status: "available",
}, },
{ {
"id": 4, id: 4,
"status": "available" status: "available",
}, },
{ {
"id": 5, id: 5,
"status": "available" status: "available",
}, },
{ {
"id": 0, id: 0,
"status": "aisle" status: "aisle",
}, },
{ {
"id": 6, id: 6,
"status": "available" status: "available",
}, },
{ {
"id": 7, id: 7,
"status": "available" status: "available",
}, },
{ {
"id": 8, id: 8,
"status": "available" status: "available",
}, },
{ {
"id": 9, id: 9,
"status": "available" status: "available",
}, },
{ {
"id": 10, id: 10,
"status": "available" status: "available",
} },
] ],
}, },
{ {
"row_id": 5, row_id: 5,
"columnData": [ columnData: [
{ {
"id": 1, id: 1,
"status": "available" status: "available",
}, },
{ {
"id": 2, id: 2,
"status": "available" status: "available",
}, },
{ {
"id": 3, id: 3,
"status": "available" status: "available",
}, },
{ {
"id": 4, id: 4,
"status": "available" status: "available",
}, },
{ {
"id": 5, id: 5,
"status": "available" status: "available",
}, },
{ {
"id": 0, id: 0,
"status": "aisle" status: "aisle",
}, },
{ {
"id": 6, id: 6,
"status": "available" status: "available",
}, },
{ {
"id": 7, id: 7,
"status": "available" status: "available",
}, },
{ {
"id": 8, id: 8,
"status": "available" status: "available",
}, },
{ {
"id": 9, id: 9,
"status": "available" status: "available",
}, },
{ {
"id": 10, id: 10,
"status": "available" status: "available",
} },
] ],
}, },
{ {
"row_id": 6, row_id: 6,
"columnData": [ columnData: [
{ {
"id": 1, id: 1,
"status": "available" status: "available",
}, },
{ {
"id": 2, id: 2,
"status": "available" status: "available",
}, },
{ {
"id": 3, id: 3,
"status": "available" status: "available",
}, },
{ {
"id": 4, id: 4,
"status": "available" status: "available",
}, },
{ {
"id": 5, id: 5,
"status": "available" status: "available",
}, },
{ {
"id": 0, id: 0,
"status": "aisle" status: "aisle",
}, },
{ {
"id": 6, id: 6,
"status": "available" status: "available",
}, },
{ {
"id": 7, id: 7,
"status": "available" status: "available",
}, },
{ {
"id": 8, id: 8,
"status": "available" status: "available",
}, },
{ {
"id": 9, id: 9,
"status": "available" status: "available",
}, },
{ {
"id": 10, id: 10,
"status": "available" status: "available",
} },
] ],
}, },
{ {
"row_id": 7, row_id: 7,
"columnData": [ columnData: [
{ {
"id": 1, id: 1,
"status": "available" status: "available",
}, },
{ {
"id": 2, id: 2,
"status": "available" status: "available",
}, },
{ {
"id": 3, id: 3,
"status": "available" status: "available",
}, },
{ {
"id": 4, id: 4,
"status": "available" status: "available",
}, },
{ {
"id": 5, id: 5,
"status": "available" status: "available",
}, },
{ {
"id": 0, id: 0,
"status": "aisle" status: "aisle",
}, },
{ {
"id": 6, id: 6,
"status": "available" status: "available",
}, },
{ {
"id": 7, id: 7,
"status": "available" status: "available",
}, },
{ {
"id": 8, id: 8,
"status": "available" status: "available",
}, },
{ {
"id": 9, id: 9,
"status": "available" status: "available",
}, },
{ {
"id": 10, id: 10,
"status": "available" status: "available",
} },
] ],
}, },
{ {
"row_id": 8, row_id: 8,
"columnData": [ columnData: [
{ {
"id": 0, id: 0,
"status": "aisle" status: "aisle",
}, },
{ {
"id": 1, id: 1,
"status": "reserved" status: "reserved",
}, },
{ {
"id": 2, id: 2,
"status": "available" status: "available",
}, },
{ {
"id": 3, id: 3,
"status": "reserved" status: "reserved",
}, },
{ {
"id": 4, id: 4,
"status": "available" status: "available",
}, },
{ {
"id": 0, id: 0,
"status": "aisle" status: "aisle",
}, },
{ {
"id": 5, id: 5,
"status": "available" status: "available",
}, },
{ {
"id": 6, id: 6,
"status": "reserved" status: "reserved",
}, },
{ {
"id": 7, id: 7,
"status": "available" status: "available",
}, },
{ {
"id": 8, id: 8,
"status": "reserved" status: "reserved",
}, },
{ {
"id": 9, id: 9,
"status": "available" status: "available",
} },
] ],
} },
] ];
const getSelectedSeats = async () => { const getSelectedSeats = async () => {
const response = await fetch(`${appConstants.API_URL_SEATS}`); const response = await fetch(`${appConstants.API_URL_SEATS}`);
const data = await response.json(); const data = await response.json();
setSelectedSeats(data); setSelectedSeats(data);
} };
const editSeatsApi = async (
id,
body,
newRequest
) => {
const editSeatsApi = async (id, body, newRequest) => {
try { try {
const row = newRequest.row;
const column = newRequest.seat;
const current = selectedSeats.find((ele) => ele.userid == userId); const current = selectedSeats.find((ele) => ele.userid == userId);
const found = current.selected.find((e) => e.row == newRequest.row && e.seat == newRequest.seat); const found = current.selected.some((e) =>
newRequest.some((e2) => e2.row == e.row && e2.seat == e.seat)
);
if (found) { if (found) {
let newSelected = current.selected.filter((e) => !(e.row === row && e.seat == column)); let newSelected = current.selected.filter(
const res = await fetch(`${appConstants.API_URL_SEATS}/${id}`, (e) => !newRequest.some((e2) => e2.row == e.row && e2.seat == e.seat)
{ );
method: "PATCH", const res = await fetch(`${appConstants.API_URL_SEATS}/${id}`, {
headers: { method: "PATCH",
'Content-Type': 'application/json' headers: {
}, "Content-Type": "application/json",
body: JSON.stringify({ selected: newSelected }) },
}); body: JSON.stringify({ selected: newSelected }),
});
getSelectedSeats(); getSelectedSeats();
return; return newSelected;
} }
await fetch(`${appConstants.API_URL_SEATS}/${id}`, { await fetch(`${appConstants.API_URL_SEATS}/${id}`, {
method: "PATCH", method: "PATCH",
headers: { headers: {
'Content-Type': 'application/json' "Content-Type": "application/json",
}, },
body: JSON.stringify({ selected: body }) body: JSON.stringify({ selected: body }),
}); });
getSelectedSeats(); getSelectedSeats();
setCurrentSeats([]) setCurrentSeats([]);
} catch (error) { } catch (error) {
console.log(error, "error") console.log(error, "error");
} }
};
}
const createSeatApi = async (body) => { const createSeatApi = async (body) => {
await fetch(`${appConstants.API_URL_SEATS}`, { await fetch(`${appConstants.API_URL_SEATS}`, {
method: "POST", method: "POST",
headers: { headers: {
'Content-Type': 'application/json' "Content-Type": "application/json",
}, },
body: JSON.stringify(body) body: JSON.stringify(body),
}); });
getSelectedSeats(); getSelectedSeats();
} };
const onSelectSeats = (rowId, columnId) => { const onSelectSeats = (rowId, columnId) => {
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(e => !(e.row == rowId && e.seat == columnId)) return currentSeats.filter(
(e) => !(e.row == rowId && e.seat == columnId)
);
} else { } else {
let obj = { let obj = {
row: rowId, row: rowId,
seat: columnId seat: columnId,
} };
return [...prev, obj] return [...prev, obj];
} }
}); });
};
// let info = {
// id: userId,
// userid: userId,
// selected: [
// {
// row: rowId,
// seat: columnId
// }
// ]
// }
// const existingUserSeatMap = selectedSeats?.find((ele) => ele.id == userId);
// if (existingUserSeatMap) {
// editSeatsApi(
// existingUserSeatMap.userid,
// [...info.selected, ...existingUserSeatMap.selected],
// {
// row: rowId,
// seat: columnId
// }
// );
// } else {
// createSeatApi(info);
// }
}
const logout = () => { const logout = () => {
reset(); reset();
navigate("/login"); navigate("/login");
} };
const onModalChange = (value) => { const onModalChange = (value) => {
setNoOfSeats(value); setNoOfSeats(value);
} };
const modalClose = () => { const modalClose = () => {
setItem("modal", false); setItem("modal", false);
setShowSeatsModal(false) setShowSeatsModal(false);
} };
const onSeatsConfirm = () => { const onSeatsConfirm = () => {
setShowSeatsConfirmationModal(true) setShowSeatsConfirmationModal(true);
} };
const seatsFinal = () => {
const seatsFinal = async() => {
setShowSeatsConfirmationModal(false); setShowSeatsConfirmationModal(false);
const existingUserSeatMap = selectedSeats?.find((ele) => ele.id == userId); const existingUserSeatMap = selectedSeats?.find((ele) => ele.id == userId);
if (existingUserSeatMap) { if (existingUserSeatMap) {
editSeatsApi( const data = await editSeatsApi(
existingUserSeatMap.userid, existingUserSeatMap.userid,
[...currentSeats, ...existingUserSeatMap.selected], [...currentSeats, ...existingUserSeatMap.selected],
{ currentSeats
row: 0,
seat: 0
}
); );
console.log(data, "data")
} else { } else {
let info = { let info = {
id: userId, id: userId,
userid: userId, userid: userId,
selected: currentSeats selected: currentSeats,
} };
createSeatApi(info); createSeatApi(info);
} }
} };
return ( return (
<div className={styles['seat-booking-wrapper']}> <div className={styles["seat-booking-wrapper"]}>
<img <img
src={img} src={img}
className={styles['logout']} className={styles["logout"]}
width={30} width={30}
onClick={() => logout()} onClick={() => logout()}
/> />
<div> <div>
<Header>Choose Seats</Header> <Header>Choose Seats</Header>
</div> </div>
<div> <div>
<BookingWrapper <BookingWrapper
...@@ -580,26 +549,20 @@ const SeatBooking = () => { ...@@ -580,26 +549,20 @@ const SeatBooking = () => {
currentSeats={currentSeats} currentSeats={currentSeats}
/> />
</div> </div>
<div className={styles['btn-wrapper']}> <div className={styles["btn-wrapper"]}>
<Button size={"md"} onClick={onSeatsConfirm}>Confirm</Button> <Button size={"md"} onClick={onSeatsConfirm}>
Confirm
</Button>
</div> </div>
<LegendWrapper /> <LegendWrapper />
{showSeatsModal {showSeatsModal && (
&& <Modal onConfirm={modalClose} onChange={onModalChange} variant="input"/>
<Modal )}
onConfirm={modalClose} {showSeatsConfirmationModal && (
onChange={onModalChange} <Modal onConfirm={seatsFinal} onChange={onModalChange} variant={'confirm'} onOfSeats={currentSeats.length}/>
/> )}
}
{showSeatsConfirmationModal
&&
<Modal
onConfirm={seatsFinal}
onChange={onModalChange}
/>
}
</div> </div>
) );
} };
export default SeatBooking; export default SeatBooking;
\ No newline at end of file
src/components/TopLevel/SeatBooking/styles.module.css
...@@ -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
src/utils/AppConstants.js
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