neolegends/velocity-pwa

🚴‍♂️💨 An alternative https://velocity-aachen.de/menu

Velocity PWA

This is an improved version of the e-bike-rental PWA found at https://velocity-aachen.de/menu.

It was rewritten from the ground up in modern React for improved performance and a better user experience. Originally written to be a 1:1 clone of the existing PWA it now has diverged from the official web app to integrate some improvements in regards to the bike booking & rental process and an improved overview over the map.

The PWA contains a service worker (that is currently disabled on iOS) and can be installed as a Chrome PWA.

Building

This project uses Create-React-App as its build process & yarn for package management. Compiling is straightforward:

yarn build

You will find the minified & bundled sources in the build folder. They can be served from any static web server.

CORS Proxy

Due to CORS restrictions (and for various other reasons), the PWA requires an API proxy to Velocity's backend and to the OpenStreetMap tile servers. During development, the proxy is provided by Create-React-App. For production usage, the app is already configured for a Netlify deployment.

If you want to configure the proxy manually, take a look at the _redirects file. It lists the required rewrite rules in Netlify syntax that should be quite easy to understand & to transfer to a more general proxy solution.

Bundle Analysis

The build process will generate a bundle analysis of the compiled code at build/bundle-stats.html.

Development

yarn start

The web app will by default be served on localhost:3000.

Screenshots

Mobile

Desktop

velocity-pwa's Issues

Rent slider displays selected slot number from other stations

Currently, when selecting a slot for renting on one station and switching to another station, it keeps displaying that slot number on the slider, even if that slot isn't even available.

Consider implementing `contingent` info

Under https://cms.velocity-aachen.de/backend/app/customer/contingent, a JSON object returns the current credit of a user account.

The response looks like this

{"amount":27.50}

This should probably be shown to the user.

Additionally, the same area could display the amount of referred customers, which the official apps do not show. This information is available under https://cms.velocity-aachen.de/backend/app/customer as refCount.

Refactor popup logic

Booking & renting logic is currently split between the bike-map and rent-popup components. This creates some complications in regards to clear separation of concerns. We should move the booking & renting logic into rent-popup entirely.

Rent slider doesn't glide back

Not sure why but might be because the DOM element gets re-mounted or something.

Rent popup doesn't display station MOTD

Displaying the MOTD is required in case of a full station defect or a "hidden" station such as StreetScooter.

Image hosting issue

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Stations with only rented bikes (not by ourselves) can be opened

It causes the slider to be disabled & empty and the book-button to be disabled as well, but it's still a nuisance. The station should show as greyed out, because no bike can be booked there.

Increase visibility of which slot is rented when renting the most-charged bike

User feedback:

Wenn man ein Fahrrad ausleiht, wird ja das vollste genommen. Aber es ist nicht direkt ersichtlich welches das ist. Bei großen Stationen sieht man im hellen auch nicht direkt welches blinkt. Wäre besser wenn in der App direkt steht welcher Slot. Ist mir gerade am Westbahnhof aufgefallen

We could solve this by autoselecting the most-charged slot when opening the popup. Instead of "Rent most-charged bike" the slider would just always show "Rent bike at ".

Pinging @LucasForster and @sudmann for additional thoughts.

Throw promises in hooks to trigger suspense

Right now we have content flashes when the page itself has loaded, but the contents have not. If we make the hooks throw promises (which triggers suspense), React will only show the page when all of the contents have loaded.

Show Bike IDs for Slots

Please show the bike ID for each slot with an available or reserved bike so it's easy do identify if a bike is new or old.

Consider showing current ride length / info

Currently, you can't see how long a bike has been rented for. Velocity shows this on their page.

Consider Websockets for updating stations

Polling every minute is very inefficient and slow.

Consider using one of the available Websocket data sources for transparent updates in near-realtime.

Don't crash when `fees` in undefined

Max managed to get a transaction which was manually closed by Velo in the database and which has no fees field in the /bookings endpoint.

Not sure what the best fix is? Assume everything nullable and provide a default for every field?

UI isn't updated correctly after cancelling a reservation

If you reserve a bike, then cancel the reservation, the popup reloads, but it still shows the reservation. Only if you click the button a second time, the reservation goes away (it's probably already canceled in the background, it's just that the popup displays old state).

More detailed tariff info when exotic tariff is booked

The tariff overview page lists only the publicly bookable tarifs: https://cms.velocity-aachen.de/backend/app/tariffs

However, when a user has another tariff activated like

https://cms.velocity-aachen.de/backend/app/tariffs/7
{"tariffId":7,"name":"Velo30Coupon","description":"Gutschein, Abo mit 30 Tagen Laufzeit und Freiminuten, nicht verlängerbar","term":30,"periodicRate":0,"priceList":[]}

https://cms.velocity-aachen.de/backend/app/tariffs/8
{"tariffId":8,"name":"FreeTariff","description":"Null-Tarif","term":0,"periodicRate":0,"priceList":[]}

https://cms.velocity-aachen.de/backend/app/tariffs/9
{"tariffId":9,"name":"TouristTariff","description":"Tagesticket","term":1,"periodicRate":0,"priceList":[]}

