new alert panel (#160)

* new alert panel

* remove print

* format

* fix hide/display

app/assets/css/style.css

@@ -1,20 +1,22 @@
+/* style.css */
+
 /* Style the scrollbar itself (width, color) */
 ::-webkit-scrollbar {
-    width: 10px;  /* Scrollbar width */
-  }
-  
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    background: #FEBA6A;  /* Scrollbar handle color */
-    border-radius: 5px;
-  }
-  
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    background: #555;
-  }
-  
-/* custom.css */
+  width: 10px;  /* Scrollbar width */
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #FEBA6A;  /* Scrollbar handle color */
+  border-radius: 5px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* Custom button style */
 .btn-uniform {
   width: 100%;
   border: none;
@@ -25,9 +27,22 @@
   justify-content: center;
 }
 
-
-/* custom.css */
+/* Custom link style */
 a.no-underline {
   text-decoration: none;
 }
 
+/* Common style for containers and panels */
+.common-style {
+  border: 2px solid #044448;
+  border-radius: 10px;  
+  background-color: rgba(4, 68, 72, 0.1);
+  margin-bottom: 20px;
+}
+
+/* Specific style for highlighted text */
+.highlight-text {
+  font-size: 24px;
+  font-weight: bold;
+  text-align: center;
+}

app/callbacks/display_callbacks.py

@@ -257,7 +257,11 @@ def update_image_and_bbox(slider_value, alert_data, media_url, alert_list):
         raise PreventUpdate
 
     if len(alert_list) == 0:
-        img_html = html.Img(src="./assets/images/no-alert-default.png", style={"width": "100%", "height": "auto"})
+        img_html = html.Img(
+            src="./assets/images/no-alert-default.png",
+            className="common-style",
+            style={"width": "100%", "height": "auto"},
+        )
         return img_html, bbox_divs, 0
 
     # Filter images with non-empty URLs
@@ -271,7 +275,11 @@ def update_image_and_bbox(slider_value, alert_data, media_url, alert_list):
             boxes.append(alert["processed_loc"])
 
     if not images:
-        img_html = html.Img(src="./assets/images/no-alert-default.png", style={"width": "100%", "height": "auto"})
+        img_html = html.Img(
+            src="./assets/images/no-alert-default.png",
+            className="common-style",
+            style={"width": "100%", "height": "auto"},
+        )
         return img_html, bbox_divs, 0
 
     # Ensure slider_value is within the range of available images
@@ -301,7 +309,7 @@ def update_image_and_bbox(slider_value, alert_data, media_url, alert_list):
     bbox_div = html.Div(style=bbox_style)
     bbox_divs.append(bbox_div)
 
-    img_html = html.Img(src=img_src, style={"width": "100%", "height": "auto"})
+    img_html = html.Img(src=img_src, className="common-style", style={"width": "100%", "height": "auto"})
     return img_html, bbox_divs, len(images) - 1
 
 
@@ -429,27 +437,44 @@ def update_download_link(slider_value, alert_data, media_url):
         Output("map", "center"),
         Output("vision_polygons-md", "children"),
         Output("map-md", "center"),
+        Output("alert-camera", "children"),
+        Output("alert-location", "children"),
+        Output("alert-azimuth", "children"),
+        Output("alert-date", "children"),
+        Output("alert-information", "style"),
+        Output("slider-container", "style"),
     ],
     Input("alert_on_display", "data"),
+    [State("store_api_events_data", "data"), State("event_id_on_display", "data")],
     prevent_initial_call=True,
 )
-def update_map(alert_data):
+def update_map_and_alert_info(alert_data, local_events, event_id_on_display):
     """
-    Updates the map's vision polygons and center based on the current alert data.
+    Updates the map's vision polygons, center, and alert information based on the current alert data.
 
     Parameters:
     - alert_data (json): JSON formatted data for the selected event.
 
     Returns:
     - list: List of vision polygon elements to be displayed on the map.
     - list: New center coordinates for the map.
+    - list: List of vision polygon elements to be displayed on the modal map.
+    - list: New center coordinates for the modal map.
+    - str: Camera information for the alert.
+    - str: Location information for the alert.
+    - str: Detection angle for the alert.
+    - str: Date of the alert.
     """
     alert_data, data_loaded = read_stored_DataFrame(alert_data)
 
     if not data_loaded:
         raise PreventUpdate
 
     if not alert_data.empty:
