Alert screen for CODIS operational room

[chloeskt]

Motivation

Hi all ! This PR aims at transforming our platform into a multiple page app:

• the classic homepage that we already have
• the alert page: it is meant to be displayed on a big screen in CODIS's room. There is a sober screen when there are no alert and it switches to an alert mode when there are alerts.

As discussed, only the lastest event (as latest fire) is displayed on the screen. When multiple alerts are given by the RPI for the same event (same fire), we display a GIF of all images incoming (doubt relief for the firefighters).

Features

Multiple features have been added:

• no alert screen
• alert screen
• button on the navbar (top right corner) to access the alert page ("ecran de monitoring")
• css styles (to make an element blink)
• changes in rough layout

Changes in rough layout:

• Store div_live_alerts_data: in order to store the table of live alerts we get once the call to the API is done
• Store last_displayed_event_id: to keep track of the last event (fire) which has been displayed on the alert screen (useful for the GIF part)
• Store images_url_current_alert: this is a Dict[str, List[str]]. Keys: str of the event id. Values: List of all the urls which belong to this event id (again for GIF part)

This might change with the use of a webhook, but we will still need to store the data somewhere to make it accessible to multiple callbacks.

Limits

As we know, the webhook will change many things, therefore some developments made here might become outdated. Also we will need to think about deleting some info at some point, especially for the Store images_url_current_alert, otherwise the dict will keep on growing. Once a event has been "acquitté", we can remove it from the dict. This will be easy but we need to wait for the webhook to get a better picture of the workflow needed.

Screens

When there are no alerts:

When there is an alert:

[Akilditu]

Thanks for the PR, will review it asap 👍

[Akilditu]

Thanks a lot for this PR, overall great maybe adding 2 screenshots of how the 2 big screens renders would be nice :)

[chloeskt]

Thanks a lot for this PR, overall great maybe adding 2 screenshots of how the 2 big screens renders would be nice :)

Thank you for your review @Akilditu ! I added two screenshots in the description of the PR 👌

[Akilditu]

Thanks for changes and answers !

[pechouc]

Hello!

Thanks a lot for this PR, it clarifies a lot of things and the alert screen seems to work perfectly 😊

I have added a few very dumb comments regarding naming / styling, I hope they are not too "relous". However, there is maybe a more substantial discussion regarding the three different callbacks being triggered by the same input (Input("interval-component-homepage", "n_intervals")). Let me know what you think about this!

[chloeskt]

Thank you @pechouc for your review ! Mostly I agree with you (I even think that to improve the quality of the code, we should do some refactoring. But it is clearly not the priority). Regarding the merge of update_alert_data and update_dict_of_images I'm not sure. Also I think that many things will need to change once we get the webhook to work, we will probably need to discuss the workflow again !

[chloeskt]

@Akilditu @pechouc I had to remove the following lines in styles.css due to issues reported by Codacy through CSSLint (which seems to be an unmaintained library with multiple issues ... StyleLint seems to be way better).

@-ms-keyframes blink { 
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

Many users had the same issue which has been reported to the creators of CSSLint, see this issue on Github.

Let's hope that our users won't have IE < 10: the blink features won't work for them !

[pechouc]

Thanks a lot for the changes, I agree with you: let's keep the callbacks as in the revised version! As you rightly mentioned, this logic will probably change significantly with the web-hook.