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;
|
---|