import { useState, useContext } from 'react';
import {
FiltersWrapper,
SortingArrowsWrapper,
SortByTitle,
ArrowDown,
ArrowUp,
ClearSortIcon,
ParkingZonesWrapper,
AddParkingZoneCard,
AddIcon,
AddItem,
ParkingName,
DividerUnderFilters,
ModalContainer,
ModalTitle,
ModalInputAndLabelWrapper,
ModalInput,
ModalInputLabel,
ModalButton,
ButtonWrapper,
CloseIcon,
} from './styles';
import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
import Modal from '@mui/material/Modal';
import Backdrop from '@mui/material/Backdrop';
import { IconButton, Slide } from '@mui/material';
import ParkingZoneCard from './ParkingZoneCard';
import { roles } from '../../../config/enums';
import { UserContext } from '../../../context/UserContext';
import useGetData from '../../../hooks/useGetData';
import useCreateZone from '../../../hooks/useCreateZone';
import { parkingZones } from './mockData';
const sortDownUp = (a, b) => {
const aPercent = a.takenParkingSpaces / a.parkingSpacesNumber;
const bPercent = b.takenParkingSpaces / b.parkingSpacesNumber;
if (aPercent > bPercent) {
return 1;
} else {
if (aPercent < bPercent) {
return -1;
}
return a.zoneName - b.zoneName;
}
};
const sortUpDown = (a, b) => {
const aPercent = a.takenParkingSpaces / a.parkingSpacesNumber;
const bPercent = b.takenParkingSpaces / b.parkingSpacesNumber;
if (aPercent > bPercent) {
return -1;
} else {
if (aPercent < bPercent) {
return 1;
}
return a.zoneName - b.zoneName;
}
};
const sortByName = (a, b) => {
if (a.zoneName >= b.zoneName) {
return 1;
}
return -1;
};
const ParkingZones = () => {
const { user } = useContext(UserContext);
const {
data: zones,
setData: setZones,
isLoading: isLoadingZones,
} = useGetData({
url: '/parkingZone',
});
const { createZone, isLoading: isCreateZoneLoading } = useCreateZone();
const [isArrowUpUp, setIsArrowUpUp] = useState(false);
const [isArrowDownUp, setIsArrowDownUp] = useState(false);
const [isModalOpen, setModalOpen] = useState(false);
const [modalInput, setModalInput] = useState('');
const sortFunc = isArrowUpUp
? sortDownUp
: isArrowDownUp
? sortUpDown
: sortByName;
const addNewZoneToData = (newZone) => {
setZones([...zones, newZone]);
};
const handleCreateZone = () => {
createZone({
zoneName: modalInput,
setModalInput,
setModalOpen,
addNewZoneToData,
});
};
return (
<>
{
setModalInput('');
setModalOpen(false);
}}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
{
setModalInput('');
setModalOpen(false);
}}
>
{isCreateZoneLoading ? (
) : (
<>
НОВА ЗОНА
Назив на Зона
setModalInput(event.target.value)
}
/>
Креирај Зона
>
)}
Паркинг - Дебар Маало
Сортирај:
{
if (!isArrowUpUp) {
setIsArrowUpUp(true);
setIsArrowDownUp(false);
}
}}
selected={isArrowUpUp}
/>
{
if (!isArrowDownUp) {
setIsArrowDownUp(true);
setIsArrowUpUp(false);
}
}}
selected={isArrowDownUp}
/>
{isArrowUpUp || isArrowDownUp ? (
{
setIsArrowUpUp(false);
setIsArrowDownUp(false);
}}
/>
) : null}
{isLoadingZones ? (
) : (
<>
{user.role === roles.admin ? (
setModalOpen(true)}
>
) : null}
{zones.sort(sortFunc).map((parkingZone) => (
))}
>
)}
>
);
};
export default ParkingZones;