+        local_events, event_data_loaded = read_stored_DataFrame(local_events)
+        if not event_data_loaded:
+            raise PreventUpdate
+
         # Convert the 'localization' column to a list (empty lists if the original value was '[]').
         alert_data["localization"] = alert_data["localization"].apply(
             lambda x: ast.literal_eval(x) if isinstance(x, str) and x.strip() != "[]" else []
@@ -463,7 +488,7 @@ def update_map(alert_data):
             else alert_data.iloc[-1]
         )
 
-        polygon = build_vision_polygon(
+        polygon, detection_azimuth = build_vision_polygon(
             site_lat=row_with_localization["lat"],
             site_lon=row_with_localization["lon"],
             azimuth=row_with_localization["azimuth"],
@@ -472,14 +497,39 @@ def update_map(alert_data):
             localization=row_with_localization["processed_loc"],
         )
 
+        cam_name = local_events[local_events["id"] == event_id_on_display]["device_name"].values[0]
+
+        camera_info = f"Camera: {cam_name}"
+        location_info = f"Localisation: {row_with_localization['lat']:.4f}, {row_with_localization['lon']:.4f}"
+        angle_info = f"Azimuth de detection: {detection_azimuth}°"
+        date_val = row_with_localization["created_at"].strftime("%Y-%m-%d %H:%M:%S")
+        date_info = f"Date: {date_val}"
+
         return (
             polygon,
             [row_with_localization["lat"], row_with_localization["lon"]],
             polygon,
             [row_with_localization["lat"], row_with_localization["lon"]],
+            camera_info,
+            location_info,
+            angle_info,
+            date_info,
+            {"display": "block"},
+            {"display": "block"},
         )
 
-    return ([], dash.no_update, [], dash.no_update)
+    return (
+        [],
+        dash.no_update,
+        [],
+        dash.no_update,
+        dash.no_update,
+        dash.no_update,
+        dash.no_update,
+        dash.no_update,
+        {"display": "none"},
+        {"display": "none"},
+    )
 
 
 @app.callback(

app/components/alerts.py

@@ -27,7 +27,6 @@ def create_event_list():
 
     return html.Div(
         [
-            html.H1("Alertes en cours", style={"textAlign": "center", "fontSize": "30px"}),
             html.Div(id="alert-list-container", style=event_list_style, children=[]),  # Empty container
         ]
     )

app/pages/homepage.py

@@ -3,50 +3,55 @@
 # This program is licensed under the Apache License 2.0.
 # See LICENSE or go to <https://www.apache.org/licenses/LICENSE-2.0> for full license details.
 
+
 import dash_bootstrap_components as dbc
-from dash import dcc, html
+from dash import Dash, dcc, html
 
 from components.alerts import create_event_list
 from utils.display import build_alerts_map
 
+app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
+app.css.append_css({"external_url": "/assets/style.css"})
+
 
 def homepage_layout(user_headers, user_credentials):
     return dbc.Container(
         [
             dbc.Row(
                 [
-                    # Column for the alert list
-                    dbc.Col(create_event_list(), width=2, className="mb-4"),
-                    # Column for the image
+                    dbc.Col([create_event_list()], width=2, className="mb-4"),
                     dbc.Col(
                         [
                             html.Div(
                                 id="image-container-with-bbox",
-                                style={"position": "relative"},  # Ensure this container is relatively positioned
+                                style={"position": "relative"},
                                 children=[
                                     html.Div(
                                         id="image-container",
                                         children=[
                                             html.Img(
                                                 src="./assets/images/no-alert-default.png",
+                                                className="common-style",
                                                 style={"max-width": "100%", "height": "auto"},
                                             )
-                                        ],  # Adjust the style as needed
-                                    ),  # This will contain the image
-                                    html.Div(
-                                        id="bbox-container", style={"display": "block"}
-                                    ),  # This will contain the bounding box
+                                        ],
+                                    ),
+                                    html.Div(id="bbox-container", style={"display": "block"}),
                                 ],
                             ),
-                            dcc.Slider(id="image-slider", min=0, max=0, step=1, value=0),
+                            html.Div(
+                                dcc.Slider(id="image-slider", min=0, max=10, step=1, value=0),
+                                id="slider-container",
+                                style={"display": "none"},
+                            ),
                             dbc.Row(
                                 [
                                     dbc.Col(
                                         dbc.Button(
                                             "Activer / Désactiver l'animation",
                                             id="auto-move-button",
                                             n_clicks=1,
-                                            className="btn-uniform",
+                                            className="btn-uniform common-style",
                                             style={"backgroundColor": "#FD5252"},
                                         ),
                                         width=3,
@@ -56,7 +61,7 @@ def homepage_layout(user_headers, user_credentials):
                                             "Afficher / Cacher la prédiction",
                                             id="hide-bbox-button",
                                             n_clicks=0,
-                                            className="btn-uniform",
+                                            className="btn-uniform common-style",
                                             style={"backgroundColor": "#FEBA6A"},
                                         ),
                                         width=3,
@@ -65,7 +70,7 @@ def homepage_layout(user_headers, user_credentials):
                                         html.A(
                                             dbc.Button(
                                                 "Télécharger l'image",
-                                                className="btn-uniform",
+                                                className="btn-uniform common-style",
                                                 style={"backgroundColor": "#2C796E"},
                                                 id="dl-image-button",
                                             ),
@@ -82,7 +87,7 @@ def homepage_layout(user_headers, user_credentials):
                                             "Acquitter l'alerte",
                                             id="acknowledge-button",
                                             n_clicks=1,
-                                            className="btn-uniform",
+                                            className="btn-uniform common-style",
                                             style={"backgroundColor": "#054546"},
                                         ),
                                         width=3,
@@ -94,38 +99,52 @@ def homepage_layout(user_headers, user_credentials):
                         ],
                         width=8,
                     ),
-                    # Column for buttons with added margins
                     dbc.Col(
                         [
-                            # Modal issue let's add this later
                             dbc.Row(
                                 dbc.Button(
                                     "Agrandir la carte",
-                                    className="btn-uniform",
+                                    className="btn-uniform common-style",
                                     style={"backgroundColor": "#FEBA6A"},
                                     id="map-button",
                                 ),
                                 className="mb-2",
                             ),
                             dbc.Row(
-                                # This row contains the map
                                 dbc.Col(
                                     build_alerts_map(user_headers, user_credentials),
+                                    className="common-style",
                                     style={
                                         "position": "relative",
                                         "width": "100%",
-                                        "paddingTop": "100%",  # This creates the square aspect ratio
+                                        "paddingTop": "100%",
                                         "margin": "auto",
                                     },
                                 ),
                             ),
+                            dbc.Row(
+                                html.Div(
+                                    id="alert-information",
+                                    children=[
+                                        html.H4("Alerte Information"),
+                                        html.P(id="alert-camera", children="Camera: "),
+                                        html.P(id="alert-location", children="Localisation: "),
+                                        html.P(id="alert-azimuth", children="Azimuth de detection: "),
+                                        html.P(id="alert-date", children="Date: "),
+                                    ],
+                                    className="common-style",
+                                    style={"fontSize": "15px", "fontWeight": "bold", "display": "none"},
+                                ),
+                                className="mt-4",
+                                id="alert-panel",
+                            ),
                         ],
                         width=2,
                         className="mb-4",
                     ),
                 ]
             ),
-            dcc.Interval(id="auto-slider-update", interval=500, n_intervals=0),  # in milliseconds
+            dcc.Interval(id="auto-slider-update", interval=500, n_intervals=0),
             dbc.Modal(
                 [
                     dbc.ModalHeader("Carte"),

app/utils/display.py

@@ -137,7 +137,7 @@ def build_vision_polygon(site_lat, site_lon, azimuth, opening_angle, dist_km, lo
         positions=points,
     )
 
-    return polygon
+    return polygon, azimuth
 
 
 def build_alerts_map(user_headers, user_credentials, id_suffix=""):