source: sources/client/src/components/admin/ParkingZones/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.0 KB
Line 
1import { useState, useContext } from 'react';
2import {
3 FiltersWrapper,
4 SortingArrowsWrapper,
5 SortByTitle,
6 ArrowDown,
7 ArrowUp,
8 ClearSortIcon,
9 ParkingZonesWrapper,
10 AddParkingZoneCard,
11 AddIcon,
12 AddItem,
13 ParkingName,
14 DividerUnderFilters,
15 ModalContainer,
16 ModalTitle,
17 ModalInputAndLabelWrapper,
18 ModalInput,
19 ModalInputLabel,
20 ModalButton,
21 ButtonWrapper,
22 CloseIcon,
23} from './styles';
24
25import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
26import Modal from '@mui/material/Modal';
27import Backdrop from '@mui/material/Backdrop';
28import { IconButton, Slide } from '@mui/material';
29import ParkingZoneCard from './ParkingZoneCard';
30
31import { roles } from '../../../config/enums';
32import { UserContext } from '../../../context/UserContext';
33import useGetData from '../../../hooks/useGetData';
34import useCreateZone from '../../../hooks/useCreateZone';
35
36import { parkingZones } from './mockData';
37
38const sortDownUp = (a, b) => {
39 const aPercent = a.takenParkingSpaces / a.parkingSpacesNumber;
40 const bPercent = b.takenParkingSpaces / b.parkingSpacesNumber;
41 if (aPercent > bPercent) {
42 return 1;
43 } else {
44 if (aPercent < bPercent) {
45 return -1;
46 }
47 return a.zoneName - b.zoneName;
48 }
49};
50
51const sortUpDown = (a, b) => {
52 const aPercent = a.takenParkingSpaces / a.parkingSpacesNumber;
53 const bPercent = b.takenParkingSpaces / b.parkingSpacesNumber;
54 if (aPercent > bPercent) {
55 return -1;
56 } else {
57 if (aPercent < bPercent) {
58 return 1;
59 }
60 return a.zoneName - b.zoneName;
61 }
62};
63
64const sortByName = (a, b) => {
65 if (a.zoneName >= b.zoneName) {
66 return 1;
67 }
68 return -1;
69};
70
71const ParkingZones = () => {
72 const { user } = useContext(UserContext);
73 const {
74 data: zones,
75 setData: setZones,
76 isLoading: isLoadingZones,
77 } = useGetData({
78 url: '/parkingZone',
79 });
80 const { createZone, isLoading: isCreateZoneLoading } = useCreateZone();
81 const [isArrowUpUp, setIsArrowUpUp] = useState(false);
82 const [isArrowDownUp, setIsArrowDownUp] = useState(false);
83 const [isModalOpen, setModalOpen] = useState(false);
84 const [modalInput, setModalInput] = useState('');
85 const sortFunc = isArrowUpUp
86 ? sortDownUp
87 : isArrowDownUp
88 ? sortUpDown
89 : sortByName;
90
91 const addNewZoneToData = (newZone) => {
92 setZones([...zones, newZone]);
93 };
94 const handleCreateZone = () => {
95 createZone({
96 zoneName: modalInput,
97 setModalInput,
98 setModalOpen,
99 addNewZoneToData,
100 });
101 };
102
103 return (
104 <>
105 <Modal
106 open={isModalOpen}
107 onClose={() => {
108 setModalInput('');
109 setModalOpen(false);
110 }}
111 closeAfterTransition
112 BackdropComponent={Backdrop}
113 BackdropProps={{
114 timeout: 500,
115 }}
116 style={{
117 display: 'flex',
118 alignItems: 'center',
119 justifyContent: 'center',
120 }}
121 >
122 <Slide in={isModalOpen}>
123 <ModalContainer>
124 <IconButton
125 style={{
126 marginLeft: 345,
127 }}
128 onClick={() => {
129 setModalInput('');
130 setModalOpen(false);
131 }}
132 >
133 <CloseIcon />
134 </IconButton>
135 {isCreateZoneLoading ? (
136 <AbsoluteLoader
137 containerStyle={{
138 width: '200px',
139 height: '200px',
140 margin: 'auto',
141 marginTop: '30px',
142 }}
143 />
144 ) : (
145 <>
146 <ModalTitle>НОВА ЗОНА</ModalTitle>
147 <ModalInputAndLabelWrapper>
148 <ModalInputLabel>
149 Назив на Зона
150 </ModalInputLabel>
151 <ModalInput
152 value={modalInput}
153 onChange={(event) =>
154 setModalInput(event.target.value)
155 }
156 />
157 </ModalInputAndLabelWrapper>
158 <ButtonWrapper>
159 <ModalButton onClick={handleCreateZone}>
160 Креирај Зона
161 </ModalButton>
162 </ButtonWrapper>
163 </>
164 )}
165 </ModalContainer>
166 </Slide>
167 </Modal>
168 <FiltersWrapper>
169 <ParkingName>Паркинг - Дебар Маало</ParkingName>
170 <SortingArrowsWrapper>
171 <SortByTitle>Сортирај:</SortByTitle>
172 <ArrowUp
173 onClick={() => {
174 if (!isArrowUpUp) {
175 setIsArrowUpUp(true);
176 setIsArrowDownUp(false);
177 }
178 }}
179 selected={isArrowUpUp}
180 />
181 <ArrowDown
182 onClick={() => {
183 if (!isArrowDownUp) {
184 setIsArrowDownUp(true);
185 setIsArrowUpUp(false);
186 }
187 }}
188 selected={isArrowDownUp}
189 />
190 {isArrowUpUp || isArrowDownUp ? (
191 <ClearSortIcon
192 onClick={() => {
193 setIsArrowUpUp(false);
194 setIsArrowDownUp(false);
195 }}
196 />
197 ) : null}
198 </SortingArrowsWrapper>
199 </FiltersWrapper>
200
201 <DividerUnderFilters />
202
203 <ParkingZonesWrapper container spacing={{ xs: 3, md: 5 }}>
204 {isLoadingZones ? (
205 <AbsoluteLoader
206 containerStyle={{
207 width: '250px',
208 height: '250px',
209 margin: 'auto',
210 marginTop: '12vw',
211 }}
212 />
213 ) : (
214 <>
215 {user.role === roles.admin ? (
216 <AddParkingZoneCard
217 item
218 xs={11}
219 sm={6}
220 md={3}
221 onClick={() => setModalOpen(true)}
222 >
223 <AddItem>
224 <AddIcon />
225 </AddItem>
226 </AddParkingZoneCard>
227 ) : null}
228
229 {zones.sort(sortFunc).map((parkingZone) => (
230 <ParkingZoneCard
231 key={parkingZone.id}
232 info={parkingZone}
233 />
234 ))}
235 </>
236 )}
237 </ParkingZonesWrapper>
238 </>
239 );
240};
241
242export default ParkingZones;
Note: See TracBrowser for help on using the repository browser.