loader added and some loggers commented

catalog/static/catalog/css/map.css

@@ -4,10 +4,10 @@
 	height:100%;
 	margin:0;
 	padding:0;
-	position:fixed;	
+	position:fixed;
 /*	border: 2px solid red;*/
 }
-html, body 
+html, body
 {
 	margin:0;
 	height: 100%;
@@ -25,4 +25,11 @@ html, body
 	line-height: 32px;
 	background-color: rgba(220,220,220,0.9);
 	float:right;
-}
+}
\ No newline at end of file
+
+.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

 /// @file taxiMap.js
 /// @author Mario Chirinos Colunga
 /// @date 2016-04-15
-/// 
+///
 Number.prototype.toRadians = function()
 {
 	return this * Math.PI / 180;
 };
 function distance(lng1,lat1,lng2,lat2)
 {
-	
+
 	var R = 6371e3; // metres
 	var f1 = lat1.toRadians();
 	var f2 = lat2.toRadians();
@@ -51,7 +51,7 @@ function distance(lng1,lat1,lng2,lat2)
 //	console.log(data);
 
 //	var self = this;
-//	var xmlhttp;	
+//	var xmlhttp;
 //	if (window.XMLHttpRequest)
 //	{//IE7+, Firefox, Chrome, Opera, Safari
 //	  xmlhttp=new XMLHttpRequest();
@@ -59,15 +59,15 @@ function distance(lng1,lat1,lng2,lat2)
 //	else
 //	{// code for IE6, IE5
 //	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
-//	}		
+//	}
 //	xmlhttp.onreadystatechange=function()
 //	{
 //		if (xmlhttp.readyState==4 && xmlhttp.status==200)
 //		{
 //			var jsonObj = JSON.parse(xmlhttp.responseText);
 //			console.log(jsonObj);
-//			
-//				
+//
+//
 //		}
 
 //	}
@@ -92,18 +92,18 @@ function sidtMap(divID, lng, lat, z)
 
 	var style = new ol.style.Style({
 		stroke: new ol.style.Stroke({
-			color: 'rgba(0,0,100,0.8)', 
+			color: 'rgba(0,0,100,0.8)',
 			width: 2
 		}),
-		fill: new ol.style.Fill({ 
+		fill: new ol.style.Fill({
 			color: 'rgba(0,100,200,0.5)'
-		}) 
+		})
 	});
 
 	this.map.on("moveend",function(e){self.onMapMove(e)});
 	this.map.on("pointerdrag",function(e){self.onDrag(e)});
 	this.map.on("pointermove",function(e){self.onMousemove(e)});
- 
+
 };
 
 sidtMap.prototype = Object.create( OpenStreetMapsClass.prototype );
@@ -120,9 +120,9 @@ sidtMap.prototype.addInteraction = function()
 	});
 
 	this.interaction.on("drawend",function(e){
-		self.showCoords(e.feature.getGeometry());				
+		self.showCoords(e.feature.getGeometry());
 	});
-	
+
 	this.interaction.on("drawstart",function(e){
 		self.removePolygon();
 	});
@@ -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");
-	var lnglat = ol.proj.transform(e.coordinate, 'EPSG:3857', 'EPSG:4326');	
+	//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 %}
@@ -301,7 +303,7 @@
     var dia = fecha.getDate(); //obteniendo dia
     var mes = fecha.getMonth()+1; //obteniendo mes
     var ano = fecha.getFullYear(); //obteniendo año
-    
+
     if(dia<10)
       dia='0'+dia; //agrega cero si el menor de 10
     if(mes<10)
@@ -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
@@ -323,15 +325,15 @@
         ano_anterior=ano_anterior-1; //En caso de consulta entre diciembre y enero
       }
 
-      if(mes_anterior == 1 || mes_anterior == 3 || mes_anterior ==  5 
+      if(mes_anterior == 1 || mes_anterior == 3 || mes_anterior ==  5
         || mes_anterior ==  7 ||mes_anterior ==  8 || mes_anterior ==  10 ||
         mes_anterior ==  12)
         dia_anterior = 31+(dia-6);
-      
-      if(mes_anterior == 4 || mes_anterior == 6 || mes_anterior ==  9 
+
+      if(mes_anterior == 4 || mes_anterior == 6 || mes_anterior ==  9
       || mes_anterior ==  11)
         dia_anterior = 30+(dia-6);
-    
+
       if(mes_anterior == 2)
         dia_anterior = 28+(dia-6);
     }
@@ -341,7 +343,7 @@
 
     if(mes_anterior<10)
       mes_anterior='0'+mes_anterior;//agrega cero si el menor de 10
-                    
+
     document.getElementById('id_start').value = ano_anterior+"-"+mes_anterior+"-"+dia_anterior;
 
   </script>