[bc20307] | 1 | import { useState, useContext, useEffect } from 'react';
|
---|
[3a58bd6] | 2 | import { useParams } from 'react-router-dom';
|
---|
| 3 |
|
---|
| 4 | import { IconButton } from '@mui/material';
|
---|
| 5 |
|
---|
| 6 | import ParkingZoneInfo from '../ParkingZoneInfo';
|
---|
| 7 | import ParkingZoneSessions from '../ParkingZoneSessions';
|
---|
| 8 | import GoogleMaps from '../../GoogleMaps';
|
---|
[bc20307] | 9 | import CircularProgress from '@mui/material/CircularProgress';
|
---|
[3a58bd6] | 10 | import {
|
---|
[bc20307] | 11 | NamesWrapper,
|
---|
| 12 | ParkingAndZoneName,
|
---|
| 13 | DividerUnderNames,
|
---|
| 14 | NavigationIconsWrapper,
|
---|
| 15 | MainSection,
|
---|
| 16 | MapsIcon,
|
---|
| 17 | ComponentIcon,
|
---|
| 18 | ZoneNameLoader,
|
---|
[3a58bd6] | 19 | } from './styles';
|
---|
| 20 |
|
---|
[bc20307] | 21 | import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
|
---|
[3a58bd6] | 22 | import { roles } from '../../../config/enums';
|
---|
[bc20307] | 23 | import { UserContext } from '../../../context/UserContext';
|
---|
| 24 | import useGetData from '../../../hooks/useGetData';
|
---|
| 25 |
|
---|
| 26 | const defaultLocationObj = {
|
---|
| 27 | centre: {
|
---|
| 28 | lat: 42.000629,
|
---|
| 29 | lng: 21.420525,
|
---|
| 30 | },
|
---|
| 31 | coords: []
|
---|
| 32 | };
|
---|
[3a58bd6] | 33 |
|
---|
[bc20307] | 34 | const 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 | ];
|
---|
[3a58bd6] | 49 |
|
---|
| 50 | const activeComponentEnum = {
|
---|
[bc20307] | 51 | MAPS: 'maps',
|
---|
| 52 | INFO: 'info',
|
---|
[3a58bd6] | 53 | };
|
---|
| 54 |
|
---|
| 55 | const ParkingZone = () => {
|
---|
[bc20307] | 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 | });
|
---|
| 62 |
|
---|
| 63 | const [zoneState, setZoneState] = useState(null);
|
---|
| 64 | const [activeComponent, setActiveComponent] = useState(
|
---|
| 65 | activeComponentEnum.MAPS
|
---|
| 66 | );
|
---|
[3a58bd6] | 67 |
|
---|
[bc20307] | 68 | const setZone = (updatedZone) => {
|
---|
| 69 | setZoneState({ ...updatedZone });
|
---|
| 70 | };
|
---|
| 71 | const Info =
|
---|
| 72 | user.role === roles.admin ? ParkingZoneInfo : ParkingZoneSessions;
|
---|
[3a58bd6] | 73 |
|
---|
[bc20307] | 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>
|
---|
[3a58bd6] | 92 |
|
---|
[bc20307] | 93 | <DividerUnderNames />
|
---|
[3a58bd6] | 94 |
|
---|
[bc20307] | 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>
|
---|
[3a58bd6] | 111 |
|
---|
[bc20307] | 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 | );
|
---|
[3a58bd6] | 138 | };
|
---|
| 139 |
|
---|
| 140 | export default ParkingZone;
|
---|