[bc20307] | 1 | import { useState } from 'react';
|
---|
| 2 | import moment from 'moment';
|
---|
| 3 |
|
---|
[3a58bd6] | 4 | import {
|
---|
[bc20307] | 5 | Wrapper,
|
---|
| 6 | SessionChildWrapper,
|
---|
| 7 | SessionChildTitle,
|
---|
| 8 | SeessionChildData,
|
---|
| 9 | InputAndCheckIconWrapper,
|
---|
| 10 | ParkingSpaceNumberInput,
|
---|
| 11 | CheckIcon,
|
---|
| 12 | DeleteButton,
|
---|
[3a58bd6] | 13 | } from './styles';
|
---|
| 14 |
|
---|
| 15 | import { sessionStatus } from '../../../../config/enums';
|
---|
[bc20307] | 16 | import { dateFormatString } from '../../../../config/utilities';
|
---|
[3a58bd6] | 17 | import { IconButton } from '@mui/material';
|
---|
[bc20307] | 18 | import AbsoluteLoader from '../../../Loaders/AbsoluteLoader';
|
---|
| 19 | import useDeleteSession from '../../../../hooks/useDeleteSession';
|
---|
| 20 |
|
---|
[3a58bd6] | 21 |
|
---|
| 22 | const sessionCardColors = {
|
---|
[bc20307] | 23 | active: '#389e0d',
|
---|
| 24 | idle: '#ffa940',
|
---|
| 25 | over: '#cf1322',
|
---|
[3a58bd6] | 26 | };
|
---|
| 27 |
|
---|
[bc20307] | 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 | );
|
---|
[3a58bd6] | 81 | };
|
---|
| 82 |
|
---|
[bc20307] | 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 | );
|
---|
[3a58bd6] | 169 | };
|
---|
| 170 |
|
---|
[bc20307] | 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 | );
|
---|
[3a58bd6] | 232 | };
|
---|
| 233 |
|
---|
[bc20307] | 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 | }
|
---|
[3a58bd6] | 255 | };
|
---|
| 256 |
|
---|
| 257 | export default SessionCard;
|
---|