1 | import {
|
---|
2 | Wrapper,
|
---|
3 | SessionChildWrapper,
|
---|
4 | SessionChildTitle,
|
---|
5 | SeessionChildData,
|
---|
6 | InputAndCheckIconWrapper,
|
---|
7 | ParkingSpaceNumberInput,
|
---|
8 | CheckIcon,
|
---|
9 | DeleteButton,
|
---|
10 | ContinueButton,
|
---|
11 | } from './styles';
|
---|
12 |
|
---|
13 | import { sessionStatus } from '../../../../config/enums';
|
---|
14 | import { IconButton } from '@mui/material';
|
---|
15 | import { useState } from 'react';
|
---|
16 |
|
---|
17 | 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 | }
|
---|
127 | };
|
---|
128 |
|
---|
129 | export default SessionCard;
|
---|