[bc20307] | 1 | import { useState, useContext } from 'react';
|
---|
[3a58bd6] | 2 | import {
|
---|
[bc20307] | 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,
|
---|
[3a58bd6] | 23 | } from './styles';
|
---|
| 24 |
|
---|
[bc20307] | 25 | import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
|
---|
| 26 | import Modal from '@mui/material/Modal';
|
---|
| 27 | import Backdrop from '@mui/material/Backdrop';
|
---|
| 28 | import { IconButton, Slide } from '@mui/material';
|
---|
[3a58bd6] | 29 | import ParkingZoneCard from './ParkingZoneCard';
|
---|
| 30 |
|
---|
| 31 | import { roles } from '../../../config/enums';
|
---|
[bc20307] | 32 | import { UserContext } from '../../../context/UserContext';
|
---|
| 33 | import useGetData from '../../../hooks/useGetData';
|
---|
| 34 | import useCreateZone from '../../../hooks/useCreateZone';
|
---|
[3a58bd6] | 35 |
|
---|
| 36 | import { parkingZones } from './mockData';
|
---|
| 37 |
|
---|
| 38 | const sortDownUp = (a, b) => {
|
---|
[bc20307] | 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;
|
---|
[3a58bd6] | 48 | }
|
---|
| 49 | };
|
---|
| 50 |
|
---|
| 51 | const sortUpDown = (a, b) => {
|
---|
[bc20307] | 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;
|
---|
[3a58bd6] | 61 | }
|
---|
| 62 | };
|
---|
| 63 |
|
---|
| 64 | const sortByName = (a, b) => {
|
---|
[bc20307] | 65 | if (a.zoneName >= b.zoneName) {
|
---|
| 66 | return 1;
|
---|
| 67 | }
|
---|
| 68 | return -1;
|
---|
[3a58bd6] | 69 | };
|
---|
| 70 |
|
---|
| 71 | const ParkingZones = () => {
|
---|
[bc20307] | 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;
|
---|
[3a58bd6] | 90 |
|
---|
[bc20307] | 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 | };
|
---|
[3a58bd6] | 102 |
|
---|
[bc20307] | 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>
|
---|
[3a58bd6] | 200 |
|
---|
[bc20307] | 201 | <DividerUnderFilters />
|
---|
[3a58bd6] | 202 |
|
---|
[bc20307] | 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}
|
---|
[3a58bd6] | 228 |
|
---|
[bc20307] | 229 | {zones.sort(sortFunc).map((parkingZone) => (
|
---|
| 230 | <ParkingZoneCard
|
---|
| 231 | key={parkingZone.id}
|
---|
| 232 | info={parkingZone}
|
---|
| 233 | />
|
---|
| 234 | ))}
|
---|
| 235 | </>
|
---|
| 236 | )}
|
---|
| 237 | </ParkingZonesWrapper>
|
---|
| 238 | </>
|
---|
| 239 | );
|
---|
[3a58bd6] | 240 | };
|
---|
| 241 |
|
---|
| 242 | export default ParkingZones;
|
---|