From 518a7029eb3c135607b6635f2e4c041a1e584d4a Mon Sep 17 00:00:00 2001
From: Madhankumar <madhankumar.r@krds.fr>
Date: Wed, 4 Oct 2023 17:10:39 +0530
Subject: [PATCH] seat limit
---
db.json | 15 +++++++++++++++
src/App.js | 6 ++++++
src/components/Base/layout/layout.module.css | 2 +-
src/components/top-level/confirmation/confirmation.module.css | 17 ++++++++++++++---
src/components/top-level/confirmation/confirmation.stories.js | 3 +--
src/components/top-level/confirmation/index.js | 17 ++++++++++-------
src/components/top-level/seat-layout/index.js | 8 +++++---
src/components/top-level/seat-layout/seat-layout.module.css | 2 +-
src/components/top-level/seat-layout/seat-layout.stories.js | 1 +
src/components/top-level/seatlimit/index.js | 28 ++++++++++++++++++++++++++++
src/components/top-level/seatlimit/seatlimit.module.css | 10 ++++++++++
src/pages/confirmation.js | 2 +-
src/pages/login.js | 3 ++-
src/pages/seat-layout.js | 5 ++++-
src/pages/seat-limit.js | 12 ++++++++++++
15 files changed, 111 insertions(+), 20 deletions(-)
create mode 100644 src/components/top-level/seatlimit/index.js
create mode 100644 src/components/top-level/seatlimit/seatlimit.module.css
create mode 100644 src/pages/seat-limit.js
diff --git a/db.json b/db.json
index f82d307..d8e735c 100644
--- a/db.json
+++ b/db.json
@@ -3,6 +3,21 @@
{
"mobile": "12345678",
"id": 1
+ },
+ {
+ "mobile": "123456789",
+ "isLogged": true,
+ "id": 2
+ },
+ {
+ "mobile": "1234567891",
+ "isLogged": true,
+ "id": 3
+ },
+ {
+ "mobile": "1234567890",
+ "isLogged": true,
+ "id": 4
}
],
"reservedSeats": [
diff --git a/src/App.js b/src/App.js
index 0c53c24..62e7d85 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,8 @@ import { _Login } from "../src/pages/login";
import { _Seatlayout } from "../src/pages/seat-layout";
import { _Confirmation } from "../src/pages/confirmation";
import { AuthGuard } from "./auth/index";
+import { _seatLimit } from "../src/pages/seat-limit";
+
function App() {
const navigate = useNavigate();
useEffect(() => {
@@ -16,6 +18,10 @@ function App() {
<Routes>
<Route path="/" element={<_Login />} />
<Route
+ path="/seat-limit/:id"
+ element={<AuthGuard component={_seatLimit} />}
+ />
+ <Route
path="/booking/:id"
element={<AuthGuard component={_Seatlayout} />}
/>
diff --git a/src/components/Base/layout/layout.module.css b/src/components/Base/layout/layout.module.css
index f2f8513..9538217 100644
--- a/src/components/Base/layout/layout.module.css
+++ b/src/components/Base/layout/layout.module.css
@@ -14,9 +14,9 @@
.card {
display: block;
- min-height: 40dvh;
max-width: 30em;
border-radius: 10px;
+ min-height: 15em;
background-color: white;
margin: 0 auto;
box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
diff --git a/src/components/top-level/confirmation/confirmation.module.css b/src/components/top-level/confirmation/confirmation.module.css
index 3b78e25..a18a568 100644
--- a/src/components/top-level/confirmation/confirmation.module.css
+++ b/src/components/top-level/confirmation/confirmation.module.css
@@ -1,13 +1,14 @@
.confirmation {
text-align: center;
- padding: 2rem;
+ padding: 1.5rem 3rem 1rem 3rem;
+ margin: 1.5rem 3rem 1rem 3rem;
}
.confirmation img {
- max-width: 100%;
+ min-width: 15em;
height: 200px;
margin: 0 auto;
- animation: fadeIn ease 3s;
+ animation: fadeIn ease 2s;
}
@keyframes fadeIn {
0% {
@@ -17,3 +18,13 @@
opacity: 1;
}
}
+
+span {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+h3,
+h4 {
+ margin: 0.6rem;
+}
diff --git a/src/components/top-level/confirmation/confirmation.stories.js b/src/components/top-level/confirmation/confirmation.stories.js
index 97bbb38..316b3ea 100644
--- a/src/components/top-level/confirmation/confirmation.stories.js
+++ b/src/components/top-level/confirmation/confirmation.stories.js
@@ -3,12 +3,11 @@ import Confirmation from ".";
export default {
title: "Top-Level/Confirmation",
component: Confirmation,
- argTypes: { onClick: { action: "onClick" } },
+ argTypes: { onEdit: { action: "onEdit" } },
};
export const confirmation = {
args: {
- seatCount: 3,
seats: ["A1", "A2", "A3"],
},
};
diff --git a/src/components/top-level/confirmation/index.js b/src/components/top-level/confirmation/index.js
index 7339c25..c3da1cf 100644
--- a/src/components/top-level/confirmation/index.js
+++ b/src/components/top-level/confirmation/index.js
@@ -3,17 +3,20 @@ import Image from "../../../assets/conform.png";
import style from "./confirmation.module.css";
import Button from "../../Base/button";
-function Confirmation({ id, seatCount, seats, ...props }) {
+function Confirmation({ id, seatCount = 3, seats, onEdit, ...props }) {
return (
<Layout title="Booking Confirmed">
<div className={style.confirmation}>
- <img src={Image} />
- <h3>Seat's Count:{seatCount}</h3>
- <h4>
+ <img src={Image} loading="lazy" />
+ <span>
+ Seat's Count:<h4>{seatCount}</h4>
+ </span>
+
+ <span>
Booked Seats:
- {seats.toString()}
- </h4>
- <Button {...props}>Modify</Button>
+ <h3> {seats.toString()}</h3>
+ </span>
+ <Button onClick={onEdit}>Modify</Button>
</div>
</Layout>
);
diff --git a/src/components/top-level/seat-layout/index.js b/src/components/top-level/seat-layout/index.js
index 8c951c7..079be0f 100644
--- a/src/components/top-level/seat-layout/index.js
+++ b/src/components/top-level/seat-layout/index.js
@@ -4,17 +4,19 @@ import Button from "../../Base/button";
import styles from "./seat-layout.module.css";
import Seat from "../seat";
import Layout from "../../Base/layout";
+
function SeatLayout({
- userId = 1,
seats,
reservedSeats,
selectedSeats,
+ seatLimit,
onClick,
...props
}) {
const [selectedseat, setSelectedSeat] = useState([...selectedSeats]);
+
const handleSeats = (seat) => {
- if (!selectedseat?.includes(seat)) {
+ if (!selectedseat?.includes(seat) && selectedseat.length < seatLimit) {
setSelectedSeat([...selectedseat, seat]);
} else {
setSelectedSeat(selectedseat?.filter((e) => e != seat));
@@ -28,7 +30,7 @@ function SeatLayout({
//check if already have data then update otherwise create,
//write code
onClick({
- userId: parseInt(userId),
+ userId: parseInt(props.userId),
seats: selectedseat,
});
};
diff --git a/src/components/top-level/seat-layout/seat-layout.module.css b/src/components/top-level/seat-layout/seat-layout.module.css
index 23aa5d9..7abd19a 100644
--- a/src/components/top-level/seat-layout/seat-layout.module.css
+++ b/src/components/top-level/seat-layout/seat-layout.module.css
@@ -78,7 +78,7 @@
@media screen and (min-width: 414px) {
.seat-container {
- left: 15px;
+ left: 8px;
}
.seat {
grid-template-columns: repeat(9, 40px);
diff --git a/src/components/top-level/seat-layout/seat-layout.stories.js b/src/components/top-level/seat-layout/seat-layout.stories.js
index 82fc47f..5faa17a 100644
--- a/src/components/top-level/seat-layout/seat-layout.stories.js
+++ b/src/components/top-level/seat-layout/seat-layout.stories.js
@@ -23,5 +23,6 @@ export const seatlayout = {
],
reservedSeats: ["A1", "A2", "G1", "G2"],
selectedSeats: ["E1", "E2", "E3"],
+ seatLimit: 4,
},
};
diff --git a/src/components/top-level/seatlimit/index.js b/src/components/top-level/seatlimit/index.js
new file mode 100644
index 0000000..6922191
--- /dev/null
+++ b/src/components/top-level/seatlimit/index.js
@@ -0,0 +1,28 @@
+import { useState } from "react";
+import Button from "../../Base/button";
+import Layout from "../../Base/layout";
+import styles from "./seatlimit.module.css";
+
+function SeatLimit({ onLimit, ...props }) {
+ const [limit, setLimit] = useState(0);
+ const handleLimit = () => {
+ onLimit({ limit });
+ };
+ return (
+ <Layout title="How many seats?">
+ <form onSubmit={handleLimit} className={styles["form"]}>
+ <div>
+ <label>No of seats:</label>
+ <input
+ className={styles.input}
+ type="number"
+ value={limit}
+ onChange={(e) => setLimit(e.target.value)}
+ />
+ </div>
+ <Button {...props}>Book Seats</Button>
+ </form>
+ </Layout>
+ );
+}
+export default SeatLimit;
diff --git a/src/components/top-level/seatlimit/seatlimit.module.css b/src/components/top-level/seatlimit/seatlimit.module.css
new file mode 100644
index 0000000..13389a6
--- /dev/null
+++ b/src/components/top-level/seatlimit/seatlimit.module.css
@@ -0,0 +1,10 @@
+.input {
+ height: 30px;
+ width: 100%;
+}
+.form {
+ padding: 1rem 3rem;
+}
+.form > div {
+ padding: 10px;
+}
diff --git a/src/pages/confirmation.js b/src/pages/confirmation.js
index c06cb71..1167e95 100644
--- a/src/pages/confirmation.js
+++ b/src/pages/confirmation.js
@@ -16,7 +16,7 @@ export function _Confirmation() {
id={id}
seatCount={seatCount}
seats={seats}
- onClick={handleModify}
+ onEdit={handleModify}
/>
);
}
diff --git a/src/pages/login.js b/src/pages/login.js
index 9f1c5bc..89dc138 100644
--- a/src/pages/login.js
+++ b/src/pages/login.js
@@ -9,7 +9,8 @@ export function _Login() {
const handleLogin = async ({ mobile }) => {
const user = await LoginOrRegister({ mobile });
if (user?.length) {
- navigate(`/booking/${user[0].id}`);
+ navigate(`/seat-limit/${user[0].id}`);
+ //navigate(`/booking/${user[0].id}`);
}
};
return <Login onSubmit={handleLogin} />;
diff --git a/src/pages/seat-layout.js b/src/pages/seat-layout.js
index 1218f12..a8ad4d7 100644
--- a/src/pages/seat-layout.js
+++ b/src/pages/seat-layout.js
@@ -4,13 +4,15 @@ import { useAppContext } from "../_context";
import { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { bookingSeats } from "./seed";
+import { useLocation } from "react-router-dom";
export function _Seatlayout({ ...props }) {
const { userseats, AddOrUpdateSeats, GetAllReservedSeats } = useAppContext();
const [reservedSeat, setReservedSeat] = useState([]);
const [selectedSeat, setSelectedSeat] = useState([]);
const navigate = useNavigate();
const { id } = useParams();
-
+ const location = useLocation();
+ const seatlimit = location.state.seatLimit;
useLayoutEffect(() => {
GetAllReservedSeats();
}, []);
@@ -46,6 +48,7 @@ export function _Seatlayout({ ...props }) {
return (
<SeatLayout
userId={id}
+ seatLimit={seatlimit}
seats={bookingSeats}
selectedSeats={selectedSeat}
reservedSeats={reservedSeat}
diff --git a/src/pages/seat-limit.js b/src/pages/seat-limit.js
new file mode 100644
index 0000000..bc93492
--- /dev/null
+++ b/src/pages/seat-limit.js
@@ -0,0 +1,12 @@
+import SeatLimit from "../components/top-level/seatlimit";
+import { useParams, useNavigate } from "react-router-dom";
+
+export function _seatLimit() {
+ const { id } = useParams();
+ const navigate = useNavigate();
+
+ const handleLimit = (e) => {
+ navigate(`/booking/${id}`, { state: { seatLimit: e.limit } });
+ };
+ return <SeatLimit onLimit={handleLimit} />;
+}
--
libgit2 0.27.0