loader added and some loggers commented

parent 4b75767e
...@@ -26,3 +26,10 @@ html, body ...@@ -26,3 +26,10 @@ html, body
background-color: rgba(220,220,220,0.9); background-color: rgba(220,220,220,0.9);
float:right; float:right;
} }
.not-active {
pointer-events: none;
cursor: default;
text-decoration: none;
color: black;
}
.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;
}
...@@ -169,7 +169,7 @@ function erase_product_list_globe_by_id(element_id) { ...@@ -169,7 +169,7 @@ function erase_product_list_globe_by_id(element_id) {
// this function cleans list of products in cart // 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'); var item_element = document.getElementById('product-list-cart');
while (item_element.firstChild) { while (item_element.firstChild) {
item_element.removeChild(item_element.firstChild); item_element.removeChild(item_element.firstChild);
...@@ -284,7 +284,16 @@ function showProductTabPane() { ...@@ -284,7 +284,16 @@ function showProductTabPane() {
$('aside').addClass("control-sidebar-open"); $('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 () { $(document).ready(function () {
var pol_element = document.getElementById('polygon-list'); var pol_element = document.getElementById('polygon-list');
...@@ -333,6 +342,8 @@ $(document).ready(function () { ...@@ -333,6 +342,8 @@ $(document).ready(function () {
erase_product_list_globe(); erase_product_list_globe();
var submit_data = $('#product-form').serialize(); var submit_data = $('#product-form').serialize();
showWaitingModal()
// product request to DB // product request to DB
// variable prod_req_url in map.html // variable prod_req_url in map.html
$.ajax({ $.ajax({
...@@ -340,7 +351,12 @@ $(document).ready(function () { ...@@ -340,7 +351,12 @@ $(document).ready(function () {
url : prod_req_url, url : prod_req_url,
data : submit_data, data : submit_data,
dataType : 'json', dataType : 'json',
error: function (xhr, status, error) {
console.error("the products request failed");
hideWaitingModal();
},
success : function (data) { success : function (data) {
productListGlobe = []; productListGlobe = [];
console.log("DATA: ", data); console.log("DATA: ", data);
product_list = data; product_list = data;
...@@ -348,9 +364,11 @@ $(document).ready(function () { ...@@ -348,9 +364,11 @@ $(document).ready(function () {
// console.log('GLOBEEE: ', productListGlobe); // console.log('GLOBEEE: ', productListGlobe);
if (product_list.catalog.length > 0) { if (product_list.catalog.length > 0) {
console.log("DEFS: ahora crea producto");
creatCategoryProductContainer(data.catalog); creatCategoryProductContainer(data.catalog);
data.catalog.forEach(function (data) { requestedImages = 0
catalogLength = data.catalog.length
data.catalog.forEach(function (data, index) {
// image request to webservice // image request to webservice
// variable img_req_url in map.html // variable img_req_url in map.html
...@@ -361,6 +379,15 @@ $(document).ready(function () { ...@@ -361,6 +379,15 @@ $(document).ready(function () {
'value' : data.product.link_icon 'value' : data.product.link_icon
}, },
dataType : 'json', 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) { success : function (res) {
data.img = res.img; data.img = res.img;
var temp = document.querySelector('#product_list_template'); var temp = document.querySelector('#product_list_template');
...@@ -383,6 +410,12 @@ $(document).ready(function () { ...@@ -383,6 +410,12 @@ $(document).ready(function () {
setTimeout(() => { setTimeout(() => {
document.querySelector('#L-' + data.product.tileid).appendChild(clone); document.querySelector('#L-' + data.product.tileid).appendChild(clone);
},100); },100);
requestedImages++;
if (requestedImages == catalogLength) {
hideWaitingModal();
showProductTabPane();
}
} }
}); });
...@@ -390,7 +423,6 @@ $(document).ready(function () { ...@@ -390,7 +423,6 @@ $(document).ready(function () {
productListGlobe.push(data); productListGlobe.push(data);
}); });
showProductTabPane();
} else { } else {
$('aside').removeClass("control-sidebar-open"); $('aside').removeClass("control-sidebar-open");
mssgModal({ mssgModal({
......
...@@ -139,23 +139,19 @@ sidtMap.prototype.onMousemove = function(e) ...@@ -139,23 +139,19 @@ sidtMap.prototype.onMousemove = function(e)
sidtMap.prototype.onMapMove = function(e) sidtMap.prototype.onMapMove = function(e)
{ {
var lnglat = ol.proj.transform(this.map.getView().getCenter(), 'EPSG:3857', 'EPSG:4326'); var lnglat = ol.proj.transform(this.map.getView().getCenter(), 'EPSG:3857', 'EPSG:4326');
console.log("onMapMove"); //console.log("onMapMove");
}; };
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
sidtMap.prototype.onDrag = function(e) sidtMap.prototype.onDrag = function(e)
{ {
console.log("onDrag"); //console.log("onDrag");
}; };
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
sidtMap.prototype.onMapClick = function(e) sidtMap.prototype.onMapClick = function(e)
{ {
console.log("onMapClick"); //console.log("onMapClick");
var lnglat = ol.proj.transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'); var lnglat = ol.proj.transform(e.coordinate, 'EPSG:3857', 'EPSG:4326');
; ;
}; };
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<link rel="stylesheet" href="{% static 'catalog/css/modal1.css' %}" type="text/css"> <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://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="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> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
...@@ -121,7 +122,7 @@ ...@@ -121,7 +122,7 @@
<div class="input-group"> <div class="input-group">
<input type="text" id="ajax-input" name="value" class="form-control" autocomplete="off" placeholder="Search region..."> <input type="text" id="ajax-input" name="value" class="form-control" autocomplete="off" placeholder="Search region...">
<span class="input-group-btn"> <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> <i class="fa fa-eraser"></i>
</button> </button>
</span> </span>
...@@ -193,7 +194,7 @@ ...@@ -193,7 +194,7 @@
</ul> </ul>
</li> </li>
<li> <li>
<a href="#"> <a href="#"><div class="modal"><!-- Place at bottom of page --></div>
<span> <span>
<button type="submit" name="search" id="search-btn" class="btn btn-primary"><i class="fa fa-search"></i> Search</button> <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> --> <!-- <button name="search" id="search-btn" class="btn btn-primary">Search</button> -->
...@@ -289,6 +290,7 @@ ...@@ -289,6 +290,7 @@
Geoespacial</a> Geoespacial</a>
</strong> </strong>
</footer> </footer>
<div class="waitingModal"></div>
{% endblock %} {% endblock %}
{% block templates %}{% include "templates.html" %}{% endblock %} {% block templates %}{% include "templates.html" %}{% endblock %}
...@@ -309,7 +311,7 @@ ...@@ -309,7 +311,7 @@
document.getElementById('id_end').value = ano+"-"+mes+"-"+dia; document.getElementById('id_end').value = ano+"-"+mes+"-"+dia;
var dia_anterior = fecha.getDate()-d; 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(); var ano_anterior = fecha.getFullYear();
//Condición donde el día anterior cae en un mes anterior //Condición donde el día anterior cae en un mes anterior
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment