fix: 🐛 bug fixes (auto campus switch, term/holiday distinction)

Author: kagiura

website/src/views/components/bus-map/ISBServices.scss

@@ -112,6 +112,7 @@ $route-colors: (
   }
 
   .subtext {
+    font-size: 0.75rem;
     font-weight: 700;
     color: var(--gray);
     text-shadow: var(--map-bg) 1px 0px 0px, var(--map-bg) 0.540302px 0.841471px 0px,

website/src/views/components/bus-map/LocationMap.tsx

@@ -1,5 +1,5 @@
 import { FC, useState, useContext, useCallback, memo, useEffect } from 'react';
-import { LatLngBoundsExpression, Map } from 'leaflet';
+import { LatLngBoundsExpression, LatLngBoundsLiteral, LatLngExpression, Map } from 'leaflet';
 import {
   MapContainer,
   Marker,
@@ -32,23 +32,23 @@ const ViewingBounds = {
     coordinates: [
       [1.2846, 103.7908],
       [1.3061, 103.7633],
-    ] as LatLngBoundsExpression,
+    ] as LatLngBoundsLiteral,
     minZoom: 15,
     centerpoint: [
       [1.2907, 103.7854],
       [1.3021, 103.7691],
-    ] as LatLngBoundsExpression,
+    ] as LatLngBoundsLiteral,
   },
   BTC: {
     coordinates: [
       [1.3249, 103.8122],
       [1.3164, 103.8226],
-    ] as LatLngBoundsExpression,
+    ] as LatLngBoundsLiteral,
     minZoom: 16.5,
     centerpoint: [
       [1.31874, 103.82009],
       [1.32358, 103.81405],
-    ] as LatLngBoundsExpression,
+    ] as LatLngBoundsLiteral,
   },
 };
 
