From 4f5620f632b112c5f4918a7b1c3e2178cffaa152 Mon Sep 17 00:00:00 2001
From: Zhi <neozhixuan@gmail.com>
Date: Sun, 10 Dec 2023 14:06:03 +0800
Subject: [PATCH] Feature - Line color update, UI fixes

- Scrollable cards
---
 client/components/map/FacilityCard.tsx  |   7 ++--
 client/components/map/RouteCard.tsx     |  22 ++++++++-----
 client/public/locationButton.png        | Bin 0 -> 1093 bytes
 client/spa-pages/components/MapPage.tsx |  42 +++++++++++++++++++++---
 client/utils.ts                         |   2 ++
 5 files changed, 57 insertions(+), 16 deletions(-)
 create mode 100644 client/public/locationButton.png

diff --git a/client/components/map/FacilityCard.tsx b/client/components/map/FacilityCard.tsx
index 11dd60d..e71d3ce 100644
--- a/client/components/map/FacilityCard.tsx
+++ b/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
diff --git a/client/components/map/RouteCard.tsx b/client/components/map/RouteCard.tsx
index c041fec..a744d1f 100644
--- a/client/components/map/RouteCard.tsx
+++ b/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>
 	);
diff --git a/client/public/locationButton.png b/client/public/locationButton.png
new file mode 100644
index 0000000000000000000000000000000000000000..32d99ea570c623b5170d1d1e1186f608d8e7c58f
GIT binary patch
literal 1093
zcmV-L1iJf)P)<h;3K|Lk000e1NJLTq001ih001ip1^@s6;azdS00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH1KLSMK~#7F?U*@8
z9AOxS-#J{@)iowDnxx3xBm|NosZu0WNUD&7TqGn#3JVcC5wTKGP*AZFMbJvT3L6Cr
z@wQX33m(xF-Uq9Dxaw}c?{jBamVoZ;Y(TOv{LDBz!#;lh`@R1^s{~0nBT{jOl!Q%`
zlCX(V5;jr#zhT#!oALAgdmOB+z-n0z>zSIuA%XhO0<5AaP*oKQtd|ap#1-8g9>(G7
zssL}cwqk#74$db}pkKZWE2PA`kzv4<`uZ@W5~`{k`EMGT&!6M`*RRlXa}kf?f@R39
zjt&8`UAcmDFJ2&ps>tX2v$OCoEMTv{Uq0vSIi;nr-M$U8G7Zb1+nt@zoK9qa|Begq
z-u?AHuJ~3%1H2Oxa&K-$1yXL^f*F~D-RbSca%H7_`L)_w*zeqt>+Z=(xQ2!hbh}}@
zdNo{W)^=kf+&w*Fh1|M2DCy~lRi<EPKYWmi<>co}Mg7am_+4HuO~y%}X&O`-8l7MK
z_6=EIzQ}W{g@rgGYdAlBg7f1?#HyI1OLCMz*_X!D|0*hicY0bNbzO(XgJJ3DYHPzD
zRg{(W<A*e!Z(sms6f^AJ$cR*rr<moUH1N;QAHx|HHK0T1p7wURH}(E~Xf*wSjSU>F
ztsz#ODrYyT<M&2KrK|na<$O#H`IIXi2^zLRgdMQIkHGpm)JvD3k!Oz<7vZX^f|`*b
zG3Oww=r?Yh$Z<N@mKJFmBR6?y^hGSbF4InMY7}tz8XXN-1`N>i3>*mMvY(pLGT56<
zO|mgz$er$Pc*e%Wx2#n1t|t;Obgo99U%xK*D_*YvW>7UX0_4gXpPi&rd6whH@$ezi
z9z1}9hBV2{jC__!-i>T5HNv;Xus?eyQ57Jcaz$0P(bK0$xpxmbjnl?h%njzGrIRb{
z9Un)4EWo*WF)uG1Rng$QFGzj;TAuX{4j!*|j~|=L*_dJ3b6nvdP3Klk&GA3*>J=_f
zhH{)mR@6q_?<g*YlASG{^>uX#to`Lnn31VPf&IEtP=KJvgL9uhBa=ej5Kl8-XCEpK
zhg@S&S6LZ?6j=<KMw^;{2Fv1X-6$!c?DB{evIw3l87WQ*A1%$kzP{u8sG&0G88a4$
z3zl_2OXoIiOt^B~bSgpcCWSkkZ4#g=BNTO9QTv-Wra|L|HRPq`(@m=sPjh4zv%ht+
zgPoRT{q9}FE5*uR5s#?CyVcbQEG;3O62kWAQCyXbmZk4t8ZW23gz^fPlVd3;%la2a
z0%X`k$g&qkLuqf{;()4Zg-4^MB!Br%kdm;8QW7>%O2Q^eXA1TYQY>%YR0~sB00000
LNkvXXu0mjfI<Eb1

literal 0
HcmV?d00001

diff --git a/client/spa-pages/components/MapPage.tsx b/client/spa-pages/components/MapPage.tsx
index c3fe1d9..aa91678 100644
--- a/client/spa-pages/components/MapPage.tsx
+++ b/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>
 	);
diff --git a/client/utils.ts b/client/utils.ts
index 1fb72cd..46020d5 100644
--- a/client/utils.ts
+++ b/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,