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 @@
{
"id": "a6af",
"email": "testing@gmail.com"
},
{
"id": "7fdf",
"email": "test@gmail.com"
},
{
"id": "a9b6",
"email": "new@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,
"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
}
]
"id": "1ad9",
"userid": "1ad9",
"selected": []
}
]
}
\ No newline at end of file
src/components/Layout/BookingWrapper/Index.jsx
......@@ -61,7 +61,6 @@ const BookingWrapper = ({ onSeatClick, selectedSeats, seatData, currentSeats })
seatClass += selectedBy == currentUser ? 'selected-by-me' : 'selected-by-other';
}
console.log(seatClass, "SeatCLaskk")
return (
<Seat status={seatClass} id={column.id} onClick={() => onSeatClick(row.row_id, column.id)} />
)
......
src/components/Layout/BookingWrapper/styles.module.css
......@@ -6,8 +6,6 @@
cursor: pointer;
}
.seat:hover {
background-color: aqua;
}
......@@ -22,7 +20,6 @@
background-color: aqua;
}
.theatre {
display: flex;
justify-content: center;
......@@ -59,6 +56,7 @@
.selected-by-other {
background-color: #bec0c26d !important;
pointer-events: none;
}
.booking-wrapper{
......@@ -66,8 +64,6 @@
overflow: auto;
}
@media screen and (min-width: 768px) {
.seat {
......@@ -84,7 +80,6 @@
height: 2em;
}
.seat-row {
gap: 15px;
}
......
src/components/Shared/Modal/Index.jsx
import Input from '../../Base/Input/Index';
import Button from '../../Base/Button/Index'
import styles from './styles.module.css';
import Input from "../../Base/Input/Index";
import Button from "../../Base/Button/Index";
import styles from "./styles.module.css";
const Modal = ({onConfirm, onChange}) => {
return (
<div className={styles["overlay-container"]}>
<div className={styles['modal-dialog']} role="dialog" aria-modal="true" >
<h2 className={styles['modal-title']}>Select Your Seats</h2>
const Modal = ({ onConfirm, onChange, variant, onOfSeats }) => {
return (
<div className={styles["overlay-container"]}>
<div className={styles["modal-dialog"]} role="dialog" aria-modal="true">
{variant == "input" && (
<>
<h2 className={styles["modal-title"]}>Select Your Seats</h2>
<p>Please choose how many seats you'd like to book.</p>
<Input
label={"Number of Seats"}
placeholder='Enter number of seats'
type='number'
max='10'
min='1'
onChange={(e) => onChange(e.target.value)}
label={"Number of Seats"}
placeholder="Enter number of seats"
type="number"
max="10"
min="1"
onChange={(e) => onChange(e.target.value)}
/>
<div className={styles['btn-wrapper']}>
<Button size={'sm'} onClick={onConfirm}>Confirm</Button>
<div className={`${styles["btn-wrapper"]} ${styles["flex-direction"]}`}>
<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>
);
};
export default Modal;
\ No newline at end of file
export default Modal;
src/components/Shared/Modal/styles.module.css
......@@ -23,10 +23,13 @@
.btn-wrapper {
display: flex;
/* justify-content: flex-end; */
flex-direction: column;
justify-content: flex-end;
gap: 1rem;
margin: 1rem 0;
}
.flex-direction{
flex-direction: column;
}
.modal-title {
font-family: 'Poppins-Medium';
......
src/components/TopLevel/SeatBooking/Index.jsx
import { useEffect, useState } from 'react';
import BookingWrapper from '../../Layout/BookingWrapper/Index';
import Header from '../../Layout/Header/Index'
import Modal from '../../Shared/Modal/Index';
import img from '../../../assets/images/power-button_12080802.png'
import Button from '../../Base/Button/Index';
import LegendWrapper from '../LegendWrapper/Index';
import { getItem, reset, setItem } from '../../../utils/localStorage';
import styles from './styles.module.css';
import { useNavigate } from 'react-router-dom';
import { appConstants } from '../../../utils/AppConstants';
import { useEffect, useState } from "react";
import BookingWrapper from "../../Layout/BookingWrapper/Index";
import Header from "../../Layout/Header/Index";
import Modal from "../../Shared/Modal/Index";
import img from "../../../assets/images/power-button_12080802.png";
import Button from "../../Base/Button/Index";
import LegendWrapper from "../LegendWrapper/Index";
import { getItem, reset, setItem } from "../../../utils/localStorage";
import styles from "./styles.module.css";
import { useNavigate } from "react-router-dom";
import { appConstants } from "../../../utils/AppConstants";
const SeatBooking = () => {
let userId = getItem("user");
let userId = getItem(appConstants.USER);
const navigate = useNavigate();
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 [onOfSeats, setNoOfSeats] = useState();
const [currentSeats, setCurrentSeats] = useState([]) // currently selecting seats before booking(local)
useEffect(() => {
getSelectedSeats();
}, [])
}, []);
const data = [
{
"row_id": 1,
"columnData": [
row_id: 1,
columnData: [
{
"id": 0,
"status": "aisle"
id: 0,
status: "aisle",
},
{
"id": 1,
"status": "reserved"
id: 1,
status: "reserved",
},
{
"id": 2,
"status": "available"
id: 2,
status: "available",
},
{
"id": 3,
"status": "reserved"
id: 3,
status: "reserved",
},
{
"id": 4,
"status": "available"
id: 4,
status: "available",
},
{
"id": 0,
"status": "aisle"
id: 0,
status: "aisle",
},
{
"id": 5,
"status": "available"
id: 5,
status: "available",
},
{
"id": 6,
"status": "reserved"
id: 6,
status: "reserved",
},
{
"id": 7,
"status": "available"
id: 7,
status: "available",
},
{
"id": 8,
"status": "reserved"
id: 8,
status: "reserved",
},
{
"id": 0,
"status": "aisle"
}
]
id: 0,
status: "aisle",
},
],
},
{
"row_id": 2,
"columnData": [
row_id: 2,
columnData: [
{
"id": 1,
"status": "available"
id: 1,
status: "available",
},
{
"id": 2,
"status": "available"
id: 2,
status: "available",
},
{
"id": 3,
"status": "available"
id: 3,
status: "available",
},
{
"id": 4,
"status": "available"
id: 4,
status: "available",
},
{
"id": 5,
"status": "available"
id: 5,
status: "available",
},
{
"id": 0,
"status": "aisle"
id: 0,
status: "aisle",
},
{
"id": 6,
"status": "available"
id: 6,
status: "available",
},
{
"id": 7,
"status": "available"
id: 7,
status: "available",
},
{
"id": 8,
"status": "available"
id: 8,
status: "available",
},
{
"id": 9,
"status": "available"
id: 9,
status: "available",
},
{
"id": 10,
"status": "available"
}
]
id: 10,
status: "available",
},
],
},
{
"row_id": 3,
"columnData": [
row_id: 3,
columnData: [
{
"id": 1,
"status": "available"
id: 1,
status: "available",
},
{
"id": 2,
"status": "available"
id: 2,
status: "available",
},
{
"id": 3,
"status": "available"
id: 3,
status: "available",
},
{
"id": 4,
"status": "available"
id: 4,
status: "available",
},
{
"id": 5,
"status": "available"
id: 5,
status: "available",
},
{
"id": 0,
"status": "aisle"
id: 0,
status: "aisle",
},
{
"id": 6,
"status": "available"
id: 6,
status: "available",
},
{
"id": 7,
"status": "available"
id: 7,
status: "available",
},
{
"id": 8,
"status": "available"
id: 8,
status: "available",
},
{
"id": 9,
"status": "available"
id: 9,
status: "available",
},
{
"id": 10,
"status": "available"
}
]
id: 10,
status: "available",
},
],
},
{
"row_id": 4,
"columnData": [
row_id: 4,
columnData: [
{
"id": 1,
"status": "available"
id: 1,
status: "available",
},
{
"id": 2,
"status": "available"
id: 2,
status: "available",
},
{
"id": 3,
"status": "available"
id: 3,
status: "available",
},
{
"id": 4,
"status": "available"
id: 4,
status: "available",
},
{
"id": 5,
"status": "available"
id: 5,
status: "available",
},
{
"id": 0,
"status": "aisle"
id: 0,
status: "aisle",
},
{
"id": 6,
"status": "available"
id: 6,
status: "available",
},
{
"id": 7,
"status": "available"
id: 7,
status: "available",
},
{
"id": 8,
"status": "available"
id: 8,
status: "available",
},
{
"id": 9,
"status": "available"
id: 9,
status: "available",
},
{
"id": 10,
"status": "available"
}
]
id: 10,
status: "available",
},
],
},
{
"row_id": 5,
"columnData": [
row_id: 5,
columnData: [
{
"id": 1,
"status": "available"
id: 1,
status: "available",
},
{
"id": 2,
"status": "available"
id: 2,
status: "available",
},
{
"id": 3,
"status": "available"
id: 3,
status: "available",
},
{
"id": 4,
"status": "available"
id: 4,
status: "available",
},
{
"id": 5,
"status": "available"
id: 5,
status: "available",
},
{
"id": 0,
"status": "aisle"
id: 0,
status: "aisle",
},
{
"id": 6,
"status": "available"
id: 6,
status: "available",
},
{
"id": 7,
"status": "available"
id: 7,
status: "available",
},
{
"id": 8,
"status": "available"
id: 8,
status: "available",
},
{
"id": 9,
"status": "available"
id: 9,
status: "available",
},
{
"id": 10,
"status": "available"
}
]
id: 10,
status: "available",
},
],
},
{
"row_id": 6,
"columnData": [
row_id: 6,
columnData: [
{
"id": 1,
"status": "available"
id: 1,
status: "available",
},
{
"id": 2,
"status": "available"
id: 2,
status: "available",
},
{
"id": 3,
"status": "available"
id: 3,
status: "available",
},
{
"id": 4,
"status": "available"
id: 4,
status: "available",
},
{
"id": 5,
"status": "available"
id: 5,
status: "available",
},
{
"id": 0,
"status": "aisle"
id: 0,
status: "aisle",
},
{
"id": 6,
"status": "available"
id: 6,
status: "available",
},
{
"id": 7,
"status": "available"
id: 7,
status: "available",
},
{
"id": 8,
"status": "available"
id: 8,
status: "available",
},
{
"id": 9,
"status": "available"
id: 9,
status: "available",
},
{
"id": 10,
"status": "available"
}
]
id: 10,
status: "available",
},
],
},
{
"row_id": 7,
"columnData": [
row_id: 7,
columnData: [
{
"id": 1,
"status": "available"
id: 1,
status: "available",
},
{
"id": 2,
"status": "available"
id: 2,
status: "available",
},
{
"id": 3,
"status": "available"
id: 3,
status: "available",
},
{
"id": 4,
"status": "available"
id: 4,
status: "available",
},
{
"id": 5,
"status": "available"
id: 5,
status: "available",
},
{
"id": 0,
"status": "aisle"
id: 0,
status: "aisle",
},
{
"id": 6,
"status": "available"
id: 6,
status: "available",
},
{
"id": 7,
"status": "available"
id: 7,
status: "available",
},
{
"id": 8,
"status": "available"
id: 8,
status: "available",
},
{
"id": 9,
"status": "available"
id: 9,
status: "available",
},
{
"id": 10,
"status": "available"
}
]
id: 10,
status: "available",
},
],
},
{
"row_id": 8,
"columnData": [
row_id: 8,
columnData: [
{
"id": 0,
"status": "aisle"
id: 0,
status: "aisle",
},
{
"id": 1,
"status": "reserved"
id: 1,
status: "reserved",
},
{
"id": 2,
"status": "available"
id: 2,
status: "available",
},
{
"id": 3,
"status": "reserved"
id: 3,
status: "reserved",
},
{
"id": 4,
"status": "available"
id: 4,
status: "available",
},
{
"id": 0,
"status": "aisle"
id: 0,
status: "aisle",
},
{
"id": 5,
"status": "available"
id: 5,
status: "available",
},
{
"id": 6,
"status": "reserved"
id: 6,
status: "reserved",
},
{
"id": 7,
"status": "available"
id: 7,
status: "available",
},
{
"id": 8,
"status": "reserved"
id: 8,
status: "reserved",
},
{
"id": 9,
"status": "available"
}
]
}
]
id: 9,
status: "available",
},
],
},
];
const getSelectedSeats = async () => {
const response = await fetch(`${appConstants.API_URL_SEATS}`);
const data = await response.json();
setSelectedSeats(data);
}
const editSeatsApi = async (
id,
body,
newRequest
) => {
};
const editSeatsApi = async (id, body, newRequest) => {
try {
const row = newRequest.row;
const column = newRequest.seat;
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) {
let newSelected = current.selected.filter((e) => !(e.row === row && e.seat == column));
const res = await fetch(`${appConstants.API_URL_SEATS}/${id}`,
{
method: "PATCH",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ selected: newSelected })
});
let newSelected = current.selected.filter(
(e) => !newRequest.some((e2) => e2.row == e.row && e2.seat == e.seat)
);
const res = await fetch(`${appConstants.API_URL_SEATS}/${id}`, {
method: "PATCH",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ selected: newSelected }),
});
getSelectedSeats();
return;
return newSelected;
}
await fetch(`${appConstants.API_URL_SEATS}/${id}`, {
method: "PATCH",
headers: {
'Content-Type': 'application/json'
"Content-Type": "application/json",
},
body: JSON.stringify({ selected: body })
body: JSON.stringify({ selected: body }),
});
getSelectedSeats();
setCurrentSeats([])
setCurrentSeats([]);
} catch (error) {
console.log(error, "error")
console.log(error, "error");
}
}
};
const createSeatApi = async (body) => {
await fetch(`${appConstants.API_URL_SEATS}`, {
method: "POST",
headers: {
'Content-Type': 'application/json'
"Content-Type": "application/json",
},
body: JSON.stringify(body)
body: JSON.stringify(body),
});
getSelectedSeats();
}
};
const onSelectSeats = (rowId, columnId) => {
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) {
return currentSeats.filter(e => !(e.row == rowId && e.seat == columnId))
return currentSeats.filter(
(e) => !(e.row == rowId && e.seat == columnId)
);
} else {
let obj = {
row: rowId,
seat: columnId
}
return [...prev, obj]
seat: columnId,
};
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 = () => {
reset();
navigate("/login");
}
};
const onModalChange = (value) => {
setNoOfSeats(value);
}
};
const modalClose = () => {
setItem("modal", false);
setShowSeatsModal(false)
}
setShowSeatsModal(false);
};
const onSeatsConfirm = () => {
setShowSeatsConfirmationModal(true)
}
const seatsFinal = () => {
setShowSeatsConfirmationModal(true);
};
const seatsFinal = async() => {
setShowSeatsConfirmationModal(false);
const existingUserSeatMap = selectedSeats?.find((ele) => ele.id == userId);
if (existingUserSeatMap) {
editSeatsApi(
const data = await editSeatsApi(
existingUserSeatMap.userid,
[...currentSeats, ...existingUserSeatMap.selected],
{
row: 0,
seat: 0
}
currentSeats
);
console.log(data, "data")
} else {
let info = {
id: userId,
userid: userId,
selected: currentSeats
}
selected: currentSeats,
};
createSeatApi(info);
}
}
};
return (
<div className={styles['seat-booking-wrapper']}>
<div className={styles["seat-booking-wrapper"]}>
<img
src={img}
className={styles['logout']}
className={styles["logout"]}
width={30}
onClick={() => logout()}
/>
<div>
<Header>Choose Seats</Header>
<Header>Choose Seats</Header>
</div>
<div>
<BookingWrapper
......@@ -580,26 +549,20 @@ const SeatBooking = () => {
currentSeats={currentSeats}
/>
</div>
<div className={styles['btn-wrapper']}>
<Button size={"md"} onClick={onSeatsConfirm}>Confirm</Button>
<div className={styles["btn-wrapper"]}>
<Button size={"md"} onClick={onSeatsConfirm}>
Confirm
</Button>
</div>
<LegendWrapper />
{showSeatsModal
&&
<Modal
onConfirm={modalClose}
onChange={onModalChange}
/>
}
{showSeatsConfirmationModal
&&
<Modal
onConfirm={seatsFinal}
onChange={onModalChange}
/>
}
{showSeatsModal && (
<Modal onConfirm={modalClose} onChange={onModalChange} variant="input"/>
)}
{showSeatsConfirmationModal && (
<Modal onConfirm={seatsFinal} onChange={onModalChange} variant={'confirm'} onOfSeats={currentSeats.length}/>
)}
</div>
)
}
);
};
export default SeatBooking;
\ No newline at end of file
src/components/TopLevel/SeatBooking/styles.module.css
......@@ -8,11 +8,11 @@
padding-bottom: 65px;
display: flex;
}
.seat-booking-wrapper > div {
flex: 1;
}
.btn-wrapper {
display: flex;
justify-content: center;
......@@ -20,11 +20,10 @@
flex: 1;
padding: 1.5rem 0;
}
.logout{
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
}
}
\ No newline at end of file
src/utils/AppConstants.js
export const appConstants = {
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
\ 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