general performance improvement

catalog/static/js/dataRetrieval.js

@@ -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

@@ -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

@@ -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

@@ -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>