Changeset bc20307 for sources/client/src/screens/AdminHomeScreen
- Timestamp:
- 02/14/22 01:41:41 (2 years ago)
- Branches:
- master
- Children:
- 747e0ab
- Parents:
- e8b1076
- Location:
- sources/client/src/screens/AdminHomeScreen
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
sources/client/src/screens/AdminHomeScreen/index.js
re8b1076 rbc20307 1 import { useContext, useState } from 'react'; 1 2 import { Route, Switch, Redirect } from 'react-router-dom'; 2 3 import { useHistory } from 'react-router-dom'; … … 19 20 DividerUnderHeader, 20 21 UserIcon, 22 MenuBurgerIcon, 21 23 } from './styles'; 22 24 23 25 import IconButton from '@mui/material/IconButton'; 24 26 25 import logo from '../../resources/logo_2_transparent_bg. jpg';27 import logo from '../../resources/logo_2_transparent_bg.png'; 26 28 import { roles } from '../../config/enums'; 27 29 import DestinationComponent from '../../utils/DestinationComponent'; 28 30 import onClickRouting from '../../utils/onClickRouting'; 31 import AbsoluteLoader from '../../components/Loaders/AbsoluteLoader'; 29 32 30 33 import ParkingZones from '../../components/admin/ParkingZones'; … … 33 36 import EmployeeCreate from '../../components/admin/EmployeeCreate'; 34 37 import ParkingZone from '../../components/admin/ParkingZone'; 38 39 import { UserContext } from '../../context/UserContext'; 40 import { AccessoriesContext } from '../../context/AccessoriesContext'; 41 import useLogoutUser from '../../hooks/useLogoutUser'; 35 42 36 43 const ToParkingZones = new DestinationComponent('/', ParkingZones, true); … … 67 74 68 75 const AdminHomeScreen = (props) => { 76 const { user, isLoadingUser } = useContext(UserContext); 77 const { isMobile, setIsOpenDrawer } = useContext(AccessoriesContext); 69 78 let history = useHistory(); 70 const user = { 71 role: 'ROLE_ADMIN', 72 }; 73 79 const { logoutUser } = useLogoutUser(); 74 80 let routes = user.role === roles.admin ? adminRoutes : employeeRoutes; 75 81 76 82 return ( 77 83 <Container> 78 <SideMenu> 79 <IconButton onClick={() => onClickRouting('/', history)}> 80 <DashboardIcon /> 81 </IconButton> 82 {user.role === roles.admin ? ( 83 <IconButton onClick={() => onClickRouting('/employees', history)}> 84 <SupervisorAccountIcon /> 85 </IconButton> 86 ) : null} 87 </SideMenu> 84 {isLoadingUser ? ( 85 <AbsoluteLoader 86 containerStyle={{ 87 width: isMobile ? '150px' : '300px', 88 height: isMobile ? '150px' : '300px', 89 margin: 'auto', 90 }} 91 /> 92 ) : ( 93 <> 94 {!isMobile ? ( 95 <SideMenu> 96 <IconButton onClick={() => onClickRouting('/', history)}> 97 <DashboardIcon /> 98 </IconButton> 99 {user.role === roles.admin ? ( 100 <IconButton 101 onClick={() => onClickRouting('/employees', history)} 102 > 103 <SupervisorAccountIcon /> 104 </IconButton> 105 ) : null} 106 </SideMenu> 107 ) : null} 88 108 89 <HeaderAndMainSectionWrapper> 90 <Header> 91 <TitleAndLogoWrapper> 92 <LogoWrapper> 93 <Logo src={logo} /> 94 </LogoWrapper> 95 <HeaderTitle>Park Up</HeaderTitle> 96 </TitleAndLogoWrapper> 109 <HeaderAndMainSectionWrapper> 110 <Header> 111 {isMobile ? ( 112 <IconButton 113 onClick={() => setIsOpenDrawer(true)} 114 style={{ padding: 0 }} 115 > 116 <MenuBurgerIcon /> 117 </IconButton> 118 ) : null} 119 <TitleAndLogoWrapper> 120 <LogoWrapper> 121 <Logo src={logo} /> 122 </LogoWrapper> 123 <HeaderTitle>Park Up</HeaderTitle> 124 </TitleAndLogoWrapper> 97 125 98 <UserNameAndLogoutWrapper> 99 <UserIcon /> 100 <UserName>Viktor Tasevski</UserName> 101 <IconButton> 102 <LogoutIcon /> 103 </IconButton> 104 </UserNameAndLogoutWrapper> 105 </Header> 106 <DividerUnderHeader /> 107 <MainSection> 108 <Switch> 109 {routes?.map((route, index) => ( 110 <Route 111 key={index} 112 path={route.path} 113 component={route.component} 114 exact={route.exact} 115 /> 116 ))} 117 <Redirect to='/' /> 118 </Switch> 119 </MainSection> 120 </HeaderAndMainSectionWrapper> 126 {isMobile ? null : ( 127 <UserNameAndLogoutWrapper> 128 <UserIcon /> 129 <UserName> 130 {user.firstName} {user.lastName} 131 </UserName> 132 <IconButton onClick={logoutUser}> 133 <LogoutIcon /> 134 </IconButton> 135 </UserNameAndLogoutWrapper> 136 )} 137 </Header> 138 <DividerUnderHeader /> 139 <MainSection> 140 <Switch> 141 {routes?.map((route, index) => ( 142 <Route 143 key={index} 144 path={route.path} 145 component={route.component} 146 exact={route.exact} 147 /> 148 ))} 149 <Redirect to='/' /> 150 </Switch> 151 </MainSection> 152 </HeaderAndMainSectionWrapper> 153 </> 154 )} 121 155 </Container> 122 156 ); -
sources/client/src/screens/AdminHomeScreen/styles.js
re8b1076 rbc20307 7 7 import SupervisorAccount from '@mui/icons-material/SupervisorAccount'; 8 8 import AccountCircleIcon from '@mui/icons-material/AccountCircle'; 9 import Box from '@mui/material/Box'; 10 import MenuIcon from '@mui/icons-material/Menu'; 11 import CloseI from '@mui/icons-material/Close'; 12 import { mobile_max_width } from '../../config/utilities'; 13 import backgroundImage from '../../resources/login_background.jpg'; 9 14 10 15 export const Container = styled.div` 11 16 display: flex; 12 17 flex-direction: row; 13 height: 100%;18 min-height: 100vh; 14 19 flex: 1; 15 20 `; … … 20 25 flex-direction: row; 21 26 justify-content: space-between; 22 padding: 10px 30px; 27 padding: 10px 7%; 28 position: fixed; 29 z-index: 100; 30 background-color: ${(props) => props.theme.palette.background.whiteSmoke}; 31 @media (max-width: ${mobile_max_width}px) { 32 padding-left: 15px; 33 } 23 34 `; 24 35 … … 26 37 variant: 'middle', 27 38 sx: { 28 margin: '0 25px', 39 margin: '0 5%', 40 marginTop: '75px', 29 41 borderWidth: '2px', 30 42 borderBottomWidth: 'thin', … … 75 87 sx: { 76 88 fontSize: 30, 77 color: `${props.theme.palette.error. light}`,89 color: `${props.theme.palette.error.main}`, 78 90 }, 79 91 }))``; … … 82 94 display: flex; 83 95 flex-direction: column; 84 height: 100%;85 96 width: 100%; 97 padding-left: 70px; 86 98 background-color: ${(props) => props.theme.palette.background.whiteSmoke}; 99 100 @media (max-width: ${mobile_max_width}px) { 101 padding-left: 0; 102 } 87 103 `; 88 104 89 105 export const SideMenu = styled.div` 90 106 flex-direction: column; 91 height: 100%;92 107 width: 70px; 93 108 padding: 20px 10px 0 10px; 94 109 border-right: 1px solid grey; 110 position: fixed; 111 height: 100%; 95 112 background-color: ${(props) => props.theme.palette.primary.main}; 96 113 `; … … 124 141 width: 100%; 125 142 height: 100%; 126 padding : 20px0px;143 padding-top: 20px; 127 144 display: flex; 128 145 flex-direction: column; 129 146 `; 147 148 export const MenuBurgerIcon = styled(MenuIcon).attrs((props) => ({ 149 sx: { 150 fontSize: 50, 151 color: `${props.theme.palette.primary.main}`, 152 }, 153 }))``;
Note:
See TracChangeset
for help on using the changeset viewer.