From 1aa77bea2b94c11d9971f305f82781ae0035a370 Mon Sep 17 00:00:00 2001 From: lphan48 Date: Mon, 18 Mar 2024 18:15:54 -0400 Subject: [PATCH 1/8] First commit --- apps/frontend/src/components/map/Map.tsx | 144 +++++++++--------- .../src/components/mapIcon/PopupBox.tsx | 20 ++- 2 files changed, 89 insertions(+), 75 deletions(-) diff --git a/apps/frontend/src/components/map/Map.tsx b/apps/frontend/src/components/map/Map.tsx index 11575fd..97b41aa 100644 --- a/apps/frontend/src/components/map/Map.tsx +++ b/apps/frontend/src/components/map/Map.tsx @@ -10,28 +10,29 @@ import generateTriangleSVG from '../../images/markers/triangle'; import generateStarSVG from '../../images/markers/star'; import generatePentagonSVG from '../../images/markers/pentagon'; - - 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); } }); } @@ -40,13 +41,12 @@ function filterMarkers(selectedFeatures: string[], selectedStatuses: string[], m 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); } @@ -54,16 +54,14 @@ function filterMarkers(selectedFeatures: string[], selectedStatuses: string[], m } } - 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)]; } @@ -72,15 +70,11 @@ const Map: React.FC = ({ selectedFeatures, selectedStatuses, }) => { - - const mapRef = useRef(null); const [markers, setMarkers] = useState([]); - let map: google.maps.Map; - useEffect(() => { if (mapRef.current) { loader.load().then(() => { @@ -103,78 +97,90 @@ const Map: React.FC = ({ }, }); - // 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 infoWindow = new google.maps.InfoWindow({ - content: createPopupBoxContent(markerInfo['Asset Name'], markerInfo['Address'], 'Available', markerInfo['Symbol Type'], typeColor, iconFunc as (color: string) => string), + content: createPopupBoxContent( + markerInfo['Asset Name'], + markerInfo['Address'], + 'Available', + markerInfo['Symbol Type'], + typeColor, + iconFunc as (color: string) => string, + ), }); const customIcon = { @@ -186,13 +192,16 @@ const Map: React.FC = ({ }; 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) { @@ -203,11 +212,10 @@ const Map: React.FC = ({ }); markersArray.push(marker); } - - }) + }); setMarkers(markersArray); - console.log(selectedFeatures) + console.log(selectedFeatures); filterMarkers(selectedFeatures, selectedStatuses, markersArray, map); const input = document.getElementById('pac-input') as HTMLInputElement; @@ -215,9 +223,7 @@ const Map: React.FC = ({ const autocomplete = new google.maps.places.Autocomplete(input); autocomplete.bindTo('bounds', map); - autocomplete.addListener('place_changed', () => { - // marker.setVisible(false); const place = autocomplete.getPlace(); @@ -238,19 +244,17 @@ const Map: React.FC = ({ }); }); } - - - }, [zoom, selectedFeatures, selectedStatuses]); - - return (
- +
); }; - -export default Map; \ No newline at end of file +export default Map; diff --git a/apps/frontend/src/components/mapIcon/PopupBox.tsx b/apps/frontend/src/components/mapIcon/PopupBox.tsx index 32ea1fc..8149a2e 100644 --- a/apps/frontend/src/components/mapIcon/PopupBox.tsx +++ b/apps/frontend/src/components/mapIcon/PopupBox.tsx @@ -1,14 +1,24 @@ -export function createPopupBoxContent(name: string, location: string, status: string, type: string, color: string, svgFunction: (color: string) => string) { +import { useState } from 'react'; +export function createPopupBoxContent( + name: string, + location: string, + status: string, + type: string, + color: string, + svgFunction: (color: string) => string, +) { return `
- ${type ? - `${svgFunction(color)} -

Feature Type:

${type.toUpperCase()}

` - : ''} + ${ + type + ? `${svgFunction(color)} +

Feature Type:

${type.toUpperCase()}

` + : '' + }
${name ? `

Name: ${name}

` : ''} From 76964e82a1df0ebccd40c05a5b09918fe72a77f9 Mon Sep 17 00:00:00 2001 From: jarenadams21 Date: Mon, 18 Mar 2024 18:29:00 -0400 Subject: [PATCH 2/8] basic box --- .env | 3 +++ .../src/components/volunteer/signup/SignUpPage.tsx | 9 +++++++++ apps/frontend/src/pages/mapPage/MapPage.tsx | 2 ++ 3 files changed, 14 insertions(+) create mode 100644 .env create mode 100644 apps/frontend/src/components/volunteer/signup/SignUpPage.tsx diff --git a/.env b/.env new file mode 100644 index 0000000..5d7b3d5 --- /dev/null +++ b/.env @@ -0,0 +1,3 @@ +AWS_ACCESS_KEY_ID = AKIAXEDZZITUZRXNFN74 +AWS_SECRET_ACCESS_KEY = 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 +AWS_REGION = us-east-2 \ No newline at end of file diff --git a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx new file mode 100644 index 0000000..a40be11 --- /dev/null +++ b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx @@ -0,0 +1,9 @@ +import { Box } from '@chakra-ui/react'; + +export default function SignUpPage() { + return ( + + + + ) +} \ No newline at end of file diff --git a/apps/frontend/src/pages/mapPage/MapPage.tsx b/apps/frontend/src/pages/mapPage/MapPage.tsx index f330c8b..01258d3 100644 --- a/apps/frontend/src/pages/mapPage/MapPage.tsx +++ b/apps/frontend/src/pages/mapPage/MapPage.tsx @@ -7,6 +7,7 @@ import MapLegend from '../../components/map/MapLegend'; import Navbar from '../Navbar'; import { SITE_STATUS_ROADMAP } from '../../constants'; import Tiles from './Tiles'; +import SignUpPage from '../../components/volunteer/signup/SignUpPage'; const icons: string[] = SITE_STATUS_ROADMAP.map((option) => option.image); @@ -46,6 +47,7 @@ export default function MapPage() {
+
); From ca799617ca40215c54b90e424dcc693456238b1c Mon Sep 17 00:00:00 2001 From: jarenadams21 Date: Mon, 18 Mar 2024 18:29:56 -0400 Subject: [PATCH 3/8] exact styling --- apps/frontend/src/components/volunteer/signup/SignUpPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx index a40be11..87aa246 100644 --- a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx +++ b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx @@ -2,7 +2,7 @@ import { Box } from '@chakra-ui/react'; export default function SignUpPage() { return ( - + ) From 18b83b66cbbe2dfbeeb3f1592898d51b90786633 Mon Sep 17 00:00:00 2001 From: jarenadams21 Date: Mon, 18 Mar 2024 18:40:57 -0400 Subject: [PATCH 4/8] header centered --- .../src/components/volunteer/signup/SignUpPage.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx index 87aa246..6be6e3b 100644 --- a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx +++ b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx @@ -1,9 +1,12 @@ -import { Box } from '@chakra-ui/react'; +import { Box, Text } from '@chakra-ui/react'; export default function SignUpPage() { return ( - + + Welcome, Volunteer! + + ) } \ No newline at end of file From ee93a74cdb6281cfad196e9fd9dc68d91d93c056 Mon Sep 17 00:00:00 2001 From: jarenadams21 Date: Sat, 23 Mar 2024 17:25:54 -0400 Subject: [PATCH 5/8] signup figma work --- .../volunteer/signup/SignUpPage.tsx | 143 +++++++++++++++++- 1 file changed, 137 insertions(+), 6 deletions(-) diff --git a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx index 6be6e3b..042614d 100644 --- a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx +++ b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx @@ -1,12 +1,143 @@ -import { Box, Text } from '@chakra-ui/react'; +import { Box, Input, Text, Stack, HStack, VStack } from '@chakra-ui/react'; +import { Checkbox } from '@mui/material'; +import { grey } from '@mui/material/colors'; + +interface InputField { + label: string; + placeholder?: string; +} + +interface CheckboxField { + label: string; +} + +interface InputFieldGroup { + fields: InputField[]; + type?: 'single' | 'double'; // 'single' for single column, 'double' for double column row + height: string, + width: string, +} + +const checkboxesMap : CheckboxField[] = [ + { + label: 'I have reviewed the General Safety Guidelines' + }, + { + label: 'I have read and agree to the Terms of Use and Privacy Policy' + }, + { + label: 'I have read and agree to the Release of Liability' + } +] + +const inputFieldsMap: InputFieldGroup[] = [ + { + fields: [ + { label: 'First Name' }, + { label: 'Last Name' } + ], + type: 'double', + height: "40px", + width: "373px", + }, + { + fields: [{ label: 'Email Address' }], + type: 'single', + height: "40px", + width: "810px", + }, + { + fields: [{ label: 'Phone Number' }], + type: 'single', + height: "40px", + width: "810px", + }, + { + fields: [{ label: 'Zip Code' }], + type: 'single', + height: "40px", + width: "369px", + }, + { + fields: [{ label: 'Age' }], + type: 'single', + height: "40px", + width: "107px", + }, + { + fields: [{ label: 'Which days are you available to volunteer', placeholder: 'Select days' }], + type: 'single', + height: "40px", + width: "454px", + }, +] + +function InputFields() { + return ( + + {inputFieldsMap.map((group, i) => ( + + {group.type === 'double' ? ( + + {group.fields.map((field, j) => ( + + {field.label} + + + ))} + + ) : ( + + {group.fields[0].label} + + + )} + + ))} + + ) +} + +function CheckboxFields() { + return ( + + {checkboxesMap.map((field, i) => ( + + {field.label} + + + ))} + + ); +} export default function SignUpPage() { return ( - - - Welcome, Volunteer! - + + + + Welcome, Volunteer! + + + + + + + ) -} \ No newline at end of file +} From f76f3c1be82ddf57824b2d23a83ebf49fa774cbc Mon Sep 17 00:00:00 2001 From: lphan48 Date: Mon, 25 Mar 2024 12:46:09 -0400 Subject: [PATCH 6/8] Linked signup page to popup boxes, and matched popups to figma --- apps/frontend/src/components/map/Map.tsx | 35 +- .../src/components/mapIcon/PopupBox.tsx | 170 ++++++++-- .../volunteer/signup/SignUpPage.tsx | 305 +++++++++++------- apps/frontend/src/pages/mapPage/MapPage.tsx | 30 +- 4 files changed, 377 insertions(+), 163 deletions(-) diff --git a/apps/frontend/src/components/map/Map.tsx b/apps/frontend/src/components/map/Map.tsx index 97b41aa..f7b93e8 100644 --- a/apps/frontend/src/components/map/Map.tsx +++ b/apps/frontend/src/components/map/Map.tsx @@ -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'; @@ -9,6 +8,10 @@ import generateDiamondSVG from '../../images/markers/diamond'; 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%; @@ -71,6 +74,7 @@ const Map: React.FC = ({ selectedStatuses, }) => { const mapRef = useRef(null); + const [showSignUp, setShowSignUp] = useState(false); const [markers, setMarkers] = useState([]); let map: google.maps.Map; @@ -172,17 +176,29 @@ const Map: React.FC = ({ 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( + string} + />, + infoWindowContent, + ), + ); + const customIcon = { url: typeIcon, size: new google.maps.Size(21, 20), @@ -253,6 +269,7 @@ const Map: React.FC = ({ ref={mapRef} style={{ width: '100%', height: '495px' }} /> + {showSignUp && }
); }; diff --git a/apps/frontend/src/components/mapIcon/PopupBox.tsx b/apps/frontend/src/components/mapIcon/PopupBox.tsx index 8149a2e..e5d73c5 100644 --- a/apps/frontend/src/components/mapIcon/PopupBox.tsx +++ b/apps/frontend/src/components/mapIcon/PopupBox.tsx @@ -1,32 +1,148 @@ -import { useState } from 'react'; +import { CSSProperties } from 'react'; -export function createPopupBoxContent( - name: string, - location: string, - status: string, - type: string, - color: string, - svgFunction: (color: string) => string, -) { - return ` - - -
-
- ${ - type - ? `${svgFunction(color)} -

Feature Type:

${type.toUpperCase()}

` - : '' - } +interface Props { + setShowSignUp: (value: boolean) => void; + name: string; + location: string; + status: string; + type: string; + color: string; + svgFunction: (color: string) => string; +} + +interface PopupStyles { + [key: string]: CSSProperties; +} + +const popupStyles: PopupStyles = { + featureType: { + backgroundColor: '#2D6A4F', + width: '45%', + height: '130px', + justifyContent: 'center', + alignItems: 'center', + display: 'flex', + flexDirection: 'column', + }, + details: { + backgroundColor: 'white', + width: '60%', + height: '130px', + marginLeft: '4%', + display: 'flex', + flexDirection: 'column', + }, +}; + +export default function PopupBox({ + setShowSignUp, + name, + location, + status, + type, + color, + svgFunction, +}: Props) { + const openSignUp = () => { + setShowSignUp(true); + }; + + return ( +
+
+ + Feature Type: + + + {type} + +
-
- ${name ? `

Name: ${name}

` : ''} - ${location ? `

Location: ${location}

` : ''} - ${status ? `

Status: ${status}

` : ''} - Click here to adopt! + +
+
+ + NAME: + + + {name} + +
+
+ + LOCATION: + + {location} +
+
+ + STATUS: + + {status} +
+ +
- - `; + ); } diff --git a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx index 042614d..e9ff5aa 100644 --- a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx +++ b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx @@ -3,141 +3,214 @@ import { Checkbox } from '@mui/material'; import { grey } from '@mui/material/colors'; interface InputField { - label: string; - placeholder?: string; + label: string; + placeholder?: string; } interface CheckboxField { - label: string; + label: string; } interface InputFieldGroup { - fields: InputField[]; - type?: 'single' | 'double'; // 'single' for single column, 'double' for double column row - height: string, - width: string, + fields: InputField[]; + type?: 'single' | 'double'; // 'single' for single column, 'double' for double column row + height: string; + width: string; } -const checkboxesMap : CheckboxField[] = [ - { - label: 'I have reviewed the General Safety Guidelines' - }, - { - label: 'I have read and agree to the Terms of Use and Privacy Policy' - }, - { - label: 'I have read and agree to the Release of Liability' - } -] +const checkboxesMap: CheckboxField[] = [ + { + label: 'I have reviewed the General Safety Guidelines', + }, + { + label: 'I have read and agree to the Terms of Use and Privacy Policy', + }, + { + label: 'I have read and agree to the Release of Liability', + }, +]; const inputFieldsMap: InputFieldGroup[] = [ - { - fields: [ - { label: 'First Name' }, - { label: 'Last Name' } - ], - type: 'double', - height: "40px", - width: "373px", - }, - { - fields: [{ label: 'Email Address' }], - type: 'single', - height: "40px", - width: "810px", - }, - { - fields: [{ label: 'Phone Number' }], - type: 'single', - height: "40px", - width: "810px", - }, - { - fields: [{ label: 'Zip Code' }], - type: 'single', - height: "40px", - width: "369px", - }, - { - fields: [{ label: 'Age' }], - type: 'single', - height: "40px", - width: "107px", - }, - { - fields: [{ label: 'Which days are you available to volunteer', placeholder: 'Select days' }], - type: 'single', - height: "40px", - width: "454px", - }, -] + { + fields: [{ label: 'First Name' }, { label: 'Last Name' }], + type: 'double', + height: '40px', + width: '373px', + }, + { + fields: [{ label: 'Email Address' }], + type: 'single', + height: '40px', + width: '810px', + }, + { + fields: [{ label: 'Phone Number' }], + type: 'single', + height: '40px', + width: '810px', + }, + { + fields: [{ label: 'Zip Code' }], + type: 'single', + height: '40px', + width: '369px', + }, + { + fields: [{ label: 'Age' }], + type: 'single', + height: '40px', + width: '107px', + }, + { + fields: [ + { + label: 'Which days are you available to volunteer', + placeholder: 'Select days', + }, + ], + type: 'single', + height: '40px', + width: '454px', + }, +]; function InputFields() { - return ( - - {inputFieldsMap.map((group, i) => ( - - {group.type === 'double' ? ( - - {group.fields.map((field, j) => ( - - {field.label} - - - ))} - - ) : ( - - {group.fields[0].label} - - - )} + return ( + + {inputFieldsMap.map((group, i) => ( + + {group.type === 'double' ? ( + + {group.fields.map((field, j) => ( + + + {field.label} + + - ))} + ))} + + ) : ( + + + {group.fields[0].label} + + + + )} - ) + ))} + + ); } function CheckboxFields() { - return ( - - {checkboxesMap.map((field, i) => ( - - {field.label} - - - ))} - - ); + return ( + + {checkboxesMap.map((field, i) => ( + + + {field.label} + + + + ))} + + ); } export default function SignUpPage() { - return ( - - - - Welcome, Volunteer! - - - - - - - - + return ( + + + + + Welcome, Volunteer! + + + + + + + - ) + + + ); } diff --git a/apps/frontend/src/pages/mapPage/MapPage.tsx b/apps/frontend/src/pages/mapPage/MapPage.tsx index 01258d3..7f0f09c 100644 --- a/apps/frontend/src/pages/mapPage/MapPage.tsx +++ b/apps/frontend/src/pages/mapPage/MapPage.tsx @@ -11,7 +11,6 @@ import SignUpPage from '../../components/volunteer/signup/SignUpPage'; const icons: string[] = SITE_STATUS_ROADMAP.map((option) => option.image); - export default function MapPage() { const [selectedFeatures, setSelectedFeatures] = useState([]); const [selectedStatuses, setSelectedStatuses] = useState([]); @@ -19,24 +18,34 @@ export default function MapPage() { return (
-
+
- +
- +
-
@@ -44,11 +53,10 @@ export default function MapPage() { -
+
-
); -} \ No newline at end of file +} From e149617668b34cfaf73dcda79efc8a8dd2cef7fe Mon Sep 17 00:00:00 2001 From: Hamsini Malli Date: Mon, 1 Apr 2024 18:26:55 -0400 Subject: [PATCH 7/8] Delete .env --- .env | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 .env diff --git a/.env b/.env deleted file mode 100644 index 5d7b3d5..0000000 --- a/.env +++ /dev/null @@ -1,3 +0,0 @@ -AWS_ACCESS_KEY_ID = AKIAXEDZZITUZRXNFN74 -AWS_SECRET_ACCESS_KEY = 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 -AWS_REGION = us-east-2 \ No newline at end of file From 6ab5696f73193ace576b2f584edefe8c257698e2 Mon Sep 17 00:00:00 2001 From: lphan48 Date: Tue, 2 Apr 2024 21:02:01 -0400 Subject: [PATCH 8/8] Added submit and delete buttons to signup popup, and removed unnecessary field --- apps/frontend/src/components/map/Map.tsx | 2 +- .../volunteer/signup/SignUpPage.tsx | 48 +++++++++++++------ apps/frontend/src/pages/mapPage/MapPage.tsx | 3 +- 3 files changed, 35 insertions(+), 18 deletions(-) diff --git a/apps/frontend/src/components/map/Map.tsx b/apps/frontend/src/components/map/Map.tsx index f7b93e8..9548050 100644 --- a/apps/frontend/src/components/map/Map.tsx +++ b/apps/frontend/src/components/map/Map.tsx @@ -269,7 +269,7 @@ const Map: React.FC = ({ ref={mapRef} style={{ width: '100%', height: '495px' }} /> - {showSignUp && } + {showSignUp && }
); }; diff --git a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx index e9ff5aa..a258622 100644 --- a/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx +++ b/apps/frontend/src/components/volunteer/signup/SignUpPage.tsx @@ -1,6 +1,14 @@ -import { Box, Input, Text, Stack, HStack, VStack } from '@chakra-ui/react'; +import { + Box, + Input, + Text, + HStack, + VStack, + Button, + IconButton, +} from '@chakra-ui/react'; import { Checkbox } from '@mui/material'; -import { grey } from '@mui/material/colors'; +import CloseIcon from '@mui/icons-material/Close'; interface InputField { label: string; @@ -61,17 +69,6 @@ const inputFieldsMap: InputFieldGroup[] = [ height: '40px', width: '107px', }, - { - fields: [ - { - label: 'Which days are you available to volunteer', - placeholder: 'Select days', - }, - ], - type: 'single', - height: '40px', - width: '454px', - }, ]; function InputFields() { @@ -152,7 +149,15 @@ function CheckboxFields() { ); } -export default function SignUpPage() { +interface Props { + setShowSignUp: (value: boolean) => void; +} + +export default function SignUpPage({ setShowSignUp }: Props) { + const closeSignUp = () => { + setShowSignUp(false); + }; + return ( + + + + ); diff --git a/apps/frontend/src/pages/mapPage/MapPage.tsx b/apps/frontend/src/pages/mapPage/MapPage.tsx index 7f0f09c..772df95 100644 --- a/apps/frontend/src/pages/mapPage/MapPage.tsx +++ b/apps/frontend/src/pages/mapPage/MapPage.tsx @@ -1,5 +1,5 @@ import Map from '../../components/map/Map'; -import React, { useState } from 'react'; +import { useState } from 'react'; import Divider from '../Divider'; import About from './About'; import Header from './Header'; @@ -7,7 +7,6 @@ import MapLegend from '../../components/map/MapLegend'; import Navbar from '../Navbar'; import { SITE_STATUS_ROADMAP } from '../../constants'; import Tiles from './Tiles'; -import SignUpPage from '../../components/volunteer/signup/SignUpPage'; const icons: string[] = SITE_STATUS_ROADMAP.map((option) => option.image);