website: bus: Match route colors with the official colors

Source: https://uci.nus.edu.sg/campus-life/campus-services/transportation/internal-shuttle-bus/

Author: zwliew

website/src/data/bus-routes.json

@@ -0,0 +1,10 @@
+[
+  "A1",
+  "A2",
+  "D1",
+  "D2",
+  "E",
+  "K",
+  "BTC",
+  "L"
+]

website/src/utils/venues.test.ts

@@ -1,14 +1,20 @@
 import venueInfo from '__mocks__/venueInformation.json';
 import venueLocationInfo from '__mocks__/venueLocations.json';
 import { VenueInfo, VenueLocationMap } from 'types/venues';
+import busRoutesJson from 'data/bus-routes.json';
 import {
   searchVenue,
   filterAvailability,
   sortVenues,
   floorName,
   clampClassDuration,
+  isPublicRoute,
+  extractRouteStyle,
+  simplifyRouteName,
 } from './venues';
 
+const busRoutes = busRoutesJson as string[];
+
 const venues = sortVenues(venueInfo as VenueInfo);
 const venueLocations = venueLocationInfo as VenueLocationMap;
 
@@ -224,3 +230,45 @@ describe(clampClassDuration, () => {
     ).toEqual(4);
   });
 });
+
+describe(isPublicRoute, () => {
+  it('should return true for public routes', () => {
+    expect(isPublicRoute('PUB:10')).toBe(true);
+    expect(isPublicRoute('PUB:95')).toBe(true);
+    expect(isPublicRoute('PUB:201')).toBe(true);
+  });
+
+  it('should return false for ISB routes', () => {
+    busRoutes.forEach((route) => {
+      expect(isPublicRoute(route)).toBe(false);
+    });
+  });
+});
+
+describe(extractRouteStyle, () => {
+  it('should return PUBLIC for public routes', () => {
+    expect(extractRouteStyle('PUB:10')).toBe('PUBLIC');
+    expect(extractRouteStyle('PUB:95')).toBe('PUBLIC');
+    expect(extractRouteStyle('PUB:201')).toBe('PUBLIC');
+  });
+
+  it('should return the route name for ISB routes', () => {
+    busRoutes.forEach((route) => {
+      expect(extractRouteStyle(route)).toBe(route);
+    });
+  });
+});
+
+describe('simplifyRouteName', () => {
+  it('should remove PUB: prefix for public routes', () => {
+    expect(simplifyRouteName('PUB:10')).toBe('10');
+    expect(simplifyRouteName('PUB:95')).toBe('95');
+    expect(simplifyRouteName('PUB:201')).toBe('201');
+  });
+
+  it('should return the route name for ISB routes', () => {
+    busRoutes.forEach((route) => {
+      expect(simplifyRouteName(route)).toBe(route);
+    });
+  });
+});

website/src/utils/venues.ts

@@ -100,3 +100,21 @@ export function floorName(floor: number | string): string {
   const floorNumber = floor < 0 ? `B${-floor}` : floor;
   return `floor ${floorNumber}`;
 }
+
+export function isPublicRoute(name: string): boolean {
+  return name.startsWith('PUB:');
+}
+
+export function extractRouteStyle(name: string): string {
+  if (isPublicRoute(name)) {
+    return 'PUBLIC';
+  }
+  return name;
+}
+
+export function simplifyRouteName(name: string): string {
+  if (isPublicRoute(name)) {
+    return name.substring(4);
+  }
+  return name;
+}

website/src/views/components/map/ArrivalTimes.test.tsx

@@ -4,6 +4,7 @@ import { entries, sortBy } from 'lodash';
 
 import { RefreshCw as Refresh } from 'react-feather';
 import { BusTiming, NextBus, NextBusTime } from 'types/venues';
