Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit fc0afb58 authored by Emmanuel René Huchim Puc's avatar Emmanuel René Huchim Puc
Browse files
Options

loader added and some loggers commented

parent 4b75767e
Hide whitespace changes
Inline Side-by-side
Showing with 94 additions and 36 deletions
catalog/static/catalog/css/map.css
View file @ fc0afb58
......@@ -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 0 → 100644
View file @ fc0afb58
.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
View file @ fc0afb58
......@@ -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
View file @ fc0afb58
/// @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
View file @ fc0afb58
......@@ -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>
......
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