Last change
on this file since 747e0ab was bc20307, checked in by Tasevski2 <39170279+Tasevski2@…>, 2 years ago |
Push before video
|
-
Property mode
set to
100644
|
File size:
7.0 KB
|
Rev | Line | |
---|
[bc20307] | 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.