Changeset bc20307 for sources/client/src/components/GoogleMaps

Timestamp:

02/14/22 01:41:41 (2 years ago)

Author:

Tasevski2 <39170279+Tasevski2@…>

Branches:

master

Children:

747e0ab

Parents:

e8b1076

Message:

Push before video

Location:

sources/client/src/components/GoogleMaps

Files:

• index.js (modified) (1 diff)
• styles.js (modified) (2 diffs)

sources/client/src/components/GoogleMaps/index.js

@@ -1 +1 @@
 import GoogleMapReact from 'google-map-react';
+import { useEffect, useRef } from 'react';
 
 import { Wrapper, Marker } from './styles';
 
-const ParkingSpaceMarker = ({ text, free }) => (
-  <Marker $free={free}>{text}</Marker>
+const ParkingSpaceMarker = ({ text, isTaken }) => (
+    <Marker $isTaken={isTaken}>{text}</Marker>
 );
 
-const GoogleMaps = ({ location, parkingSpacesLocation, zoneAreaColor }) => {
-  const defaultProps = {
-    zoom: 18,
-  };
-  const drawZonePolygon = (map, maps) => {
-    var zoneArea = new maps.Polygon({
-      paths: location.coords,
-      strokeColor: zoneAreaColor,
-      strokeOpacity: 0.8,
-      strokeWeight: 2,
-      fillColor: zoneAreaColor,
-      fillOpacity: 0.2,
-    });
-    zoneArea.setMap(map);
-  };
-  return (
-    <Wrapper>
-      <GoogleMapReact
-        defaultCenter={location.center}
-        defaultZoom={defaultProps.zoom}
-        yesIWantToUseGoogleMapApiInternals={true}
-        onGoogleApiLoaded={({ map, maps }) => drawZonePolygon(map, maps)}
-      >
-        {parkingSpacesLocation.map((p, index) => (
-          <ParkingSpaceMarker
-            key={index}
-            lat={p.lat}
-            lng={p.lng}
-            free={p.free}
-            text={p.parkingSpaceNumber}
-          />
-        ))}
-      </GoogleMapReact>
-    </Wrapper>
-  );
+const GoogleMaps = ({
+    location = {},
+    parkingSpaces = [],
+    zoneAreaColor = '',
+    zoom,
+}) => {
+    let refMap = useRef(null);
+    let refZone = useRef(null);
+    const defaultProps = {
+        zoom: 15,
+    };
+    const drawZonePolygon = (map, maps) => {
+        if (!maps) return;
+        var zoneArea = new maps.Polygon({
+            paths: location?.coords ?? [],
+            strokeColor: zoneAreaColor ?? '',
+            strokeOpacity: 0.8,
+            strokeWeight: 2,
+            fillColor: zoneAreaColor ?? '',
+            fillOpacity: 0.2,
+        });
+        refZone.current = zoneArea;
+        zoneArea.setMap(map);
+    };
+    useEffect(() => {
+        if (refMap.current) {
+            refZone.current.setMap(null);
+            drawZonePolygon(refMap.current.map, refMap.current.maps);
+        }
+    }, [location?.centre]);
+    return (
+        <Wrapper>
+            <GoogleMapReact
+                center={location?.centre}
+                zoom={zoom ?? defaultProps.zoom}
+                yesIWantToUseGoogleMapApiInternals={true}
+                onGoogleApiLoaded={({ map, maps, ref }) => {
+                    refMap.current = { map, maps };
+                    drawZonePolygon(map, maps);
+                }}
+            >
+                {parkingSpaces.map((p, index) => (
+                    <ParkingSpaceMarker
+                        key={index}
+                        lat={p.lat}
+                        lng={p.lng}
+                        isTaken={p.taken}
+                        text={p.psName}
+                    />
+                ))}
+            </GoogleMapReact>
+        </Wrapper>
+    );
 };
 

sources/client/src/components/GoogleMaps/styles.js

@@ -1 +1 @@
 import styled from 'styled-components';
+import { mobile_max_width } from '../../config/utilities';
 
 export const Wrapper = styled.div`
-  width: 100%;
-  height: 69vh;
-  padding: 0 30px;
+    width: 100%;
+    height: 69vh;
+    padding: 0 4vh;
+
+    @media (max-width: ${mobile_max_width}px) {
+        height: 50vh;
+    }
 `;
 
@@ -12 +17 @@
   height: 25px;
   background-color: ${(props) =>
-    props.$free
-      ? `${props.theme.palette.success.light}`
-      : `${props.theme.palette.error.main}`}};
+      props.$isTaken
+          ? `${props.theme.palette.error.main}`
+          : `${props.theme.palette.success.light}`}};
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 100%;
+  transform: translate(-50%, -100%);
 `;