Feature - Line color update, UI fixes

- Scrollable cards

client/components/map/FacilityCard.tsx

@@ -48,6 +48,7 @@ export const FacilityCard = ({
 
 	return (
 		<Flex
+			h={"470px"}
 			bg="white"
 			paddingBottom={2}
 			position={"fixed"}
@@ -64,14 +65,14 @@ export const FacilityCard = ({
 			{!isExpanded && (
 				<Box
 					position={"fixed"}
-					height={"10%"}
+					height={"15%"}
 					width={"100%"}
-					bottom={"50%"}
+					bottom={"43%"}
 					zIndex={1001}
 					bgGradient={"linear(transparent 0%, white 60%)"}
 				/>
 			)}
-			<Button height={"1%"} padding={1} bg={"white"} onClick={handleMovement}>
+			<Button height={"5%"} padding={1} bg={"white"} onClick={handleMovement}>
 				{!isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
 			</Button>
 			<Flex

client/components/map/RouteCard.tsx

@@ -1,5 +1,5 @@
 import { Flex, Box, Button, HStack, Text, VStack, Image } from "@chakra-ui/react";
-import { ChevronDownIcon, ChevronUpIcon } from "@chakra-ui/icons";
+import { ChevronDownIcon, ChevronUpIcon, ExternalLinkIcon } from "@chakra-ui/icons";
 import { useState } from "react";
 import styles from "components/home/hideScrollbar.module.css";
 import { Chip } from "./FilterPanel";
@@ -18,8 +18,6 @@ export const RouteCard = ({
 	route: RecyclingLocationResults["route"];
 	results: RecyclingLocationResults["results"];
 }) => {
-	console.log(items);
-	console.log(route);
 	const { getFacility, getItemCategory } = useSheetyData();
 	const [isExpanded, setIsExpanded] = useState(false);
 	const [translateY, setTranslateY] = useState(50);
@@ -36,6 +34,7 @@ export const RouteCard = ({
 
 	return (
 		<Flex
+			h={"300px"}
 			bg="white"
 			paddingBottom={2}
 			position={"fixed"}
@@ -59,7 +58,7 @@ export const RouteCard = ({
 					bgGradient={"linear(transparent 0%, white 60%)"}
 				/>
 			)}
-			<Button height={"1%"} padding={1} bg={"white"} onClick={handleMovement}>
+			<Button height={"10%"} padding={1} bg={"white"} onClick={handleMovement}>
 				{!isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
 			</Button>
 			<Flex
@@ -90,22 +89,23 @@ export const RouteCard = ({
 					return (
 						<HStack key={facID} w={"100%"} mb={5}>
 							<Box height="full" w={"5%"} alignSelf={"start"}>
-								<Box w="full">
+								<Box w="full" h="full">
 									<Image
-										h="50%"
-										ml={0.4}
+										h="6%"
+										ml={0}
 										src={"/blueCircle.png"}
 										alt="blue circle"
 									/>
 									<Image
-										h="50%"
+										ml={1}
+										h="90%"
 										justifySelf={"center"}
 										src={"/blueLine.png"}
 										alt="blue line"
 									/>
 								</Box>
 							</Box>
-							<VStack w={"95%"} gap={1}>
+							<VStack alignSelf={"start"} w={"95%"} gap={1}>
 								<Flex
 									w={"full"}
 									flexDirection={"row"}
@@ -180,6 +180,10 @@ export const RouteCard = ({
 						</HStack>
 					);
 				})}
+				<Button isDisabled={true} w="full" p={5} gap={2} bgColor={"teal"} color="white">
+					<ExternalLinkIcon />
+					<Text>Get Directions</Text>
+				</Button>
 			</Flex>
 		</Flex>
 	);

client/spa-pages/components/MapPage.tsx

@@ -1,6 +1,15 @@
 // General Imports
 import { BasePage } from "layouts/BasePage";
-import { Flex, VStack, Box, IconButton, useDisclosure, Switch, Button } from "@chakra-ui/react";
+import {
+	Flex,
+	VStack,
+	Box,
+	IconButton,
+	useDisclosure,
+	Switch,
+	Button,
+	Image,
+} from "@chakra-ui/react";
 import { Dispatch, SetStateAction, useState } from "react";
 import { Pages } from "spa-pages/pageEnums";
 import { useUserInputs } from "hooks/useUserSelection";
@@ -88,6 +97,10 @@ const MapInner = ({ setPage }: Props) => {
 		recyclingLocationResults?.route.complete ? "green" : "blue",
 	);
 	const [showRoute, setShowRoute] = useState<boolean>(false);
+
+	// Trigger changes in lazy loaded CustomPolyline component
+	const [key, setKey] = useState(0);
+
 	// Filters
 	const { isOpen: isFilterOpen, onOpen: onFilterOpen, onClose: onFilterClose } = useDisclosure();
 	const [range, setRange] = useState(MAX_DISTANCE_KM * 10);
@@ -176,6 +189,7 @@ const MapInner = ({ setPage }: Props) => {
 
 	// Handle the changing of location in this page itself
 	const handleChangedLocation = (itemEntry: (TItemSelection | TEmptyItem)[]) => {
+		console.log(itemEntry);
 		const locations = getNearbyFacilities(
 			itemEntry as TItemSelection[],
 			address,
@@ -184,6 +198,8 @@ const MapInner = ({ setPage }: Props) => {
 			MAX_DISTANCE_KM,
 		);
 		locations.route.complete ? setLineColor("green") : setLineColor("blue");
+		// Trigger changes in lazy loaded CustomPolyline component
+		setKey((prevKey) => prevKey + 1);
 		setLineCoords(locations.route.coords);
 
 		// Set map position
@@ -293,6 +309,9 @@ const MapInner = ({ setPage }: Props) => {
 			dist,
 		);
 		locations.route.complete ? setLineColor("green") : setLineColor("blue");
+		// Trigger changes in lazy loaded CustomPolyline component
+		setKey((prevKey) => prevKey + 1);
+
 		setLineCoords(locations.route.coords);
 		setRange(val);
 		setRecyclingLocationResults(locations);
@@ -363,7 +382,11 @@ const MapInner = ({ setPage }: Props) => {
 						/>
 
 						{/* Show Route */}
-						{showRoute && <CustomPolyline lineCoords={lineCoords} color={lineColor} />}
+						{showRoute ? (
+							<CustomPolyline key={key} lineCoords={lineCoords} color={lineColor} />
+						) : (
+							<></>
+						)}
 					</LeafletMap>
 				</Box>
 
@@ -386,7 +409,7 @@ const MapInner = ({ setPage }: Props) => {
 						facCardDistance={facCardDistance}
 					/>
 				)}
-				{showRoute && !facCardIsOpen && (
+				{showRoute && !facCardIsOpen && recyclingLocationResults?.route && (
 					<RouteCard
 						items={items}
 						route={recyclingLocationResults?.route as RecyclingLocationResults["route"]}
@@ -491,7 +514,18 @@ export const MapHeaderButtons = ({
 			</Flex>
 			<Flex justifyContent={"space-between"}>
 				<Switch onChange={handleRouteShow}>Show Route (beta)</Switch>
-				<Button onClick={() => handleFlyTo([0, 0] as LatLngExpression)}></Button>
+				<Button
+					borderRadius="md" // Adjust the border radius as needed
+					overflow="hidden" // Hide overflow to prevent repeating image
+					bgImage={"/locationButton.png"}
+					bgSize="cover" // Cover the button with the image
+					bgPosition="center" // Center the image
+					bgRepeat="no-repeat" // Do not repeat the image
+					w="40px"
+					h="40px"
+					boxShadow="2px 2px 8px 0px rgba(0, 0, 0, 0.50)"
+					onClick={() => handleFlyTo([0, 0] as LatLngExpression)}
+				></Button>
 			</Flex>
 		</VStack>
 	);

client/utils.ts

@@ -32,6 +32,7 @@ export const getNearbyFacilities = (
 	const res: Record<string, TResult> = {};
 	const allFacilityIds: number[] = [];
 	const userCats = usersCategories(items, getItemCategory);
+	console.log(userCats);
 	const allFacilities: TStateFacilities[] = [];
 	const distances = new Map<number, number>();
 	const blueBinFacilities: TStateFacilities[] = [];
@@ -109,6 +110,7 @@ export const getNearbyFacilities = (
 	});
 
 	const route = dijkstra(allFacilities, address, userCats);
+	console.log(route.complete);
 	return {
 		results: res,
 		facilitiesList: allFacilityIds,