hkbus · maruk0chan · Dec 16, 2023 · Dec 16, 2023 · Dec 16, 2023 · Dec 16, 2023
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "hk-bus-app"
+  }
+}
diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml
@@ -0,0 +1,20 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - master
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: npm ci && npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_HK_BUS_APP }}'
+          channelId: live
+          projectId: hk-bus-app
diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
@@ -0,0 +1,17 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on PR
+'on': pull_request
+jobs:
+  build_and_preview:
+    if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: npm ci && npm run build
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_HK_BUS_APP }}'
+          projectId: hk-bus-app
diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,10 @@
+{
+  "hosting": {
+    "public": "public",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ]
+  }
+}
diff --git a/public/404.html b/public/404.html
@@ -2,40 +2,32 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <link rel="icon" href="/favicon.ico" />
-    <title>巴士到站預報 App</title>
-    <script type="text/javascript">
-      // Single Page Apps for GitHub Pages
-      // MIT License
-      // https://github.com/rafgraph/spa-github-pages
-      // This script takes the current url and converts the path and query
-      // string into just a query string, and then redirects the browser
-      // to the new url with only a query string and hash fragment,
-      // e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
-      // https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
-      // Note: this 404.html file must be at least 512 bytes for it to work
-      // with Internet Explorer (it is currently > 512 bytes)
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Page Not Found</title>
 
