diff --git a/app/callbacks/display_callbacks.py b/app/callbacks/display_callbacks.py index c12ddda..c229af2 100644 --- a/app/callbacks/display_callbacks.py +++ b/app/callbacks/display_callbacks.py @@ -375,10 +375,10 @@ def update_download_link(slider_value, alert_data): 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-camera-value", "children"), + Output("alert-location-value", "children"), + Output("alert-azimuth-value", "children"), + Output("alert-date-value", "children"), Output("alert-information", "style"), Output("slider-container", "style"), ], @@ -435,10 +435,10 @@ def update_map_and_alert_info(alert_data): date_val = row_with_localization["created_at"] cam_name = f"{row_with_localization['device_login'][:-2].replace('_', ' ')} - {int(row_with_localization['device_azimuth'])}°" - camera_info = f"Camera: {cam_name}" - location_info = f"Station localisation: {row_with_localization['lat']:.4f}, {row_with_localization['lon']:.4f}" - angle_info = f"Azimuth de detection: {detection_azimuth}°" - date_info = f"Date: {date_val}" + camera_info = f"{cam_name}" + location_info = f"{row_with_localization['lat']:.4f}, {row_with_localization['lon']:.4f}" + angle_info = f"{detection_azimuth}°" + date_info = f"{date_val}" return ( polygon, diff --git a/app/index.py b/app/index.py index eb0039d..d39913a 100644 --- a/app/index.py +++ b/app/index.py @@ -30,6 +30,9 @@ State("user_credentials", "data"), ) def display_page(pathname, user_headers, user_credentials): + + print("PATHNAME", pathname) + logger.debug( "display_page called with pathname: %s, user_headers: %s, user_credentials: %s", pathname, @@ -40,8 +43,14 @@ def display_page(pathname, user_headers, user_credentials): logger.info("No user headers found, showing login layout.") return login_layout() if pathname == "/" or pathname is None: - logger.info("Showing homepage layout.") - return homepage_layout(user_headers, user_credentials) + logger.info("Showing homepage layout (default language: French).") + return homepage_layout(user_headers, user_credentials, lang="french") + if pathname == "/fr": + logger.info("Showing homepage layout (language: French).") + return homepage_layout(user_headers, user_credentials, lang="fr") + if pathname == "/es": + logger.info("Showing homepage layout (language: Spanish).") + return homepage_layout(user_headers, user_credentials, lang="es") else: logger.warning("Unable to find page for pathname: %s", pathname) return html.Div([html.P("Unable to find this page.", className="alert alert-warning")]) diff --git a/app/layouts/main_layout.py b/app/layouts/main_layout.py index d583cb1..553fe31 100644 --- a/app/layouts/main_layout.py +++ b/app/layouts/main_layout.py @@ -25,7 +25,11 @@ user_headers = None -def get_main_layout(): +def get_main_layout(lang="french", **other_unknown_query_strings): + + print("GET MAIN LAYOUT") + print(lang) + return html.Div( [ dcc.Location(id="url", refresh=False), diff --git a/app/pages/homepage.py b/app/pages/homepage.py index 2286409..cffc686 100644 --- a/app/pages/homepage.py +++ b/app/pages/homepage.py @@ -14,7 +14,37 @@ app.css.append_css({"external_url": "/assets/style.css"}) -def homepage_layout(user_headers, user_credentials): +def homepage_layout(user_headers, user_credentials, lang="fr"): + + translate = { + "fr": { + "animate_on_off": "Activer / Désactiver l'animation", + "show_hide_prediction": "Afficher / Cacher la prédiction", + "download_image": "Télécharger l'image", + "acknowledge_alert": "Acquitter l'alerte", + "enlarge_map": "Agrandir la carte", + "alert_information": "Information Alerte", + "camera": "Caméra: ", + "location": "Localisation: ", + "detection_azimuth": "Azimuth de detection: ", + "date": "Date: ", + "map": "Carte", + }, + "es": { + "animate_on_off": "Activar / Desactivar la animación", + "show_hide_prediction": "Mostrar / Ocultar la predicción", + "download_image": "Descargar la imagen", + "acknowledge_alert": "Descartar la alerta", + "enlarge_map": "Ampliar el mapa", + "alert_information": "Información sobre alerta", + "camera": "Cámara: ", + "location": "Ubicación: ", + "detection_azimuth": "Azimut de detección: ", + "date": "Fecha: ", + "map": "Mapa", + }, + } + return dbc.Container( [ dbc.Row( @@ -77,7 +107,7 @@ def homepage_layout(user_headers, user_credentials): [ dbc.Col( dbc.Button( - "Activer / Désactiver l'animation", + translate[lang]["animate_on_off"], id="auto-move-button", n_clicks=1, className="btn-uniform common-style", @@ -87,7 +117,7 @@ def homepage_layout(user_headers, user_credentials): ), dbc.Col( dbc.Button( - "Afficher / Cacher la prédiction", + translate[lang]["show_hide_prediction"], id="hide-bbox-button", n_clicks=0, className="btn-uniform common-style", @@ -98,7 +128,7 @@ def homepage_layout(user_headers, user_credentials): dbc.Col( html.A( dbc.Button( - "Télécharger l'image", + translate[lang]["download_image"], className="btn-uniform common-style", style={"backgroundColor": "#2C796E"}, id="dl-image-button", @@ -113,7 +143,7 @@ def homepage_layout(user_headers, user_credentials): ), dbc.Col( dbc.Button( - "Acquitter l'alerte", + translate[lang]["acknowledge_alert"], id="acknowledge-button", n_clicks=1, className="btn-uniform common-style", @@ -132,7 +162,7 @@ def homepage_layout(user_headers, user_credentials): [ dbc.Row( dbc.Button( - "Agrandir la carte", + translate[lang]["enlarge_map"], className="common-style", style={"backgroundColor": "#FEBA6A"}, id="map-button", @@ -153,15 +183,47 @@ def homepage_layout(user_headers, user_credentials): 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"}, + children=[ + html.H4(translate[lang]["alert_information"]), + html.Div( + id="alert-camera", + style={"marginBottom": "10px"}, + children=[ + html.Span(id="alert-camera-header", children=translate[lang]["camera"]), + html.Span(id="alert-camera-value", children=[]), + ], + ), + html.Div( + id="alert-location", + style={"marginBottom": "10px"}, + children=[ + html.Span( + id="alert-location-header", children=translate[lang]["location"] + ), + html.Span(id="alert-location-value", children=[]), + ], + ), + html.Div( + id="alert-azimuth", + style={"marginBottom": "10px"}, + children=[ + html.Span( + id="alert-azimuth-header", + children=translate[lang]["detection_azimuth"], + ), + html.Span(id="alert-azimuth-value", children=[]), + ], + ), + html.Div( + id="alert-date", + children=[ + html.Span(id="alert-date-header", children=translate[lang]["date"]), + html.Span(id="alert-date-value", children=[]), + ], + ), + ], ), className="mt-4", id="alert-panel", @@ -175,7 +237,7 @@ def homepage_layout(user_headers, user_credentials): dcc.Interval(id="auto-slider-update", interval=500, n_intervals=0), dbc.Modal( [ - dbc.ModalHeader("Carte"), + dbc.ModalHeader(translate[lang]["map"]), dbc.ModalBody( build_alerts_map(user_headers, user_credentials, id_suffix="-md"), ),