bloombus / bloombus-client Goto Github PK

Description:

When a user selects a stop a dashed line should be shown following a suggested walking path between the user's current location and the selected stop.

Steps To Reproduce:

Workaround:

Risks:

TBD

Acceptance Criteria:

Description:

When the application is loaded, it should conditionally route to separate layout definitions depending on whether the user has a desktop or mobile User Agent. Recommended tool for detection is react-device-detect.

Steps To Reproduce:

Workaround:

Risks:

TBD

Acceptance Criteria:

• Application routes to different layout definitions depending between desktop and mobile User Agents

Description:

When the app is ready for a beta or public release, we will need to begin publishing updates off of master following semver guidelines. This would also include adding a develop branch in which developers branch/merge feature branches from/to, and releases are published from develop to master. To help new developers, we already need to document our git flow and in addition we will need to set up and document the process for publishing these releases.

Description:

Steps To Reproduce:

Workaround:

Risks:

TBD

Acceptance Criteria:

Description:

The high-res images of the stops (thanks again @colinmcintyre17) take a second or 2 to load over a decent network connection, and it would be a nice UX enhancement to lazyload these images with a loader placeholder

Steps To Reproduce:

Workaround:

Risks:

TBD

Acceptance Criteria:

Description:

When the app is opened over http, the GeolocateControl is hidden since https is required for geolocation features. So, the navigation controls and the geolocatecontrol should both be put in a flexbox container that is absolutely positioned instead of the individual controls.

Steps To Reproduce:

Workaround:

Risks:

TBD

Acceptance Criteria:

Description:

When a user is selecting between the available loops using the carousel, the stops that are not a part of the current loop should be partially faded out to bring visual focus to the locations of potential stops the user can navigate to.

Steps To Reproduce:

Workaround:

Risks:

TBD

Acceptance Criteria:

Description:

The Google Maps API has limited ability for dynamically manipulating the map in React. Uber's react-map-gl package is a React wrapper around Mapbox's Mapbox GL JavaScript API which is much more extensive and enables us to self-host our vector tile basemap to avoid licensing limitations.

Steps To Reproduce:

N/A

Workaround:

N/A

Risks:

TBD

Acceptance Criteria:

• All Google Maps dependencies are removed
• Dynamic drawing of shuttles is replicated
• Drawing of loops is replicated
• Drawing of stops is replicated
• Shuttle markers are rotated based on bearing property
• Basemaps are replaced with self-hosted vector tiles
• New environment variables (such as the URL for the vector tiles TileJSON) are added

Description:

Steps To Reproduce:

Workaround:

Risks:

TBD

Acceptance Criteria:

Description:

When a user activates GeolocateControl and they are out of bounds (say California for instance) the app forever tries to fly to that location but due to our clamping logic gets stuck at the coordinating map boundary. Instead as soon as the GeolocateControl is activated a check should be done to determine if they are outside of the bounds and if so display a notification modal notifying them that they are unable to use the geolocation feature.

Risks:

None

Acceptance Criteria:

• When the react-map-gl GeolocateControl is activated, the app checks if the user is outside of our defined bounding box
• If the user is outside of our bounding box, a modal appears saying "Sorry, geolocation is not available since you are outside of our boundaries."
• Either as soon as the modal is displayed or when the modal is closed, the GeolocateControl returns to its inactive state.

Description:

Currently Firebase SDK scripts are downloaded at runtime by linking to them in the HTML. To be more consistent with our other dependencies and to utilize optimization features of Webpack, we should use the npm packages for Firebase SDK instead.

Steps To Reproduce:

N/A

Workaround:

N/A

Risks:

TBD

Acceptance Criteria:

• <link> s to Firebase SDK scripts have been removed from index.html
• A reusable Firebase object is initialized and exported via its own module
• Any modules dependent on Firebase SDK import the aforementioned Firebase module

Description:

To complete the transition to react-map-gl, all previous map interactions must be replicated as it were with the Google Maps API.

Steps To Reproduce:

N/A

Workaround:

N/A

Risks:

TBD

Acceptance Criteria:

• Utilize flyTo or easeTo transitions
• Define map option constants in Firebase and apply to Map component
• Update helper functions in utils folder
• Render loops as a layer with line coloring based on feature properties

Description:

There are ways within the app to navigate using on-screen controls, however it's often more convenient to use the browser forward/back navigation, especially on mobile.

Steps To Reproduce:

N/A

Workaround:

N/A

Risks:

TBD

Acceptance Criteria:

• Home component and child components integrate with React Router, and state variables are converted to use route parameters

Description:

When a user taps/clicks on a stop marker on the map, they should be presented with a bottom sheet that provides them with information on that stop (content TBD) as well as other stop-specific meaningful interface changes.

Steps To Reproduce:

Workaround:

Risks:

TBD

Acceptance Criteria:

Description:

