Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Lp gib 21 sign up frontend #14

Merged
merged 9 commits into from
Apr 18, 2024
Merged

Lp gib 21 sign up frontend #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1aa77be
First commit
lphan48 Mar 18, 2024
76964e8
basic box
jarenadams21 Mar 18, 2024
ca79961
exact styling
jarenadams21 Mar 18, 2024
18b83b6
header centered
jarenadams21 Mar 18, 2024
ee93a74
signup figma work
jarenadams21 Mar 23, 2024
f76f3c1
Linked signup page to popup boxes, and matched popups to figma
lphan48 Mar 25, 2024
e149617
Delete .env
hams7504 Apr 1, 2024
6ab5696
Added submit and delete buttons to signup popup, and removed unnecess…
lphan48 Apr 3, 2024
c0cd31b
Merge branch 'lp-gib-21-sign-up-frontend' after resolving conflicts
lphan48 Apr 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 92 additions & 71 deletions apps/frontend/src/components/map/Map.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React, { useEffect, useRef, useState } from 'react';
import { loader, BOSTON_BOUNDS, BOSTON_PLACE_ID } from '../../constants';
import { createPopupBoxContent } from '../mapIcon/PopupBox';
import styled from 'styled-components';
import { SITES } from '../../GIBostonSites';
import generateCircleSVG from '../../images/markers/circle';
Expand All @@ -9,29 +8,34 @@
import generateTriangleSVG from '../../images/markers/triangle';
import generateStarSVG from '../../images/markers/star';
import generatePentagonSVG from '../../images/markers/pentagon';


import PopupBox from '../mapIcon/PopupBox';
import { createRoot } from 'react-dom/client';
import { createPortal } from 'react-dom';
import SignUpPage from '../volunteer/signup/SignUpPage';

const MapDiv = styled.div`
height: 100%;
`;


function filterMarkers(selectedFeatures: string[], selectedStatuses: string[], markers: google.maps.Marker[], map: google.maps.Map) {
function filterMarkers(
selectedFeatures: string[],
selectedStatuses: string[],
markers: google.maps.Marker[],
map: google.maps.Map,
) {
let tempMarkers: google.maps.Marker[] = [];
if (selectedFeatures.length === 0) {
markers.forEach((marker: google.maps.Marker) => {
marker.setMap(map);
})
});
tempMarkers = markers;
}
else {
} else {
markers.forEach((marker: google.maps.Marker) => marker.setMap(null));
markers.forEach((marker: google.maps.Marker) => {
const featureType = marker.get("featureType");
const featureType = marker.get('featureType');
if (selectedFeatures.includes(featureType)) {
marker.setMap(map);
tempMarkers.push(marker)
tempMarkers.push(marker);
}
});
}
Expand All @@ -40,30 +44,27 @@
if (selectedStatuses.length === 0) {
tempMarkers.forEach((marker: google.maps.Marker) => {
marker.setMap(map);
})
}
else {
});
} else {
tempMarkers.forEach((marker: google.maps.Marker) => marker.setMap(null));
tempMarkers.forEach((marker: google.maps.Marker) => {
const status = marker.get("status");
console.log(selectedStatuses)
const status = marker.get('status');
console.log(selectedStatuses);
if (selectedStatuses.includes(status)) {
marker.setMap(map);
}
});
}
}


interface MapProps {
readonly zoom: number;
selectedFeatures: string[];
selectedStatuses: string[];
}


function randomizeStatus(): string {
const statuses = ["Available", "Adopted"];
const statuses = ['Available', 'Adopted'];
return statuses[Math.floor(Math.random() * statuses.length)];
}

