loader added and some loggers commented

catalog/static/catalog/css/map.css

@@ -26,3 +26,10 @@ html, body
 	background-color: rgba(220,220,220,0.9);
 	float:right;
 }
+
+.not-active {
+  pointer-events: none;
+  cursor: default;
+  text-decoration: none;
+  color: black;
+}

catalog/static/catalog/css/waitingModal.css

+.waitingModal {
+  display:    none;
+  position:   fixed;
+  z-index:    1000;
+  top:        0;
+  left:       0;
+  height:     100%;
+  width:      100%;
+  background: rgba( 255, 255, 255, .8 )
+              url('../images/loader.gif')
+              50% 50%
+              no-repeat;
+}
+
+body.loading .waitingModal {
+    overflow: hidden;
+}
+
+body.loading .waitingModal {
+    display: block;
+}

catalog/static/catalog/js/dataRetrieval.js

@@ -169,7 +169,7 @@ function erase_product_list_globe_by_id(element_id) {
 
 
 // this function cleans list of products in cart
-function erase_product_list_cart() {
+function erase_product_list_cart() {control-sidebar
     var item_element = document.getElementById('product-list-cart');
     while (item_element.firstChild) {
         item_element.removeChild(item_element.firstChild);
@@ -284,7 +284,16 @@ function showProductTabPane() {
     $('aside').addClass("control-sidebar-open");
 }
 
+function showWaitingModal() {
+  $("body").addClass('loading')
+  $("#product-list-toggle").addClass('not-active')
+  $('aside').removeClass("control-sidebar-open");
+}
 
+function hideWaitingModal() {
+  $("body").removeClass('loading')
+  $("#product-list-toggle").removeClass('not-active')
+}
 
 $(document).ready(function () {
     var pol_element = document.getElementById('polygon-list');
@@ -333,6 +342,8 @@ $(document).ready(function () {
         erase_product_list_globe();
         var submit_data = $('#product-form').serialize();
 
+        showWaitingModal()
+
         // product request to DB
         // variable prod_req_url in map.html
         $.ajax({
@@ -340,7 +351,12 @@ $(document).ready(function () {
             url      : prod_req_url,
             data     : submit_data,
             dataType : 'json',
+            error: function (xhr, status, error) {
+              console.error("the products request failed");
+              hideWaitingModal();
+            },
             success  : function (data) {
+
                 productListGlobe = [];
                 console.log("DATA: ", data);
                 product_list = data;
@@ -348,9 +364,11 @@ $(document).ready(function () {
                 // console.log('GLOBEEE: ', productListGlobe);
 
                 if (product_list.catalog.length > 0) {
-                    console.log("DEFS: ahora crea producto");
+
                     creatCategoryProductContainer(data.catalog);
-                    data.catalog.forEach(function (data) {
+                    requestedImages = 0
+                    catalogLength = data.catalog.length
+                    data.catalog.forEach(function (data, index) {
 
                         // image request to webservice
                         // variable img_req_url in map.html
@@ -361,6 +379,15 @@ $(document).ready(function () {
                                 'value' : data.product.link_icon
                             },
                             dataType : 'json',
+                            error: function (xhr, status, error) {
+                              // TODO: Agregar una imagen rota por defecto
+                              requestedImages++;
+                              if (requestedImages == catalogLength) {
+                                hideWaitingModal();
+                                showProductTabPane();
+                              }
+                              console.error("image request failed");
+                            },
                             success  : function (res) {
                                 data.img = res.img;
                                 var temp = document.querySelector('#product_list_template');
@@ -383,6 +410,12 @@ $(document).ready(function () {
                                 setTimeout(() => {
                                     document.querySelector('#L-' + data.product.tileid).appendChild(clone);
                                 },100);
+
+                                requestedImages++;
+                                if (requestedImages == catalogLength) {
+                                  hideWaitingModal();
+                                  showProductTabPane();
+                                }
                             }
 
                         });
@@ -390,7 +423,6 @@ $(document).ready(function () {
                         productListGlobe.push(data);
                     });
 
-                    showProductTabPane();
                 } else {
                     $('aside').removeClass("control-sidebar-open");
                     mssgModal({

catalog/static/catalog/js/sidtMap.js

@@ -139,23 +139,19 @@ sidtMap.prototype.onMousemove = function(e)
 sidtMap.prototype.onMapMove = function(e)
 {
 	var lnglat = ol.proj.transform(this.map.getView().getCenter(), 'EPSG:3857', 'EPSG:4326');
-	console.log("onMapMove");
-
+	//console.log("onMapMove");
 };
 //------------------------------------------------------------------------------
 sidtMap.prototype.onDrag = function(e)
 {
-	console.log("onDrag");
+	//console.log("onDrag");
 };
 //------------------------------------------------------------------------------
 sidtMap.prototype.onMapClick = function(e)
 {
-	console.log("onMapClick");
+	//console.log("onMapClick");
 	var lnglat = ol.proj.transform(e.coordinate, 'EPSG:3857', 'EPSG:4326');
 ;
 };
 
 //------------------------------------------------------------------------------
-
-
-

catalog/templates/map.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="{% static 'catalog/css/modal1.css' %}" type="text/css">
     <!--  <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">-->
     <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
+    <link rel="stylesheet" href="{% static 'catalog/css/waitingModal.css' %}" type="text/css">
 
 
     <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
@@ -121,7 +122,7 @@
             <div class="input-group">
                 <input type="text" id="ajax-input" name="value" class="form-control" autocomplete="off" placeholder="Search region...">
                 <span class="input-group-btn">
-          <button type="button" name="search" id="search-btn" class="btn btn-flat" onclick="erase_input()">
+          <button type="button" name="search" id="erase-btn" class="btn btn-flat" onclick="erase_input()">
             <i class="fa fa-eraser"></i>
           </button>
         </span>
@@ -193,7 +194,7 @@
           </ul>
         </li>
         <li>
-        <a href="#">
+        <a href="#"><div class="modal"><!-- Place at bottom of page --></div>
           <span>
              <button type="submit" name="search" id="search-btn" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
               <!-- <button name="search" id="search-btn" class="btn btn-primary">Search</button> -->
@@ -289,6 +290,7 @@
                 Geoespacial</a>
         </strong>
     </footer>
+    <div class="waitingModal"></div>
 {% endblock %}
 
 {% block templates %}{% include "templates.html" %}{% endblock %}
@@ -309,7 +311,7 @@
     document.getElementById('id_end').value = ano+"-"+mes+"-"+dia;
 
     var dia_anterior = fecha.getDate()-d;
-    var mes_anterior = fecha.getMonth()+1;
+    var mes_anterior = fecha.getMonth()+1;<div class="modal"><!-- Place at bottom of page --></div>
     var ano_anterior = fecha.getFullYear();
 
     //Condición donde el día anterior cae en un mes anterior