Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit 38bd653b authored by Renán Sosa Guillen's avatar Renán Sosa Guillen
Browse files
Options

general performance improvement

parent fa92b814
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 142 deletions
catalog/static/js/dataRetrieval.js
View file @ 38bd653b
......@@ -9,6 +9,8 @@ var PRODUCT_COUNTER = 0;
var IS_PRODUCT_CONTAINER = false;
var polygonList;
var makeRequest = function (value) {
var pol_element = document.getElementById('polygon-list');
......@@ -29,18 +31,32 @@ var makeRequest = function (value) {
pol_element.removeChild(pol_element.firstChild);
}
data.polygonList.forEach(function (polygon) {
if (polygonList.length <= 0) {
var temp = document.querySelector('#city_list_template');
// filling template
temp.content.querySelector('li').id = polygon.id;
temp.content.querySelectorAll('span')[0].textContent = polygon.city + ", " + polygon.state;
temp.content.querySelectorAll('span')[1].textContent = polygon.description;
temp.content.querySelectorAll('div')[3].textContent = "Fuente: " + polygon.source;
temp.content.querySelector('li').id = '';
temp.content.querySelectorAll('span')[0].textContent = 'No cities matched your search. Try again.';
temp.content.querySelectorAll('span')[1].textContent = '';
temp.content.querySelectorAll('div')[3].textContent = '';
var clone = document.importNode(temp.content, true);
document.querySelector('#polygon-list').appendChild(clone);
});
} else {
data.polygonList.forEach(function (polygon) {
var temp = document.querySelector('#city_list_template');
// filling template
temp.content.querySelector('li').id = polygon.id;
temp.content.querySelectorAll('span')[0].textContent = polygon.city + ", " + polygon.state;
temp.content.querySelectorAll('span')[1].textContent = polygon.description;
temp.content.querySelectorAll('div')[3].textContent = "Fuente: " + polygon.source;
var clone = document.importNode(temp.content, true);
document.querySelector('#polygon-list').appendChild(clone);
});
}
if (OPT_LIST_IS_HIDDEN) {
$('#option-list').show();
......@@ -50,9 +66,16 @@ var makeRequest = function (value) {
});
};
function drawPolygon(element) {
polygonList.forEach(function (polygon) {
if (polygon.id === element.id) {
// hide product panel
$('aside').removeClass("control-sidebar-open");
// clean product panel
erase_product_list_globe();
// set input box with polygon city name
var input_text = polygon.city + ", " + polygon.state;
$("#ajax-input").val(input_text);
......@@ -88,34 +111,42 @@ $("#id_polygon").on('keyup', function (e) {
}
});
function erase_product_list_globe() {
prevfeature = null;
var pol_element = document.getElementById('product-list-globe');
while (pol_element.firstChild) {
pol_element.removeChild(pol_element.firstChild);
}
}
function erase_product_list_globe_by_id(element_id) {
var $li_element = $('li#' + element_id);
$li_element[0].parentNode.removeChild($li_element[0]);
}
var prevfeature = null;
function drawApiResponse(element) {
var list_globe = document.getElementById('product-list-globe').children;
for (var i=0; i<list_globe.length; i++) {
var listElement = list_globe[i];
listElement.style.textDecoration = 'none';
}
for(var i=0; i<product_list.catalog.length; i++) {
for (var i=0; i<product_list.catalog.length; i++) {
var data = product_list.catalog[i];
list_globe[i].style.textDecoration = 'none';
if (data.uuid === element.id.replace("-h4", '')) {
// osmap.removePolygon();
list_globe[i].style.textDecoration = 'underline';
prevfeature = osmap.addfootprint(data.product.footprint, prevfeature);
element.style.textDecoration = 'underline';
console.log("footprint:\n", data.product.footprint);
prevfeature = osmap.addfootprint(data.product.footprint, prevfeature);
}
}
}
function createProductContainer() {
var temp_1 = document.querySelector('#product_cart_1');
......@@ -161,12 +192,27 @@ $(document).click(function (event) {
});
function no_prods_modal() {
$('aside').removeClass("control-sidebar-open");
$('#no-prods-modal').modal('show');
}
function showProductTabPane() {
$('#cart').removeClass("active");
$('#globe').addClass("active");
$('#control-sidebar-settings-tab').removeClass("active");
$('#control-sidebar-home-tab').addClass("active");
$('aside').addClass("control-sidebar-open");
}
$(document).ready(function () {
var pol_element = document.getElementById('polygon-list');
var typingTimer;
var typingInterval = 800; //milliseconds
var productListPrev = [];
var productListGlobe = [];
var cartProductList = []; // this array represent DB where products will be stored
var productUUIDListCart = [];
......@@ -191,14 +237,16 @@ $(document).ready(function () {
}
});
var PRODUCT_IN_LIST = false;
// var PRODUCT_IN_LIST = false;
// function for making POST request to productList in view.py
$('#product-form').submit(function (event) {
var submit_data = $('#product-form').serialize();
event.preventDefault();
erase_product_list_globe();
var submit_data = $('#product-form').serialize();
// petición de producto a base de datos
// variable prod_req_url en map.html
$.ajax({
......@@ -207,28 +255,16 @@ $(document).ready(function () {
data : submit_data,
dataType : 'json',
success : function (data) {
PRODUCT_IN_LIST = false;
productListGlobe = [];
productListPrev = [];
console.log("DATA: ", data);
product_list = data;
product_list = data;
// productListGlobe = data.catalog;
console.log('GLOBEEE: ', productListGlobe);
if (productListPrev.length > 0) {
PRODUCT_IN_LIST = false;
for (var i = 0; i < productListPrev.length; i++) {
if (productListPrev[i].id === data.id) {
i = productListPrev.length;
PRODUCT_IN_LIST = true;
}
}
}
// console.log('GLOBEEE: ', productListGlobe);
if (!PRODUCT_IN_LIST) {
if (product_list.catalog.length <= 0) {
no_prods_modal();
} else {
console.log("DEFS: ahora crea producto");
productListPrev.push(data);
// var div_top = 148;
data.catalog.forEach(function (data) {
// petición de imagen a webservice
......@@ -264,94 +300,19 @@ $(document).ready(function () {
productListGlobe.push(data);
});
$('#cart').removeClass("active");
$('#globe').addClass("active");
// $('#control-sidebar-home-tab').attr('class', "tab-pane active");
$('#control-sidebar-settings-tab').removeClass("active");
$('#control-sidebar-home-tab').addClass("active");
$('aside').addClass("control-sidebar-open");
showProductTabPane();
}
}
});
event.preventDefault();
});
// agrega producto al carrito
// $('#product-to-cart-form').submit(function (event) {
// var submit_data = $('#product-to-cart-form').serialize();
// event.preventDefault();
// // erase_product_list_globe();
// console.log("Submitted data:", typeof(submit_data));
// console.log("Submitted data:", submit_data);
// var submit_data_array = submit_data.split("&product_selected=");
// PRODUCT_COUNTER += 1; // this variable counts the number of products in shopping cart
// PRODUCT_COUNTER_STR = PRODUCT_COUNTER.toString();
// var temp_1 = document.querySelector('#product_cart_1');
// var prod_id = temp_1.content.querySelectorAll('ul')[1].id + "-" + PRODUCT_COUNTER_STR;
// // filling template
// temp_1.content.querySelector('span').textContent = "Product " + PRODUCT_COUNTER_STR;
// temp_1.content.querySelectorAll('ul')[1].id = prod_id;
// var clone_1 = document.importNode(temp_1.content, true);
// document.querySelector('#product-list-cart').appendChild(clone_1);
// // var div_top = 148;
// console.log("djdj: ", productListGlobe);
// productListGlobe.forEach(function (data) {
// if (submit_data_array.indexOf(data.uuid) > -1) {
// console.log("DATA sí esta: ", data.uuid);
// console.log("SS: ", data.product.size);
// productListCart.push(data.product);
// // productListCart.push(data.id);
// erase_product_list_globe_by_id(data.uuid);
// var temp_2 = document.querySelector('#product_cart_2');
// // filling template
// temp_2.content.querySelector('li').id = data.uuid;
// temp_2.content.querySelector('h4').id = data.uuid + "-h4";
// temp_2.content.querySelector('h4').textContent = data.product.producttype + "_" + data.product.tileid;
// temp_2.content.querySelector('p').textContent = data.product.beginposition;
// temp_2.content.querySelector('img').src = "data:image/jpeg;base64, " + data.img;
// temp_2.content.querySelectorAll('span')[1].textContent = data.product.identifier;
// temp_2.content.querySelectorAll('span')[2].textContent = data.product.size;
// temp_2.content.querySelectorAll('span')[3].textContent = data.product.instrumentname;
// var clone_2 = document.importNode(temp_2.content, true);
// document.querySelector('#' + prod_id).appendChild(clone_2);
// // request para guardado de producto en carrito
// //variable prod_cart_url en map.html
// // $.ajax({
// // type : 'POST',
// // url : prod_cart_url,
// // data : {
// // 'csrfmiddlewaretoken' : document.getElementsByName('csrfmiddlewaretoken')[0].value,
// // 'product' : JSON.stringify(data.product),
// // 'product_num' : PRODUCT_COUNTER_STR
// // },
// // dataType : 'json'
// // });
// }
// });
// });
// agrega producto al carrito
$('#product-to-cart-form').submit(function (event) {
var submit_data = $('#product-to-cart-form').serialize();
event.preventDefault();
var submit_data = $('#product-to-cart-form').serialize();
console.log("Submitted data:", typeof(submit_data));
console.log("Submitted data:", submit_data);
......@@ -365,13 +326,13 @@ $(document).ready(function () {
cartProductList.push({
'uuid' : data.uuid,
'info' : {
'producttype' : data.product.producttype,
'tileid' : data.product.tileid,
'beginposition' : data.product.beginposition,
'img' : data.img,
'identifier' : data.product.identifier,
'size' : data.product.size,
'instrumentname' : data.product.instrumentname
'producttype' : data.product.producttype,
'tileid' : data.product.tileid,
'beginposition' : data.product.beginposition,
'img' : data.img,
'identifier' : data.product.identifier,
'size' : data.product.size,
'instrumentname' : data.product.instrumentname
}
});
productUUIDListCart.push(data.uuid);
......@@ -441,26 +402,4 @@ $(document).ready(function () {
}
});
});
// genera la compra del producto
// $('#purchased-product-form').submit(function (event) {
// var submit_data = $('#purchased-product-form').serialize();
// event.preventDefault();
// console.log("Submitted data:", typeof(submit_data));
// console.log("Submitted data:", submit_data);
// $.ajax({
// type : 'POST',
// url : purch_prod_url,
// data : {
// 'csrfmiddlewaretoken' : document.getElementsByName('csrfmiddlewaretoken')[0].value,
// 'product_list' : JSON.stringify(productListCart)
// },
// dataType : 'json'
// });
// });
});
catalog/templates/base_top.html
View file @ 38bd653b
......@@ -149,6 +149,9 @@
<!-- T E M P L A T E S -->
{% block templates %}{% endblock %}
<!-- T E M P L A T E S -->
<!-- MODAL 1 -->
{% block modal1 %}{% endblock %}
<!-- MODAL 1 -->
<!-- jQuery 3 -->
<script src="{% static 'adminlte/bower_components/jquery/dist/jquery.min.js' %}"></script>
......
catalog/templates/map.html
View file @ 38bd653b
......@@ -4,6 +4,7 @@
{% block headMedia %}
<link rel="stylesheet" href="{% static 'css/map.css'%}" type="text/css">
<link rel="stylesheet" href="{% static 'css/body.css'%}" type="text/css">
<link rel="stylesheet" href="{% static 'css/modal1.css'%}" type="text/css">
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
......@@ -180,7 +181,7 @@
</a>
<ul class="treeview-menu sidebar-form">
<li>
<input class="form-control" type="number" name="cloudPercentage">
<input class="form-control" type="number" value="100" name="cloudPercentage">
</li>
</ul>
</li>
......@@ -242,6 +243,7 @@
{% endblock %}
{% block templates %}{% include "templates.html" %}{% endblock %}
{% block modal1 %}{% include "noProductsModal.html" %}{% endblock %}
{% block scripts %}
<script>
......
catalog/templates/templates.html
View file @ 38bd653b
......@@ -22,11 +22,11 @@
<!-- product list template -->
<template id="product_list_template">
<li id="">
<li id="" onclick="drawApiResponse(this);">
<a href="javascript:void(0)">
<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>
<div class="menu-info">
<h4 id="" class="control-sidebar-subheading" onclick="drawApiResponse(this);"></h4>
<h4 id="" class="control-sidebar-subheading"></h4>
<p></p>
<input type="checkbox" name="product_selected" value="" checked>
</div>
......
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