feat: 🎸 update bus arrival api and ui

yeukfei02 · Feb 16, 2023 · eba9acd · eba9acd
1 parent 4965df3
commit eba9acd
Show file tree

Hide file tree

Showing 5 changed files with 196 additions and 52 deletions.
diff --git a/src/components/busArrivalTime/BusArrivalTime.js b/src/components/busArrivalTime/BusArrivalTime.js
@@ -26,7 +26,7 @@ const styles = StyleSheet.create({
 
 function BusArrivalTime() {
   const route = useRoute();
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const [loading, setLoading] = useState(true);
   const [busArrivalTime, setBusArrivalTime] = useState([]);
@@ -36,13 +36,19 @@ function BusArrivalTime() {
       const companyId = route.params.companyId;
       const routeStr = route.params.routeStr;
       const busStopId = route.params.busStopId;
+      const busRouteId = route.params.busRouteId;
       if (companyId && routeStr && busStopId) {
-        getBusArrivalTime(companyId, routeStr, busStopId);
+        getBusArrivalTime(companyId, routeStr, busStopId, busRouteId);
       }
     }
   }, [route.params]);
 
-  const getBusArrivalTime = async (companyId, routeStr, busStopId) => {
+  const getBusArrivalTime = async (
+    companyId,
+    routeStr,
+    busStopId,
+    busRouteId
+  ) => {
     if (companyId === "NWFB" || companyId === "CTB") {
       const response = await axios.get(`${rootUrl}/bus-arrival-time`, {
         params: {
@@ -76,7 +82,46 @@ function BusArrivalTime() {
           setBusArrivalTime(responseData.busArrivalTimeKmb);
         }
       }
+    } else if (companyId === "NLB") {
+      const response = await axios.get(`${rootUrl}/nlb/bus-arrival-time`, {
+        params: {
+          busRouteId: busRouteId,
+          busStopId: busStopId,
+          language: getLanguageText(),
+        },
+      });
+      if (response && response.status === 200) {
+        const responseData = response.data;
+        console.log("responseData = ", responseData);
+
+        if (responseData) {
+          setLoading(false);
+          setBusArrivalTime(responseData.busArrivalTimeNlb);
+        }
+      }
+    }
+  };
+
+  const getLanguageText = () => {
+    let languageText = "zh-hant";
+
+    if (i18n.language) {
+      switch (i18n.language) {
+        case "eng":
+          languageText = "en";
+          break;
+        case "zh_hk":
+          languageText = "zh";
+          break;
+        case "zh_cn":
+          languageText = "cn";
+          break;
+        default:
+          break;
+      }
     }
+
+    return languageText;
   };
 
   const renderBusArrivalTime = () => {
@@ -97,7 +142,7 @@ function BusArrivalTime() {
             <View key={i}>
               <Card style={styles.cardContainer}>
                 <Card.Title
-                  title={`${t("next")} ${item.eta_seq} ${t("bus")}`}
+                  title={`${t("next")} ${item.eta_seq || i + 1} ${t("bus")}`}
                 />
                 <Card.Content>
                   <Title>

diff --git a/src/components/busRouteStop/BusRouteStop.js b/src/components/busRouteStop/BusRouteStop.js
@@ -43,13 +43,19 @@ function BusRouteStop() {
       const companyId = route.params.companyId;
       const routeStr = route.params.routeStr;
       const direction = route.params.direction;
+      const busRouteId = route.params.busRouteId;
       if (companyId && routeStr && direction) {
-        getBusRouteStop(companyId, routeStr, direction);
+        getBusRouteStop(companyId, routeStr, direction, busRouteId);
       }
     }
   }, [route.params]);
 
-  const getBusRouteStop = async (companyId, routeStr, direction) => {
+  const getBusRouteStop = async (
+    companyId,
+    routeStr,
+    direction,
+    busRouteId
+  ) => {
     if (companyId === "NWFB" || companyId === "CTB") {
       const response = await axios.get(`${rootUrl}/bus-route-stop`, {
         params: {
@@ -85,6 +91,22 @@ function BusRouteStop() {
           setBusRouteStop(responseData.busRouteStopKmb);
         }
       }
+    } else if (companyId === "NLB") {
+      const response = await axios.get(`${rootUrl}/nlb/bus-route-stop`, {
+        params: {
+          busRouteId: busRouteId,
+        },
+      });
+
+      if (response && response.status === 200) {
+        const responseData = response.data;
+        console.log("responseData = ", responseData);
+
+        if (responseData) {
+          setLoading(false);
+          setBusRouteStop(responseData.busRouteStopNlb);
+        }
+      }
     }
   };
 
@@ -110,6 +132,28 @@ function BusRouteStop() {
     return nameText;
   };
 
+  const getNlbBusStopNameText = (item) => {
+    let nameText = "";
+
+    if (i18n.language) {
+      switch (i18n.language) {
+        case "eng":
+          nameText = item.stopName_e;
+          break;
+        case "zh_hk":
+          nameText = item.stopName_c;
+          break;
+        case "zh_cn":
+          nameText = item.stopName_s;
+          break;
+        default:
+          break;
+      }
+    }
+
+    return nameText;
+  };
+
   const renderBusRouteStop = () => {
     let busRouteStopView = (
       <View>
@@ -123,37 +167,81 @@ function BusRouteStop() {
 
     if (!loading) {
       if (!_.isEmpty(busRouteStop)) {
-        busRouteStopView = busRouteStop.map((item, i) => {
-          return (
-            <View key={i}>
-              <Card style={styles.cardContainer}>
-                <Card.Content>
-                  <Title>{getNameText(item.stop)}</Title>
-                  <Paragraph
-                    style={styles.openInMap}
-                    onPress={() =>
-                      handleOpenInMap(item.stop.lat, item.stop.long)
-                    }
-                  >
-                    Open in map
-                  </Paragraph>
-                </Card.Content>
-                <Card.Actions>
-                  <Button
-                    mode="outlined"
-                    style={{ padding: 5 }}
-                    labelStyle={{ fontSize: 15 }}
-                    uppercase={false}
-                    onPress={() => handleEnterButtonClick(item.stop.stop)}
-                  >
-                    Enter
-                  </Button>
-                </Card.Actions>
-              </Card>
-              {renderArrowDownIcon(i)}
-            </View>
-          );
-        });
+        const companyId = route.params.companyId;
+        if (
+          companyId === "NWFB" ||
+          companyId === "CTB" ||
+          companyId === "KMB"
+        ) {
+          busRouteStopView = busRouteStop.map((item, i) => {
+            return (
+              <View key={i}>
+                <Card style={styles.cardContainer}>
+                  <Card.Content>
+                    <Title>{getNameText(item.stop)}</Title>
+                    <Paragraph
+                      style={styles.openInMap}
+                      onPress={() =>
+                        handleOpenInMap(item.stop.lat, item.stop.long)
+                      }
+                    >
+                      Open in map
+                    </Paragraph>
+                  </Card.Content>
+                  <Card.Actions>
+                    <Button
+                      mode="outlined"
+                      style={{ padding: 5 }}
+                      labelStyle={{ fontSize: 15 }}
+                      uppercase={false}
+                      onPress={() => handleEnterButtonClick(item.stop.stop)}
+                    >
+                      Enter
+                    </Button>
+                  </Card.Actions>
+                </Card>
+                {renderArrowDownIcon(i)}
+              </View>
+            );
+          });
+        } else if (companyId === "NLB") {
+          busRouteStopView = busRouteStop.map((item, i) => {
+            return (
+              <View key={i}>
+                <Card style={styles.cardContainer}>
+                  <Card.Content>
+                    <Title>{getNlbBusStopNameText(item)}</Title>
+                    <Paragraph
+                      style={styles.openInMap}
+                      onPress={() =>
+                        handleOpenInMap(item.latitude, item.longitude)
+                      }
+                    >
+                      Open in map
+                    </Paragraph>
+                  </Card.Content>
+                  <Card.Actions>
+                    <Button
+                      mode="outlined"
+                      style={{ padding: 5 }}
+                      labelStyle={{ fontSize: 15 }}
+                      uppercase={false}
+                      onPress={() =>
+                        handleEnterButtonClick(
+                          item.stopId,
+                          route.params.busRouteId
+                        )
+                      }
+                    >
+                      Enter
+                    </Button>
+                  </Card.Actions>
+                </Card>
+                {renderArrowDownIcon(i)}
+              </View>
+            );
+          });
+        }
       } else {
         busRouteStopView = (
           <View>
@@ -170,11 +258,12 @@ function BusRouteStop() {
     return busRouteStopView;
   };
 
-  const handleEnterButtonClick = (busStopId) => {
+  const handleEnterButtonClick = (busStopId, busRouteId) => {
     navigation.navigate(t("busArrivalTime"), {
       companyId: route.params.companyId,
       routeStr: route.params.routeStr,
       busStopId: busStopId,
+      busRouteId: busRouteId,
     });
   };
 

diff --git a/src/components/busStopArrivalTime/BusStopArrivalTime.js b/src/components/busStopArrivalTime/BusStopArrivalTime.js
@@ -77,18 +77,18 @@ function BusStopArrivalTime() {
         }
       }
     } else if (company === "nlb") {
-      const response = await axios.get(`${rootUrl}/nlb/bus-arrival-time`, {
+      const response = await axios.get(`${rootUrl}/nlb/bus-stop-arrival-time`, {
         params: {
-          busStopId: busStopId,
-          routeId: "",
+          stopId: busStopId,
+          language: getLanguageText(),
         },
       });
       if (response && response.status === 200) {
         const responseData = response.data;
         console.log("responseData = ", responseData);
 
         if (responseData) {
-          result = responseData.busArrivalTimeNlb;
+          result = responseData.busStopArrivalTimeNlb;
         }
       }
     }

diff --git a/src/components/nearbyBusStop/NearbyBusStop.js b/src/components/nearbyBusStop/NearbyBusStop.js
@@ -294,7 +294,6 @@ function NearbyBusStop() {
                     labelStyle={{ fontSize: 15 }}
                     uppercase={false}
                     onPress={() => handleEnterButtonClick(item.stopId, "nlb")}
-                    disabled
                   >
                     Enter
                   </Button>

diff --git a/src/components/searchBusRoutes/SearchBusRoutes.js b/src/components/searchBusRoutes/SearchBusRoutes.js
@@ -86,8 +86,8 @@ function SearchBusRoutes() {
       console.log("responseData = ", responseData);
 
       if (responseData) {
-        const uniqBusRouteList = _.uniqBy(responseData.busRouteList, "routeNo");
-        setNlbRoutes(uniqBusRouteList);
+        // const uniqBusRouteList = _.uniqBy(responseData.busRouteList, "routeNo");
+        setNlbRoutes(responseData.busRouteList);
       }
     }
   };
@@ -124,7 +124,7 @@ function SearchBusRoutes() {
     setSearchText(text);
   };
 
-  const handleListItemClick = (companyId, routeStr) => {
+  const handleListItemClick = (companyId, routeStr, busRouteId) => {
     let direction = "";
     if (outboundChecked) {
       direction = "outbound";
@@ -133,11 +133,20 @@ function SearchBusRoutes() {
       direction = "inbound";
     }
 
-    navigation.navigate(t("busRoute"), {
-      companyId: companyId,
-      routeStr: routeStr,
-      direction: direction,
-    });
+    if (companyId !== "NLB") {
+      navigation.navigate(t("busRoute"), {
+        companyId: companyId,
+        routeStr: routeStr,
+        direction: direction,
+      });
+    } else {
+      navigation.navigate(t("busRouteStop"), {
+        companyId: companyId,
+        routeStr: routeStr,
+        direction: direction,
+        busRouteId: busRouteId,
+      });
+    }
   };
 
   const renderNwfbAndCtbRoutes = (nwfbAndCtbRoutes) => {
@@ -233,7 +242,9 @@ function SearchBusRoutes() {
           <List.Item
             key={i}
             title={item.routeNo}
-            onPress={() => handleListItemClick("NLB", item.routeNo)}
+            onPress={() =>
+              handleListItemClick("NLB", item.routeNo, item.routeId)
+            }
             left={(props) => <List.Icon {...props} icon="bus" />}
           />
         );