- Timestamp:
- 02/14/22 01:41:41 (2 years ago)
- Branches:
- master
- Children:
- 747e0ab
- Parents:
- e8b1076
- Location:
- sources/client/src/components/admin/ParkingZoneSessions/SessionCard
- Files:
-
- 2 edited
Legend:
- Unmodified
- Added
- Removed
-
sources/client/src/components/admin/ParkingZoneSessions/SessionCard/index.js
re8b1076 rbc20307 1 import { useState } from 'react'; 2 import moment from 'moment'; 3 1 4 import { 2 Wrapper, 3 SessionChildWrapper, 4 SessionChildTitle, 5 SeessionChildData, 6 InputAndCheckIconWrapper, 7 ParkingSpaceNumberInput, 8 CheckIcon, 9 DeleteButton, 10 ContinueButton, 5 Wrapper, 6 SessionChildWrapper, 7 SessionChildTitle, 8 SeessionChildData, 9 InputAndCheckIconWrapper, 10 ParkingSpaceNumberInput, 11 CheckIcon, 12 DeleteButton, 11 13 } from './styles'; 12 14 13 15 import { sessionStatus } from '../../../../config/enums'; 16 import { dateFormatString } from '../../../../config/utilities'; 14 17 import { IconButton } from '@mui/material'; 15 import { useState } from 'react'; 18 import AbsoluteLoader from '../../../Loaders/AbsoluteLoader'; 19 import useDeleteSession from '../../../../hooks/useDeleteSession'; 20 16 21 17 22 const sessionCardColors = { 18 active: '#389e0d', 19 idle: '#ffa940', 20 over: '#cf1322', 21 }; 22 23 const ActiveCard = ({ id, start, plate, status, parkingSpaceNumber }) => { 24 return ( 25 <Wrapper style={{ backgroundColor: sessionCardColors.active }}> 26 <SessionChildWrapper> 27 <SessionChildTitle>Почеток</SessionChildTitle> 28 <SeessionChildData>{start}</SeessionChildData> 29 </SessionChildWrapper> 30 31 <SessionChildWrapper> 32 <SessionChildTitle>Број на место</SessionChildTitle> 33 <SeessionChildData>{parkingSpaceNumber}</SeessionChildData> 34 </SessionChildWrapper> 35 36 <SessionChildWrapper> 37 <SessionChildTitle>Регистрација</SessionChildTitle> 38 <SeessionChildData>{plate}</SeessionChildData> 39 </SessionChildWrapper> 40 41 <SessionChildWrapper> 42 <DeleteButton>ИЗБРИШИ</DeleteButton> 43 </SessionChildWrapper> 44 </Wrapper> 45 ); 46 }; 47 48 const IdleCard = ({ id, start, plate, status, parkingSpaceNumber }) => { 49 const [parkingSpace, setParkingSpace] = useState(parkingSpaceNumber ?? ''); 50 return ( 51 <Wrapper style={{ backgroundColor: sessionCardColors.idle }}> 52 <SessionChildWrapper> 53 <SessionChildTitle>Почеток</SessionChildTitle> 54 <SeessionChildData>{start}</SeessionChildData> 55 </SessionChildWrapper> 56 57 <SessionChildWrapper> 58 <SessionChildTitle>Број на место</SessionChildTitle> 59 <InputAndCheckIconWrapper> 60 <ParkingSpaceNumberInput 61 value={parkingSpace} 62 onChange={(event) => setParkingSpace(event.target.value)} 63 /> 64 {parkingSpace !== '' ? ( 65 <IconButton> 66 <CheckIcon /> 67 </IconButton> 68 ) : null} 69 </InputAndCheckIconWrapper> 70 </SessionChildWrapper> 71 72 <SessionChildWrapper> 73 <SessionChildTitle>Регистрација</SessionChildTitle> 74 <SeessionChildData>{plate}</SeessionChildData> 75 </SessionChildWrapper> 76 77 <SessionChildWrapper> 78 <DeleteButton>ИЗБРИШИ</DeleteButton> 79 </SessionChildWrapper> 80 </Wrapper> 81 ); 82 }; 83 84 const OverCard = ({ id, start, end, plate, status, parkingSpaceNumber }) => { 85 return ( 86 <Wrapper style={{ backgroundColor: sessionCardColors.over }}> 87 <SessionChildWrapper> 88 <SessionChildWrapper> 89 <SessionChildTitle>Почеток</SessionChildTitle> 90 <SeessionChildData>{start}</SeessionChildData> 91 </SessionChildWrapper> 92 <SessionChildWrapper> 93 <SessionChildTitle>Крај</SessionChildTitle> 94 <SeessionChildData>{end}</SeessionChildData> 95 </SessionChildWrapper> 96 </SessionChildWrapper> 97 98 <SessionChildWrapper> 99 <SessionChildTitle>Број на место</SessionChildTitle> 100 <SeessionChildData>{parkingSpaceNumber}</SeessionChildData> 101 </SessionChildWrapper> 102 103 <SessionChildWrapper> 104 <SessionChildTitle>Регистрација</SessionChildTitle> 105 <SeessionChildData>{plate}</SeessionChildData> 106 </SessionChildWrapper> 107 108 <SessionChildWrapper> 109 <DeleteButton>ИЗБРИШИ</DeleteButton> 110 <ContinueButton>ПРОДОЛЖИ</ContinueButton> 111 </SessionChildWrapper> 112 </Wrapper> 113 ); 114 }; 115 116 const SessionCard = (props) => { 117 switch (props.status) { 118 case sessionStatus.active: 119 return <ActiveCard {...props} />; 120 case sessionStatus.idle: 121 return <IdleCard {...props} />; 122 case sessionStatus.over: 123 return <OverCard {...props} />; 124 default: 125 return null; 126 } 23 active: '#389e0d', 24 idle: '#ffa940', 25 over: '#cf1322', 26 }; 27 28 const ActiveCard = ({ 29 pssId, 30 timeStart, 31 zone, 32 plate, 33 status, 34 parkingSpace, 35 onDeleteSession, 36 }) => { 37 const { isLoading: isLoadingDeleteSession, deleteSession } = 38 useDeleteSession(); 39 const formatedTimeStart = moment(timeStart).format(dateFormatString); 40 return ( 41 <Wrapper style={{ backgroundColor: sessionCardColors.active }}> 42 <SessionChildWrapper> 43 <SessionChildTitle>Почеток</SessionChildTitle> 44 <SeessionChildData>{formatedTimeStart}</SeessionChildData> 45 </SessionChildWrapper> 46 47 <SessionChildWrapper> 48 <SessionChildTitle>Број на место</SessionChildTitle> 49 <SeessionChildData>{parkingSpace.psName}</SeessionChildData> 50 </SessionChildWrapper> 51 52 <SessionChildWrapper> 53 <SessionChildTitle>Регистрација</SessionChildTitle> 54 <SeessionChildData>{plate.plate}</SeessionChildData> 55 </SessionChildWrapper> 56 57 <SessionChildWrapper> 58 {isLoadingDeleteSession ? ( 59 <div style={{ width: '104px', textAlign: 'center' }}> 60 <AbsoluteLoader 61 containerStyle={{ 62 width: '40px', 63 height: '40px', 64 display: 'inline-block', 65 }} 66 /> 67 </div> 68 ) : ( 69 <DeleteButton 70 onClick={() => { 71 console.log(`CLICKED DELETE BUTTON ${pssId}`); 72 deleteSession({ pssId, onDeleteSession }); 73 }} 74 > 75 ИЗБРИШИ 76 </DeleteButton> 77 )} 78 </SessionChildWrapper> 79 </Wrapper> 80 ); 81 }; 82 83 const IdleCard = ({ 84 pssId, 85 timeStart, 86 zone, 87 plate, 88 status, 89 handleActivateSession, 90 isLoadingActivateSession, 91 onDeleteSession, 92 }) => { 93 const { isLoading: isLoadingDeleteSession, deleteSession } = 94 useDeleteSession(); 95 const [parkingSpaceName, setParkingSpaceName] = useState(''); 96 const formatedTimeStart = moment(timeStart).format(dateFormatString); 97 return ( 98 <Wrapper style={{ backgroundColor: sessionCardColors.idle }}> 99 <SessionChildWrapper> 100 <SessionChildTitle>Почеток</SessionChildTitle> 101 <SeessionChildData>{formatedTimeStart}</SeessionChildData> 102 </SessionChildWrapper> 103 104 <SessionChildWrapper> 105 <SessionChildTitle>Број на место</SessionChildTitle> 106 <InputAndCheckIconWrapper> 107 <ParkingSpaceNumberInput 108 value={parkingSpaceName} 109 onChange={(event) => 110 setParkingSpaceName(event.target.value.trim()) 111 } 112 /> 113 {parkingSpaceName !== '' ? ( 114 <> 115 {isLoadingActivateSession ? ( 116 <AbsoluteLoader 117 containerStyle={{ 118 width: '2rem', 119 height: '2rem', 120 display: 'inline-block', 121 }} 122 /> 123 ) : ( 124 <IconButton 125 onClick={() => 126 handleActivateSession({ 127 pssId, 128 parkingSpaceName, 129 }) 130 } 131 > 132 <CheckIcon /> 133 </IconButton> 134 )} 135 </> 136 ) : null} 137 </InputAndCheckIconWrapper> 138 </SessionChildWrapper> 139 140 <SessionChildWrapper> 141 <SessionChildTitle>Регистрација</SessionChildTitle> 142 <SeessionChildData>{plate.plate}</SeessionChildData> 143 </SessionChildWrapper> 144 145 <SessionChildWrapper> 146 {isLoadingDeleteSession ? ( 147 <div style={{ width: '104px', textAlign: 'center' }}> 148 <AbsoluteLoader 149 containerStyle={{ 150 width: '40px', 151 height: '40px', 152 display: 'inline-block', 153 }} 154 /> 155 </div> 156 ) : ( 157 <DeleteButton 158 onClick={() => { 159 console.log(`CLICKED DELETE BUTTON ${pssId}`); 160 deleteSession({ pssId, onDeleteSession }); 161 }} 162 > 163 ИЗБРИШИ 164 </DeleteButton> 165 )} 166 </SessionChildWrapper> 167 </Wrapper> 168 ); 169 }; 170 171 const OverCard = ({ 172 pssId, 173 timeStart, 174 timeEnd, 175 zone, 176 plate, 177 status, 178 parkingSpace, 179 onDeleteSession, 180 }) => { 181 const { isLoading: isLoadingDeleteSession, deleteSession } = 182 useDeleteSession(); 183 const formatedTimeStart = moment(timeStart).format(dateFormatString); 184 const formatedTimeEnd = moment(timeEnd).format(dateFormatString); 185 return ( 186 <Wrapper style={{ backgroundColor: sessionCardColors.over }}> 187 <SessionChildWrapper> 188 <SessionChildWrapper style={{ margin: 0 }}> 189 <SessionChildTitle>Почеток</SessionChildTitle> 190 <SeessionChildData>{formatedTimeStart}</SeessionChildData> 191 </SessionChildWrapper> 192 <SessionChildWrapper style={{ marginTop: '5px' }}> 193 <SessionChildTitle>Крај</SessionChildTitle> 194 <SeessionChildData>{formatedTimeEnd}</SeessionChildData> 195 </SessionChildWrapper> 196 </SessionChildWrapper> 197 198 <SessionChildWrapper> 199 <SessionChildTitle>Број на место</SessionChildTitle> 200 <SeessionChildData>{parkingSpace.psName}</SeessionChildData> 201 </SessionChildWrapper> 202 203 <SessionChildWrapper> 204 <SessionChildTitle>Регистрација</SessionChildTitle> 205 <SeessionChildData>{plate.plate}</SeessionChildData> 206 </SessionChildWrapper> 207 208 <SessionChildWrapper> 209 {isLoadingDeleteSession ? ( 210 <div style={{ width: '104px', textAlign: 'center' }}> 211 <AbsoluteLoader 212 containerStyle={{ 213 width: '40px', 214 height: '40px', 215 display: 'inline-block', 216 }} 217 /> 218 </div> 219 ) : ( 220 <DeleteButton 221 onClick={() => { 222 console.log(`CLICKED DELETE BUTTON ${pssId}`); 223 deleteSession({ pssId, onDeleteSession }); 224 }} 225 > 226 ИЗБРИШИ 227 </DeleteButton> 228 )} 229 </SessionChildWrapper> 230 </Wrapper> 231 ); 232 }; 233 234 const SessionCard = ({ 235 handleActivateSession, 236 isLoadingActivateSession, 237 ...commponProps 238 }) => { 239 switch (commponProps.status) { 240 case sessionStatus.active: 241 return <ActiveCard {...commponProps} />; 242 case sessionStatus.idle: 243 return ( 244 <IdleCard 245 {...commponProps} 246 handleActivateSession={handleActivateSession} 247 isLoadingActivateSession={isLoadingActivateSession} 248 /> 249 ); 250 case sessionStatus.over: 251 return <OverCard {...commponProps} />; 252 default: 253 return null; 254 } 127 255 }; 128 256 -
sources/client/src/components/admin/ParkingZoneSessions/SessionCard/styles.js
re8b1076 rbc20307 2 2 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; 3 3 import Button from '@mui/material/Button'; 4 import { mobile_max_width } from '../../../../config/utilities'; 4 5 5 6 export const Wrapper = styled.div` … … 15 16 font-size: 1rem; 16 17 box-shadow: 0 10px 5px -2px ${(props) => props.theme.palette.background.shadow}; 18 19 @media (max-width: ${mobile_max_width}px) { 20 height: 350px; 21 border-radius: 100px; 22 flex-direction: column; 23 } 17 24 `; 18 25 … … 20 27 display: flex; 21 28 flex-direction: column; 29 30 @media (max-width: ${mobile_max_width}px) { 31 margin-top: 15px; 32 :last-of-type { 33 margin-top: 30px; 34 } 35 } 22 36 `; 23 37 … … 38 52 position: relative; 39 53 40 button { 54 button, 55 > div { 41 56 padding: 0; 42 57 position: absolute; … … 69 84 } 70 85 `; 71 72 export const ContinueButton = styled(Button).attrs((props) => ({73 variant: 'contained',74 size: 'small',75 sx: {76 backgroundColor: `${props.theme.palette.primary.main}`,77 },78 }))`79 margin-top: 20px;80 81 :hover {82 background-color: ${(props) => props.theme.palette.primary.dark};83 }84 `;
Note:
See TracChangeset
for help on using the changeset viewer.