Skip to content
Snippets Groups Projects
Commit 2c0ea221 authored by fmazzini's avatar fmazzini
Browse files

Finish Reservation Page

parent 6811f7a0
No related branches found
No related tags found
No related merge requests found
Pipeline #12003 failed
Stage: build
Hide whitespace changes
Inline Side-by-side
src/App.tsx
+ 31
− 13
View file @ 2c0ea221
import React, { FC } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import React, { FC } from 'react'
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import { HomePage2 } from './components/AuthUser/HomePage2/HomePage2';
import { ReservationPage } from './components/AuthUser/Reservation/ReservationPage';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import { HomePage } from 'components/HomePage/HomePage';
import { AuthUser } from 'components/AuthUser/AuthUser';
import { LandingPage } from 'components/LandingPage/LandingPage';
import { PrivateRoute } from 'components/api/PrivateRoute/PrivateRoute';
import { AuthRoutes, NonAuthRoutes } from 'components/api/routes';
import { NotFound } from 'components/NotFound/NotFound';
import { ProfilePage } from 'components/ProfilePage/ProfilePage';
import { Roles } from 'components/api/userRoles';
import { Unauthorized } from 'components/Unauthorized/Unauthorized';
const theme = createMuiTheme({
palette: {
......@@ -32,16 +40,26 @@ const theme = createMuiTheme({
},
});
export const App: FC = () => (
<Router>
<Switch>
<Route path="/">
<div data-testid="App">
<ThemeProvider theme={theme}>
<ReservationPage />
</ThemeProvider>
</div>
</Route>
</Switch>
<div data-testid="App">
<Switch>
<Route path={NonAuthRoutes.signIn} component={AuthUser} />
<Route exact path={NonAuthRoutes.home} component={LandingPage} />
<PrivateRoute
path={AuthRoutes.dashboard}
Component={HomePage}
requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
/>
<PrivateRoute
path={AuthRoutes.profile}
Component={ProfilePage}
requiredRoles={[Roles.admin, Roles.operator, Roles.senior]}
/>
<Route path={NonAuthRoutes.unauthorized} component={Unauthorized} />
<Route component={NotFound} />
</Switch>
</div>
</Router>
);
src/components/AuthUser/Profile/ProfilePage.tsx 0 → 100644
+ 163
− 0
View file @ 2c0ea221
import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
CssBaseline,
Grid,
Typography,
Hidden,
createMuiTheme,
responsiveFontSizes,
MuiThemeProvider,
Container,
} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import Fab from '@material-ui/core/Fab';
import { NavBar } from '../HomePage2/NavBar';
import { Steps } from '../HomePage2/Steps';
import { Numbers } from '../HomePage2/Numbers';
import { Reservation } from '../HomePage2/Reservation';
let themeResp = createMuiTheme();
themeResp = responsiveFontSizes(themeResp);
const useStyles = makeStyles(() => ({
root: {
minHeight: '36vh',
backgroundImage: `url(${'/assets/bg7.png'})`,
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
},
rightAlign: {
marginLeft: 'auto',
},
whiteText: {
color: 'white',
},
imageIcon: {
maxHeight: '50%',
},
paddingBottom: {
paddingBottom: '65px',
},
paddingTop: {
paddingTop: '65px',
},
bodyIcon: {
fontSize: '90px',
paddingBottom: '10px',
paddingTop: '10px',
},
contIcon: {
width: '100%',
left: '0',
right: '0',
},
noShadow: {
border: 'none',
boxShadow: 'none',
backgroundColor: 'transparent',
},
extendedIcon: {
fontSize: '50px',
},
fab: {
margin: '10px 90px 80px 10px',
bottom: '0',
right: '0',
position: 'fixed',
padding: '45px',
},
}));
export const ReservationPage: FC = () => {
const classes = useStyles();
return (
<Grid container direction="column" className={classes.paddingBottom}>
<div className={classes.root}>
<CssBaseline />
<Grid item>
<NavBar />
</Grid>
<MuiThemeProvider theme={themeResp}>
<Grid item container className={classes.paddingBottom}>
<Grid item xs={1} md={2} lg={2} />
<Grid item xs={10} md={6} lg={4}>
<Typography variant="h2" className={classes.whiteText}>
Plan Here Your
</Typography>
<Typography variant="h1" className={classes.whiteText}>
RESERVATIONS
</Typography>
</Grid>
<Grid item xs={1} />
</Grid>
</MuiThemeProvider>
</div>
<Fab
color="primary"
size="large"
aria-label="add"
className={classes.fab}
>
<AddIcon className={classes.extendedIcon} />
</Fab>
<Grid item container className={classes.paddingTop}>
<Grid item xs={2} />
<Grid item xs={8}>
<Typography variant="h3">Your Next Reservations</Typography>
</Grid>
<Grid item xs={2} />
</Grid>
<Grid item container style={{ paddingTop: '20px' }}>
<Grid item xs={1} lg={2} />
<Grid item xs={10} lg={8}>
<Reservation />
</Grid>
<Grid item xs={1} lg={2} />
</Grid>
<Grid item container style={{ paddingTop: '20px' }}>
<Grid item xs={1} lg={2} />
<Grid item xs={10} lg={8}>
<Reservation />
</Grid>
<Grid item xs={1} lg={2} />
</Grid>
<Grid item container style={{ paddingTop: '20px' }}>
<Grid item xs={1} lg={2} />
<Grid item xs={10} lg={8}>
<Reservation />
</Grid>
<Grid item xs={1} lg={2} />
</Grid>
<Grid item container className={classes.paddingTop}>
<Grid item xs={2} />
<Grid item xs={8}>
<Typography variant="h3" align="right">
Your Past Reservations
</Typography>
</Grid>
<Grid item xs={2} />
</Grid>
<Grid item container style={{ paddingTop: '20px' }}>
<Grid item xs={1} lg={2} />
<Grid item xs={10} lg={8}>
<Reservation />
</Grid>
<Grid item xs={1} lg={2} />
</Grid>
</Grid>
);
};
src/components/AuthUser/Reservation/ReservationPage.tsx
+ 100
− 8
View file @ 2c0ea221
......@@ -9,11 +9,19 @@ import {
responsiveFontSizes,
MuiThemeProvider,
Container,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle ,
TextField,
Button
} from '@material-ui/core';
import AddIcon from '@material-ui/icons/Add';
import Fab from '@material-ui/core/Fab';
import { NavBar } from '../HomePage2/NavBar';
import { NavBarLogin } from '../HomePage2/NavBarLogin';
import { Steps } from '../HomePage2/Steps';
import { Numbers } from '../HomePage2/Numbers';
import { Reservation } from '../HomePage2/Reservation';
......@@ -68,11 +76,28 @@ const useStyles = makeStyles(() => ({
position: 'fixed',
padding: '45px',
},
fabSmall: {
margin: '10px 45px 70px 10px',
bottom: '0',
right: '0',
position: 'fixed',
padding: '35px',
},
}));
export const ReservationPage: FC = () => {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const handleClickOpen = (): void => {
setOpen(true);
};
const handleClose = (): void => {
setOpen(false);
};
return (
<Grid container direction="column" className={classes.paddingBottom}>
<div className={classes.root}>
......@@ -82,6 +107,59 @@ export const ReservationPage: FC = () => {
<NavBar />
</Grid>
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Book New Reservation</DialogTitle>
<DialogContent>
<DialogContentText>
Write here below the details of your next reservation
</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
label="Name Reservation"
type="text"
fullWidth
/>
<TextField
autoFocus
margin="dense"
id="name"
label="Date"
type="date"
fullWidth
InputLabelProps={{ shrink: true }}
/>
<TextField
autoFocus
margin="dense"
id="name"
label="Department Time"
type="time"
fullWidth
InputLabelProps={{ shrink: true }}
/>
<TextField
autoFocus
margin="dense"
id="name"
label="Destination"
type="text"
fullWidth
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Cancel
</Button>
<Button onClick={handleClose} color="primary" variant="contained">
Subscribe
</Button>
</DialogActions>
</Dialog>
<MuiThemeProvider theme={themeResp}>
<Grid item container className={classes.paddingBottom}>
<Grid item xs={1} md={2} lg={2} />
......@@ -100,14 +178,28 @@ export const ReservationPage: FC = () => {
</MuiThemeProvider>
</div>
<Fab
color="primary"
size="large"
aria-label="add"
className={classes.fab}
>
<AddIcon className={classes.extendedIcon} />
</Fab>
<Hidden mdDown>
<Fab
color="primary"
size="large"
aria-label="add"
className={classes.fab}
onClick={handleClickOpen}
>
<AddIcon className={classes.extendedIcon} />
</Fab>
</Hidden>
<Hidden lgUp>
<Fab
color="primary"
size="small"
aria-label="add"
className={classes.fabSmall}
>
<AddIcon />
</Fab>
</Hidden>
<Grid item container className={classes.paddingTop}>
<Grid item xs={2} />
......
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