source: sources/client/src/components/admin/ParkingZoneSessions/SessionCard/index.js@ bc20307

Last change on this file since bc20307 was bc20307, checked in by Tasevski2 <39170279+Tasevski2@…>, 2 years ago

Push before video
  • Property mode set to 100644
File size: 8.9 KB
Line 
1import { useState } from 'react';
2import moment from 'moment';
3
4import {
5 Wrapper,
6 SessionChildWrapper,
7 SessionChildTitle,
8 SeessionChildData,
9 InputAndCheckIconWrapper,
10 ParkingSpaceNumberInput,
11 CheckIcon,
12 DeleteButton,
13} from './styles';
14
15import { sessionStatus } from '../../../../config/enums';
16import { dateFormatString } from '../../../../config/utilities';
17import { IconButton } from '@mui/material';
18import AbsoluteLoader from '../../../Loaders/AbsoluteLoader';
19import useDeleteSession from '../../../../hooks/useDeleteSession';
20
21
22const sessionCardColors = {
23 active: '#389e0d',
24 idle: '#ffa940',
25 over: '#cf1322',
26};
27
28const 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
83const 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
171const 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
234const 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 }
255};
256
257export default SessionCard;
Note: See TracBrowser for help on using the repository browser.