Skip to content

S
Seat-Booking
Commit 358dda61 by Madhankumar
Options

code changes

parent 25051caf
Showing with 143 additions and 119 deletions
db.json
{
"users": [
{
"mobile": "838938983",
"password": "djldlsd",
"mobile": "12345678",
"password": "test",
"id": 1,
"isLogged": true
}
],
"reservedSeats": [
{
"userId": 1,
"seats": [
16,
17,
15,
18,
25,
26
],
"id": 1
},
{
"userId": 2,
"seats": [
7,
8
],
"id": 1
}
]
}
\ No newline at end of file
package-lock.json
......@@ -16,6 +16,7 @@
"react-dom": "^18.2.0",
"react-router-dom": "^6.16.0",
"react-scripts": "5.0.1",
"react-tooltip": "^5.21.5",
"web-vitals": "^2.1.4"
},
"devDependencies": {
......@@ -2944,7 +2945,6 @@
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
"integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
"dev": true,
"dependencies": {
"@floating-ui/utils": "^0.1.3"
}
......@@ -2953,7 +2953,6 @@
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
"integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
"dev": true,
"dependencies": {
"@floating-ui/core": "^1.4.2",
"@floating-ui/utils": "^0.1.3"
......@@ -2975,8 +2974,7 @@
"node_modules/@floating-ui/utils": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.4.tgz",
"integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==",
"dev": true
"integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA=="
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.11",
......@@ -10585,6 +10583,11 @@
"resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz",
"integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ=="
},
"node_modules/classnames": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
"node_modules/clean-css": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
......@@ -21546,6 +21549,19 @@
}
}
},
"node_modules/react-tooltip": {
"version": "5.21.5",
"resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.21.5.tgz",
"integrity": "sha512-ey70qf6pBGi4U6xpyNlZAHobAhlo2dfxmImR2Bzd/DbLTsAYWz3TEaK+RMFuUZMq6hSPRbUHQSkP2rHBq4uFVg==",
"dependencies": {
"@floating-ui/dom": "^1.0.0",
"classnames": "^2.3.0"
},
"peerDependencies": {
"react": ">=16.14.0",
"react-dom": ">=16.14.0"
}
},
"node_modules/read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
......
src/components/Base/button/button.css → src/components/Base/button/button.module.css
button {
.button {
padding: 0.7rem 3rem;
border-radius: 14px;
font-size: 16px;
......
src/components/Base/button/index.js 0 → 100644
import styles from "./button.module.css";
function Button({ children, ...props }) {
return (
<button className={styles.button} {...props}>
{children}
</button>
);
}
export default Button;
src/components/Base/button/index.jsx deleted 100644 → 0
import "./button.css";
function Button({ children, ...props }) {
return <button {...props}>{children}</button>;
}
export default Button;
src/components/Base/input/index.js
import "./input.css";
import styles from "./input.module.css";
function Input({ ...props }) {
return <input {...props} />;
return <input className={styles.input} {...props} />;
}
export default Input;
src/components/Base/input/input.css → src/components/Base/input/input.module.css
input {
.input {
width: 100%;
padding: 1rem;
box-sizing: border-box;
......
src/components/Base/layout/index.js
import "./layout.css";
import styles from "./layout.module.css";
function Layout({title,...props}) {
function Layout({ title, ...props }) {
return (
<div className="card">
<h2>{ title}</h2>
<div className={styles.card}>
<h2 className={styles.header2}>{title}</h2>
<div {...props}></div>
</div>
);
......
src/components/Base/layout/layout.css → src/components/Base/layout/layout.module.css
......@@ -15,7 +15,7 @@
.card {
display: block;
min-height: 50vh;
width: 40dvw;
max-width: 30em;
border-radius: 10px;
background-color: white;
margin: 0 auto;
......
src/components/top-level/confirmation/confirmation.stories.js
......@@ -8,8 +8,7 @@ export default {
export const confirmation = {
args: {
ticketCount: 3,
seats: [1, 2, 3],
bookingId: 1234,
seatCount: 3,
seats: ["A1", "A2", "A3"],
},
};
src/components/top-level/confirmation/index.js
import Layout from "../../Base/layout";
import Image from "../../../assets/conform.png";
import "./confirmation.css";
import style from "./confirmation.module.css";
function Confirmation({ ticketCount, seats }) {
function Confirmation({ seatCount, seats }) {
return (
<Layout>
<div className="confirmation">
<Layout title="Booking Confirmed">
<div className={style.confirmation}>
<img src={Image} height={150} width="auto" />
<h2>Booking Confirmed</h2>
<h3>Ticket Count:{ticketCount}</h3>
<h3>Seat's Count:{seatCount}</h3>
<h4>
Seats:
Booked Seats:
{seats.toString()}
</h4>
{/* <h3>Booking Id:{bookingId}</h3> */}
</div>
</Layout>
);
......
src/components/top-level/login/index.js
......@@ -2,7 +2,7 @@ import { useState } from "react";
import Button from "../../Base/button";
import Input from "../../Base/input";
import Layout from "../../Base/layout";
import "./login.css";
import styles from "./login.module.css";
function Login({ onSubmit }) {
const [mobile, setMobile] = useState("");
......@@ -35,7 +35,7 @@ function Login({ onSubmit }) {
placeholder="Enter Password"
required
type="text"
maxLength={8}
maxLength={8}
onChange={(e) => setPassword(e.target.value)}
/>
<Button>Submit</Button>
......
src/components/top-level/seat-layout/index.js
// import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import Button from "../../Base/button";
import "./seat-layout.css";
import styles from "./seat-layout.module.css";
import Seat from "../seat";
import Confirmation from "../confirmation";
......@@ -13,7 +13,6 @@ function SeatLayout({
onClick,
...props
}) {
// const navigate = useNavigate();
const [selectedseat, setSelectedSeat] = useState([...selectedSeats]);
const [confirmation, setConfirmation] = useState(false);
const handleSeats = (seat) => {
......@@ -39,18 +38,19 @@ function SeatLayout({
return (
<>
{!confirmation ? (
<div className="container">
<div className={styles.container}>
<h1>Choose Seats</h1>
<div className="curve">
<div className="curve-shadow"></div>
<div className={styles.curve}>
<div className={styles["curve-shadow"]}></div>
</div>
<div className="seat-container">
<div className={styles["seat-container"]}>
{seats?.map((seat) => (
<div className="seat">
<div className={styles.seat}>
{seat?.map((e, i) => (
<div className={`${e === 0 ? "remove-seats" : ""}`}>
<div className={`${e === 0 ? styles["remove-seats"] : ""}`}>
<Seat
key={e}
seatNo={e}
onChange={() => handleSeats(e)}
status={
selectedseat?.includes(e)
......@@ -68,16 +68,16 @@ function SeatLayout({
<Button onClick={handleConfirm} {...props}>
Confirm
</Button>
<div className="seat-status">
<div className="selected">
<div className={styles["seat-status"]}>
<div className={styles.selected}>
<div></div>
<p>Selected</p>
</div>
<div className="reserved">
<div className={styles.reserved}>
<div></div>
<p>Reserved</p>
</div>
<div className="available">
<div className={styles.available}>
<div></div>
<p>Available</p>
</div>
......@@ -93,6 +93,5 @@ SeatLayout.defaultProps = {
seats: [],
reservedSeats: [],
selectedSeats: [],
onClick: () => {},
};
export default SeatLayout;
src/components/top-level/seat-layout/seat-layout.css → src/components/top-level/seat-layout/seat-layout.module.css
......@@ -5,7 +5,7 @@
.seat-container {
position: relative;
bottom: 34px;
bottom: 50px;
left: 15px;
}
.seat {
......@@ -65,13 +65,12 @@
}
.curve-shadow {
position: absolute;
width: 452px;
top: 2px;
right: -71px;
height: 83px;
width: 632px;
top: 1px;
right: -153px;
height: 100px;
background: linear-gradient(180deg, #fff 0%, #fff 0%, #655ccc 100%);
/* background: linear-gradient(180deg, #ccc 50%, #ccc 50%); */
opacity: 0.3;
border-radius: 100%/40px 40px 0 0;
clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
border-radius: 100%/100px 100px 0 0;
clip-path: polygon(30% 0, 73% 0, 80% 100%, 22% 99%);
}
src/components/top-level/seat-layout/seat-layout.stories.js
......@@ -12,16 +12,16 @@ export default {
export const seatlayout = {
args: {
seats: [
[0, 1, 2, 3, 0, 4, 5, 6, 0],
[7, 8, 9, 10, 0, 11, 12, 13, 14],
[15, 16, 17, 18, 0, 19, 20, 21, 22],
[23, 24, 25, 26, 0, 27, 28, 29, 30],
[31, 32, 33, 34, 0, 35, 36, 37, 38],
[39, 40, 41, 42, 0, 43, 44, 45, 46],
[47, 48, 49, 50, 0, 51, 52, 53, 54],
[0, 55, 56, 57, 0, 58, 59, 60, 0],
[0, "A1", "A2", "A3", 0, "A4", "A5", "A6", 0],
["B1", "B2", "B3", "B4", 0, "B5", "B6", "B7", "B8"],
["C1", "C2", "C3", "C4", 0, "C5", "C6", "C7", "C8"],
["D1", "D2", "D3", "D4", 0, "D5", "D6", "D7", "D8"],
["E1", "E2", "E3", "E4", 0, "E5", "E6", "E7", "E8"],
["F1", "F2", "F3", "F4", 0, "F5", "F6", "F7", "F8"],
["G1", "G2", "G3", "G4", 0, "G5", "G6", "G7", "G8"],
[0, "H1", "H2", "H3", 0, "H4", "H5", "H7", 0],
],
reservedSeats: [1, 2, 45, 54],
selectedSeats: [19, 20, 21],
reservedSeats: ["A1", "A2", "G1", "G2"],
selectedSeats: ["E1", "E2", "E3"],
},
};
src/components/top-level/seat/index.js
import "./seat.css";
function Seat({ onChange, status, ...props }) {
import { useState } from "react";
import styles from "./seat.module.css";
function Seat({ onChange, status, seatNo, ...props }) {
const [show, setShow] = useState(false);
const handleCheckbox = () => {
if (status == "available" || status == "selected") {
onChange({
......@@ -12,19 +13,29 @@ function Seat({ onChange, status, ...props }) {
};
return (
<input
type="checkbox"
onChange={handleCheckbox}
className={` ${
status == "selected"
? "checkbox-selected"
: status == "reserved"
? "checkbox-reserved"
: "checkbox-available"
}`}
{...props}
/>
<>
<div
className={styles.tooltip}
style={show ? { visibility: "visible" } : {}}
>
{seatNo}
<span className={styles["tooltip-arrow"]} />
</div>
<input
type="checkbox"
onChange={handleCheckbox}
className={` ${
status == "selected"
? styles["checkbox-selected"]
: status == "reserved"
? styles["checkbox-reserved"]
: styles["checkbox-available"]
}`}
{...props}
onMouseEnter={() => setShow(true)}
onMouseLeave={() => setShow(false)}
/>
</>
);
}
......
src/components/top-level/seat/seat.css → src/components/top-level/seat/seat.module.css
......@@ -10,7 +10,6 @@ input[type="checkbox"] {
border-radius: 10%;
border: 1px solid #ccc;
box-shadow: none;
padding: 0.7rem;
cursor: pointer;
}
......@@ -27,3 +26,22 @@ input[type="checkbox"] {
.checkbox-available {
padding: 0.6rem !important;
}
.tooltip {
width: 15px;
position: relative;
background: white;
color: black;
visibility: hidden;
padding: 5px;
border-radius: 5px;
z-index: 1;
}
.tooltip-arrow {
position: absolute;
top: 100%;
left: 50%;
border-width: 5px;
border-style: solid;
border-color: white transparent transparent;
}
src/components/top-level/seat/seat.stories.js
......@@ -6,15 +6,14 @@ export default {
argTypes: {
onChange: { action: "onChange" },
status: {
options: ["available","reserved", "selected"],
options: ["available", "reserved", "selected"],
control: { type: "radio" },
},
},
};
export const seat = {
args: {
status: "available",
}
args: {
status: "available",
seatNo: "A1",
},
};
src/pages/seat-layout.js
import { useEffect, useLayoutEffect, useState } from "react";
import SeatLayout from "../components/top-level/seat-layout";
import { useAppContext } from "../_context";
import { useParams, useNavigate } from "react-router-dom";
import { useParams } from "react-router-dom";
export function _Seatlayout({ ...props }) {
const { userseats, AddOrUpdateSeats, GetAllReservedSeats } = useAppContext();
......@@ -9,14 +9,14 @@ export function _Seatlayout({ ...props }) {
const [selectedSeat, setSelectedSeat] = useState([]);
const { id } = useParams();
const [seat] = useState([
[0, 1, 2, 3, 0, 4, 5, 6, 0],
[7, 8, 9, 10, 0, 11, 12, 13, 14],
[15, 16, 17, 18, 0, 19, 20, 21, 22],
[23, 24, 25, 26, 0, 27, 28, 29, 30],
[31, 32, 33, 34, 0, 35, 36, 37, 38],
[39, 40, 41, 42, 0, 43, 44, 45, 46],
[47, 48, 49, 50, 0, 51, 52, 53, 54],
[0, 55, 56, 57, 0, 58, 59, 60, 0],
[0, "A1", "A2", "A3", 0, "A4", "A5", "A6", 0],
["B1", "B2", "B3", "B4", 0, "B5", "B6", "B7", "B8"],
["C1", "C2", "C3", "C4", 0, "C5", "C6", "C7", "C8"],
["D1", "D2", "D3", "D4", 0, "D5", "D6", "D7", "D8"],
["E1", "E2", "E3", "E4", 0, "E5", "E6", "E7", "E8"],
["F1", "F2", "F3", "F4", 0, "F5", "F6", "F7", "F8"],
["G1", "G2", "G3", "G4", 0, "G5", "G6", "G7", "G8"],
[0, "H1", "H2", "H3", 0, "H4", "H5", "H7", 0],
]);
useLayoutEffect(() => {
......
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