Better Route Search Remark

src/components/route-board/RouteTerminus.tsx

@@ -1,28 +1,156 @@
+import { useContext, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Box, SxProps, Theme, Typography } from "@mui/material";
 import { toProperCase } from "../../utils";
 import { RouteListEntry } from "hk-bus-eta";
-import useLanguage from "../../hooks/useTranslation";
+import DbContext from "../../context/DbContext";
 
 interface RouteTerminus {
   terminus: RouteListEntry;
 }
 
 const RouteTerminus = ({ terminus }: RouteTerminus) => {
-  const { t } = useTranslation();
-  const language = useLanguage();
+  const { t, i18n } = useTranslation();
+  const {
+    db: { routeList, stopList },
+  } = useContext(DbContext);
+  const { route, co, orig, dest, stops, bound, gtfsId } = terminus;
+
+  const firstLastDiff = (arr: string[]) => {
+    if (arr.length < 2) return arr;
+    return [arr[0], arr[arr.length - 1]];
+  };
+  const diffConsecutive = (array: string[], sequence: string[]) => {
+    for (let i = 0; i <= array.length - sequence.length; i++) {
+      let j;
+      for (j = 0; j < sequence.length; j++) {
+        if (array[i + j] !== sequence[j]) {
+          break;
+        }
+      }
+      if (j === sequence.length) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  let routeRemark = useMemo(() => {
+    let remark = "";
+    if (Number(terminus.serviceType) >= 2) {
+      for (let [, data] of Object.entries(routeList)) {
+        if (
+          Number(data.serviceType) === 1 &&
+          route === data.route &&
+          JSON.stringify(bound) === JSON.stringify(data.bound) &&
+          (co[0] === "gmb"
+            ? gtfsId === data.gtfsId
+            : JSON.stringify(co) === JSON.stringify(data.co))
+        ) {
+          if (
+            stopList[data.stops[co[0]][data.stops[co[0]].length - 1]].name
+              .zh !== stopList[stops[co[0]][stops[co[0]].length - 1]].name.zh
+          ) {
+            remark = t("開往") + dest[i18n.language];
+          } else if (
+            stopList[data.stops[co[0]][0]].name.zh !==
+            stopList[stops[co[0]][0]].name.zh
+          ) {
+            if (!terminus.nlbId) {
+              remark = t("從") + orig[i18n.language] + t("開出");
+            }
+          } else {
+            let mainRouteFirstStop = stopList[data.stops[co][0]].name;
+            let mainRouteLastStop =
+              stopList[data.stops[co][data.stops[co].length - 1]].name;
+            let routeFirstStop = stopList[stops[co][0]].name;
+            let routeLastStop = stopList[stops[co][stops[co].length - 1]].name;
+
+            if (mainRouteLastStop.zh !== routeLastStop.zh) {
+              remark = t("開往") + routeLastStop[i18n.language];
+            } else if (mainRouteFirstStop.zh !== routeFirstStop.zh) {
+              if (!terminus.nlbId) {
+                remark = t("從") + routeFirstStop[i18n.language] + t("開出");
+              }
+            } else {
+              let difference = stops[co].filter(
+                (x) => !data.stops[co].includes(x)
+              );
+              let diffName = difference.map(
+                (x) => stopList[x].name[i18n.language]
+              );
+              if (difference.length > 0) {
+                remark =
+                  t("經") +
+                  firstLastDiff(diffName).join(
+                    t(diffConsecutive(data.stops[co], difference) ? "至" : "及")
+                  );
+              } else {
+                let difference = data.stops[co].filter(
+                  (x) => !stops[co].includes(x)
+                );
+                let diffName = difference.map(
+                  (x) => stopList[x].name[i18n.language]
+                );
+                if (difference.length > 0) {
+                  remark =
+                    t("不經") +
+                    firstLastDiff(diffName).join(
+                      t(
+                        diffConsecutive(data.stops[co], difference)
+                          ? "至"
+                          : "及"
+                      )
+                    );
+                }
+              }
+            }
+          }
+          break;
+        }
+      }
+    }
+    if (remark === "" || terminus.nlbId) {
+      remark =
+        t("從") +
+        toProperCase(terminus.orig[i18n.language]) +
+        t("開出") +
+        " " +
+        remark;
+    }
+    return remark;
+  }, [
+    terminus,
+    routeList,
+    i18n.language,
+    bound,
+    co,
+    dest,
+    gtfsId,
+    orig,
+    route,
+    stopList,
+    stops,
+    t,
+  ]);
 
   return (
     <Box sx={rootSx}>
       <Box sx={fromToWrapperSx}>
         <span>{`${t("往")} `}</span>
-        <Typography component="h3" variant="h6" sx={destinationSx}>
-          {toProperCase(terminus.dest[language])}
+        <Typography
+          component="h3"
+          variant="h6"
+          sx={destinationSx}
+          textOverflow="ellipsis"
+          overflow="hidden"
+        >
+          {toProperCase(terminus.dest[i18n.language])}
         </Typography>
       </Box>
       <Box sx={fromWrapperSx}>
-        <Typography variant="body2">
-          {toProperCase(terminus.orig[language])}
+        <Typography variant="body2" textOverflow="ellipsis" overflow="hidden">
+          {routeRemark}
         </Typography>
       </Box>
     </Box>

src/components/route-eta/RouteHeader.tsx

@@ -1,7 +1,7 @@
 import { useContext } from "react";
 import { Box, Paper, SxProps, Theme, Typography } from "@mui/material";
 import RouteNo from "../route-board/RouteNo";
-import { toProperCase } from "../../utils";
+import { toProperCase, langSpace } from "../../utils";
 import { useTranslation } from "react-i18next";
 import ReverseButton from "./ReverseButton";
 import TimetableButton from "./TimeTableButton";
@@ -15,7 +15,7 @@ interface RouteHeaderProps {
 }
 
 const RouteHeader = ({ routeId, stopId }: RouteHeaderProps) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const language = useLanguage();
   const {
     db: { routeList },
@@ -26,8 +26,10 @@ const RouteHeader = ({ routeId, stopId }: RouteHeaderProps) => {
     <Paper id="route-eta-header" sx={PaperSx} elevation={0}>
       <RouteNo routeNo={t(route)} component="h1" align="center" />
       <Typography component="h2" variant="caption" align="center">
-        {t("往")} {toProperCase(dest[language])}{" "}
-        {nlbId ? t("由") + " " + toProperCase(orig[language]) : ""}
+        {t("往")}
+        {langSpace(i18n)}
+        {toProperCase(dest[i18n.language])}{" "}
+        {nlbId ? t("從") + toProperCase(orig[i18n.language]) + t("開出") : ""}
       </Typography>
       <ReverseButton routeId={routeId} stopId={stopId} />
       <Box sx={rightBtnGroupSx}>

src/i18n/translation.js

@@ -30,7 +30,14 @@ const resources = {
       設定: "Settings",
       取消: "Clear",
       路線: "Route",
-      你的位置: "Your Location",
+      從: "From ",
+      開出: "",
+      開往: "To ",
+      經: "Via ",
+      不經: "Skipping ",
+      至: " to ",
+      及: " and ",
+      你的位置: "Your location",
       目的地: "Destination",
       已複製到剪貼簿: "Copied to clipboard",
       資料更新中: "Data updating",

src/utils.ts

@@ -11,6 +11,10 @@ import type { TransportType } from "./@types/types";
 import { ServiceIds, isRouteAvaliable } from "./timetable";
 import { TFunction } from "i18next";
 
+export const langSpace = (i18n) => {
+  return i18n.language === "en" ? " " : "";
+};
+
 export const getDistance = (a: GeoLocation, b: GeoLocation) => {
   const R = 6371e3; // metres
   const φ1 = (a.lat * Math.PI) / 180; // φ, λ in radians