thepletch / mbta-checkin Goto Github PK

Useful as an error display, esp. for mobile - implement a small, icon-based status indicator to be displayed in one corner of the screen (bottom left on desktop, top right on mobile) that shows the following details for any API requests made:

• When loading, displays a gray spinner.
• When complete, displays a green check.
• When error, displays a red X. User should be able to click on this X to display further error information in the modal window.

CSS contains several duplicated pieces of information that could be better expressed with SASS (also allowing it to be minified on upload). Rewrite the current CSS into SASS and write corresponding gulp tasks to compile the SASS for development and deployment.

Settings pane should offer toggles for:

• Automatic route updates
• Subway line overlays
• Subway names (TBA)
• Train destinations (TBA)

About pane should display:

• Author(s)
• Current version
• Donation link

The MBTA publishes live location data for all their bus routes, provided by the NextBus API. When a user clicks a stop and receives at least one bus prediction, a button should display next to the 'Buses' heading labeled 'Live'. When this button is pressed, the modal window will close and live locations of all bus routes associated with the stop will be displayed. Any other live location request will clear these.

The 'time between trains' analytics for a given route calls everything a train. A helper method should be built that determines the appropriate vehicle name (bus, train, etc) for a given route.

Amazon Web Services should be configured to update its files based on changes to this Github repo's master branch.

Tasks to

• Minify JS
• Compile SASS (once we're using that)
• Combine JS files with RequireJS

Research 'fading in' new objects over time to make appearing vehicles/routes more obvious

Add loading spinner while data files are being loaded

See title - same analytics token as my main site

async.js is great, but HTML5 promises better fit what I'm trying to do here.

Reproduction steps:

Click "View Buses" for any bus line, then open any stop on that route and press "View Buses" for the same bus line again.

Correct performance:

View Buses should always show the live locations of buses on a route

Prediction pane is currently an unstyled set of nested lists - that can be improved. Add some flair to it, esp. to differentiate the different segments.

Center the header for the stop name
Mode of transportation header is redundant - nix it
Reference the following format, fitting two across, though each route should have its own row:

Downtown Crossing

Orange Line

Forest Hills 10:31 4m
Oak Grove 10:34 7m

Red Line

Alewife 10:36 9m
Ashmont 10:27 Arr

39

Inbound 10:44 17m

• Offer a toggle for users to enable automated train updates every 2 minutes
• After 5 minutes of inactivity (no outgoing queries other than automated ones) disable the toggle.

Swipe gestures currently feel unresponsive due to slow animation speed- double the animation speed.

Additionally, allow a right swipe to dismiss the modal.

JQuery is a big library, and it's currently only being used for fetching elements by ID and class manipulation. It should be replaced with a more lightweight alternative or factored out altogether (prefer not to do this, since class manipulation is super unwieldy).

At the moment we're using nasty homespun code to query multiple routes for live train locations at once. We should be using a simpler/more standardized library (async) to do this and clean up code for readability.

Thanks to @ustasb for turning me onto this.

Add a visual indicator to a stop showing that it has been selected and store it in the code as the selected stop.

Refactor system into Coffeescript (including Coffeescript classes for modules) for concision and modifiability.

The four modules in map.js have an issue right now with being interdependent. That is, two modules are aware of another's existence. All relationships should be evaluated and, if at all possible, rewritten using an events system to be made one-way or fully decoupled.

Images should be compiled into a spritesheet to avoid things loading one line at a time or the unattractive blinking of the reticle between loading and completion. Note Google Maps' 'origin' parameter for Icons.

Clicking a button to refresh the live train locations view for a line should collapse the trains menu. Currently the menu blocks a lot of the screen unnecessarily on mobile.

Find some way to integrate the alert pane into the mobile site to give error feedback.

The train arrows are really dark, almost unseeable on the dark map, consider a brighter color?

Quick Lookup should appear as a button in the new UI that, when pressed:

• Moves the camera to the user's current location
• Fetches the 5 stops nearest to the user
• Shows all five stop names in the same modal, collapsed to only show the stop names
• When any stop name is clicked, all other open stops are collapsed and a prediction is fetched for the stop before the prediction modal render slides down beneath it

Currently alert deduping is broken (attempts to compare alert string to alert objects to find duplicates). It should be fixed to avoid cluttering the alerts panel.

The Helpers module shouldn't have hardcoded strings in it (e.g. the icon URLs). These should be moved into JSON files and imported.

Currently we only track the main lines - add silver line stops, live train locations, and route shapes.

Feature spec:

• When a blank part of the map is clicked, place a marker and show stops around that point
• Provide an address-based search that provides the same 'nearby stops' functionality with a pop-up form when a button is pressed
• Provide a 'my location' button that, again, shows nearby stops

Currently if a live train is placed over a stop (common when trains 'stand by' on the green line) the stop becomes extremely difficult to click - research a way to allow clicks to pass through train icons or ignore the clicks altogether

http://webcomponents.org/

Modal window is unintuitive to swipe away/back in - should slide with user's finger/mouse until dragged off screen.

Google Maps apparently has an overlay showing the MBTA lines. Find and add this overlay for aesthetic/clarity purposes.

Research notifications API for Android/iOS/desktop users to allow for 'leave by this time' features.

Basic UI swag:

• Single large visible button (full width on mobile, about 300px on desktop) at bottom of screen
• Swipe left/right to switch between feature buttons
• Button can either slide up to reveal menu on press or simply perform an action
• Menu-slider buttons should be gray with an arrow pointing down
• Menu-slider buttons should also slide up when a user swipes up on them
• Arrows should point left/right when there are further options available in that direction
• When a new alert is registered, right arrow/alerts button turns red (unless Warn on Alerts is disabled)
  Current UI can be rewritten as:
  About/Settings | Update Trains | Quick Lookup | My Location | Alerts
  Default to Quick Lookup

About/Settings drops down to:

• Created by @ThePletch (links to Github repo)
• Toggle for 'Warn on Alerts'
• PayPal link

Update Trains drops down to:

• Green
• Red
• Orange
• Blue
• Silver

Alerts pops up a modal window with the ten most recent alerts in a scrollable view

• Opening Alerts dismisses red alerts arrow/button

If a user swipes left/right while a dropdown is open, quickly slide down the dropdown before swiping to the next menu option. Dropdowns should not have unpersisted states for this reason (i.e. there should never be a 'save' button in a dropdown).

The MBTA has an option to fetch live train GPS info from GTFS all at once, reducing query load from 19 per full update to 1. This should be used instead of the current updates by route system.