Fix ETA null, Add Route Operator and Service Type Info, Reduce Duplic…

…ate Route No (#202)

* - Fix Handle ETA may be null (@hk-bus-eta/pull/3)

* - Add Route Company and Service Type Info (if any) in both Stop Dialog and Home Screen (Favourites/Nearby Routes)

* - Reduce duplicate route no (hide special routes with higher service type value)

src/components/home/SuccinctTimeReport.tsx

@@ -98,7 +98,7 @@ const SuccinctTimeReport = ({
   } = useContext(DbContext);
   const [routeNo] = routeId.split("-");
   const [routeKey, seq] = routeId.split("/");
-  const { co, stops, dest, fares, faresHoliday, route } =
+  const { co, stops, dest, fares, faresHoliday, route, serviceType } =
     routeList[routeKey] || DEFAULT_ROUTE;
   const stopId = getStops(co, stops)[parseInt(seq, 10)];
   const stop = stopList[stopId] || DEFAULT_STOP;
@@ -151,10 +151,22 @@ const SuccinctTimeReport = ({
       <ListItem onClick={handleClick} sx={rootSx}>
         <ListItemText
           primary={
-            <RouteNo
-              routeNo={language === "zh" ? t(routeNo) : routeNo}
-              fontSize={co[0] === "mtr" ? "1.1rem" : undefined}
-            />
+            <Box overflow="hidden">
+              <RouteNo
+                routeNo={language === "zh" ? t(routeNo) : routeNo}
+                fontSize={co[0] === "mtr" ? "1.1rem" : undefined}
+              />
+              {parseInt(serviceType, 10) >= 2 && (
+                <Typography variant="caption" sx={specialTripSx}>
+                  {t("特別班")}
+                </Typography>
+              )}
+            </Box>
+          }
+          secondary={
+            <Typography component="h4" variant="caption" sx={companySx}>
+              {co.map((co) => t(co)).join("+")}
+            </Typography>
           }
         />
         <ListItemText
@@ -269,3 +281,14 @@ const iconContainerSx: SxProps<Theme> = {
   alignItems: "center",
   justifyContent: "center",
 };
+
+const companySx: SxProps<Theme> = {
+  color: (theme) => theme.palette.text.secondary,
+  textOverflow: "ellipsis",
+};
+
+const specialTripSx: SxProps<Theme> = {
+  color: (theme) => theme.palette.text.secondary,
+  fontSize: "0.6rem",
+  marginLeft: "8px",
+};

src/components/home/lists/NearbyRouteList.tsx

@@ -129,6 +129,7 @@ const getRoutes = ({
   serviceDayMap: EtaDb["serviceDayMap"];
   searchRange: number;
 }): Partial<Record<TransportType, string>> => {
+  const addedList = [] as [string, Company, string][];
   const nearbyRoutes = Object.entries(stopList)
     .map((stop: [string, StopListEntry]): [string, StopListEntry, number] =>
       // potentially could be optimized by other distance function
@@ -149,9 +150,12 @@ const getRoutes = ({
           ).forEach((co) => {
             if (route.stops[co] && route.stops[co].includes(stopId)) {
               if (acc[coToType[co]] === undefined) acc[coToType[co]] = [];
-              acc[coToType[co]].push(
-                key + "/" + route.stops[co].indexOf(stopId)
-              );
+              if(addedList.find(([_route, _co, _serviceType]) => _route == route.route && _co == co && _serviceType < route.serviceType) === undefined) {
+                acc[coToType[co]].push(
+                  key + "/" + route.stops[co].indexOf(stopId)
+                );
+                addedList.push([route.route, co, route.serviceType]);
+              }
             }
           });
         });

src/hooks/useStopEtas.tsx

@@ -200,6 +200,9 @@ export const useStopEtas = ({
             )
             // sort to display the earliest arrival transport first
             .sort(([keyA, a], [keyB, b]) => {
+              a = a.filter((e) => e.eta);
+              b = b.filter((e) => e.eta);
+              if (a.length === 0 && b.length === 0) return keyA < keyB ? -1 : 1;
               if (a.length === 0) return 1;
               if (b.length === 0) return -1;
               if (isLightRail) {