the find() function here fails, causing these to display "N/A" as the description, even though it were available when the corrent detail page was queried for the correct field.

This ticket is more of a future-proofing, as real-world users are unlikely to run into this problem unless there's a special tariff booked for their account.

Booking is broken

It seems there was a regression introduced in #48 which renders Velocity.ac unable to rent bikes.

Sadly, there's no more information available about this issue as it only happens when you're at a station actually trying to rent a bike which mostly happens on mobile devices with limited debugging tooling available.

Display date string in correct locale

Currently, all the date strings in the "bookings" tab are formatted in english, no matter the chosen language. This should be fixed to stay consistent with the language.

JWT refresh logic

Until recently, expired JWTs could still be used. Seems like sometimes, there will be a JWT_EXPIRED error now, so refresh logic should be implemented.

Consider placing a "Report problem with bike" button in each ride history element

This would make for convenient reporting of problems without having to remember bike-numbers. The bike-number should be pre-filled on the report problem screen.

Show if station can accept bikes

Right now there‘s no real way to know whether a station can accept more bikes (because slots can be free but inoperative). We should display this information in the popup.

Consider adding „Refresh booking“ button

15min can be a little short sometimes. By having the user actively refresh his booking manually we avoid „just extrending the booking time to infinity“.

Manually refreshing the booking is already possible via just canceling & rebooking. This feature would just automate that.

Margin between items in booking list is too big

Right now we lazy load the list of previous rides using react-virtualized. However, react-virtualized requires a fixed and pre-defined height for each item inside the list to be able to do the layouting correctly. This value is currently set incorrectly.

Host tiles ourselves

openstreetmap.se seems to have rather frequent downtimes. Let's try to host the (relevant) tiles ourselves. Could be integrated in the build-process, for example.

We might event want to generate the tiles ourselves using OSM data and some map generator, but not sure how this can be done.

Slot list focus shadow clipped in Safari

Due to missing margins around the shadow in the element tree.

Password reset screen

Users can already request PW reset E-Mails through the PWA, but because the links from the emails sent point to the official web app, we currently don't have this functionality built-in.

Consider marking rides past 30 mins in a different color

I'd like rides that took longer than 30 mins (given I am on the correct tariff, whose status could be cached until it's set to expire) be displayed in a slightly different color.

Together with #35 this would make an excellent way of requesting reimbursements in case of problems.

Enhance slot icon regarding "`null`" and "0%" charging states

This issue addresses the following two (not too rare) events:

• The current charging level cannot be retrieved (null):
  Due to const chargePercentage = Math.round((slot.stateOfCharge || 0) * 100);, this is currently treated like 0% charging level at the moment. In the past the icon dropped down:
  
  It may be enough to treat it like the next case or we could introduce a ❓emoji.
• The charging level is 0%:
  
  The bike is therefore possibly out of order: In my opinion a more alarming icon could be beneficial in this special case. An emoji like ❌ could be fitting.

Bike list cannot be scrolled on iOS

Disable scrolling when modal is open

Toasts do not hide when they've been suspended for some time.

If you rent a bike and then lock your screen, upon unlocking minutes later, the toasts will attempt to display for their designated time. Instead, they should have a time until they're allowed to show and instantly hide if that time passed.

Reloading causes slight shift in map

Reloading the page causes a slight shift when the map position is loaded from localStorage.

Research solutions that prevent this from happening.

When ride is ongoing, show stations with no available slots as red

Red icon when station is full, while ride is ongoing

Use rent popup to display current booking

Quoting from #5 (comment).

---

Basically, you would remove the "Active reservation" field from the "Bookings"-tab.

It contains the following information which needs to be integrated into the rent-popup:

• Station name
  This is basically covered by the rent-popup: When open, you either see a station name in the "Cancel booking"-button, or nothing, which means that the booking is for this particular station.
  However, this might be a bit unclear when you're actually not remembering which station you booked. The information should be integrated into the map (without opening a station) e.g. by changing the station icon to, let's say, a gear wheel containing an 'R' for "reservation".
• The reserved slot's number
  This is already fully integrated into the rent-popup: When selecting or booking a bike, the slot gets pre-selected (and you can choose another bike if you want to).
• The time until the booking is valid
  This could be integrated directly into the rent-popup as an information below the cancellation button (something like "auto-cancelling in ..."). With more effort, the "reserved logo" described above could carry this information in its color (changing from green to red when the time runs out).

Autofocus modals when opening

Better for accessibility.

Invalid pin response should delete saved pin

When the backend returns an invalid pin error, the locally cached pin should be cleared so it can be re-set.

Pin Reset functionality should probably also be implemented.

Let toasts expire when app is in background

When reopening the app after putting it in the background (or locking the phone), the user is greated with old toasts that have been paused while the app was in the background.

This reaches from successfull unlocking the bike to a full page of errors.

Don't request `/bookings/` when not logged in

This was the default behavior since before #48 and I left it in in #48 but on second thought it's redundant, spams Velos backend and completely unnecessary. Since finding out if the user is logged in is very cheap now, this should be an easy fix.

Rename 'book' to 'reserve'

This helps not confusing new users.