Enable save the route without specifying the stop

src/components/home/SuccinctTimeReport.tsx

@@ -91,8 +91,8 @@ const SuccinctTimeReport = ({
   const [routeNo] = routeId.split("-");
   const [routeKey, seq] = routeId.split("/");
   const { co, stops, dest, fares, faresHoliday } =
-    routeList[routeKey] || DefaultRoute;
-  const stop = stopList[getStops(co, stops)[parseInt(seq, 10)]] || DefaultStop;
+    routeList[routeKey] || DEFAULT_ROUTE;
+  const stop = stopList[getStops(co, stops)[parseInt(seq, 10)]] || DEFAULT_STOP;
 
   const navigate = useNavigate();
   const handleClick = (e) => {
@@ -184,7 +184,7 @@ const SuccinctTimeReport = ({
   );
 };
 
-const DefaultRoute = {
+const DEFAULT_ROUTE = {
   co: [""],
   stops: { "": [""] },
   dest: { zh: "", en: "" },
@@ -193,7 +193,10 @@ const DefaultRoute = {
   fares: [],
   faresHoliday: [],
 };
-const DefaultStop = { location: { lat: 0, lng: 0 }, name: { zh: "", en: "" } };
+const DEFAULT_STOP = {
+  location: { lat: 0, lng: 0 },
+  name: { zh: "最近車站", en: "The nearest stop" },
+};
 
 export default SuccinctTimeReport;
 

src/components/home/SwipeableList.tsx

@@ -268,17 +268,30 @@ const getSelectedRoutes = ({
     .map((routeUrl, idx, self): [string, number, number] => {
       const [routeId, stopIdx] = routeUrl.split("/");
       // TODO: taking the longest stop array to avoid error, should be fixed in the database
-      const stop =
-        stopList[
-          Object.values(routeList[routeId].stops).sort(
-            (a, b) => b.length - a.length
-          )[0][stopIdx]
+      const _stops = Object.values(routeList[routeId].stops).sort(
+        (a, b) => b.length - a.length
+      )[0];
+      if (stopIdx !== undefined) {
+        // if specified which stop
+        return [
+          routeUrl,
+          getDistance(geolocation, stopList[_stops[stopIdx]].location),
+          self.length - idx,
         ];
-      return [
-        routeUrl,
-        getDistance(geolocation, stop.location),
-        self.length - idx,
-      ];
+      } else {
+        // else find the nearest stop
+        const stop = _stops
+          .map((stop) => [
+            stop,
+            getDistance(geolocation, stopList[stop].location),
+          ])
+          .sort(([, a], [, b]) => (a < b ? -1 : 1))[0][0];
+        return [
+          routeUrl,
+          getDistance(geolocation, stopList[stop].location),
+          self.length - idx,
+        ];
+      }
     });
 
   const nearbyRoutes = Object.entries(stopList)
@@ -344,6 +357,21 @@ const getSelectedRoutes = ({
             isRouteAvaliable(routeId, routeList[routeId].freq, isTodayHoliday))
         );
       })
+      .map((routeUrl) => {
+        // handling for saved route without specified stop, use the nearest one
+        const [routeId, stopIdx] = routeUrl.split("/");
+        if (stopIdx !== undefined) return routeUrl;
+        const _stops = Object.values(routeList[routeId].stops).sort(
+          (a, b) => b.length - a.length
+        )[0];
+        const stop = _stops
+          .map((stop) => [
+            stop,
+            getDistance(geolocation, stopList[stop].location),
+          ])
+          .sort(([, a], [, b]) => (a < b ? -1 : 1))[0][0];
+        return `${routeUrl}/${_stops.indexOf(stop as string)}`;
+      })
       .concat(Array(40).fill("")) // padding
       .slice(0, 40)
       .join("|");

src/components/route-eta/RouteHeader.tsx

@@ -1,11 +1,12 @@
 import React, { useContext } from "react";
-import { Paper, SxProps, Theme, Typography } from "@mui/material";
+import { Box, Paper, SxProps, Theme, Typography } from "@mui/material";
 import RouteNo from "../route-board/RouteNo";
 import { toProperCase } from "../../utils";
 import { useTranslation } from "react-i18next";
 import AppContext from "../../AppContext";
 import ReverseButton from "./ReverseButton";
 import TimetableButton from "./TimeTableButton";
+import RouteStarButton from "./RouteStarButton";
 
 const RouteHeader = ({ routeId }: { routeId: string }) => {
   const { t, i18n } = useTranslation();
@@ -22,7 +23,10 @@ const RouteHeader = ({ routeId }: { routeId: string }) => {
         {nlbId ? t("由") + " " + toProperCase(orig[i18n.language]) : ""}
       </Typography>
       <ReverseButton routeId={routeId} />
-      <TimetableButton routeId={routeId} />
+      <Box sx={rightBtnGroupSx}>
+        <RouteStarButton routeId={routeId} />
+        <TimetableButton routeId={routeId} />
+      </Box>
     </Paper>
   );
 };
@@ -34,3 +38,9 @@ const PaperSx: SxProps<Theme> = {
   background: "transparent",
   position: "relative",
 };
+
+const rightBtnGroupSx: SxProps<Theme> = {
+  position: "absolute",
+  top: "0",
+  right: "2%",
+};

src/components/route-eta/RouteStarButton.tsx

@@ -0,0 +1,40 @@
+import React, { useContext } from "react";
+import { IconButton, SxProps, Theme } from "@mui/material";
+import {
+  Star as StarIcon,
+  StarBorderOutlined as StarOutlinedIcon,
+} from "@mui/icons-material";
+import AppContext from "../../AppContext";
+
+const RouteStarButton = ({ routeId }) => {
+  const { savedEtas, setCollectionDrawerRoute } = useContext(AppContext);
+
+  return (
+    <IconButton
+      sx={buttonSx}
+      size="small"
+      onClick={() => {
+        const targetRouteId = `${routeId.toUpperCase()}`;
+        setCollectionDrawerRoute(targetRouteId);
+      }}
+    >
+      {savedEtas.includes(routeId) ? <StarIcon /> : <StarOutlinedIcon />}
+    </IconButton>
+  );
+};
+
+export default RouteStarButton;
+
+const buttonSx: SxProps<Theme> = {
+  color: (theme) =>
+    theme.palette.getContrastText(theme.palette.background.default),
+  flexDirection: "column",
+  justifyContent: "center",
+  "& > .MuiButton-label": {
+    flexDirection: "column",
+    justifyContent: "center",
+  },
+  "& > .MuiButton-startIcon": {
+    margin: 0,
+  },
+};

src/components/route-eta/TimeTableButton.tsx

@@ -49,9 +49,6 @@ const buttonDividerSx: SxProps<Theme> = {
 const buttonSx: SxProps<Theme> = {
   color: (theme) =>
     theme.palette.getContrastText(theme.palette.background.default),
-  position: "absolute",
-  top: "0",
-  right: "2%",
   flexDirection: "column",
   justifyContent: "center",
   "& > .MuiButton-label": {

src/pages/RouteEta.tsx

@@ -99,7 +99,8 @@ const RouteEta = () => {
   }, [id, updateSelectedRoute]);
 
   useEffect(() => {
-    if (id !== routeId) {
+    if (id.toUpperCase() !== routeId.toUpperCase()) {
+      console.log(id, routeId);
       navigate(`/${i18n.language}/route/${routeId.toLowerCase()}`);
     }
   }, [id, routeId, i18n.language, navigate]);