Ant-mobile was previously used for the timeline and navbar components in now outdated versions of the UI design. Since we will no longer be using this library, it should be removed as a dependency.

Steps To Reproduce:

N/A

Workaround:

N/A

Risks:

TBD

Acceptance Criteria:

• All Aliexpress/Antd dependencies are removed

Description:

When a user is selecting between the available loops using the carousel, the stops that are not a part of the current loop should be partially faded out to bring visual focus to the locations of potential stops the user can navigate to.

Risks:

Low (potential for styling bugs)

Acceptance Criteria:

Description:

When the user has enabled the map's GeolocateControl and it is successfully providing location, whenever details on a stop is displayed the distance to that stop should be shown.

Risks:

Possible performance degradation if distance calculations are done inefficiently

Acceptance Criteria:

• Distance to stop is shown only when the user's location is successfully being tracked by GeolocateControl
• Any instances where a list of stops are provided or the user is looking at details for a specific stop the distance to each stop should be shown.
• For now, the distance should be represented in miles to 1 decimal place.
• The distance is calculated using the @turf/distance module

Description:

A crude version of a shuttle marker was temporarily added to test the rotation, placement, and dynamic coloring using the new react-map-gl API. It should be replaced with a higher quality inline SVG version as a more permanent solution.

Risks:

TBD

Acceptance Criteria:

• A new vector graphic marker is created to represent a shuttle
• The icon is dynamically rotated and placed correctly on the map
• The icon is rendered using inline SVG rather than referencing the static image file

Description:

To support having an overflow menu on the app's header with options to route to various other views besides the Home view, we need to utilize react-router and refactor the structure of the App/Home components.

Risks:

Currently there appears to be no risk, although moving the header out of the Home component could change how we dynamically resize the map going forward.

Acceptance Criteria:

• The AppHeader component is migrated into App.js
• react-router is upgraded to a v4.x release and react-router-dom is added as a dependency
• A basic route is added as an example as a basis to later be implement in separate issues
• Invalid routes redirect to the Home component

Description:

The current display of lists depends on a large library (antd-mobile) and provides little customization, and has poor contrast with the bottom sheet background.

Steps To Reproduce:

N/A

Workaround:

N/A

Risks:

TBD

Acceptance Criteria:

• Loops bottom sheet shows an in-order series list of its stops
• The next stop is always at the top and when the bus reaches that stop it is rotated to the end of the list
• The next stop is given visual focus

Description:

On certain monitor sizes, so far 16:10, there will be an extra blank bar at the bottom underneath the map.

This may require or also be linked to the need for having the map resize upon resizing the browser without needing a page refresh.

Steps To Reproduce:

Open client application on a 16:10 or other weird aspect ratio monitors.

Workaround:

Use a proper aspect ratio monitor. Bug doesn't break overall project, just visual.

Risks:

TBD

Acceptance Criteria:

• No More Extra Bar Space
• Implement BrowserContext
• Map Resizes on Window Resize

Description:

We need an overflow menu (see Android description of this) on the AppHeader to be able to provide a menu for additional tasks/options as well as a place to link attribution/about us docs.

Risks:

None

Acceptance Criteria:

• Button for toggling the visibility of the overflow menu appears on the far right side of the AppHeader on both desktop and mobile views
• Button renders a vertical ellipsis icon, preferably from the calcite-ui-icons-react package with its handle-vertical icon
• Button displays a calcite-react Menu with these options:
  • "Shuttle Schedule"
  • "Status Alerts"
  • "Feedback"
  • "Report an Issue"
  • "About"

Description:

Right now the flyTo transitions apply to all map transitions including typical clicking/touch panning around the map. FlyTo or EaseTo transitions should be reserved for only programmatic transitions such as after selecting a loop.

Steps To Reproduce:

N/A

Workaround:

N/A

Risks:

TBD

Acceptance Criteria:

Remove flyTo/easeTo transitions for user map interactions

Description:

Steps To Reproduce:

Workaround:

Risks:

TBD

Acceptance Criteria:

Description:

Add the Sidebar to the BrowserView and Render both the Loop names and their Stops.

Steps To Reproduce:

N/A

Workaround:

N/A

Risks:

N/A

Acceptance Criteria:

• Add Sidebar
• Render Loops List
• Render Loop Stops

Description:

The carousel leads to several visual challenges and an overall not great user experience having to swipe between all carousel stages to choose between a loop. Since we would like to use a swipeable BottomSheet to be more consistent with other UI steps (such as seeing information about a stop, a shuttle, etc) and to be closer to common experience in other major mapping applications, it should be replaced.

Steps To Reproduce:

N/A

Workaround:

N/A

Risks:

TBD

Acceptance Criteria:

• Remove LoopsCarousel component and related files
• Create a LoopsBottomSheet component
• Remove nuka-carousel from package.json
• Render available loops as list items within BottomSheet.
• Replicate onClick behavior to fit map bounds to the selected loop