+import { simplifyRouteName, extractRouteStyle } from 'utils/venues';
 import styles from './BusStops.scss';
 
 type Props = BusTiming & {
@@ -12,17 +13,6 @@ type Props = BusTiming & {
   reload: (code: string) => void;
 };
 
-/**
- * Extract the route name from the start of a string
- */
-const routes = ['A1', 'A2', 'B1', 'B2', 'C', 'D1', 'D2', 'BTC1', 'BTC2'];
-export function extractRoute(route: string) {
-  for (let i = 0; i < routes.length; i++) {
-    if (route.startsWith(routes[i])) return routes[i];
-  }
-  return null;
-}
-
 /**
  * Adds 'min' to numeric timings and highlight any buses that are arriving
  * soon with a <strong> tag
@@ -37,15 +27,6 @@ function renderTiming(time: NextBusTime) {
   return time;
 }
 
-/**
- * Route names with parenthesis in them don't have a space in front of the
- * opening bracket, causing the text to wrap weirdly. This forces the opening
- * paren to always have a space in front of it.
- */
-function fixRouteName(name: string) {
-  return name.replace(/\s?\(/, ' (');
-}
-
 export const ArrivalTimes = memo<Props>((props: Props) => {
   if (props.error) {
     return (
@@ -72,15 +53,14 @@ export const ArrivalTimes = memo<Props>((props: Props) => {
       {props.timings && (
         <table className={classnames(styles.timings, 'table table-sm')}>
           <tbody>
-            {timings.map(([routeName, timing]: [string, NextBus]) => {
-              const route = extractRoute(routeName);
-              const className = route
-                ? classnames(styles.routeHeading, styles[`route${route}`])
-                : '';
-
+            {timings.map(([route, timing]: [string, NextBus]) => {
+              const className = classnames(
+                styles.routeHeading,
+                styles[`route${extractRouteStyle(route)}`],
+              );
               return (
-                <tr key={routeName}>
-                  <th className={className}>{fixRouteName(routeName)}</th>
+                <tr key={route}>
+                  <th className={className}>{simplifyRouteName(route)}</th>
                   <td>{renderTiming(timing.arrivalTime)}</td>
                   <td>{renderTiming(timing.nextArrivalTime)}</td>
                 </tr>
@@ -104,3 +84,5 @@ export const ArrivalTimes = memo<Props>((props: Props) => {
     </>
   );
 });
+
+export default ArrivalTimes;

website/src/views/components/map/ArrivalTimes.tsx

@@ -1,12 +1,15 @@
 @import '~styles/utils/modules-entry';
 
-// Colors from https://material.io/design/color/
 $route-colors: (
-  A: #e53935,
-  B: #8e24aa,
-  C: #1e88e5,
-  D: #558b2f,
-  BTC: #6d4c41,
+  A1: #c10000,
+  A2: #ffcf09,
+  D1: #f9b3fe,
+  D2: #732172,
+  E: #01823b,
+  K: #305597,
+  BTC: #ff9a00,
+  L: #d9d9d9,
+  PUBLIC: #eee,
 );
 
 .iconWrapper {
@@ -56,7 +59,6 @@ $route-colors: (
     font-weight: bold;
     font-size: 9px;
     line-height: 1;
-    color: #fff;
     pointer-events: auto;
   }
 }
@@ -82,7 +84,6 @@ $route-colors: (
 
   .routeHeading {
     vertical-align: middle;
-    color: #fff;
   }
 }
 
@@ -105,37 +106,46 @@ $route-colors: (
 
 // Define a color for each route
 .routeA1 {
-  background: map-get($route-colors, 'A');
+  color: white;
+  background: map-get($route-colors, 'A1');
 }
 
 .routeA2 {
-  background: darken(map-get($route-colors, 'A'), 12);
+  color: black;
+  background: map-get($route-colors, 'A2');
 }
 
-.routeB1 {
-  background: map-get($route-colors, 'B');
+.routeE {
+  color: white;
+  background: map-get($route-colors, 'E');
 }
 
-.routeB2 {
-  background: lighten(map-get($route-colors, 'B'), 15);
-}
-
-.routeC {
-  background: map-get($route-colors, 'C');
+.routeK {
+  color: white;
+  background: map-get($route-colors, 'K');
 }
 
 .routeD1 {
-  background: map-get($route-colors, 'D');
+  color: black;
+  background: map-get($route-colors, 'D1');
 }
 
 .routeD2 {
-  background: lighten(map-get($route-colors, 'D'), 10);
+  color: white;
+  background: map-get($route-colors, 'D2');
 }
 
-.routeBTC1 {
+.routeBTC {
+  color: black;
   background: map-get($route-colors, 'BTC');
 }
 
-.routeBTC2 {
-  background: lighten(map-get($route-colors, 'BTC'), 15);
+.routeL {
+  color: black;
+  background: map-get($route-colors, 'L');
+}
+
+.routePUBLIC {
+  color: black;
+  background: map-get($route-colors, 'PUBLIC');
 }

website/src/views/components/map/BusStops.scss

@@ -7,13 +7,14 @@ import { produce } from 'immer';
 import type { BusTiming, BusStop } from 'types/venues';
 import type { EmptyProps } from 'types/utils';
 
-import busStopsJSON from 'data/bus-stops.json';
+import busStopsJson from 'data/bus-stops.json';
 import { allowBusStopEditing } from 'utils/debug';
 import { nextBus } from 'apis/nextbus';
+import { extractRouteStyle, simplifyRouteName } from 'utils/venues';
 import styles from './BusStops.scss';
 import { ArrivalTimes } from './ArrivalTimes';
 
-const busStops = busStopsJSON as BusStop[];
+const busStops = busStopsJson as BusStop[];
 
 type Props = EmptyProps;
 
@@ -131,9 +132,10 @@ export default class BusStops extends PureComponent<Props, State> {
 
           const routeIndicators = stop.shuttles.map(
             (shuttle) =>
-              `<span class="${classnames(styles.route, styles[`route${shuttle.name}`])}">${
-                shuttle.name
-              }</span>`,
+              `<span class="${classnames(
+                styles.route,
+                styles[`route${extractRouteStyle(shuttle.name)}`],
+              )}">${simplifyRouteName(shuttle.name)}</span>`,
           );
 
           const icon = new DivIcon({