view of store products

catalog/static/catalog/css/body.css

@@ -331,7 +331,7 @@ div .menu-info h4 {
 /*}*/
 
 div #product-list-globe {
-    max-height: 773px;
+    max-height: 820px;
     overflow: auto;
 }
 
@@ -363,6 +363,11 @@ ul.product_list_category li:hover div.bg-geo {
     display: block;
 }
 
+div #product-list-cart{
+    max-height: 820px;
+    overflow: auto;
+}
+
 /*div #product-list-cart-items {
     max-height: 167px;
     overflow: auto;

catalog/static/catalog/css/map.css

@@ -17,7 +17,8 @@ html, body
 	position:absolute;
 	bottom:0;
 	border: 0px solid blue;
-	z-index: 99999;
+	/* z-index: 99999; */
+	z-index: 6 !important;
 	width: 100%;
 	height:32px;
 	vertical-align: middle;

catalog/static/catalog/js/dataRetrieval.js

@@ -66,6 +66,42 @@ var makeRequest = function (value) {
     });
 };
 
+function updateCart(){
+    $("#product-list-cart").empty();
+    $.ajax({
+        type: 'POST',
+        url: prod_from_cartDB_url,
+        data: {
+            'csrfmiddlewaretoken': document.getElementsByName('csrfmiddlewaretoken')[0].value
+        },
+        dataType: 'json',
+        success: function (data) {
+            productsToObtain = [];
+            createProductContainer(data.product_list);
+            data.product_list.forEach(function (products) {
+                let id = "L-" + products.aggreg_date.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "-");
+                products.catalog.forEach(function (product) {
+                    var temp_2 = document.querySelector('#product_cart_2');
+
+                    // filling template
+                    temp_2.content.querySelector('li').id = product.uuid;
+                    temp_2.content.querySelector('h4').id = product.uuid + "-h4";
+                    temp_2.content.querySelector('h4').textContent = product.info.producttype + "_" + product.info.tileid;
+                    temp_2.content.querySelector('p').textContent = product.info.beginposition;
+                    temp_2.content.querySelector('img').src = "data:image/jpeg;base64, " + product.info.img;
+                    temp_2.content.querySelectorAll('span')[1].textContent = product.info.identifier;
+                    temp_2.content.querySelectorAll('span')[2].textContent = product.info.size;
+                    temp_2.content.querySelectorAll('span')[3].textContent = product.info.instrumentname;
+
+                    var clone_2 = document.importNode(temp_2.content, true);
+                    //document.querySelector('#product-list-cart-items').appendChild(clone_2);
+                    document.querySelector('#' + id).appendChild(clone_2);
+                });
+            });
+        }
+    });
+};
+
 
 function drawPolygon(element) {
     polygonList.forEach(function (polygon) {
@@ -171,14 +207,15 @@ function drawApiResponse(element) {
 }
 
 
-function createProductContainer() {
-    var temp_1 = document.querySelector('#product_cart_1');
-
-    // filling template
-    temp_1.content.querySelector('span').textContent = "Product";
-
-    var clone_1 = document.importNode(temp_1.content, true);
-    document.querySelector('#product-list-cart').appendChild(clone_1);
+function createProductContainer(products) {
+    products.forEach(function(list){
+        var temp_1 = document.querySelector('#product_cart_1');
+        let name = list.aggreg_date.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "-");
+        temp_1.content.querySelector('span').textContent = name;
+        temp_1.content.querySelector('ul .control-sidebar-menu').id = "L-" + name;
+        var clone_1 = document.importNode(temp_1.content, true);
+        document.querySelector('#product-list-cart').appendChild(clone_1);
+    })
 }
 
 let productCategory = new Map();
@@ -416,45 +453,7 @@ $(document).ready(function () {
                     success: function () {
                         cartProductList = [];
                         productUUIDListCart.push.apply(productUUIDListCart, productsToObtain);
-
-                        if (!IS_PRODUCT_CONTAINER) {
-                            // building product container
-                            createProductContainer();
-                            IS_PRODUCT_CONTAINER = true; // this flag is set to false when products are purchased
-                        }
-
-                        // request to DB for showing the products in cart
-                        // variable prod_from_cartDB_url in map.html
-                        $.ajax({
-                            type : 'POST',
-                            url  : prod_from_cartDB_url,
-                            data : {
-                                'csrfmiddlewaretoken' : document.getElementsByName('csrfmiddlewaretoken')[0].value,
-                                'product_uuid_list'   : productsToObtain.toString()
-                            },
-                            dataType : 'json',
-                            success  : function (data) {
-                                productsToObtain = [];
-                                data.product_list.forEach(function (products) {
-                                    products.catalog.forEach(function(product){
-                                        var temp_2 = document.querySelector('#product_cart_2');
-
-                                        // filling template
-                                        temp_2.content.querySelector('li').id                  = product.uuid;
-                                        temp_2.content.querySelector('h4').id                  = product.uuid + "-h4";
-                                        temp_2.content.querySelector('h4').textContent         = product.info.producttype + "_" + product.info.tileid;
-                                        temp_2.content.querySelector('p').textContent          = product.info.beginposition;
-                                        temp_2.content.querySelector('img').src                = "data:image/jpeg;base64, " + product.info.img;
-                                        temp_2.content.querySelectorAll('span')[1].textContent = product.info.identifier;
-                                        temp_2.content.querySelectorAll('span')[2].textContent = product.info.size;
-                                        temp_2.content.querySelectorAll('span')[3].textContent = product.info.instrumentname;
-
-                                        var clone_2 = document.importNode(temp_2.content, true);
-                                        document.querySelector('#product-list-cart-items').appendChild(clone_2);
-                                    });
-                                });
-                            }
-                        });
+                        updateCart();
                     }
                 });
             } else {

catalog/templates/base_top.html

@@ -104,7 +104,7 @@
         <!-- Create the tabs -->
         <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
             <li id="globe"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-globe"></i></a></li>
-            <li id="cart"><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-shopping-cart"></i></a>
+            <li id="cart"><a href="#control-sidebar-settings-tab" onclick="updateCart()" data-toggle="tab"><i class="fa fa-shopping-cart"></i></a>
             </li>
         </ul>
         <!-- Tab panes -->
@@ -147,7 +147,7 @@
                 </div>
               </div>
               <!-- this ul element is filled with data -->
-              <ul id="product-list-cart" class="sidebar-menu" data-widget="tree"></ul>
+              <ul id="product-list-cart" class="control-sidebar-menu" data-widget="tree"></ul>
             </form>
           </div>
           <!-- /.tab-pane -->

catalog/templates/templates.html

@@ -80,7 +80,7 @@
     </a>
     <ul class="treeview-menu sidebar-form">
       <li>
-        <ul id="product-list-cart-items" class="control-sidebar-menu"></ul>
+        <ul id="" class="control-sidebar-menu product_list_category"></ul>
       </li>
     </ul>
   </li>
@@ -95,7 +95,7 @@
         <p></p>
       </div>
     </a>
-    <div class="info-product-cart-box bg-geo">
+    <div class="info-product-box bg-geo">
       <span class="info-product-box-img">
         <img src="">
       </span>

catalog/views.py

@@ -206,13 +206,14 @@ def getFromCart(request):
 
     user           = User.objects.get(id=request.user.id)
     prod_list      = []
-    product_list = Purchase.objects.values('user', 'productList', 'purchased','price').filter(user=user, purchased=0)
+    product_list = Purchase.objects.values('user', 'productList', 'purchased', 'price', 'aggreg_date').filter(user=user, purchased=0)
     
     for products in product_list:
         product = json.loads(products['productList'])
         prod_list.append({
             'purchased': products['purchased'],
             'price'  : products['price'],
+            'aggreg_date' : products['aggreg_date'],
             'catalog': product
         })
     return JsonResponse({'product_list': prod_list})