From a702874f95dda53cee4499948a0fa2f7446472b1 Mon Sep 17 00:00:00 2001
From: Madhankumar <madhankumar.r@krds.fr>
Date: Wed, 4 Oct 2023 11:26:09 +0530
Subject: [PATCH] seat layout mobile repsonsive
---
db.json | 4 +---
package.json | 2 +-
src/App.js | 11 +++++++++--
src/_context/index.js | 7 +++++--
src/auth/index.js | 16 ++++++++++++++++
src/components/Base/layout/layout.module.css | 2 +-
src/components/top-level/confirmation/confirmation.module.css | 2 +-
src/components/top-level/confirmation/index.js | 2 +-
src/components/top-level/login/index.js | 24 ++++++++++++------------
src/components/top-level/seat-layout/index.js | 53 ++++++++++++++++++++++++++++-------------------------
src/components/top-level/seat-layout/seat-layout.module.css | 42 ++++++++++++++++++++++++++++++++----------
src/components/top-level/seat/index.js | 39 +++++++++++++++------------------------
src/lib/api.js | 8 +++-----
src/pages/login.js | 4 ++--
14 files changed, 127 insertions(+), 89 deletions(-)
create mode 100644 src/auth/index.js
diff --git a/db.json b/db.json
index c79cf29..f82d307 100644
--- a/db.json
+++ b/db.json
@@ -2,9 +2,7 @@
"users": [
{
"mobile": "12345678",
- "password": "password",
- "id": 1,
- "isLogged": true
+ "id": 1
}
],
"reservedSeats": [
diff --git a/package.json b/package.json
index 3a66f79..2fe0631 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
"eject": "react-scripts eject",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
- "server": "json-server --watch db.json --port 5000"
+ "server": "json-server --watch db.json --port 5000 --host 192.168.1.91"
},
"eslintConfig": {
"extends": [
diff --git a/src/App.js b/src/App.js
index ec12c45..0c53c24 100644
--- a/src/App.js
+++ b/src/App.js
@@ -4,6 +4,7 @@ import { useEffect } from "react";
import { _Login } from "../src/pages/login";
import { _Seatlayout } from "../src/pages/seat-layout";
import { _Confirmation } from "../src/pages/confirmation";
+import { AuthGuard } from "./auth/index";
function App() {
const navigate = useNavigate();
useEffect(() => {
@@ -14,8 +15,14 @@ function App() {
<div className="App">
<Routes>
<Route path="/" element={<_Login />} />
- <Route path="/booking/:id" element={<_Seatlayout />} />
- <Route path="/confirmation" element={<_Confirmation />} />
+ <Route
+ path="/booking/:id"
+ element={<AuthGuard component={_Seatlayout} />}
+ />
+ <Route
+ path="/confirmation"
+ element={<AuthGuard component={_Confirmation} />}
+ />
</Routes>
</div>
);
diff --git a/src/_context/index.js b/src/_context/index.js
index 63e07c1..63457b5 100644
--- a/src/_context/index.js
+++ b/src/_context/index.js
@@ -5,9 +5,11 @@ export const useAppContext = () => useContext(AppContext);
export function ContextProvider({ children }) {
const [userseats, setUserSeats] = useState([]);
- const LoginOrRegister = async ({ mobile, password }) => {
+ const [isLoggedIn, setIsLoggedIn] = useState(false);
+ const LoginOrRegister = async ({ mobile }) => {
try {
- const response = await api.LoginOrRegister({ mobile, password });
+ const response = await api.LoginOrRegister({ mobile });
+ setIsLoggedIn(true);
return response;
} catch (err) {
console.log(err.message);
@@ -42,6 +44,7 @@ export function ContextProvider({ children }) {
};
const value = {
userseats,
+ isLoggedIn,
LoginOrRegister,
AddOrUpdateSeats,
GetAllReservedSeats,
diff --git a/src/auth/index.js b/src/auth/index.js
new file mode 100644
index 0000000..cb9543e
--- /dev/null
+++ b/src/auth/index.js
@@ -0,0 +1,16 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { useAppContext } from "../_context";
+
+export function AuthGuard({ component: Component, ...props }) {
+ const { isLoggedIn } = useAppContext();
+ const navigate = useNavigate();
+
+ if (!isLoggedIn) {
+ // Redirect to the home page if the user is not logged in
+ navigate("/");
+ return null; // You can return null or another component if needed
+ }
+
+ return <Component {...props} />;
+}
diff --git a/src/components/Base/layout/layout.module.css b/src/components/Base/layout/layout.module.css
index d4d7c98..f2f8513 100644
--- a/src/components/Base/layout/layout.module.css
+++ b/src/components/Base/layout/layout.module.css
@@ -14,7 +14,7 @@
.card {
display: block;
- min-height: 50vh;
+ min-height: 40dvh;
max-width: 30em;
border-radius: 10px;
background-color: white;
diff --git a/src/components/top-level/confirmation/confirmation.module.css b/src/components/top-level/confirmation/confirmation.module.css
index 6bc2a62..3b78e25 100644
--- a/src/components/top-level/confirmation/confirmation.module.css
+++ b/src/components/top-level/confirmation/confirmation.module.css
@@ -1,11 +1,11 @@
.confirmation {
text-align: center;
padding: 2rem;
- margin: 2rem;
}
.confirmation img {
max-width: 100%;
+ height: 200px;
margin: 0 auto;
animation: fadeIn ease 3s;
}
diff --git a/src/components/top-level/confirmation/index.js b/src/components/top-level/confirmation/index.js
index 0021cf3..7339c25 100644
--- a/src/components/top-level/confirmation/index.js
+++ b/src/components/top-level/confirmation/index.js
@@ -7,7 +7,7 @@ function Confirmation({ id, seatCount, seats, ...props }) {
return (
<Layout title="Booking Confirmed">
<div className={style.confirmation}>
- <img src={Image} height={150} width="auto" />
+ <img src={Image} />
<h3>Seat's Count:{seatCount}</h3>
<h4>
Booked Seats:
diff --git a/src/components/top-level/login/index.js b/src/components/top-level/login/index.js
index 25523ec..37a8fd6 100644
--- a/src/components/top-level/login/index.js
+++ b/src/components/top-level/login/index.js
@@ -6,12 +6,12 @@ import styles from "./login.module.css";
function Login({ onSubmit }) {
const [mobile, setMobile] = useState("");
- const [password, setPassword] = useState("");
+ // const [password, setPassword] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
- onSubmit({ mobile, password });
+ onSubmit({ mobile });
setMobile("");
- setPassword("");
+ //setPassword("");
};
return (
@@ -20,24 +20,24 @@ function Login({ onSubmit }) {
<label>Mobile:</label>
<Input
placeholder="Enter Mobile"
- type="text"
+ type="tel"
required
- onKeyPress={(event) => {
- if (!/[0-9]/.test(event.key)) {
- event.preventDefault();
- }
- }}
+ // onKeyPress={(event) => {
+ // if (!/[0-9]/.test(event.key)) {
+ // event.preventDefault();
+ // }
+ // }}
maxLength={10}
onChange={(e) => setMobile(e.target.value)}
/>
- <label>Password:</label>
+ {/* <label>Password:</label>
<Input
placeholder="Enter Password"
required
- type="text"
+ type="password"
maxLength={8}
onChange={(e) => setPassword(e.target.value)}
- />
+ /> */}
<Button>Submit</Button>
</form>
</Layout>
diff --git a/src/components/top-level/seat-layout/index.js b/src/components/top-level/seat-layout/index.js
index e4d0afc..8c951c7 100644
--- a/src/components/top-level/seat-layout/index.js
+++ b/src/components/top-level/seat-layout/index.js
@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
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,
@@ -37,31 +37,34 @@ function SeatLayout({
<>
<div className={styles.container}>
<h1>Choose Seats</h1>
- <div className={styles.curve}>
- <div className={styles["curve-shadow"]}></div>
- </div>
- <div className={styles["seat-container"]}>
- {seats?.map((seat) => (
- <div className={styles.seat}>
- {seat?.map((e, i) => (
- <div className={`${e === 0 ? styles["remove-seats"] : ""}`}>
- <Seat
- key={e}
- seatNo={e}
- onChange={() => handleSeats(e)}
- status={
- selectedseat?.includes(e)
- ? "selected"
- : reservedSeats?.includes(e)
- ? "reserved"
- : "available"
- }
- />
- </div>
- ))}
- </div>
- ))}
+ <div className="booking">
+ <div className={styles.curve}>
+ <div className={styles["curve-shadow"]}></div>
+ </div>
+ <div className={styles["seat-container"]}>
+ {seats?.map((seat) => (
+ <div className={styles.seat}>
+ {seat?.map((e, i) => (
+ <div className={`${e === 0 ? styles["remove-seats"] : ""}`}>
+ <Seat
+ key={e}
+ seatNo={e}
+ onChange={() => handleSeats(e)}
+ status={
+ selectedseat?.includes(e)
+ ? "selected"
+ : reservedSeats?.includes(e)
+ ? "reserved"
+ : "available"
+ }
+ />
+ </div>
+ ))}
+ </div>
+ ))}
+ </div>
</div>
+
<Button onClick={handleConfirm} {...props}>
Confirm
</Button>
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 c1bb5ad..23aa5d9 100644
--- a/src/components/top-level/seat-layout/seat-layout.module.css
+++ b/src/components/top-level/seat-layout/seat-layout.module.css
@@ -5,12 +5,12 @@
.seat-container {
position: relative;
- bottom: 50px;
- left: 15px;
+ bottom: 20px;
+ left: 5px;
}
.seat {
display: grid;
- grid-template-columns: repeat(9, 40px);
+ grid-template-columns: repeat(9, 30px);
grid-template-rows: repeat(8, 5px);
place-content: center;
}
@@ -31,6 +31,7 @@
justify-content: center;
font-weight: bold;
color: white;
+ flex-wrap: wrap;
}
.seat-status > :is(.available, .reserved, .selected) > div {
height: 15px;
@@ -57,7 +58,7 @@
.curve {
position: relative;
margin: auto;
- width: 309px;
+ width: auto;
height: 100px;
border: solid 4px #000;
border-color: #fff transparent transparent transparent;
@@ -65,12 +66,33 @@
}
.curve-shadow {
position: absolute;
- width: 632px;
- top: 1px;
- right: -153px;
- height: 100px;
+ width: 100%;
+ top: -5px;
+ /* right: -153px; */
+ height: 114px;
background: linear-gradient(180deg, #fff 0%, #fff 0%, #655ccc 100%);
opacity: 0.3;
- border-radius: 100%/100px 100px 0 0;
- clip-path: polygon(30% 0, 73% 0, 80% 100%, 22% 99%);
+ border-radius: 100%/53px 47px 0 0;
+ clip-path: polygon(5% 0, 95% 0, 100% 86%, 0% 86%);
+}
+
+@media screen and (min-width: 414px) {
+ .seat-container {
+ left: 15px;
+ }
+ .seat {
+ grid-template-columns: repeat(9, 40px);
+ }
+ .curve {
+ width: 309px;
+ }
+
+ .curve-shadow {
+ width: 632px;
+ top: 1px;
+ right: -153px;
+ height: 100px;
+ border-radius: 100%/100px 100px 0 0;
+ clip-path: polygon(30% 0, 73% 0, 80% 100%, 22% 99%);
+ }
}
diff --git a/src/components/top-level/seat/index.js b/src/components/top-level/seat/index.js
index b049047..736975c 100644
--- a/src/components/top-level/seat/index.js
+++ b/src/components/top-level/seat/index.js
@@ -1,7 +1,7 @@
import { useState } from "react";
import styles from "./seat.module.css";
-function Seat({ onChange, status, seatNo, ...props }) {
+function Seat({ onChange, status, seatNo }) {
const [show, setShow] = useState(false);
const handleCheckbox = () => {
if (status == "available" || status == "selected") {
@@ -13,29 +13,20 @@ function Seat({ onChange, status, seatNo, ...props }) {
};
return (
- <>
- <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)}
- />
- </>
+ <input
+ type="checkbox"
+ onChange={handleCheckbox}
+ className={` ${
+ status == "selected"
+ ? styles["checkbox-selected"]
+ : status == "reserved"
+ ? styles["checkbox-reserved"]
+ : styles["checkbox-available"]
+ }`}
+ title={seatNo}
+ onMouseEnter={() => setShow(true)}
+ onMouseLeave={() => setShow(false)}
+ />
);
}
diff --git a/src/lib/api.js b/src/lib/api.js
index de57cdc..108bec3 100644
--- a/src/lib/api.js
+++ b/src/lib/api.js
@@ -1,10 +1,10 @@
const BASE_URL = "http://192.168.1.91:5000";
-export async function LoginOrRegister({ mobile, password }) {
+export async function LoginOrRegister({ mobile }) {
try {
// Attempt to fetch user data
const response = await fetch(
- `http://192.168.1.91:5000/users?mobile=${mobile}&password=${password}`
+ `http://192.168.1.91:5000/users?mobile=${mobile}`
);
const result = await response.json();
@@ -13,7 +13,7 @@ export async function LoginOrRegister({ mobile, password }) {
const user = await fetch(`${BASE_URL}/users`, {
method: "POST",
headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ mobile, password, isLogged: true }),
+ body: JSON.stringify({ mobile, isLogged: true }),
});
let _userData = [{ ...user }];
return _userData;
@@ -34,7 +34,6 @@ export async function AddOrUpdateSeats({ userId, seats }) {
const result = await userSeat.json();
if (!result.length) {
//add seat
- console.log("add");
const response = await fetch(BASE_URL + "/reservedSeats", {
method: "POST",
headers: { "Content-Type": "application/json" },
@@ -47,7 +46,6 @@ export async function AddOrUpdateSeats({ userId, seats }) {
};
} else {
//update
- console.log("update");
const response = await fetch(
`http://192.168.1.91:5000/reservedSeats/${userId}`,
{
diff --git a/src/pages/login.js b/src/pages/login.js
index c570cc1..9f1c5bc 100644
--- a/src/pages/login.js
+++ b/src/pages/login.js
@@ -6,8 +6,8 @@ export function _Login() {
const { LoginOrRegister } = useAppContext();
- const handleLogin = async ({ mobile, password }) => {
- const user = await LoginOrRegister({ mobile, password });
+ const handleLogin = async ({ mobile }) => {
+ const user = await LoginOrRegister({ mobile });
if (user?.length) {
navigate(`/booking/${user[0].id}`);
}
--
libgit2 0.27.0