[bc20307] | 1 | import { useEffect, useState } from 'react';
|
---|
| 2 |
|
---|
| 3 | import {
|
---|
| 4 | Wrapper,
|
---|
| 5 | GoogleMapsWrapper,
|
---|
| 6 | ZoneSelectInput,
|
---|
| 7 | DropdownItem,
|
---|
| 8 | ZoneInfoWrapper,
|
---|
| 9 | KeyValueWrapper,
|
---|
| 10 | Key,
|
---|
| 11 | Value,
|
---|
| 12 | FreeParkingSpacesText,
|
---|
| 13 | } from './styles';
|
---|
| 14 |
|
---|
| 15 | import GoogleMaps from '../../GoogleMaps';
|
---|
| 16 | import useGetData from '../../../hooks/useGetData';
|
---|
| 17 | import useGetZoneByName from '../../../hooks/useGetZoneByName';
|
---|
| 18 |
|
---|
| 19 | const mockParkingSpaces = [
|
---|
| 20 | {
|
---|
| 21 | zone: 'Zona 1',
|
---|
| 22 | lat: '42.00043725326595',
|
---|
| 23 | lng: '21.42263398879119',
|
---|
| 24 | psName: 'A33',
|
---|
| 25 | taken: true,
|
---|
| 26 | },
|
---|
| 27 | {
|
---|
| 28 | zone: 'Zona 1',
|
---|
| 29 | lat: '42.00028576562848',
|
---|
| 30 | lng: '21.423680050318325',
|
---|
| 31 | psName: 'A34',
|
---|
| 32 | taken: false,
|
---|
| 33 | },
|
---|
| 34 | {
|
---|
| 35 | zone: 'Zona 1',
|
---|
| 36 | lat: '41.99959609366812',
|
---|
| 37 | lng: '21.423374278487316',
|
---|
| 38 | psName: 'A35',
|
---|
| 39 | taken: false,
|
---|
| 40 | },
|
---|
| 41 | {
|
---|
| 42 | zone: 'Zona 1',
|
---|
| 43 | lat: '41.99962798617793',
|
---|
| 44 | lng: '21.42275200598912',
|
---|
| 45 | psName: 'A36',
|
---|
| 46 | taken: true,
|
---|
| 47 | },
|
---|
| 48 | {
|
---|
| 49 | zone: 'Zona 2',
|
---|
| 50 | lat: '42.00075019371071',
|
---|
| 51 | lng: '21.42124996894335',
|
---|
| 52 | psName: 'B33',
|
---|
| 53 | taken: true,
|
---|
| 54 | },
|
---|
| 55 | {
|
---|
| 56 | zone: 'Zona 2',
|
---|
| 57 | lat: '42.00070634227895',
|
---|
| 58 | lng: '21.421571834028622',
|
---|
| 59 | psName: 'B34',
|
---|
| 60 | taken: false,
|
---|
| 61 | },
|
---|
| 62 | {
|
---|
| 63 | zone: 'Zona 2',
|
---|
| 64 | lat: '42.00092958561692',
|
---|
| 65 | lng: '21.421579880655756',
|
---|
| 66 | psName: 'B35',
|
---|
| 67 | taken: false,
|
---|
| 68 | },
|
---|
| 69 | {
|
---|
| 70 | zone: 'Zona 2',
|
---|
| 71 | lat: '42.00115083493807',
|
---|
| 72 | lng: '21.421402854858854',
|
---|
| 73 | psName: 'B36',
|
---|
| 74 | isTaken: true,
|
---|
| 75 | },
|
---|
| 76 | ];
|
---|
| 77 |
|
---|
| 78 | const MenuProps = {
|
---|
| 79 | PaperProps: {
|
---|
| 80 | style: {
|
---|
| 81 | maxHeight: 150,
|
---|
| 82 | width: '35px',
|
---|
| 83 | },
|
---|
| 84 | },
|
---|
| 85 | };
|
---|
| 86 |
|
---|
| 87 | const defaultZoneInfo = {
|
---|
| 88 | parkingZoneLocation: {
|
---|
| 89 | coords: [],
|
---|
| 90 | centre: {
|
---|
| 91 | lat: 42.00120992770302,
|
---|
| 92 | lng: 21.42053372084796,
|
---|
| 93 | },
|
---|
| 94 | },
|
---|
| 95 | color: '',
|
---|
| 96 | };
|
---|
| 97 |
|
---|
| 98 | const MapUsers = () => {
|
---|
| 99 | const {data: fetchedParkingSpaces, isLoadingParkingSpaces} = useGetData({url: '/parkingSpace'});
|
---|
| 100 | const { data: fetchedSelectZones, isLoading: isLoadingSelectZones } =
|
---|
| 101 | useGetData({ url: '/parkingZone/parkingZoneNames' });
|
---|
| 102 | const {
|
---|
| 103 | zone: zoneInfo,
|
---|
| 104 | isLoading: isLoadingZoneInfo,
|
---|
| 105 | fetchZone,
|
---|
| 106 | setZone: setZoneInfo,
|
---|
| 107 | } = useGetZoneByName(defaultZoneInfo);
|
---|
| 108 |
|
---|
| 109 | const [selectedZone, setSelectedZone] = useState('NONE');
|
---|
| 110 | // const [zoneInfo, setZoneInfo] = useState({ ...defaultZoneInfo });
|
---|
| 111 | const [parkingSpaces, setParkingSpaces] = useState([]);
|
---|
| 112 | const [freeParkingSpaces, setFreeParkingSpaces] = useState(0);
|
---|
| 113 | const handleSelectZone = async (e) => {
|
---|
| 114 | const _selectedZone = e.target.value;
|
---|
| 115 | let zone;
|
---|
| 116 | let _parkingSpaces;
|
---|
| 117 | let _freeParkingSpaces;
|
---|
| 118 | if (_selectedZone === 'NONE') {
|
---|
| 119 | zone = { ...defaultZoneInfo };
|
---|
| 120 | _parkingSpaces = [...fetchedParkingSpaces ?? []];
|
---|
| 121 | _freeParkingSpaces =
|
---|
| 122 | _parkingSpaces.filter((p) => !p.taken).length;
|
---|
| 123 | setZoneInfo(zone);
|
---|
| 124 | } else {
|
---|
| 125 | zone = await fetchZone(_selectedZone);
|
---|
| 126 | _parkingSpaces = zone.parkingSpaces;
|
---|
| 127 | _freeParkingSpaces = _parkingSpaces.filter(
|
---|
| 128 | (p) => !p.taken
|
---|
| 129 | ).length;
|
---|
| 130 | }
|
---|
| 131 | setParkingSpaces(_parkingSpaces);
|
---|
| 132 | setFreeParkingSpaces(_freeParkingSpaces);
|
---|
| 133 | setSelectedZone(_selectedZone);
|
---|
| 134 | };
|
---|
| 135 |
|
---|
| 136 | useEffect(() => {
|
---|
| 137 | setParkingSpaces(fetchedParkingSpaces ?? []);
|
---|
| 138 | fetchedParkingSpaces &&
|
---|
| 139 | setFreeParkingSpaces(
|
---|
| 140 | fetchedParkingSpaces.filter((p) => !p.taken).length
|
---|
| 141 | );
|
---|
| 142 | }, [fetchedParkingSpaces])
|
---|
| 143 |
|
---|
| 144 | return (
|
---|
| 145 | <Wrapper>
|
---|
| 146 | <FreeParkingSpacesText>
|
---|
| 147 | Слободни места: {freeParkingSpaces}
|
---|
| 148 | </FreeParkingSpacesText>
|
---|
| 149 | <GoogleMapsWrapper>
|
---|
| 150 | <GoogleMaps
|
---|
| 151 | location={zoneInfo.parkingZoneLocation}
|
---|
| 152 | parkingSpaces={parkingSpaces}
|
---|
| 153 | zoneAreaColor={zoneInfo.color}
|
---|
| 154 | zoom={selectedZone === 'NONE' ? 15 : 16}
|
---|
| 155 | />
|
---|
| 156 | </GoogleMapsWrapper>
|
---|
| 157 | <ZoneSelectInput
|
---|
| 158 | MenuProps={MenuProps}
|
---|
| 159 | name='zone'
|
---|
| 160 | onChange={handleSelectZone}
|
---|
| 161 | value={selectedZone}
|
---|
| 162 | >
|
---|
| 163 | <DropdownItem value='NONE'>
|
---|
| 164 | <em>NONE</em>
|
---|
| 165 | </DropdownItem>
|
---|
| 166 | {fetchedSelectZones &&
|
---|
| 167 | fetchedSelectZones.map((z, ind) => (
|
---|
| 168 | <DropdownItem key={ind} value={z}>
|
---|
| 169 | {z}
|
---|
| 170 | </DropdownItem>
|
---|
| 171 | ))}
|
---|
| 172 | </ZoneSelectInput>
|
---|
| 173 | {selectedZone !== 'NONE' ? (
|
---|
| 174 | <ZoneInfoWrapper>
|
---|
| 175 | <KeyValueWrapper>
|
---|
| 176 | <Key>Цена(час):</Key>
|
---|
| 177 | <Value>{zoneInfo.price ?? ''} ден.</Value>
|
---|
| 178 | </KeyValueWrapper>
|
---|
| 179 | <KeyValueWrapper>
|
---|
| 180 | <Key>Работни часови:</Key>
|
---|
| 181 | <Value>
|
---|
| 182 | {zoneInfo?.from ?? ''} - {zoneInfo?.to ?? ''}
|
---|
| 183 | </Value>
|
---|
| 184 | </KeyValueWrapper>
|
---|
| 185 | </ZoneInfoWrapper>
|
---|
| 186 | ) : null}
|
---|
| 187 | </Wrapper>
|
---|
| 188 | );
|
---|
| 189 | };
|
---|
| 190 |
|
---|
| 191 | export default MapUsers;
|
---|