Ignore:
Timestamp:
02/14/22 01:41:41 (2 years ago)
Author:
Tasevski2 <39170279+Tasevski2@…>
Branches:
master
Children:
747e0ab
Parents:
e8b1076
Message:

Push before video

File:
1 edited

Legend:

Unmodified
Added
Removed

  • sources/client/src/components/admin/ParkingZones/index.js

    re8b1076 rbc20307  
    1 import { useState } from 'react';
     1import { useState, useContext } from 'react';
    22import {
    3   FiltersWrapper,
    4   SortingArrowsWrapper,
    5   SortByTitle,
    6   ArrowDown,
    7   ArrowUp,
    8   ClearSortIcon,
    9   ParkingZonesWrapper,
    10   AddParkingZoneCard,
    11   AddIcon,
    12   AddItem,
    13   ParkingName,
    14   DividerUnderFilters,
     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,
    1523} from './styles';
    1624
     25import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
     26import Modal from '@mui/material/Modal';
     27import Backdrop from '@mui/material/Backdrop';
     28import { IconButton, Slide } from '@mui/material';
    1729import ParkingZoneCard from './ParkingZoneCard';
    1830
    1931import { roles } from '../../../config/enums';
     32import { UserContext } from '../../../context/UserContext';
     33import useGetData from '../../../hooks/useGetData';
     34import useCreateZone from '../../../hooks/useCreateZone';
    2035
    2136import { parkingZones } from './mockData';
    2237
    2338const sortDownUp = (a, b) => {
    24   const aPercent = a.takenParkingSpaces / a.parkingSpaces;
    25   const bPercent = b.takenParkingSpaces / b.parkingSpaces;
    26   if (aPercent > bPercent) {
    27     return 1;
    28   } else {
    29     if (aPercent < bPercent) {
    30       return -1;
     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;
    3148    }
    32     return a.zoneName - b.zoneName;
    33   }
    3449};
    3550
    3651const sortUpDown = (a, b) => {
    37   const aPercent = a.takenParkingSpaces / a.parkingSpaces;
    38   const bPercent = b.takenParkingSpaces / b.parkingSpaces;
    39   if (aPercent > bPercent) {
     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    }
    4068    return -1;
    41   } else {
    42     if (aPercent < bPercent) {
    43       return 1;
    44     }
    45     return a.zoneName - b.zoneName;
    46   }
    47 };
    48 
    49 const sortByName = (a, b) => {
    50   if (a.zoneName >= b.zoneName) {
    51     return 1;
    52   }
    53   return -1;
    5469};
    5570
    5671const ParkingZones = () => {
    57   const [isArrowUpUp, setIsArrowUpUp] = useState(false);
    58   const [isArrowDownUp, setIsArrowDownUp] = useState(false);
    59 
    60   const user = {
    61     role: 'ROLE_ADMIN',
    62   };
    63   const sortFunc = isArrowUpUp
    64     ? sortDownUp
    65     : isArrowDownUp
    66     ? sortUpDown
    67     : sortByName;
    68 
    69   return (
    70     <>
    71       <FiltersWrapper>
    72         <ParkingName>Паркинг - Дебар Маало</ParkingName>
    73         <SortingArrowsWrapper>
    74           <SortByTitle>Сортирај:</SortByTitle>
    75           <ArrowUp
    76             onClick={() => {
    77               if (!isArrowUpUp) {
    78                 setIsArrowUpUp(true);
    79                 setIsArrowDownUp(false);
    80               }
    81             }}
    82             selected={isArrowUpUp}
    83           />
    84           <ArrowDown
    85             onClick={() => {
    86               if (!isArrowDownUp) {
    87                 setIsArrowDownUp(true);
    88                 setIsArrowUpUp(false);
    89               }
    90             }}
    91             selected={isArrowDownUp}
    92           />
    93           {isArrowUpUp || isArrowDownUp ? (
    94             <ClearSortIcon
    95               onClick={() => {
    96                 setIsArrowUpUp(false);
    97                 setIsArrowDownUp(false);
    98               }}
    99             />
    100           ) : null}
    101         </SortingArrowsWrapper>
    102       </FiltersWrapper>
    103 
    104       <DividerUnderFilters />
    105 
    106       <ParkingZonesWrapper container spacing={{ xs: 3, md: 5 }}>
    107         {user.role === roles.admin ? (
    108           <AddParkingZoneCard item xs={11} sm={6} md={3}>
    109             <AddItem>
    110               <AddIcon />
    111             </AddItem>
    112           </AddParkingZoneCard>
    113         ) : null}
    114 
    115         {parkingZones.sort(sortFunc).map((parkingZone) => (
    116           <ParkingZoneCard key={parkingZone.id} info={parkingZone} />
    117         ))}
    118       </ParkingZonesWrapper>
    119     </>
    120   );
     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    );
    121240};
    122241
Note: See TracChangeset for help on using the changeset viewer.