feat: Walk time finally implemented

CONTRIBUTING.md

@@ -2,4 +2,4 @@
 
 The Transit Arrival Board was designed to be as future-proof as possible with little to no maintanence in mind. However, we anticipate that this cannot last forever, especially if the MTA's APIs change.
 
-If you find a problem, please take the time to contribute. This project was made for a high school (Bronx High School of Science), and maintainers will come and go every 4 years, so we need all the help we can get.
+If you find a problem, please take the time to contribute. This project was made for a high school (The Bronx High School of Science), and maintainers will come and go every 4 years, so we need all the help we can get.

README.md

@@ -10,6 +10,18 @@ Create a `.env` file and add the following variables.
 
 The MTA's BusTime feeds require an API key, which you can obtain [here](http:https://www.bustime.mta.info/wiki/Developers/Index).
 
+## Configuration
+
+The configuration file is located in `app/config.ts`. It is currently set to stops located near The Bronx High School of Science, but this file is meant to be edited to display any stop in the MTA network. Stops can be added (either subway or bus) with `StopConfig` objects, which is explained in depth below.
+
+### `stop_ids`
+
+Although each GTFS `stop_id` refers to a single platform, we have anticipated for the need to combine platforms with built-in transfers. The first `stop_id` is used to distinguish the `stop_name` and as a key.
+
+### `walk_time`
+
+Although the Rust backend uses the MTA's GTFS realtime feeds to get information about when a vehicle is scheduled to arrive at a station, it may be unhelpful for the vehicle to arrive faster than someone would be able to "catch" it. `walk_time` is used to remove vehicles from the React.js frontend that are deemed to be unlikely for someone to "catch" it.
+
 ## Dependencies
 
 Install the following dependencies.

app/components/Bulletin.tsx

@@ -1,9 +1,10 @@
 import { Route } from "@/types/Route";
 import { Stop } from "@/types/Stop";
+import { Vehicle } from "@/types/Vehicle";
 import React from "react";
 import { Bullet } from "./Bullet";
 
