Commit 840f2f6f by Manivasagam S

my commit

parent a2582eb2
......@@ -5,7 +5,7 @@ import { Success } from '../src/Components/Top-level/Response/Success/Success.js
import './App.css';
import { AuthPage } from './Pages/AuthPage.jsx';
import { ProtectedRoute } from './auth/ProtectedRoute.jsx';
import { Logoutpage } from './Pages/Logoutpage.jsx';
import { Bookingpage } from './Pages/BookingPage.jsx';
export const App = () => {
return (
......@@ -16,7 +16,7 @@ export const App = () => {
path="/select-seat"
element={
<ProtectedRoute>
<Logoutpage/>
<Bookingpage/>
</ProtectedRoute>
}
/>
......
......@@ -88,7 +88,7 @@
}
.secondary:disabled {
background-color: #cdcaca;
background-color: #979595;
cursor: not-allowed;
}
......
......@@ -11,6 +11,6 @@ export const Screen = ({ width = 600, height = 210 }) => (
</defs>
<path d="M30 60 Q150 36 270 60 L285 130 L10 130 Z" fill="url(#lightGradient)" />
<path d="M30 60 Q150 36 270 60" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" />
</svg>
</svg>
</div>
);
......@@ -6,5 +6,9 @@
min-width: 30rem;
position: relative;
bottom: 1rem;
}
@media(min-width:320px){
.shadow{
min-width: 15rem;
}
}
\ No newline at end of file
.seat {
display: inline-block;
width: 10px;
height: 10px;
width: 7px;
height: 7px;
background-color: transparent;
border: 2px solid #ccc;
border-radius: 15px;
......@@ -46,19 +46,35 @@
.legendItem {
display: inline-flex;
align-items: center;
gap: 10px;
gap: 3px;
font-size: 14px;
color: white;
font-family: 'Segoe UI';
font-weight: 500;
font-size: 17px;
font-size: 13px;
}
@media(min-width:425px){
.legend{
column-gap: 80px;
}
.legendItem{
font-size: 15px;
}
}
@media (min-width:640px) {
.seat{
width: 10px;
height: 10px;
}
.legend{
flex-direction: row;
/* column-gap: 0; */
column-gap: 150px;
justify-content: center;
align-items: center;
margin-bottom: 2rem;
}
}
\ No newline at end of file
.legendItem{
gap: 15px;
font-size: 20px;
}
}
......@@ -8,6 +8,7 @@ export const Seat = ({ seatNo, status, onClick }) => {
[styles.available]: status === 'available',
[styles.reserved]: status === 'reserved',
[styles.selected]: status === 'selected',
[styles.mine]:status === 'mine',
});
return (
......
......@@ -2,10 +2,10 @@
display: inline-block;
background-color: transparent;
border: 0.5px solid rgba(164,175,255,255);
width: 27px;
height: 27px;
width: 18px;
height: 18px;
border-radius: 5px;
margin: 8px;
margin: 6px;
cursor: pointer;
transition: transform 0.2s ease-in-out;
position: relative;
......@@ -26,6 +26,9 @@
.reserved {
background-color:#5b66cb;
}
.mine{
background-color: white;
}
.reserved:hover {
transform: none;
......@@ -86,3 +89,19 @@
visibility: visible;
opacity: 1;
}
@media (min-width:425px){
.seat{
width:23px;
height: 23px;
margin: 8px;
}
}
@media (min-width:640px){
.seat{
width:27px;
height:27px;
margin: 8px;
}
}
......@@ -67,7 +67,7 @@ export const SeatLayout = ({
console.log(selectedSeats);
return (
<div className={styles.container}>
<div>
{renderedSeats.map((rowSeats, i) => (
<div key={i} className={styles.seatcontainer}>
{rowSeats.map((seat, j) => (
......@@ -75,7 +75,7 @@ export const SeatLayout = ({
))}
</div>
))}
</div>
</div>
);
};
......
.container{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-bottom: 5rem;
width: 100%;
overflow-x: auto;
}
.seatcontainer {
display: flex;
align-items: center;
margin-bottom: 4px;
gap: 8px;
padding: 2px 2px;
gap:1px;
padding: 1px 1px;
}
.seatcontainer:last-child{
margin-left:8px;
}
.seatcontainer:first-child{
margin-left: 4px;
}
/* .seats {
width: 23px;
height: 23px;
......@@ -29,10 +28,33 @@
border: 2px solid #999;
} */
@media (max-width:640px) {
@media(min-width:425px){
.container{
align-items:center;
}
/* .seatcontainer:last-child{
margin-left:1px;
}
.seatcontainer:first-child{
margin-left: 1px;
} */
}
@media (min-width:640px) {
.seatcontainer{
gap: 3px;
padding: 1px 1px;
gap: 8px;
padding: 2px 2px;
}
}
\ No newline at end of file
.container{
display: flex;
justify-content: center;
align-items: center;
}
/* .seatcontainer:last-child{
margin-left:1px;
}
.seatcontainer:first-child{
margin-left: 1px;
} */
}
......@@ -129,7 +129,7 @@ export const Selectseat = ({onLogout}) => {
</div>
<div className={styles.button}>
<Button variant="secondary" label="Confirm" size='md' onClick={confirmHandler} />
<Button variant="secondary" label="Confirm" size='md' onClick={confirmHandler} disabled={selectedSeats.length!=seatCount}/>
</div>
<div className={styles.legend}>
......
......@@ -18,9 +18,8 @@ body {
position: relative;
top:1rem;
text-align: center;
margin-top: 1rem;
color: white;
font-size: 2.3em;
font-size:2em;
padding: 0 1rem;
}
......@@ -28,7 +27,7 @@ body {
display: flex;
justify-content: center;
position: relative;
bottom: 5rem;
bottom: 4rem;
padding: 0 1rem;
}
......@@ -131,7 +130,9 @@ position: relative;
top: 2rem;
right: 1.5rem;
color: white;
font-size: 2rem;
font-size: 1.5rem;
z-index: 1001;
cursor:pointer;
}
/* .legend {
......@@ -140,6 +141,13 @@ font-size: 2rem;
@media (min-width:640px){
.text{
position: relative;
top:1rem;
text-align: center;
font-size: 2.3em;
}
.logoutButton{
font-size:2rem;
}
}
\ No newline at end of file
......@@ -4,7 +4,6 @@ export default {
export const TitleAndParagraph = () => (
<div className="container">
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
......
import { AuthPage } from "../AuthPage"
export default{
title:'Auth/Auth',
component:AuthPage,
argTypes: {
onClick: {
action: "clicked",
},
},
}
export const Default=(args)=><AuthPage {...args}/>
\ No newline at end of file
// Auth.stories.jsx
import { Auth } from "../Auth/Auth.jsx";
import {Login} from '../../Components/Form/Login/Login.jsx'
import { SignUp } from "../../Components/Form/SignUp/SignUp.jsx";
export default {
title: "Auth/Auth",
component: Auth,
};
const DummyLogin = ({ onLogin }) => (
<div>
<Login/>
</div>
);
const DummySignUp = ({ onSubmit }) => (
<div>
<SignUp/>
</div>
);
export const Default = () => (
<Auth
LoginComponent={DummyLogin}
SignUpComponent={DummySignUp}
onLoginSubmit={(data) => console.log("Login Submit:", data)}
onSignUpSubmit={() => console.log("SignUp Submit")}
/>
);
import { Selectseat } from "../Components/Top-level/Seatselect/Selectseat";
import { logout } from "../auth/authService";
export const Logoutpage = () => {
export const Bookingpage = () => {
const onLogout = () => {
logout();
......
......@@ -8,7 +8,9 @@
"G3",
"F3",
"F4",
"G2"
"G2",
"C2",
"C8"
]
},
{
......@@ -16,14 +18,15 @@
"phoneNumber": "9361775481",
"name": "mani",
"reservedSeats": [
"B8",
"B7",
"B6",
"D5",
"B4",
"B3",
"E7"
"C4"
]
},
{
"id": "cbc2",
"name": "mani",
"email": "mani@gmail.com",
"phoneNumber": "9934782103",
"reservedSeats": []
}
]
}
\ 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