From e56a787ba8b67371edc2f68b065f1d481466a8d4 Mon Sep 17 00:00:00 2001 From: Luis Calvo Date: Thu, 18 Jun 2020 20:41:14 +0200 Subject: [PATCH 1/2] WIP: Connection lost warn --- pandora_console/include/javascript/pandora.js | 72 +++++++++++++++++++ .../include/javascript/pandora_ui.js | 40 +++++++++++ 2 files changed, 112 insertions(+) diff --git a/pandora_console/include/javascript/pandora.js b/pandora_console/include/javascript/pandora.js index 871853cfa0..ad950825c9 100644 --- a/pandora_console/include/javascript/pandora.js +++ b/pandora_console/include/javascript/pandora.js @@ -1865,3 +1865,75 @@ function ajaxRequest(id, settings) { } }); } + +var checkConnection = setInterval(handleConnection, 5000); + +window.addEventListener("online", handleConnection); +window.addEventListener("offline", handleConnection); + +function handleConnection() { + var connected; + var msg = "online"; + + if (navigator.onLine) { + isReachable(getServerUrl()) + .then(function(online) { + if (online) { + // handle online status + connected = true; + showConnectionMessage(connected, msg); + } else { + connected = false; + msg = "No connectivity with server"; + showConnectionMessage(connected, msg); + } + }) + .catch(function(err) { + connected = false; + msg = err; + showConnectionMessage(connected, msg); + }); + } else { + // handle offline status + connected = false; + msg = "Connection offline"; + showConnectionMessage(connected, msg); + } +} + +function isReachable(url) { + /** + * Note: fetch() still "succeeds" for 404s on subdirectories, + * which is ok when only testing for domain reachability. + * + * Example: + * https://google.com/noexist does not throw + * https://noexist.com/noexist does throw + */ + return fetch(url, { method: "HEAD", mode: "no-cors" }) + .then(function(resp) { + return resp && (resp.ok || resp.type === "opaque"); + }) + .catch(function(error) { + console.warn("[conn test failure]:", error); + }); +} + +function getServerUrl() { + return $("#php_to_js_value_absolute_homeurl").val() || window.location.origin; +} + +function showConnectionMessage(conn = true, msg = "") { + var data = {}; + if (conn) { + $("div#msg_connection") + .closest(".ui-dialog-content") + .dialog("close"); + $("div#msg_connection").remove(); + } else { + data.title = "Connection with server has been lost"; + data.text = "Connection status: " + msg; + + infoMessage(data, "msg_connection"); + } +} diff --git a/pandora_console/include/javascript/pandora_ui.js b/pandora_console/include/javascript/pandora_ui.js index 70ffd40f7f..c60c889d03 100644 --- a/pandora_console/include/javascript/pandora_ui.js +++ b/pandora_console/include/javascript/pandora_ui.js @@ -478,3 +478,43 @@ function generalShowMsg(data, idMsg) { ] }); } + +function infoMessage(data, idMsg) { + var title = data.title; + var text = data.text; + + var html = + '' + + text; + + if (idMsg == null) { + idMsg = uniqId(); + } + + if ($("#" + idMsg).length === 0) { + $("body").append('
' + text + "
"); + } + + $("#" + idMsg).empty(); + $("#" + idMsg).html(html); + $("#" + idMsg) + .dialog({ + width: 450, + opacity: 1, + modal: true, + position: { + my: "center", + at: "center", + of: window, + collision: "fit" + }, + title: data.title, + open: function(event, ui) { + $(".ui-widget-overlay").addClass("modal-opened"); + }, + close: function(event, ui) { + $(".ui-widget-overlay").removeClass("modal-opened"); + } + }) + .show(); +} From d346c763229c9a5d50a3cb022a8b13f7969d4fea Mon Sep 17 00:00:00 2001 From: Luis Calvo Date: Fri, 19 Jun 2020 23:03:37 +0200 Subject: [PATCH 2/2] Connection error dialog working --- pandora_console/include/functions_ui.php | 23 +++++++++ pandora_console/include/javascript/pandora.js | 49 +++++++++++++++--- .../include/javascript/pandora_ui.js | 40 +++++++++++---- pandora_console/include/styles/pandora.css | 50 +++++++++++++++++++ pandora_console/index.php | 6 +++ .../operation/gis_maps/public_console.php | 5 ++ .../visual_console/legacy_public_view.php | 12 +++++ .../operation/visual_console/public_view.php | 11 ++++ 8 files changed, 179 insertions(+), 17 deletions(-) diff --git a/pandora_console/include/functions_ui.php b/pandora_console/include/functions_ui.php index c67091f47f..ba1fdb492b 100755 --- a/pandora_console/include/functions_ui.php +++ b/pandora_console/include/functions_ui.php @@ -6010,3 +6010,26 @@ function ui_get_full_external_url(string $url) return $url; } + + +function ui_print_message_dialog($title, $text, $id='', $img='', $text_button='', $hidden=true) +{ + if ($hidden == true) { + $style = 'display:none'; + } + + echo '
'; + echo '
'; + echo '
'; + echo html_print_image($img, true, ['alt' => $title, 'border' => 0]); + echo '
'; + echo '
'; + echo '
'; + echo '

'.$title.'

'; + echo '

'.$text.'

'; + echo '
'; + echo '
'; + echo '
'; + echo '
'; + echo '
'; +} diff --git a/pandora_console/include/javascript/pandora.js b/pandora_console/include/javascript/pandora.js index ad950825c9..d6acb45ee7 100644 --- a/pandora_console/include/javascript/pandora.js +++ b/pandora_console/include/javascript/pandora.js @@ -1866,11 +1866,33 @@ function ajaxRequest(id, settings) { }); } -var checkConnection = setInterval(handleConnection, 5000); +/** + * ------------------------------------- + * Connection Check + * -------------------------------------- + */ -window.addEventListener("online", handleConnection); -window.addEventListener("offline", handleConnection); +checkConnection(1); +/** + * Performs connection tests every minutes and add connection listeners + * @param {integer} time in minutes + */ + +function checkConnection(minutes) { + var cicle = minutes * 60 * 1000; + var checkConnection = setInterval(handleConnection, cicle); + + // Connection listeters. + window.addEventListener("online", handleConnection); + window.addEventListener("offline", handleConnection); +} + +/** + * Handle connection status test. + * + * Test conectivity with server and shows modal message. + */ function handleConnection() { var connected; var msg = "online"; @@ -1901,6 +1923,13 @@ function handleConnection() { } } +/** + * Test server reachibilty and get response. + * + * @param {String} url + * + * Return {promise} + */ function isReachable(url) { /** * Note: fetch() still "succeeds" for 404s on subdirectories, @@ -1919,21 +1948,29 @@ function isReachable(url) { }); } +/** + * Gets server origin url + */ function getServerUrl() { return $("#php_to_js_value_absolute_homeurl").val() || window.location.origin; } +/** + * Shows or hide connection infoMessage. + * + * @param {bool} conn + * @param {string} msg + */ function showConnectionMessage(conn = true, msg = "") { var data = {}; if (conn) { - $("div#msg_connection") + $("div#message_dialog_connection") .closest(".ui-dialog-content") .dialog("close"); - $("div#msg_connection").remove(); } else { data.title = "Connection with server has been lost"; data.text = "Connection status: " + msg; - infoMessage(data, "msg_connection"); + infoMessage(data, "message_dialog_connection"); } } diff --git a/pandora_console/include/javascript/pandora_ui.js b/pandora_console/include/javascript/pandora_ui.js index c60c889d03..6667b21b1a 100644 --- a/pandora_console/include/javascript/pandora_ui.js +++ b/pandora_console/include/javascript/pandora_ui.js @@ -481,25 +481,24 @@ function generalShowMsg(data, idMsg) { function infoMessage(data, idMsg) { var title = data.title; - var text = data.text; - - var html = - '' + - text; + var err_messge = data.text; if (idMsg == null) { idMsg = uniqId(); } if ($("#" + idMsg).length === 0) { - $("body").append('
' + text + "
"); + $("body").append('
'); + $("#" + idMsg).empty(); } - $("#" + idMsg).empty(); - $("#" + idMsg).html(html); + $("#err_msg").empty(); + $("#err_msg").html("\n\n" + err_messge); + $("#" + idMsg) .dialog({ - width: 450, + height: 250, + width: 528, opacity: 1, modal: true, position: { @@ -509,11 +508,30 @@ function infoMessage(data, idMsg) { collision: "fit" }, title: data.title, + buttons: [ + { + class: + "ui-widget ui-state-default ui-corner-all ui-button-text-only sub ok submit-next", + text: "Retry", + click: function(e) { + handleConnection(); + } + }, + { + class: + "ui-widget ui-state-default ui-corner-all ui-button-text-only sub ok submit-cancel", + text: "Close", + click: function() { + $(this).dialog("close"); + } + } + ], + open: function(event, ui) { - $(".ui-widget-overlay").addClass("modal-opened"); + $(".ui-widget-overlay").addClass("error-modal-opened"); }, close: function(event, ui) { - $(".ui-widget-overlay").removeClass("modal-opened"); + $(".ui-widget-overlay").removeClass("error-modal-opened"); } }) .show(); diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css index eabdea9ecf..5f0160ed1a 100644 --- a/pandora_console/include/styles/pandora.css +++ b/pandora_console/include/styles/pandora.css @@ -6040,3 +6040,53 @@ form#modal_form_feedback ul.wizard li > textarea { #controls_table > tbody > tr > td input { margin-left: 3px; } + +/* + * --------------------------------------------------------------------- + * - ERROR CONNECTION + * --------------------------------------------------------------------- + */ + +/*background dim */ + +.ui-widget-overlay.error-modal-opened { + background: rgb(0, 0, 0); + opacity: 0.5; + filter: Alpha(Opacity=50); +} + +/* --- Login page - modal windows --- */ +div.content_dialog { + width: 98%; + margin-top: 20px; +} + +div.icon_message_dialog { + float: left; + width: 25%; + text-align: center; +} + +div.icon_message_dialog img { + width: 85px; +} + +div.content_message_dialog { + width: 75%; + float: right; +} + +div.text_message_dialog { + width: 100%; + margin-top: 10px; +} + +div.text_message_dialog h1 { + margin: 0px; +} + +div.text_message_dialog p { + margin: 0px; + font-size: 10.3pt; + line-height: 14pt; +} diff --git a/pandora_console/index.php b/pandora_console/index.php index e272fb14a7..84cb0836ff 100755 --- a/pandora_console/index.php +++ b/pandora_console/index.php @@ -1239,6 +1239,12 @@ echo ''; echo '
'; echo '
'; + +// Connection lost alert. +$conn_title = __('Connection with server has been lost'); +$conn_text = __('Connection to the server has been lost. Please check your internet connection or contact with administrator.'); +ui_print_message_dialog($conn_title, $conn_text, 'connection', '/images/error_1.png'); + if ($config['pure'] == 0) { echo ''; // Container div. diff --git a/pandora_console/operation/gis_maps/public_console.php b/pandora_console/operation/gis_maps/public_console.php index cfbcff3e99..ba5b99633c 100755 --- a/pandora_console/operation/gis_maps/public_console.php +++ b/pandora_console/operation/gis_maps/public_console.php @@ -271,6 +271,11 @@ if ($layers != false) { gis_activate_select_control(); gis_activate_ajax_refresh($layers, $timestampLastOperation, 1, $idMap); + + // Connection lost alert. + $conn_title = __('Connection with server has been lost'); + $conn_text = __('Connection to the server has been lost. Please check your internet connection or contact with administrator.'); + ui_print_message_dialog($conn_title, $conn_text, 'connection', '/images/error_1.png'); } // Resize GIS map on fullscreen diff --git a/pandora_console/operation/visual_console/legacy_public_view.php b/pandora_console/operation/visual_console/legacy_public_view.php index 4a316eee60..cf85425229 100644 --- a/pandora_console/operation/visual_console/legacy_public_view.php +++ b/pandora_console/operation/visual_console/legacy_public_view.php @@ -43,6 +43,13 @@ enterprise_include('index.php'); $url_css = ui_get_full_url('include/styles/visual_maps.css', false, false, false); echo ''; +$url_css_modal = ui_get_full_url('include/styles/register.css', false, false, false); +echo ''; +// Connection lost alert. +$conn_title = __('Connection with server has been lost'); +$conn_text = __('Connection to the server has been lost. Please check your internet connection or contact with administrator.'); +ui_print_message_dialog($conn_title, $conn_text, 'connection', '/images/error_1.png'); + require_once 'include/functions_visual_map.php'; $hash = get_parameter('hash'); @@ -148,6 +155,11 @@ echo ''; echo ''; +// Connection lost alert. +$conn_title = __('Connection with server has been lost'); +$conn_text = __('Connection to the server has been lost. Please check your internet connection or contact with administrator.'); +ui_print_message_alert($conn_title, $conn_text, 'connection', '/images/error_1.png'); + ui_require_jquery_file('countdown', 'include/javascript/', true); ui_require_javascript_file('wz_jsgraphics', 'include/javascript/', true); ui_require_javascript_file('pandora_visual_console', 'include/javascript/', true); diff --git a/pandora_console/operation/visual_console/public_view.php b/pandora_console/operation/visual_console/public_view.php index 7e899c3718..1127614eed 100644 --- a/pandora_console/operation/visual_console/public_view.php +++ b/pandora_console/operation/visual_console/public_view.php @@ -29,6 +29,12 @@ if (file_exists(ENTERPRISE_DIR.'/include/functions_login.php')) { require_once $config['homedir'].'/vendor/autoload.php'; ui_require_css_file('visual_maps'); +ui_require_css_file('register'); + +// Connection lost alert. +$conn_title = __('Connection with server has been lost'); +$conn_text = __('Connection to the server has been lost. Please check your internet connection or contact with administrator.'); +ui_print_message_dialog($conn_title, $conn_text, 'connection', '/images/error_1.png'); echo ''."\n"; echo ''."\n"; @@ -132,6 +138,11 @@ echo ''; echo ''; +// Connection lost alert. +$conn_title = __('Connection with server has been lost'); +$conn_text = __('Connection to the server has been lost. Please check your internet connection or contact with administrator.'); +ui_print_message_dialog($conn_title, $conn_text, 'connection', '/images/error_1.png'); + // Check groups can access user. $aclUserGroups = []; if (!users_can_manage_group_all('AR')) {