-export function Bulletin(props: { routes: Record<string, Route>; stop: Stop }) {
+export function Bulletin(props: { routes: Record<string, Route>; stop: Stop; walk_time: number }) {
  return (
  <React.Fragment>
  <div className="flex h-14 flex-row items-center rounded-lg bg-emerald-700">
@@ -12,26 +13,30 @@ export function Bulletin(props: { routes: Record<string, Route>; stop: Stop }) {
  {props.stop.trips.length > 0 ? (
  Object.values(props.stop.destinations).map((destinations) => {
  return Object.values(destinations).map((vehicles) => {
+ let times: Array<Vehicle> = vehicles.filter((vehicle) => {
+ return vehicle.minutes_until_arrival > props.walk_time / 2;
+ });
+
  return (
  <div
  className="flex min-h-29 flex-row items-center rounded-lg bg-slate-200 text-black"
  key={Math.random()}
  >
  <div className="flex h-full w-4/5 flex-row items-center rounded-lg bg-slate-100 shadow-2xl">
  <div className="flex h-full w-3/4 flex-row items-center justify-start gap-2 px-2">
- <Bullet route={props.routes[vehicles[0].route_id]} size={72} />
- <h1 className="line-clamp-2 text-wrap font-bold 2xl:text-3xl">{vehicles[0].destination_name}</h1>
+ <Bullet route={props.routes[times[0].route_id]} size={72} />
+ <h1 className="line-clamp-2 text-wrap font-bold 2xl:text-3xl">{times[0].destination_name}</h1>
  </div>
  <div className="flex h-full w-1/4 flex-col items-center justify-center">
- <h1 className="font-black 2xl:text-6xl">{vehicles[0].minutes_until_arrival}</h1>
+ <h1 className="font-black 2xl:text-6xl">{times[0].minutes_until_arrival}</h1>
  <h1 className="font-semibold 2xl:text-2xl">min</h1>
  </div>
  </div>
 
  <div className="flex h-full w-1/4 flex-col items-center justify-center">
- {vehicles[1] ? (
+ {times[1] ? (
  <React.Fragment>
- <h1 className="font-black 2xl:text-6xl">{vehicles[1].minutes_until_arrival}</h1>
+ <h1 className="font-black 2xl:text-6xl">{times[1].minutes_until_arrival}</h1>
  <h1 className="font-semibold 2xl:text-2xl ">min</h1>
  </React.Fragment>
  ) : undefined}

app/components/Countdown.tsx

@@ -1,55 +1,60 @@
 import { Route } from "@/types/Route";
 import { Stop } from "@/types/Stop";
+import { Vehicle } from "@/types/Vehicle";
 import React from "react";
 import { Bullet } from "./Bullet";
 
-export function Countdown(props: { routes: Record<string, Route>; stop: Stop }) {
+export function Countdown(props: { routes: Record<string, Route>; stop: Stop; walk_time: number }) {
+ let times: Array<Vehicle> = props.stop.trips.filter((vehicle) => {
+ return vehicle.minutes_until_arrival > props.walk_time / 2;
+ });
+
  return (
  <React.Fragment>
  <div className="flex min-h-14 flex-row items-center rounded-lg bg-emerald-700">
  <h1 className="mx-2 font-black text-white 2xl:text-3xl">{props.stop.name}</h1>
  </div>
- {props.stop.trips.length > 0 ? (
+ {times.length > 0 ? (
  <div className="flex min-h-64 flex-row rounded-lg bg-slate-300">
  <div className="flex h-full w-3/4 flex-row rounded-lg bg-slate-200 shadow-2xl">
  <div className="flex h-full w-2/3 rounded-lg bg-slate-100 shadow-2xl">
  <div className="flex h-full flex-col px-8 py-4">
  <div className="flex basis-2/5 flex-row items-center">
  <h1 className="line-clamp-1 font-bold text-black 2xl:text-6xl 2xl:leading-normal">
- {props.stop.trips[0].destination_name}
+ {times[0].destination_name}
  </h1>
  </div>
  <div className="flex basis-3/5 flex-row items-center gap-4">
- <Bullet route={props.routes[props.stop.trips[0].route_id]} size={112} />
+ <Bullet route={props.routes[times[0].route_id]} size={112} />
  <div className="flex items-baseline">
- <h1 className="font-bold text-black 2xl:text-9xl">{props.stop.trips[0].minutes_until_arrival}</h1>
+ <h1 className="font-bold text-black 2xl:text-9xl">{times[0].minutes_until_arrival}</h1>
  <h1 className="font-semibold text-black 2xl:text-5xl">min</h1>
  </div>
  </div>
  </div>
  </div>
- {props.stop.trips[1] ? (
+ {times[1] ? (
  <div className="flex h-full w-1/3 flex-col px-8 py-4">
  <div className="flex basis-2/5 flex-row items-center">
- <Bullet route={props.routes[props.stop.trips[1].route_id]} size={96} />
+ <Bullet route={props.routes[times[1].route_id]} size={96} />
  </div>
  <div className="flex basis-3/5 flex-row items-center gap-4">
  <div className="flex items-baseline">
- <h1 className="font-bold text-black 2xl:text-9xl">{props.stop.trips[1].minutes_until_arrival}</h1>
+ <h1 className="font-bold text-black 2xl:text-9xl">{times[1].minutes_until_arrival}</h1>
  <h1 className="font-semibold text-black 2xl:text-5xl">min</h1>
  </div>
  </div>
  </div>
  ) : undefined}
  </div>
- {props.stop.trips[2] ? (
+ {times[2] ? (
  <div className="flex h-full w-1/4 flex-col px-8 py-4">
  <div className="flex basis-2/5 flex-row items-center">
- <Bullet route={props.routes[props.stop.trips[2].route_id]} size={96} />
+ <Bullet route={props.routes[times[2].route_id]} size={96} />
  </div>
  <div className="flex basis-3/5 flex-row items-center gap-4">
  <div className="flex items-baseline">
- <h1 className="font-bold text-black 2xl:text-9xl">{props.stop.trips[2].minutes_until_arrival}</h1>
+ <h1 className="font-bold text-black 2xl:text-9xl">{times[2].minutes_until_arrival}</h1>
  <h1 className="font-semibold text-black 2xl:text-5xl">min</h1>
  </div>
  </div>

app/page.tsx

@@ -45,10 +45,11 @@ export default function Home() {
  setStatus(true);
  console.log("Message recieved.");
 
- setImportConfig(JSON.parse(event.data));
+ const message = JSON.parse(event.data);
+ setImportConfig(message);
 
  const headers: Array<string> = [];
- const serviceData: Array<Alert> = importConfig.service_alerts_realtime;
+ const serviceData: Array<Alert> = message.service_alerts_realtime;
  serviceData
  .slice()
  .reverse()
@@ -126,6 +127,7 @@ export default function Home() {
  ? importConfig.stops_realtime[value.stop_ids[0]]
  : { name: "", trips: [], destinations: {} }
  }
+ walk_time={value.walk_time}
  routes={importConfig.routes_static}
  ></Countdown>
  );
@@ -152,6 +154,7 @@ export default function Home() {
  : { name: "", trips: [], destinations: {} }
  }
  routes={importConfig.routes_static}
+ walk_time={value.walk_time}
  ></Bulletin>
  );
  })}