Last change
on this file was bc20307, checked in by Tasevski2 <39170279+Tasevski2@…>, 3 years ago |
Push before video
|
-
Property mode
set to
100644
|
File size:
7.0 KB
|
Line | |
---|
1 | import { IconButton } from '@mui/material';
|
---|
2 | import {
|
---|
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 |
|
---|
16 | const 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 |
|
---|
164 | export default ParkingSpacesSector;
|
---|
Note:
See
TracBrowser
for help on using the repository browser.