[3a58bd6] | 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;
|
---|