Merge branch 'ent-5824-connection-lost-warn' into 'develop'

Ent 5824 connection lost warn

See merge request artica/pandorafms!3326

pandora_console/include/functions_ui.php

@@ -6098,3 +6098,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

@@ -1865,3 +1865,112 @@ function ajaxRequest(id, settings) {
     }
   });
 }
+
+/**
+ * -------------------------------------
+ *        Connection Check
+ * --------------------------------------
+ */
+
+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";
+
+  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);
+  }
+}
+
+/**
+ * Test server reachibilty and get response.
+ *
+ * @param {String} url
+ *
+ * Return {promise}
+ */
+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);
+    });
+}
+
+/**
+ * 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#message_dialog_connection")
+      .closest(".ui-dialog-content")
+      .dialog("close");
+  } else {
+    data.title = "Connection with server has been lost";
+    data.text = "Connection status: " + msg;
+
+    infoMessage(data, "message_dialog_connection");
+  }
+}

pandora_console/include/javascript/pandora_ui.js

@@ -494,3 +494,61 @@ function generalShowMsg(data, idMsg) {
     ]
   });
 }
+
+function infoMessage(data, idMsg) {
+  var title = data.title;
+  var err_messge = data.text;
+
+  if (idMsg == null) {
+    idMsg = uniqId();
+  }
+
+  if ($("#" + idMsg).length === 0) {
+    $("body").append('<div title="' + title + '" id="' + idMsg + '"></div>');
+    $("#" + idMsg).empty();
+  }
+
+  $("#err_msg").empty();
+  $("#err_msg").html("\n\n" + err_messge);
+
+  $("#" + idMsg)
+    .dialog({
+      height: 250,
+      width: 528,
+      opacity: 1,
+      modal: true,
+      position: {
+        my: "center",
+        at: "center",
+        of: window,
+        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("error-modal-opened");
+      },
+      close: function(event, ui) {
+        $(".ui-widget-overlay").removeClass("error-modal-opened");
+      }
+    })
+    .show();
+}

pandora_console/include/styles/pandora.css

@@ -6059,6 +6059,56 @@ form#modal_form_feedback ul.wizard li > textarea {
   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;
+}
+
 form#form-filter-interfaces {
   margin-left: -30px;
 }

pandora_console/index.php

@@ -1249,6 +1249,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')) {