Add barrier free symbol for MTR station exits

hkbus · Aug 20, 2024 · 3aa0dc6 · 3aa0dc6
1 parent 5505a77
commit 3aa0dc6
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 6 deletions.
diff --git a/public/img/Wheelchair_symbol.svg b/public/img/Wheelchair_symbol.svg
diff --git a/src/components/map/MtrExits.tsx b/src/components/map/MtrExits.tsx
@@ -4,12 +4,14 @@ import useLanguage from "../../hooks/useTranslation";
 import Leaflet from "leaflet";
 
 interface MtrExit {
-  station: string;
-  name_en: string;
-  name_zh: string;
+  name: {
+    en: string;
+    zh: string;
+  },
   exit: string;
   lat: number;
   lng: number;
+  barrierFree: boolean;
 }
 
 interface MtrExitsState {
@@ -43,7 +45,7 @@ const MtrExits = () => {
   return (
     <>
       {state.exits.map((exit) => (
-        <React.Fragment key={`${exit.name_en}-${exit.exit}`}>
+        <React.Fragment key={`${exit.name.en}-${exit.exit}`}>
           {state.icon && (
             <Marker
               position={exit}
@@ -52,7 +54,7 @@ const MtrExits = () => {
                 iconAnchor: [7.5, 5],
                 className: "mtr-exit",
               })}
-              alt={exit[`name_${language}`]}
+              alt={exit.name[language]}
             />
           )}
           {state.label && (
@@ -65,6 +67,16 @@ const MtrExits = () => {
               })}
             />
           )}
+          {state.label && exit.barrierFree && (
+            <Marker
+              position={exit}
+              icon={Leaflet.divIcon({
+                iconSize: [12, 11],
+                iconAnchor: [-20, 5],
+                className: "mtr-exit-barrier-free",
+              })}
+          />
+          )}
         </React.Fragment>
       ))}
     </>

diff --git a/src/components/route-eta/RouteMap.tsx b/src/components/route-eta/RouteMap.tsx
@@ -387,4 +387,8 @@ const rootSx: SxProps<Theme> = {
     color: "#AC2E44",
     fontWeight: 600,
   },
+  ["& .mtr-exit-barrier-free"]: {
+    backgroundImage: `url(/img/Wheelchair_symbol.svg)`,
+    backgroundSize: "12px 11px",
+  }
 };
diff --git a/src/components/route-eta/TimeReport.tsx b/src/components/route-eta/TimeReport.tsx
@@ -221,7 +221,7 @@ const EtaRemark = ({
 }: EtaRemarkProps) => {
   if (remark === null) return "";
   // retrieve single digit numerical string from remark as a circle text
-  const platform = [...remark.en.matchAll(/Platform (\d+)/g)][0] || [];
+  const platform = [...(remark.en?.matchAll(/Platform (\d+)/g) ?? [])][0] || [];
 
   let ret = "";
   // replace only when single occurrence of single digit numerical string