loader added and some loggers commented

parent 4b75767e
......@@ -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;
}
.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) {
// 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({
......
......@@ -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');
;
};
//------------------------------------------------------------------------------
......@@ -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
......
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