Add a "waiting for data" progress indicator

[roata]

It can take up to 15s for telemetry to start arriving, this time the users might get the impression that something is wrong. We need an indeterminate progress indicator, a spinning wheel, for example, that says "Waiting for data".

The ideal solution looks like this:

• show a definite progress indicator that is tuned to 15s
• if the data arrive before 15s are elapsed, move the last part of the progress bar very fast until it reaches the end, and then disappears
• if the data still didn't arrive within 15s, transform it into an indefinite progress indicator and keep it that way, until telemetry arrives. (this can happen when you open the map late at night, when there is no transport on the streets)

[roata]

A new REST server was added to make this a bit user-friendlier: https://github.com/roataway/rest-api. It is currently deployed on Heroku.

Summary:

• send a GET to http://roataway-rest.herokuapp.com/route/1/trackers (replace 1 with your route ID)
• retrieve a JSON of last known locations for trackers assigned to this route

It will look like this:

{
   "008":{
      "longitude":28.845253,
      "latitude":47.012208,
      "direction":221,
      "board":"3898",
      "speed":10,
      "timestamp":"2020-05-28T12:50:56Z"
   },
   "010":{
      "longitude":28.906452,
      "latitude":46.954408,
      "direction":133,
      "board":"3917",
      "speed":43,
      "timestamp":"2020-05-28T12:50:55Z"
   },
   "005":{
      "longitude":28.829662,
      "latitude":47.022516,
      "direction":0,
      "board":"3901",
      "speed":0,
      "timestamp":"2020-05-28T12:50:41Z"
   }
}

Use this information to provide an initial rendering of the data; the real-time telemetry will start arriving soon - use that from now on.

[andylim0221]

Is this being solved? If not, I'd like to take up this issue. Thanks.

[roata]

Thanks for your offer to help, we'll gladly assign this issue to you. I will refine the specifications a bit, to consolidate every requirement in a single message (it will be posted later today).

[andylim0221]

sure. Thank you

[roata]

@andylim0221, here is the detailed description of the desired behaviour:

• ws_back - websocket backend, the one we connect to using WebSTOMP
• rest_back - the REST backend (demo running at http://roataway-rest.herokuapp.com, it will respond slowly when you send the first request, but once the server spins up, it is more responsive)
• browser - our code running in the users' browsers

Concerning the appearance of these elements:

• at step#2, the "Connecting" label must be something non-intrusive, shown on the bottom of the screen, not in away that attracts maximum attention.
• the same applies to "Waiting for data..." at step#8.

Please let me know if this is clear. If there are any doubts - you can point out the step number at which things are not clear and we can discuss it. Also note that I didn't draw what it should look like in the UI - feel free to suggest your own widgets you consider appropriate for this scenario.

Once we have the logic in order, if the visual aspects must be improved - we can do that in a separate issue.

Source code of the diagram, in case you want to make changes, use this code on plantuml.com

@startuml
autonumber

== initialization ==
user->browser: open page
browser->user: display "Connecting...[gray]" \n(non-modal)
browser->ws_back: connect
alt Connection OK
    browser->browser: Remove the "Connecting..." widget
    note over browser: turn it into green, then fade out
else Connection ERR
    note over browser: turn it into yellow
    browser->browser: "Connecting... [yellow]" widget
    browser->browser: keep retrying in the background
    end

== route selection ==
user->browser: click to select one or several routes
browser->browser: Display "Waiting for data" (non_modal)
browser->ws_back: subscribe to route topics
note over ws_back: it takes up to 20s for the data to arrive
browser->rest_back: retrieve data for routes
browser<-rest_back: JSON with last_known_location
browser->browser: render vehicles last_known_location
browser->browser: hide "Waiting for data"

== route monitoring / regular use==
note over ws_back: meanwhile... fresh data are ready 
loop forever
    browser<-ws_back: JSON with real-time data
    browser->browser: update markers on map
end
@enduml

[roata]

@andylim0221 is everything clear and do you have everything you need in order to proceed?

[iamandrewluca]

I think issue is too complicated 🙂 needs more investigation