grouping of products added in search

catalog/static/catalog/css/body.css

@@ -206,13 +206,13 @@ div .info-product-cart-box {
     margin-bottom: 15px;
 }
 
-ul.control-sidebar-menu li div.bg-geo {
-    display: none;
-}
+/* ul.control-sidebar-menu li div.bg-geo {*/
+    /* display: none; */
+/* } */
 
-ul.control-sidebar-menu li:hover div.bg-geo {
-    display: block;
-}
+/* ul.control-sidebar-menu li:hover div.bg-geo { */
+    /* display: block; */
+/* } */ 
 
 div .bg-geo {
     background-color: #dc7828;
@@ -341,6 +341,28 @@ div #product-list-cart-items {
     overflow: auto;
 }
 
+ul #product-list-cart-items li div.bg-geo {
+    display: none;
+}
+
+ul #product-list-cart-items li:hover div.bg-geo {
+    display: block;
+}
+
+div .product_list_category {
+    max-height: 700px;
+    max-width: 207px;
+    overflow: auto;
+}
+
+ul.product_list_category li div.bg-geo {
+    display: none;
+}
+
+ul.product_list_category li:hover div.bg-geo {
+    display: block;
+}
+
 /*div #product-list-cart-items {
     max-height: 167px;
     overflow: auto;

catalog/static/catalog/js/dataRetrieval.js

@@ -114,6 +114,7 @@ $("#id_polygon").on('keyup', function (e) {
 
 // this function cleans list of available products
 function erase_product_list_globe() {
+    deletePolygon();
     prevfeature = new Map();
     var pol_element = document.getElementById('product-list-globe');
     while (pol_element.firstChild) {
@@ -139,6 +140,14 @@ function erase_product_list_cart() {
     }
 }
 
+function deletePolygon(){
+    prevfeature.forEach(function(value,uuid){
+        if (prevfeature.has(uuid)) {
+            osmap.deletefootprint(prevfeature.get(uuid));
+            prevfeature.delete(uuid);
+        }
+    });
+};
 
 var prevfeature = new Map();
 function drawApiResponse(element) {
@@ -172,6 +181,20 @@ function createProductContainer() {
     document.querySelector('#product-list-cart').appendChild(clone_1);
 }
 
+let productCategory = new Map();
+function creatCategoryProductContainer(catalog){
+    productCategory = new Map();
+    catalog.forEach(function(category){
+        if (!productCategory.has(category.product.tileid)){
+            productCategory.set(category.product.tileid, 1)
+            var temp_1 = document.querySelector('#product_list_category');
+            temp_1.content.querySelector('span').textContent = category.product.tileid;
+            temp_1.content.querySelector('ul .control-sidebar-menu').id = "L-"+ category.product.tileid;
+            var clone_1 = document.importNode(temp_1.content, true);
+            document.querySelector('#product-list-globe').appendChild(clone_1);
+        }
+    })
+}
 
 $('#ajax-input').focus(function () {
     console.log('in');
@@ -280,6 +303,7 @@ $(document).ready(function () {
 
                 if (product_list.catalog.length > 0) {
                     console.log("DEFS: ahora crea producto");
+                    creatCategoryProductContainer(data.catalog);
                     data.catalog.forEach(function (data) {
 
                         // image request to webservice
@@ -308,7 +332,8 @@ $(document).ready(function () {
                                 temp.content.querySelectorAll('span')[3].textContent   = data.product.instrumentname;
 
                                 var clone = document.importNode(temp.content, true);
-                                document.querySelector('#product-list-globe').appendChild(clone);
+                                //document.querySelector('#product-list-globe').appendChild(clone);
+                                document.querySelector('#L-' + data.product.tileid).appendChild(clone);
                             }
 
                         });
@@ -343,6 +368,7 @@ $(document).ready(function () {
             var submit_data_array = submit_data.split("&product_selected=");
 
             console.log("djdj: ", productListGlobe);
+            deletePolygon();
             productListGlobe.forEach(function (data) {
                 if (submit_data_array.indexOf(data.uuid) > -1) {
                     console.log("DATA sí esta: ", data.uuid);
@@ -365,6 +391,7 @@ $(document).ready(function () {
                 }
             });
 
+            $("#product-list-globe").empty();
             if (cartProductList.length > 0) {
                 // request for saving product in cart DB
                 // variable prod_cart_url in map.html

catalog/templates/base_top.html

@@ -111,7 +111,7 @@
                 </div>
               </div>
               <!-- this ul element is filled with data -->
-              <ul id="product-list-globe" class="control-sidebar-menu"></ul>
+              <ul id="product-list-globe" class="control-sidebar-menu" data-widget="tree"></ul>
               <!-- /.control-sidebar-menu -->
             </form>
           </div>

catalog/templates/templates.html

@@ -21,6 +21,23 @@
 <!-- city list template -->
 
 <!-- product list template -->
+<template id="product_list_category">
+  <li class="treeview">
+    <a href="#">
+      <i class="fa fa-cubes"></i>
+      <span></span>
+      <span class="pull-right-container">
+        <span class="label label-primary pull-right"></span>
+      </span>
+    </a>
+    <ul class="treeview-menu sidebar-form">
+      <li>
+        <ul id="" class="control-sidebar-menu product_list_category"></ul>
+      </li>
+    </ul>
+  </li>
+</template>
+
 <template id="product_list_template">
   <div id="" class="single-product-input">
     <input type="checkbox" name="product_selected" value="" checked>