1 | import { useState } 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 |
|
---|
10 | import {
|
---|
11 | NamesWrapper,
|
---|
12 | ParkingAndZoneName,
|
---|
13 | DividerUnderNames,
|
---|
14 | NavigationIconsWrapper,
|
---|
15 | MainSection,
|
---|
16 | MapsIcon,
|
---|
17 | ComponentIcon,
|
---|
18 | } from './styles';
|
---|
19 |
|
---|
20 | import { roles } from '../../../config/enums';
|
---|
21 |
|
---|
22 | import { parkingZones } from '../ParkingZones/mockData';
|
---|
23 |
|
---|
24 | const activeComponentEnum = {
|
---|
25 | MAPS: 'maps',
|
---|
26 | INFO: 'info',
|
---|
27 | };
|
---|
28 |
|
---|
29 | const ParkingZone = () => {
|
---|
30 | const { zone_id } = useParams();
|
---|
31 | const [activeComponent, setActiveComponent] = useState(
|
---|
32 | activeComponentEnum.MAPS
|
---|
33 | );
|
---|
34 |
|
---|
35 | const user = {
|
---|
36 | role: 'ROLE_ADMIN',
|
---|
37 | };
|
---|
38 |
|
---|
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>
|
---|
48 |
|
---|
49 | <DividerUnderNames />
|
---|
50 |
|
---|
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>
|
---|
65 |
|
---|
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 | );
|
---|
79 | };
|
---|
80 |
|
---|
81 | export default ParkingZone;
|
---|