Expand All @@ -72,19 +73,16 @@
selectedFeatures,
selectedStatuses,
}) => {


const mapRef = useRef<HTMLDivElement | null>(null);
const [showSignUp, setShowSignUp] = useState(false);
const [markers, setMarkers] = useState<google.maps.Marker[]>([]);

Check warning on line 78 in apps/frontend/src/components/map/Map.tsx

View workflow job for this annotation

GitHub Actions / pre-deploy 

'markers' is assigned a value but never used


let map: google.maps.Map;


useEffect(() => {
if (mapRef.current) {
loader.load().then(() => {
map = new google.maps.Map(mapRef.current as HTMLElement, {

Check warning on line 85 in apps/frontend/src/components/map/Map.tsx

View workflow job for this annotation

GitHub Actions / pre-deploy 

Assignments to the 'map' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect
center: { lat: 42.36, lng: -71.06 },
zoom: 8,
mapId: '3aa9b524d13192b',
Expand All @@ -103,80 +101,104 @@
},
});


// sets the style for the boundary
const featureLayer = map.getFeatureLayer(google.maps.FeatureType.LOCALITY);
const featureLayer = map.getFeatureLayer(
google.maps.FeatureType.LOCALITY,
);
const featureStyleOptions: google.maps.FeatureStyleOptions = {
strokeColor: '#50B0E6',
strokeOpacity: 1.0,
strokeWeight: 3.0,
fillColor: '#50B0E6',
fillOpacity: 0.3
fillOpacity: 0.3,
};

featureLayer.style = (options) => {
const feature = options.feature as google.maps.PlaceFeature;
if (feature.placeId === BOSTON_PLACE_ID) { // Place ID for Boston
if (feature.placeId === BOSTON_PLACE_ID) {
// Place ID for Boston
return featureStyleOptions;
}
};

let currentInfoWindow: google.maps.InfoWindow | null = null;


const markersArray: google.maps.Marker[] = [];


SITES.forEach(markerInfo => {

const types = ['Rain Garden', 'Bioswale', 'Bioretention', 'Porous Paving', 'Tree Trench/Pit', 'Green Roof/Planter']

if (markerInfo["Lat"] != null && markerInfo["Long"] != null && types.includes(markerInfo['Symbol Type'])) {

const status = randomizeStatus()

let typeColor = "";
SITES.forEach((markerInfo) => {
const types = [
'Rain Garden',
'Bioswale',
'Bioretention',
'Porous Paving',
'Tree Trench/Pit',
'Green Roof/Planter',
];

if (
markerInfo['Lat'] != null &&
markerInfo['Long'] != null &&
types.includes(markerInfo['Symbol Type'])
) {
const status = randomizeStatus();

let typeColor = '';
if (status === 'Available') {
typeColor = "#2D6A4F"
}
else if (status === 'Adopted') {
typeColor = "#FB4D42"
typeColor = '#2D6A4F';
} else if (status === 'Adopted') {
typeColor = '#FB4D42';
}

let tempIcon = "";
let tempIcon = '';
let iconFunc = null;

if (markerInfo['Symbol Type'] === 'Rain Garden') {
tempIcon = generateSquareSVG(typeColor);
iconFunc = generateSquareSVG;
}
else if (markerInfo['Symbol Type'] === 'Bioswale') {
} else if (markerInfo['Symbol Type'] === 'Bioswale') {
tempIcon = generateTriangleSVG(typeColor);
iconFunc = generateTriangleSVG;
}
else if (markerInfo['Symbol Type'] === 'Bioretention') {
} else if (markerInfo['Symbol Type'] === 'Bioretention') {
tempIcon = generateCircleSVG(typeColor);
iconFunc = generateCircleSVG;
}
else if (markerInfo['Symbol Type'] === 'Porous Paving') {
} else if (markerInfo['Symbol Type'] === 'Porous Paving') {
tempIcon = generateDiamondSVG(typeColor);
iconFunc = generateDiamondSVG;
}
else if (markerInfo['Symbol Type'] === 'Tree Trench/Pit') {
} else if (markerInfo['Symbol Type'] === 'Tree Trench/Pit') {
tempIcon = generateStarSVG(typeColor);
iconFunc = generateStarSVG;
}
else if (markerInfo['Symbol Type'] === 'Green Roof/Planter') {
} else if (markerInfo['Symbol Type'] === 'Green Roof/Planter') {
tempIcon = generatePentagonSVG(typeColor);
iconFunc = generatePentagonSVG;
}

const typeIcon = `data:image/svg+xml;utf8,${encodeURIComponent(tempIcon)}`;
const typeIcon = `data:image/svg+xml;utf8,${encodeURIComponent(
tempIcon,
)}`;

const infoWindowContent = document.createElement('div');
infoWindowContent.id = 'info-window-content';

const infoWindow = new google.maps.InfoWindow({
content: createPopupBoxContent(markerInfo['Asset Name'], markerInfo['Address'], 'Available', markerInfo['Symbol Type'], typeColor, iconFunc as (color: string) => string),
content: infoWindowContent,
});

const infoWindowRoot = createRoot(infoWindowContent);
infoWindowRoot.render(
createPortal(
<PopupBox
setShowSignUp={setShowSignUp}
name={markerInfo['Asset Name']}
location={markerInfo['Address']}
status={'Available'}
type={markerInfo['Symbol Type']}
color={typeColor}
svgFunction={iconFunc as (color: string) => string}
/>,
infoWindowContent,
),
);

const customIcon = {
url: typeIcon,
size: new google.maps.Size(21, 20),
Expand All @@ -186,13 +208,16 @@
};

const marker: google.maps.Marker = new google.maps.Marker({
position: { lat: Number(markerInfo["Lat"]), lng: markerInfo["Long"] },
position: {
lat: Number(markerInfo['Lat']),
lng: markerInfo['Long'],
},
map: map,
icon: customIcon
icon: customIcon,
});

marker.set("featureType", markerInfo['Symbol Type']);
marker.set("status", status);
marker.set('featureType', markerInfo['Symbol Type']);
marker.set('status', status);

marker.addListener('click', () => {
if (currentInfoWindow) {
Expand All @@ -203,21 +228,18 @@
});
markersArray.push(marker);
}

})
});

setMarkers(markersArray);
console.log(selectedFeatures)
console.log(selectedFeatures);
filterMarkers(selectedFeatures, selectedStatuses, markersArray, map);

const input = document.getElementById('pac-input') as HTMLInputElement;

const autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);


autocomplete.addListener('place_changed', () => {

// marker.setVisible(false);
const place = autocomplete.getPlace();

Expand All @@ -238,19 +260,18 @@
});
});
}



}, [zoom, selectedFeatures, selectedStatuses]);



return (
<div>
<MapDiv id="map" ref={mapRef} style={{ width: '100%', height: '495px' }} />
<MapDiv
id="map"
ref={mapRef}
style={{ width: '100%', height: '495px' }}
/>
{showSignUp && <SignUpPage setShowSignUp={setShowSignUp} />}
</div>
);
};


export default Map;
export default Map;
Loading
Loading