@@ -139,16 +139,25 @@ function MapFocusSetter({ focusStop }: { focusStop: string | null }) {
 
 function MapBoundsSetter({ campus }: { campus: 'KRC' | 'BTC' }) {
   const map = useMap();
-  const { coordinates, minZoom, centerpoint } = ViewingBounds[campus];
+  const { coordinates, minZoom } = ViewingBounds[campus];
 
   useEffect(() => {
     const duration = 500;
-    map.flyToBounds(centerpoint, { duration: duration / 1000, maxZoom: 15, easeLinearity: 0.1 });
+    // map.flyToBounds(centerpoint, { duration: duration / 1000, maxZoom: 15, easeLinearity: 0.1 });
     // wait until above is done
-    setTimeout(() => {
-      map.setMaxBounds(coordinates);
-      map.setMinZoom(minZoom);
-    }, duration);
+    // setTimeout(() => {
+    map.setMaxBounds(coordinates);
+    map.setMinZoom(minZoom);
+    // center map to centerpoint immediately, without animation
+    const centerbounds = ViewingBounds[campus].centerpoint;
+    const centerpoint: LatLngExpression = [
+      (centerbounds[0][0] + centerbounds[1][0]) / 2,
+      (centerbounds[0][1] + centerbounds[1][1]) / 2,
+    ];
+    map.setView(centerpoint, minZoom, {
+      animate: false,
+    });
+    // }, duration);
   }, [campus]);
   return null;
 }

website/src/views/mobility/MobilityContainer/MobilityContainer.tsx

@@ -9,6 +9,8 @@ import useScrollToTop from 'views/hooks/useScrollToTop';
 import LocationMap from 'views/components/bus-map/LocationMap';
 import NoFooter from 'views/layout/NoFooter';
 import { getRouteSegments, getServiceStatus } from 'utils/mobility';
+import NUSModerator from 'nusmoderator';
+import { setTime } from 'utils/timify';
 import styles from './MobilityContainer.scss';
 import ServiceDetails from '../ServiceDetails';
 import ServiceList from '../ServiceList';
@@ -28,6 +30,13 @@ const getPropsFromMatch = (match: Match<Params>) => ({
   slug: match.params.slug,
 });
 
+const BTCStops = [
+  // college green, oth bldg, and bg mrt
+  'CG',
+  'OTH',
+  'BG-MRT',
+];
+
 const MobilityContainer = () => {
   useScrollToTop();
 
@@ -40,31 +49,55 @@ const MobilityContainer = () => {
   const [selectedService, setSelectedService] = useState<ISBService | null>(null);
 
   const [serviceStatus, setServiceStatus] = useState<ServiceStatus[]>([]);
+
+  const acadWeekInfo = NUSModerator.academicCalendar.getAcadWeekInfo(new Date());
+  const busPeriod =
+    acadWeekInfo.sem === 'Semester 1' || acadWeekInfo.sem === 'Semester 2' ? 'term' : 'vacation';
   useEffect(() => {
-    setServiceStatus(getServiceStatus());
+    setServiceStatus(getServiceStatus(busPeriod));
     const interval = setInterval(() => {
-      setServiceStatus(getServiceStatus());
+      setServiceStatus(getServiceStatus(busPeriod));
     }, 1000 * 60 * 0.25);
     return () => clearInterval(interval);
   }, []);
 
+  const setFocusStopAndCampus = (stop: string) => {
+    if (campus === 'KRC' && BTCStops.includes(stop)) {
+      setCampus('BTC');
+    } else if (campus === 'BTC' && !BTCStops.includes(stop)) {
+      setCampus('KRC');
+    }
+    setTimeout(() => setFocusStop(stop), 100);
+    // setFocusStop(stop);
+  };
+
   // window.scrollTo(0, 0); when type or slug changes
   useEffect(() => {
     window.scrollTo(0, 0);
     if (type === 'stop') {
-      setFocusStop(slug);
+      console.log('A');
+      setFocusStopAndCampus(slug);
     } else if (type === 'service') {
       const service = isbServices.find((s) => s.id === slug);
       if (service) {
         setSelectedService(service);
-        setFocusStop(service.stops[0]);
+        setFocusStopAndCampus(service.stops[0]);
       }
     } else if (type === undefined) {
       setSelectedService(null);
       setFocusStop(null);
     }
   }, [type, slug]);
 
+  // // if focusStop is in different campus, switch campus
+  // useEffect(() => {
+  //   if (focusStop && campus === 'KRC' && BTCStops.includes(focusStop)) {
+  //     setCampus('BTC');
+  //   } else if (focusStop && campus === 'BTC' && !BTCStops.includes(focusStop)) {
+  //     setCampus('KRC');
+  //   }
+  // }, [focusStop, campus]);
+
   return (
     <>
       <div className={styles.pageContainer}>

website/src/views/mobility/StopDetails.scss

@@ -7,6 +7,12 @@
   margin-top: -0.5rem;
 }
 
+.stopDetails {
+  h1 {
+    margin-bottom: 0;
+  }
+}
+
 .incomingBusesWrapper {
   overflow: auto;
   margin: 1rem 0 1.5rem;

website/src/views/mobility/StopDetails.tsx

@@ -468,11 +468,42 @@ function StopDetails(props: Props) {
   //   )
   //   .sort((a, b) => a.number - b.number);
 
+  const subtitle = [];
+  if (ShortName !== LongName) {
+    subtitle.push(<span>{LongName}</span>);
+  }
+
+  if (stopDetails.opposite) {
+    const oppositeStop = isbStops.find((s) => s.name === stopDetails.opposite);
+    const oppositeStopName = oppositeStop?.ShortName || stopDetails.opposite;
+    subtitle.push(
+      <span>
+        {
+          // if opposite stop name starts with "Opp", OR this stop name starts with "Opp" and the other one ends in the same, don't show "Opp: "
+          // oppositeStopName.startsWith('Opp') ? '' : 'Opp: '
+          (oppositeStopName.startsWith('Opp') && oppositeStopName.endsWith(ShortName)) ||
+          (ShortName.startsWith('Opp') && oppositeStopName.endsWith(ShortName.replace('Opp ', '')))
+            ? ''
+            : 'Opp: '
+        }{' '}
+        <Link to={`/mobility/stop/${stopDetails.opposite}`}>{oppositeStopName}</Link>
+      </span>,
+    );
+  }
+
   return (
-    <div>
+    <div className={styles.stopDetails}>
       <Title description={`NUS Internal Shuttle Bus ${LongName} Stop`}>{`${ShortName}`}</Title>
       <h1>{ShortName}</h1>
-      {ShortName !== LongName && <h2 className={classNames('h3', styles.fullname)}>{LongName}</h2>}
+      <p>
+        {/* show subtitiles with " • " as the delimiter */}
+        {subtitle.map((s, i) => (
+          <Fragment key={i}>
+            {i > 0 && ' • '}
+            {s}
+          </Fragment>
+        ))}
+      </p>
 
       <div className={styles.incomingBusesWrapper}>
         <ol className={styles.incomingBuses}>

website/src/views/mobility/isb.d.ts

@@ -66,6 +66,7 @@ interface ISBStop {
   collapseBehavior?: string;
   collapsePair?: string;
   collapseLabel?: undefined;
+  opposite: string | null;
 }
 
 interface ScheduleBlock {