source: sources/client/src/components/admin/ParkingZoneInfoEdit/ParkingSpacesSectorEdit/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: 7.0 KB
Line 
1import { IconButton } from '@mui/material';
2import {
3 Wrapper,
4 Title,
5 DividerUnderTitle,
6 ParkingSpacesNumberWrapper,
7 NumberLabel,
8 NumberValue,
9 TableWrapper,
10 TopPartWrapper,
11 AddIcon,
12 DeleteIcon,
13 TableDataInput,
14} from './styles';
15
16const ParkingSpacesSector = ({
17 parkingSpacesNumber = 0,
18 parkingSpaces = [],
19 newParkingSpace = null,
20 setNewParkingSpace,
21 handleParkingSpacesChange,
22}) => {
23 return (
24 <Wrapper>
25 <TopPartWrapper>
26 <Title>Паркинг Места</Title>
27 <DividerUnderTitle />
28 <ParkingSpacesNumberWrapper>
29 <NumberLabel>Вкупно паркинг места:</NumberLabel>
30 <NumberValue>{parkingSpacesNumber}</NumberValue>
31 </ParkingSpacesNumberWrapper>
32 </TopPartWrapper>
33 <TableWrapper>
34 <table>
35 <thead>
36 <tr>
37 <th></th>
38 <th>Латитуда</th>
39 <th>Лонгитуда</th>
40 <th>Број</th>
41 <th></th>
42 </tr>
43 </thead>
44 <tbody>
45 <tr className='add-row'>
46 <td></td>
47 <td className='add-td'>
48 <TableDataInput
49 value={newParkingSpace?.lat ?? ''}
50 onChange={(e) =>
51 setNewParkingSpace({
52 ...newParkingSpace,
53 lat: e.target.value,
54 })
55 }
56 />
57 </td>
58 <td className='add-td'>
59 <TableDataInput
60 value={newParkingSpace?.lng ?? ''}
61 onChange={(e) =>
62 setNewParkingSpace({
63 ...newParkingSpace,
64 lng: e.target.value,
65 })
66 }
67 />
68 </td>
69 <td className='add-td'>
70 <TableDataInput
71 value={newParkingSpace?.psName ?? ''}
72 onChange={(e) =>
73 setNewParkingSpace({
74 ...newParkingSpace,
75 psName: e.target.value,
76 })
77 }
78 />
79 </td>
80 <td>
81 <IconButton
82 style={{ padding: 3.5 }}
83 onClick={() =>
84 handleParkingSpacesChange({ type: 'add' })
85 }
86 >
87 <AddIcon />
88 </IconButton>
89 </td>
90 </tr>
91 {parkingSpaces &&
92 parkingSpaces.map(({ lat, lng, psName }, index) => (
93 <tr key={index}>
94 <td>
95 <IconButton
96 style={{ padding: 3.5 }}
97 onClick={() =>
98 handleParkingSpacesChange({
99 type: 'delete',
100 payload: {
101 index,
102 },
103 })
104 }
105 >
106 <DeleteIcon />
107 </IconButton>
108 </td>
109 <td>
110 <TableDataInput
111 value={lat}
112 onChange={(e) =>
113 handleParkingSpacesChange({
114 type: 'update',
115 payload: {
116 index,
117 column: 'lat',
118 value: e.target.value,
119 },
120 })
121 }
122 />
123 </td>
124 <td>
125 <TableDataInput
126 value={lng}
127 onChange={(e) =>
128 handleParkingSpacesChange({
129 type: 'update',
130 payload: {
131 index,
132 column: 'lng',
133 value: e.target.value,
134 },
135 })
136 }
137 />
138 </td>
139 <td>
140 <TableDataInput
141 value={psName}
142 onChange={(e) =>
143 handleParkingSpacesChange({
144 type: 'update',
145 payload: {
146 index,
147 column: 'psName',
148 value: e.target.value,
149 },
150 })
151 }
152 />
153 </td>
154 <td></td>
155 </tr>
156 ))}
157 </tbody>
158 </table>
159 </TableWrapper>
160 </Wrapper>
161 );
162};
163
164export default ParkingSpacesSector;
Note: See TracBrowser for help on using the repository browser.