1 | import { useState, useContext, useEffect } from 'react';
|
---|
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';
|
---|
9 | import CircularProgress from '@mui/material/CircularProgress';
|
---|
10 | import {
|
---|
11 | NamesWrapper,
|
---|
12 | ParkingAndZoneName,
|
---|
13 | DividerUnderNames,
|
---|
14 | NavigationIconsWrapper,
|
---|
15 | MainSection,
|
---|
16 | MapsIcon,
|
---|
17 | ComponentIcon,
|
---|
18 | ZoneNameLoader,
|
---|
19 | } from './styles';
|
---|
20 |
|
---|
21 | import AbsoluteLoader from '../../Loaders/AbsoluteLoader';
|
---|
22 | import { roles } from '../../../config/enums';
|
---|
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 | };
|
---|
33 |
|
---|
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 | ];
|
---|
49 |
|
---|
50 | const activeComponentEnum = {
|
---|
51 | MAPS: 'maps',
|
---|
52 | INFO: 'info',
|
---|
53 | };
|
---|
54 |
|
---|
55 | const ParkingZone = () => {
|
---|
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 | );
|
---|
67 |
|
---|
68 | const setZone = (updatedZone) => {
|
---|
69 | setZoneState({ ...updatedZone });
|
---|
70 | };
|
---|
71 | const Info =
|
---|
72 | user.role === roles.admin ? ParkingZoneInfo : ParkingZoneSessions;
|
---|
73 |
|
---|
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>
|
---|
92 |
|
---|
93 | <DividerUnderNames />
|
---|
94 |
|
---|
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 | );
|
---|
138 | };
|
---|
139 |
|
---|
140 | export default ParkingZone;
|
---|