Connection error dialog working

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 '<div id="message_dialog_'.$id.'" title="'.$title.'" style="'.$style.'">';
+        echo '<div class="content_dialog">';
+            echo '<div class="icon_message_dialog">';
+                echo html_print_image($img, true, ['alt' => $title, 'border' => 0]);
+            echo '</div>';
+            echo '<div class="content_message_dialog">';
+                echo '<div class="text_message_dialog">';
+                    echo '<h1>'.$title.'</h1>';
+                    echo '<p>'.$text.'</p>';
+                    echo '<div id="err_msg"></div>';
+                echo '</div>';
+            echo '</div>';
+        echo '</div>';
+    echo '</div>';
+}

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);
+checkConnection(1);
-window.addEventListener("offline", handleConnection);
 
+/**
+ * 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");
   }
 }

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 err_messge = data.text;
-
-  var html =
-    '<img src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAAGz7rX1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpENkQzMjNBODFEMjA2ODExOEE2REZFNzI5RUIxRDMxMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyOEM0QjU3OTg5ODExMUUyQUYwQ0Q5QzVBRjY0RTM1RiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyOEM0QjU3ODg5ODExMUUyQUYwQ0Q5QzVBRjY0RTM1RiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgTWFjaW50b3NoIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MDExNzQwNzIwNjgxMTg4QzZDN0UxN0ZDRTUzMDYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RDZEMzIzQTgxRDIwNjgxMThBNkRGRTcyOUVCMUQzMTAiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Uw1oUAAAB30lEQVR42mL8//8/AzJgAhH/9vkEMDIyIgSAYP3fvd5gpYzoWgACCEOAAaYUxDj/HyqNogwggBiQOSBVKOIwSZA5IAAzDySOaRsSAAgg3JJIRgogizEhqXkPdzfM30CBfkZBE8wQAoICdN/itJwJl3MBAgivX3ABFrhuaAyhhDgDgyCz89YPGMEMYqCF+f9/99fCgxeIA5A1oQQ1yCbksGGU9GH4/3wLjLsAaGMiXC2MAUxEhDz3gMlpiyLZAQEQQCRrYiLZCmw2AAPiPTZ16KkJptgASAlg04TLSbC8ANKkgFcDUAE4FQKDkQGaTO8TsqEf7ub3Z2CGNGDVAJRYD1f8YB2ymnpcNsDTEKNCEHpA7EeJOGDyAIWIAN4Ic9rCSJ+YJlkDQICRlWJp7ipyAAuKt5DKFCxpeT6QSoByC4G5fgKxGQcluHBZAk0jDmjCE4AWFVLFEqAFoPyhACq/GCUh9vy/PYfh/+cbIOYBoEWOhCxhwRM8AtAMCE7U//98ZmAU0IBI/v4MU+YAcgTQIkWSIx5aHKDmmvfnIPSPtwz/fzxFVq4AKnOQqzu8SRhaxIPCZD+ZCckR6KsDWNsTSD5IwGUBqPwClWMgjAfsh5qB2ydE1DvEZT5o4TP8cjwAF+IkX5Yaqf4AAAAASUVORK5CYII=" >' +
-    text;
 
   if (idMsg == null) {
     idMsg = uniqId();
   }
 
   if ($("#" + idMsg).length === 0) {
-    $("body").append('<div id="' + idMsg + '">' + text + "</div>");
+    $("body").append('<div title="' + title + '" id="' + idMsg + '"></div>');
+    $("#" + idMsg).empty();
   }
 
-  $("#" + idMsg).empty();
+  $("#err_msg").empty();
-  $("#" + idMsg).html(html);
+  $("#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();

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;
+}

pandora_console/index.php

@@ -1239,6 +1239,12 @@ echo '</div>';
 echo '<div id="um_msg_receiver">';
 echo '</div>';
 
+
+// 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 '</div>';
     // Container div.

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

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 '<link rel="stylesheet" href="'.$url_css.'" type="text/css" />';
 
+$url_css_modal = ui_get_full_url('include/styles/register.css', false, false, false);
+echo '<link rel="stylesheet" href="'.$url_css_modal.'" type="text/css" />';
+// 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 '<div style="display: none;" id="qrcode_container" title="'.__('QR code of
 echo '<div id="qrcode_container_image"></div>';
 echo '</div>';
 
+// 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);

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 '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'."\n";
 echo '<html xmlns="http://www.w3.org/1999/xhtml">'."\n";
@@ -132,6 +138,11 @@ echo '<div style="display: none;" id="qrcode_container" title="'.__('QR code of
 echo '<div id="qrcode_container_image"></div>';
 echo '</div>';
 
+// 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')) {