-      // If you're creating a Project Pages site and NOT using a custom domain,
-      // then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
-      // This way the code will only replace the route part of the path, and not
-      // the real directory in which the app resides, for example:
-      // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
-      // https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
-      // Otherwise, leave pathSegmentsToKeep as 0.
-      var pathSegmentsToKeep = 0;
-
-      var l = window.location;
-      l.replace(
-        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
-        l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
-        l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
-        (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
-        l.hash
-      );
-
-    </script>
+    <style media="screen">
+      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
+      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
+      #message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
+      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
+      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
+      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
+      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
+      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
+      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
+      @media (max-width: 600px) {
+        body, #message { margin-top: 0; background: white; box-shadow: none; }
+        body { border-top: 16px solid #ffa100; }
+      }
+    </style>
   </head>
   <body>
+    <div id="message">
+      <h2>404</h2>
+      <h1>Page Not Found</h1>
+      <p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
+      <h3>Why am I seeing this?</h3>
+      <p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
+    </div>
   </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -135,6 +135,7 @@ const getThemeTokens = (mode: PaletteMode, fontSize: number) => ({
           },
           primary: {
             main: "#fedb00", // yellow
+            contrastText: "#000",
           },
           warning: {
             main: "#fedb00",

diff --git a/src/AppContext.tsx b/src/AppContext.tsx
@@ -24,6 +24,7 @@ import {
   NumPadOrder,
 } from "./data";
 import { DeviceOrientationPermission } from "react-world-compass";
+import { searchRangeOptions } from "./components/home/SwipeableList";
 
 type GeoPermission = "opening" | "granted" | "denied" | "closed" | null;
 
@@ -86,6 +87,14 @@ export interface AppState {
    * Font size
    */
   fontSize: number;
+  /**
+   * Range for geolocation search
+   */
+  lastSearchRange: number;
+  /**
+   * Custom Range for geolocation search
+   */
+  customSearchRange: number;
 }
 
 interface AppContextValue
@@ -122,6 +131,10 @@ interface AppContextValue
   setFontSize: (fontSize: number) => void;
   importAppState: (appState: AppState) => void;
   workbox?: Workbox;
+  lastSearchRange: number;
+  setLastSearchRange: (lastSearchRange: number) => void;
+  customSearchRange: number;
+  setCustomSearchRange: (customSearchRange: number) => void;
 
   // for React Native Context
   setGeoPermission: (geoPermission: AppState["geoPermission"]) => void;
@@ -174,6 +187,10 @@ const isColorMode = (input: unknown): input is ColorMode => {
   return input === "dark" || input === "light" || input === "system";
 };
 
+// use the largest search range option as default
+export const defaultSearchRange =
+  searchRangeOptions[searchRangeOptions.length - 1];
+
 export const AppContextProvider = ({
   workbox,
   children,
@@ -236,6 +253,11 @@ export const AppContextProvider = ({
       annotateScheduled:
         JSON.parse(localStorage.getItem("annotateScheduled")) ?? false,
       fontSize: JSON.parse(localStorage.getItem("fontSize")) ?? 14,
+      lastSearchRange:
+        JSON.parse(localStorage.getItem("lastSearchRange")) ??
+        defaultSearchRange,
+      customSearchRange:
+        JSON.parse(localStorage.getItem("customSearchRange")) ?? "",
     };
   };
   const { i18n } = useTranslation();
@@ -546,6 +568,22 @@ export const AppContextProvider = ({
     );
   }, []);
 
+  const setLastSearchRange = useCallback((lastSearchRange: number) => {
+    setStateRaw(
+      produce((state: State) => {
+        state.lastSearchRange = lastSearchRange;
+      })
+    );
+  }, []);
+
+  const setCustomSearchRange = useCallback((customSearchRange: number) => {
+    setStateRaw(
+      produce((state: State) => {
+        state.customSearchRange = customSearchRange;
+      })
+    );
+  }, []);
+
   const colorMode = useMemo(() => {
     if (state._colorMode === "light" || state._colorMode === "dark") {
       return state._colorMode;
@@ -650,6 +688,20 @@ export const AppContextProvider = ({
     localStorage.setItem("fontSize", JSON.stringify(state.fontSize));
   }, [state.fontSize]);
 
+  useEffect(() => {
+    localStorage.setItem(
+      "lastSearchRange",
+      JSON.stringify(state.lastSearchRange)
+    );
+  }, [state.lastSearchRange]);
+
+  useEffect(() => {
+    localStorage.setItem(
+      "customSearchRange",
+      JSON.stringify(state.customSearchRange)
+    );
+  }, [state.customSearchRange]);
+
   const contextValue = useMemo(() => {
     return {
       ...dbContext,
@@ -681,6 +733,8 @@ export const AppContextProvider = ({
       importAppState,
       workbox,
       setGeoPermission,
+      setLastSearchRange,
+      setCustomSearchRange,
     };
   }, [
     dbContext,
@@ -712,6 +766,8 @@ export const AppContextProvider = ({
     importAppState,
     workbox,
     setGeoPermission,
+    setLastSearchRange,
+    setCustomSearchRange,
   ]);
   return (
     <AppContext.Provider value={contextValue}>{children}</AppContext.Provider>

diff --git a/src/components/home/SuccinctTimeReport.tsx b/src/components/home/SuccinctTimeReport.tsx
@@ -10,11 +10,11 @@ import {
   Typography,
 } from "@mui/material";
 import { Link, useNavigate } from "react-router-dom";
-import { vibrate } from "../../utils";
+import { getDistance, getDistanceWithUnit, vibrate } from "../../utils";
 import AppContext from "../../AppContext";
 import { useTranslation } from "react-i18next";
 import SuccinctEtas from "./SuccinctEtas";
-import { getDistanceWithUnit, toProperCase } from "../../utils";
+import { toProperCase } from "../../utils";
 import RouteNo from "../route-board/RouteNo";
 import { Eta, Location } from "hk-bus-eta";
 import { ManageMode } from "../../data";
@@ -48,9 +48,9 @@ const DistAndFare = ({
     .join(", ");
 
   const { distance, unit, decimalPlace } = getDistanceWithUnit(
-    location,
-    geolocation
+    getDistance(location, geolocation)
   );
+
   if (geoPermission !== "granted" || location.lat === 0) {
     return <>{name + "　" + (fareString ? "(" + fareString + ")" : "")}</>;
   }