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

Location:
sources/client/src/components/admin/ParkingZone
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    re8b1076 rbc20307  
    1 import { useState } from 'react';
     1import { useState, useContext, useEffect } from 'react';
    22import { useParams } from 'react-router-dom';
    33
    … …  
    77import ParkingZoneSessions from '../ParkingZoneSessions';
    88import GoogleMaps from '../../GoogleMaps';
    9 
     9import CircularProgress from '@mui/material/CircularProgress';
    1010import {
    11   NamesWrapper,
    12   ParkingAndZoneName,
    13   DividerUnderNames,
    14   NavigationIconsWrapper,
    15   MainSection,
    16   MapsIcon,
    17   ComponentIcon,
     11    NamesWrapper,
     12    ParkingAndZoneName,
     13    DividerUnderNames,
     14    NavigationIconsWrapper,
     15    MainSection,
     16    MapsIcon,
     17    ComponentIcon,
     18    ZoneNameLoader,
    1819} from './styles';
    1920
     21import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
    2022import { roles } from '../../../config/enums';
     23import { UserContext } from '../../../context/UserContext';
     24import useGetData from '../../../hooks/useGetData';
    2125
    22 import { parkingZones } from '../ParkingZones/mockData';
     26const defaultLocationObj = {
     27    centre: {
     28        lat: 42.000629,
     29        lng: 21.420525,
     30    },
     31    coords: []
     32};
     33
     34const mockResponsiblePersons = [
     35    // TODO DELTE THIS
     36    {
     37        id: 1,
     38        email: 'viktor-tasevski@hotmail.com',
     39        firstName: 'Viktor',
     40        lastName: 'Tasevski',
     41    },
     42    {
     43        id: 3,
     44        email: 'david_trajkovski@yahoo.com',
     45        firstName: 'David',
     46        lastName: 'Trajkovski',
     47    },
     48];
    2349
    2450const activeComponentEnum = {
    25   MAPS: 'maps',
    26   INFO: 'info',
     51    MAPS: 'maps',
     52    INFO: 'info',
    2753};
    2854
    2955const ParkingZone = () => {
    30   const { zone_id } = useParams();
    31   const [activeComponent, setActiveComponent] = useState(
    32     activeComponentEnum.MAPS
    33   );
     56    const { user } = useContext(UserContext);
     57    const { zone_id } = useParams();
     58    const url = `/parkingZone/${zone_id}`;
     59    const { data: zoneData, isLoading: isLoadingZoneData } = useGetData({
     60        url: url,
     61    });
    3462
    35   const user = {
    36     role: 'ROLE_ADMIN',
    37   };
     63    const [zoneState, setZoneState] = useState(null);
     64    const [activeComponent, setActiveComponent] = useState(
     65        activeComponentEnum.MAPS
     66    );
    3867
    39   const zone = parkingZones.find((z) => z.id === parseInt(zone_id));
    40   const Info =
    41     user.role !== roles.admin ? ParkingZoneInfo : ParkingZoneSessions;
    42   return (
    43     <>
    44       <NamesWrapper>
    45         <ParkingAndZoneName>Паркинг - Дебар Маало</ParkingAndZoneName>
    46         <ParkingAndZoneName>{zone?.zoneName}</ParkingAndZoneName>
    47       </NamesWrapper>
     68    const setZone = (updatedZone) => {
     69        setZoneState({ ...updatedZone });
     70    };
     71    const Info =
     72        user.role === roles.admin ? ParkingZoneInfo : ParkingZoneSessions;
    4873
    49       <DividerUnderNames />
     74    useEffect(() => {
     75        setZoneState({
     76            ...zoneData
     77        });
     78    }, [zoneData]);
     79    return (
     80        <>
     81            <NamesWrapper>
     82                <ParkingAndZoneName>Паркинг - Дебар Маало</ParkingAndZoneName>
     83                <ParkingAndZoneName className='zone-name'>
     84                    Зона
     85                    {isLoadingZoneData ? (
     86                        <ZoneNameLoader />
     87                    ) : (
     88                        ` - ${zoneState?.pzName ?? ''}`
     89                    )}
     90                </ParkingAndZoneName>
     91            </NamesWrapper>
    5092
    51       <NavigationIconsWrapper>
    52         <IconButton
    53           onClick={() => setActiveComponent(activeComponentEnum.MAPS)}
    54         >
    55           <MapsIcon $isactive={activeComponent === activeComponentEnum.MAPS} />
    56         </IconButton>
    57         <IconButton
    58           onClick={() => setActiveComponent(activeComponentEnum.INFO)}
    59         >
    60           <ComponentIcon
    61             $isactive={activeComponent === activeComponentEnum.INFO}
    62           />
    63         </IconButton>
    64       </NavigationIconsWrapper>
     93            <DividerUnderNames />
    6594
    66       <MainSection>
    67         {activeComponent === activeComponentEnum.MAPS ? (
    68           <GoogleMaps
    69             location={zone.location}
    70             parkingSpacesLocation={zone.parkingSpacesLocation}
    71             zoneAreaColor={zone.areaColor}
    72           />
    73         ) : (
    74           <Info zone={zone} />
    75         )}
    76       </MainSection>
    77     </>
    78   );
     95            <NavigationIconsWrapper>
     96                <IconButton
     97                    onClick={() => setActiveComponent(activeComponentEnum.MAPS)}
     98                >
     99                    <MapsIcon
     100                        $isactive={activeComponent === activeComponentEnum.MAPS}
     101                    />
     102                </IconButton>
     103                <IconButton
     104                    onClick={() => setActiveComponent(activeComponentEnum.INFO)}
     105                >
     106                    <ComponentIcon
     107                        $isactive={activeComponent === activeComponentEnum.INFO}
     108                    />
     109                </IconButton>
     110            </NavigationIconsWrapper>
     111
     112            <MainSection>
     113                {isLoadingZoneData ? (
     114                    <AbsoluteLoader
     115                        containerStyle={{
     116                            width: '250px',
     117                            height: '250px',
     118                            margin: 'auto',
     119                            marginTop: '12vw',
     120                        }}
     121                    />
     122                ) : (
     123                    <>
     124                        {activeComponent === activeComponentEnum.MAPS ? (
     125                            <GoogleMaps
     126                                location={zoneState.parkingZoneLocation ?? defaultLocationObj}
     127                                parkingSpaces={zoneState.parkingSpaces}
     128                                zoneAreaColor={zoneState.color}
     129                            />
     130                        ) : (
     131                            <Info zone={zoneState} setZone={setZone} />
     132                        )}
     133                    </>
     134                )}
     135            </MainSection>
     136        </>
     137    );
    79138};
    80139

  • sources/client/src/components/admin/ParkingZone/styles.js

    re8b1076 rbc20307  
    33import MapOutlinedIcon from '@mui/icons-material/MapOutlined';
    44import EqualizerOutlinedIcon from '@mui/icons-material/EqualizerOutlined';
     5import { mobile_max_width } from '../../../config/utilities';
     6import CircularProgress from '@mui/material/CircularProgress';
    57
    68export const NamesWrapper = styled.div`
    … …  
    1113  justify-content: space-between;
    1214  align-items: center;
    13   padding: 10px 175px;
     15  padding: 10px 10%;
     16
     17  @media (max-width: ${mobile_max_width}px) {
     18    flex-direction: column;
     19    .zone-name {
     20      margin-top: 30px;
     21    }
     22  }
    1423`;
    1524
    … …  
    1928  margin: 0,
    2029  color: `${props.theme.palette.primary.main}`,
    21 }))``;
     30}))`
     31  display: flex;
     32  align-items: center;
     33`;
     34
     35export const ZoneNameLoader = styled(CircularProgress).attrs({
     36  size: 40,
     37  sx: {
     38    marginLeft: '10px',
     39  },
     40})`
     41  .MuiCircularProgress-svg {
     42    color: ${(props) => props.theme.palette.primary.light};
     43  }
     44`;
    2245
    2346export const DividerUnderNames = styled(Divider).attrs({
    2447  variant: 'middle',
    2548  sx: {
    26     margin: '0 160px',
     49    margin: '0 9%',
    2750    borderWidth: '2px',
    2851    borderBottomWidth: 'thin',
Note: See TracChangeset for help on using the changeset viewer.