Add route selection dialog

[roata]

At the moment we indiscriminately subscribe to all telemetry data and display all vehicles at once, but that's not the way things ought to be.

There has to be a "Choose route" option, where the user chooses the route they are interested in, and then - the route is shown on the map, and its trolleybuses are shown too.

This feature has 2 components:

• visualizing the choice UI (the focus of this issue)
• managing subscriptions

This is what the route selection dialog might look like:

This is a view of the map, once the route was selected:

The flow goes like this:

1. the page is open for the first time, the dialog above is shown (each square is a route number, taken from name_concise)
2. the user clicks on a route
3. the dialog is closed, using a "genie effect" (the dialog goes inside the red icon of a bus at the bottom, to hint users that they can bring it back by pressing that button)
4. the route title (name_long), the roads that make the route, its stations and trolleybuses are shown
5. the user can bring the route selection dialog back by pressing the red button at the bottom

Note:

• name_concise and name_long are taken from https://github.com/roataway/web-ui/blob/route-data/src/data/routes.csv (if another format is needed for it, let's discuss it)
• routes that do not have id_upstream must not be shown

[iamandrewluca]

@roata can this be closed? Or there is anything that also be implemented?

[roata]

I think there are 2 more things related to it:

1. The map itself should show a label on top that displays the route number and itinerary, so users know what they're looking at (2nd image above). However, if multiple routes are chosen - then what do we do? show 2 labels? show each route with a separate colour... ? This needs to be discussed, there is a discussion here: https://roataway.zulipchat.com/#narrow/stream/198041-Feedback-de.20la.20utilizatori/topic/multi-route.20sau.20nu I don't know what the best way to handle it is, probably it has to be a separate UX issue where we figure out what we want it to look like, and then implement it.

2. It would help me very much if you left some comments in the code, indicating the place where I should implement the logic for subscribing/unsubscribing with different routing keys, depending on what routes are chosen. (or if you implement that yourself, then you wouldn't have to guide me :-)

3. I noticed that the issue depicted here: https://giphy.com/gifs/Q9GEmayoz5zV3RXAB4 is visible again. Could it be so that your last commit overwrote some of the logic written by @pedramp ?

[iamandrewluca]

@roata the issue with animating red triangles?

[roata]

Yes, I took it out into a separate issue: #49