Merge branch 'dev' of gitlab.geoint.mx:mario.chirinos/GeoInt_SIDT into dev

GeoInt_SIDT/settings.py

@@ -127,7 +127,8 @@ AUTH_PASSWORD_VALIDATORS = [
 
 LANGUAGE_CODE = 'en-us'
 
-TIME_ZONE = 'UTC'
+#TIME_ZONE = 'UTC'
+TIME_ZONE = 'America/Mexico_City'
 
 USE_I18N = True
 

administration/templates/dashboard.html

@@ -251,7 +251,8 @@
 
                                 <div class="chart ">
                                     <!-- Sales Chart Canvas -->
-                                    <canvas id="salesChart" style="height: 142px; width: 814px;" width="814" height="170"></canvas>
+                                    <canvas id="salesChart" style="height: 142px; width: 814px;" width="814"
+                                            height="170"></canvas>
                                 </div>
                                 <!-- /.chart-responsive -->
                             </div>
@@ -330,8 +331,11 @@
             <div class="col-md-12">
                 <div class="box box-success">
                     <div class="box-header with-border">
+                        {% if request.user.username == "demo" %}
+                            <h3 class="box-title" id="purchases_in">Reports Per Month</h3>
+                        {% else %}
                             <h3 class="box-title" id="purchases_in">Purchases Per Month</h3>
-
+                        {% endif %}
                         <div class="box-tools pull-right">
                             <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                     class="fa fa-minus"></i>
@@ -505,7 +509,11 @@
             var label = myChart.data.labels[firstPoint._index];
             //if (!firstPoint) return;
             $('#purchases_in').empty();
-            $('#purchases_in').append("Purchases in " + label);
+            {% if request.user.username == "demo" %}
+                $('#purchases_in').append("Reports in " + label);
+            {% else %}
+                $('#purchases_in').append("Reports in " + label);
+            {% endif %}
 
 
             $.ajax({
@@ -523,7 +531,7 @@
                         "<th class=\"text-center\">User ID</th>" +
                         "<th class=\"text-center\">User</th>" +
                         "<th class=\"text-center\">E-Mail</th>" +
-                        "<th class=\"text-center\">Purchases</th>" +
+                        "<th class=\"text-center\">Concluded</th>" +
                         //"<th class=\"text-center\">Storage</th>" +
                         "<th class=\"text-center\">Downloads in process</th>" +
                         "</tr>" +

catalog/admin.py

@@ -13,7 +13,7 @@ from catalog.models import Platform
 
 #admin.site.register(Publisher)
 class ProcessAdmin(admin.ModelAdmin):
-	list_display = ('name', 'platform', 'productLevel')
+	list_display = ('name', 'platform', 'productLevel','description','command')
 admin.site.register(Process, ProcessAdmin)
 
 

catalog/forms.py

@@ -12,10 +12,10 @@ from .widgets import FengyuanChenDatePickerInput
 
 all_process = Process.objects.filter(status=True)
 
-platforms = []
+platforms = [[-1,'Select the search process']]
 
 for each_process in all_process:
-    platforms.append((each_process.platform_id,each_process.name))
+    platforms.append((each_process.id,each_process.name))
     
 
 #ALOS, A3, AIRSAR, AS, ERS-1, E1, ERS-2, E2, JERS-1, J1, RADARSAT-1, R1, SEASAT, SS, Sentinel-1A, SA, Sentinel-1B, SB, SMAP, SP, UAVSAR, UA.

catalog/management/commands/addState.py

@@ -13,13 +13,13 @@ class Command(BaseCommand):
 
 		state_parser = {
 			'01': "Aguascalientes",        '02': "Baja California", '03': "Baja California Sur", '04': "Campeche",
-			'05': "Coahuila",        '06': "Colima",          '07': "Chiapas",             '08': "Chihuahua",
-			'09': "Ciudad de México",'10': "Durango",         '11': "Guanajuato",          '12': "Guerrero",
-			'13': "Hidalgo",         '14': "Jalisco",         '15': "México",              '16': "Michoacán",
+			'05': "Coahuila de Zaragoza",  '06': "Colima",          '07': "Chiapas",             '08': "Chihuahua",
+			'09': "Ciudad de México",      '10': "Durango",         '11': "Guanajuato",          '12': "Guerrero",
+			'13': "Hidalgo",               '14': "Jalisco",         '15': "México",              '16': "Michoacán de Ocampo",
 			'17': "Morelos",               '18': "Nayarit",         '19': "Nuevo León",          '20': "Oaxaca",
 			'21': "Puebla",                '22': "Querétaro",       '23': "Quintana Roo",        '24': "San Luis Potosí",
 			'25': "Sinaloa",               '26': "Sonora",          '27': "Tabasco",             '28': "Tamaulipas",
-			'29': "Tlaxcala",        '30': "Veracruz",        '31': "Yucatán",             '32': "Zacatecas"
+			'29': "Tlaxcala",              '30': "Veracruz de Ignacio de la Llave",        '31': "Yucatán",             '32': "Zacatecas"
 		}
 
 		for p in pList:

catalog/management/commands/populate_db.py

@@ -16,6 +16,7 @@
 from django.core.management.base import BaseCommand, CommandError
 from catalog.models import Polygon
 import json, unicodedata
+from shapely.geometry import shape
 
 
 class Command(BaseCommand):
@@ -29,6 +30,17 @@ class Command(BaseCommand):
         ## base geojson files path
         base_path = options['geojson_path'][0]
 
+        states_names = {
+			'01': "Aguascalientes",        '02': "Baja California", '03': "Baja California Sur", '04': "Campeche",
+			'05': "Coahuila de Zaragoza",  '06': "Colima",          '07': "Chiapas",             '08': "Chihuahua",
+			'09': "Ciudad de México",      '10': "Durango",         '11': "Guanajuato",          '12': "Guerrero",
+			'13': "Hidalgo",               '14': "Jalisco",         '15': "México",              '16': "Michoacán de Ocampo",
+			'17': "Morelos",               '18': "Nayarit",         '19': "Nuevo León",          '20': "Oaxaca",
+			'21': "Puebla",                '22': "Querétaro",       '23': "Quintana Roo",        '24': "San Luis Potosí",
+			'25': "Sinaloa",               '26': "Sonora",          '27': "Tabasco",             '28': "Tamaulipas",
+			'29': "Tlaxcala",              '30': "Veracruz de Ignacio de la Llave",        '31': "Yucatán",             '32': "Zacatecas"
+		}
+
         ## =========================================================================================
         ## =========================================================================================
         """
@@ -37,16 +49,38 @@ class Command(BaseCommand):
         """
         ## loading files
         for index in range(1,33):
+            print ("Index: ", index)
+
             with open(base_path + str(index) + ".geojson") as f:
+                # load data
                 data = json.load(f)
-                print ("Index: ", index)
-                for feat in data['features']:
+                feature = data['features'][0]
+
+                # update name
+                feature['properties']['NOMGEO'] = states_names[feature['properties']['CVE_ENT']]
+
+                # data to save
+                geometry = shape(feature['geometry'])
+
+                # create polygon
                 polygon = Polygon(
-                        name      = self.strip_accents(feat['properties']['NOMGEO'].lower()),
-                        json_info = json.dumps(feat, ensure_ascii=True)
+                    name = self.strip_accents(feature['properties']['NOMGEO'].lower()),
+                    json_info = json.dumps(feature, ensure_ascii=True),
+                    wkt_polygon = geometry.wkt,
+                    CVE_ENT = feature['properties']['CVE_ENT']
                 )
 
+                # save to db
                 polygon.save()
+
+
+                # for feat in data['features']:
+                #     polygon = Polygon(
+                #         name      = self.strip_accents(feat['properties']['NOMGEO'].lower()),
+                #         json_info = json.dumps(feat, ensure_ascii=True)
+                #     )
+                #
+                #     polygon.save()
         ## =========================================================================================
         ## =========================================================================================
 

catalog/models.py

@@ -55,6 +55,11 @@ class Process(models.Model):
     platform = models.ForeignKey(Platform, on_delete=models.CASCADE, default='')
     productLevel = models.CharField(max_length=8, default='')
     status = models.BooleanField(default=True)
+    description = models.TextField(default="")
+    command = models.CharField(max_length=100, default='')
+    parameters = models.TextField(default="")
+    type = models.CharField(max_length=50)
+    platform_name = models.CharField(max_length=50)
 
 
 class Search(models.Model):

catalog/static/catalog/css/body.css

@@ -100,16 +100,17 @@ li.pol {
 }
 
 .pol-title {
-    font: bold 15px Helvetica;
+    font-weight: bold;
+    font-size: 15px;
     text-decoration: none;
 }
 
 .pol-body {
-    font: 11px Helvetica;
+    font-size: 11px;
 }
 
 .pol-src {
-    font: 10px Helvetica;
+    font-size: 10px;
     font-style: italic;
     padding-left: 280px;
 }
@@ -239,7 +240,6 @@ div .bg-geo {
 }
 
 .info-product-box-content {
-    font: Helvetica;
     padding: 5px 10px;
     margin-left: 90px;
 }

catalog/static/catalog/js/dataRetrieval.js

@@ -107,11 +107,17 @@ function updateCart(){
                     });
                 });
                 hideWaitingModal();
+                if (user != "demo"){
                     showCarProductsTabPanel();
+                }
                 statusUpdateCart = false;
             }
         });
     }
+    console.log(user);
+    if (user == "demo") {
+        window.location.href = "pay";
+    }
 };
 
 function deleteProductCar(element){

catalog/templates/base_top.html

@@ -26,7 +26,8 @@
           integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
 
     <!-- Fengyuan Chen's Datepicker -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css" integrity="sha256-b88RdwbRJEzRx95nCuuva+hO5ExvXXnpX+78h8DjyOE=" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css"
+          integrity="sha256-b88RdwbRJEzRx95nCuuva+hO5ExvXXnpX+78h8DjyOE=" crossorigin="anonymous"/>
 
     {% block headMedia %}{% endblock %}
 
@@ -90,11 +91,15 @@
                             {% block user %}{% endblock %}
                         </li>
                         <!-- Control Sidebar Toggle Button -->
-                        <li id="panelShowCart">{% if showcart %}
+                        {% if request.user.username == "demo" %}
+                        {% else %}
+                            <li id="panelShowCart">
+                                {% if showcart %}
                                     <a id="product-list-toggle" href="#" data-toggle="control-sidebar"><i
                                         class="fa fa-shopping-cart"></i></a>
                                 {% endif %}
                             </li>
+                        {% endif %}
                     </ul>
                 </div>
             {% endif %}
@@ -129,9 +134,12 @@
         <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
             <li id="globe" class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i
                     class="fa fa-globe"></i></a></li>
+            {% if request.user.username == 'demo' %}
+            {% else %}
                 <li id="cart"><a href="#control-sidebar-settings-tab" onclick="updateCart()" data-toggle="tab"><i
                         class="fa fa-shopping-cart"></i></a>
                 </li>
+            {% endif %}
         </ul>
         <!-- Tab panes -->
         <div class="tab-content">
@@ -145,7 +153,12 @@
                         </div>
                         <div class="sidebar-button">
                             <button type="submit" name="search" id="add-cart" class="btn btn-primary">
+                                {% if request.user.username == 'demo' %}
+                                    Process
+                                {% else %}
                                     Add to cart
+                                {% endif %}
+
                             </button>
                         </div>
                     </div>
@@ -216,8 +229,10 @@
 <!-- Chartsjs -->
 <script src="{% static 'catalog/js/Chart.min.js' %}" type="text/javascript"></script>
 <!-- Fengyuan Chen's Datepicker -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js" integrity="sha256-/7FLTdzP6CfC1VBAj/rsp3Rinuuu9leMRGd354hvk0k=" crossorigin="anonymous"></script>
-<script src="{% static 'catalog/adminlte/bower_components/guides-master/dist/guides.min.js' %}" type="text/javascript"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"
+        integrity="sha256-/7FLTdzP6CfC1VBAj/rsp3Rinuuu9leMRGd354hvk0k=" crossorigin="anonymous"></script>
+<script src="{% static 'catalog/adminlte/bower_components/guides-master/dist/guides.min.js' %}"
+        type="text/javascript"></script>
 {% block footer %}{% endblock %}
 {% block scripts %}{% endblock %}
 <div id="ol"></div>

catalog/templates/map.html

@@ -174,10 +174,14 @@
                 <li class="cloudTreeview treeview" id="searchCloud">
                     <a href="#">
                         <i class="fa fa-cloud"></i>
+                        <img id="image_clouds" class="pull-right" src=""
+                             width=40px" style="margin-top: 0px;margin-right: 10px">
                         <span>Cloud percentage</span>
                         <span class="pull-right-container">
                             <span class="label label-primary pull-right"></span>
+
                         </span>
+
                     </a>
                     <ul class="treeview-menu sidebar-form">
                         <li>
@@ -341,6 +345,7 @@
             //console.log(clouds)
             //document.getElementById("clouds").value = clouds;
             document.getElementById("clouds").innerHTML = clouds;
+            change_cloud(clouds);
         }
 
         function setCloudPercentageSlider(clouds) {
@@ -368,12 +373,28 @@
         var purch_prod_url = "{% url 'purch-prod-rqst' %}";
         var del_prod_cartDB_url = "{% url 'del-cart-rqst' %}";
         var advanced_search = '{{ advanced_search }}';
+        var user = '{{ request.user }}';
+        console.log(user);
     </script>
 
     <script>
-        $('#id_platform').click(function () {
+        $('#id_platform option:first').attr({selected: 'selected', disabled: 'disabled', hidden: 'hidden'});
+        $('#id_platform').change(function () {
             let dateTreeview = $('li.dateTreeview a');
             dateTreeview.click();
+            setTimeout(() => {
+                $("input[name='start']").datepicker('show');
+            }, 500);
+        });
+
+        $('li.dateTreeview a').click(function(){
+            setTimeout(() => {
+                $("input[name='start']").datepicker('show');
+            }, 500);
+        });
+
+        $("input[name='start']").change(function() {
+            $("input[name='end']").datepicker('show');
         });
 
         $('#id_end').on('hide.datepicker', function (e) {
@@ -386,7 +407,7 @@
 {% endblock %}
 
 {% block guide %}
-<script>
+    <script>
         $('#initGuide').guides({
             guides: [
                 {
@@ -438,9 +459,37 @@
                 }
             ],
             end: function () {
-            console.log("Finished")
                 $('.main-header').removeClass('activateMainHeader');
             }
         });
-</script>
+
+        function change_cloud(data) {
+            if (data == 0){
+                console.log('de 20 a 29 ' + data + '.');
+                document.getElementById('image_clouds').src="";
+            }
+
+            if (data >1 && data <=19){
+                console.log('de 20 a 29 ' + data + '.');
+                document.getElementById('image_clouds').src="{% static 'catalog/images/cloud1.png' %}";
+            }
+            if (data >20 && data <=39){
+                console.log('de 20 a 29 ' + data + '.');
+                document.getElementById('image_clouds').src="{% static 'catalog/images/cloud2.png' %}";
+            }
+            if (data >40 && data <=59){
+                console.log('de 20 a 29 ' + data + '.');
+                document.getElementById('image_clouds').src="{% static 'catalog/images/cloud3.png' %}";
+            }
+            if (data >60 && data <=79){
+                console.log('de 20 a 29 ' + data + '.');
+                document.getElementById('image_clouds').src="{% static 'catalog/images/cloud4.png' %}";
+            }
+            if (data >80 && data <=100){
+                console.log('de 20 a 29 ' + data + '.');
+                document.getElementById('image_clouds').src="{% static 'catalog/images/cloud5.png' %}";
+            }
+        }
+
+    </script>
 {% endblock %}
\ No newline at end of file

catalog/templates/user_button.html

@@ -28,12 +28,18 @@
         <li>
             <a class="treeview " href="{% url 'reports' %}">
                 <i class="fa fa-history"></i>
+                {% if request.user.username == "demo" %}
+                    <span>Reports</span>
+                {% else %}
                     <span>Shopping History</span>
+                {% endif %}
                 <span class="pull-right-container">
                             <span class="label label-primary pull-right"></span>
                         </span>
             </a>
         </li>
+        {% if request.user.username == "demo" %}
+        {% else %}
         <li>
             <a class="treeview " href="{% url 'show-cart' %}">
                 <i class="fa fa-shopping-cart"></i>
@@ -43,6 +49,7 @@
                         </span>
             </a>
         </li>
+        {% endif %}
         <li>
             <a class="treeview " href="{% url 'logout' %}?next={{ request.path }}">
                 <i class="glyphicon glyphicon-log-out"></i>

catalog/views.py

@@ -100,17 +100,25 @@ def productList(request):
     end_date = req['end'][0][:10]
     clouds = req['cloudPercentage'][0]
     search_name = req['search_name'][0]
-    print (search_name)
 
     description = req['area_description'][0]
 
-    print(search_name)
     cloud_percentage = "[0 TO " + req['cloudPercentage'][0] + "]"
 
+    process_info = Process.objects.values('name', 'platform_id', 'productLevel','type','platform__name').filter(id = process)
+    #print(process_info)
+
+    platform_name =  process_info[0]['platform__name']  # Sentinel-2 ó Sentinel-1
+    product_type = process_info[0]['type']              # S2MSI1C o S2MSI2A
+    platform_id = process_info[0]['platform_id']
+    #print(platform_name)
+    #print(product_type)
+
+
     ## ----- aqui llamada a api sentinel
     ## ----- antes consultar en DB si no se tiene ya el producto
     date = ("".join(init_date.split('-')), "".join(end_date.split('-')))
-    params = {"platformname": "Sentinel-2"}
+    params = {"platformname": platform_name}
 
     # if cloud_percentage.strip():
     #     params['cloudcoverpercentage'] = cloud_percentage
@@ -120,19 +128,19 @@ def productList(request):
     pol_bbox = polygonToBox.getWKTPolygonBoundingBox(area, True)
 
     ##producttype:
-    type = " "
-    print(process)
-    if process == str(1):
-        type = "S2MSI1C"
-    if process == str(2):
-        type = "S2MSI2A"
+    type = product_type
+    #print(process)
+    #~ if process == str(1):
+        #~ type = "S2MSI1C"
+    #~ if process == str(2):
+        #~ type = "S2MSI2A"
 
     ## requesting producto to sentinel api
     ##products = sentinel.getProducts(pol_bbox, date, params)
     products = sentinel.getProducts(pol_bbox, date,
-                                    {"platformname": "Sentinel-2", "producttype": type, "cloudcoverpercentage": cloud_percentage},"Contains")  ##intenta obtener los productos que contienen el polígono
+                                    {"platformname": platform_name, "producttype": type, "cloudcoverpercentage": cloud_percentage},"Contains")  ##intenta obtener los productos que contienen el polígono
     if len(products) <= 0:
-        products = sentinel.getProducts(pol_bbox, date, {"platformname": "Sentinel-2", "producttype": type,"cloudcoverpercentage": cloud_percentage})  ## si no hay que contengan el polígono busca los que lo intersecan
+        products = sentinel.getProducts(pol_bbox, date, {"platformname": platform_name, "producttype": type,"cloudcoverpercentage": cloud_percentage})  ## si no hay que contengan el polígono busca los que lo intersecan
     ##--
 
 
@@ -169,7 +177,7 @@ def productList(request):
         })
 
     # Se tiene que pasar a Search el objeto completo correspondiente al process
-    index = Process.objects.filter(platform_id=process)
+    index = Process.objects.filter(platform_id=platform_id)
     proceso = index[0]
 
     if (len(catalog) != 0):
@@ -184,8 +192,6 @@ def productList(request):
             description = description,
 
         )
-        print ("---------------------------")
-        print (search_name)
         listSearch.save()
 
     return JsonResponse({'catalog': catalog});
@@ -217,10 +223,15 @@ class SearchSubmitView(View):
             for polygon in polygonList:
                 polygonInfo = json.loads(polygon.json_info)
 
+                if 'ENT_NAME' in polygonInfo['properties']:
+                    state_name = polygonInfo['properties']['ENT_NAME']
+                else:
+                    state_name = ""
+
                 data_list.append({
                     'id': str(polygon.id),
                     'city': polygonInfo['properties']['NOMGEO'],
-                    'state': polygonInfo['properties']['ENT_NAME'],
+                    'state': state_name,
                     'geojson': polygonInfo,
                     'wkt_polygon': polygon.wkt_polygon,
                     'description': polygon.description,

reports/static/reports/css/control-map.css

+.mapControl{
+  width: 33%;
+  height: auto;
+  position: absolute;
+  right: 15px;
+  bottom: 0px;
+  z-index: 10;
+}
+
+.controlContainer{
+  width: auto;
+  max-height: 60vh;
+  border-radius: 8px;
+  padding: 3px;
+  padding-right: 5px;
+}
+
+.baseMap{
+  height: 61px;
+  width: 78px;
+  padding:3px;
+  cursor: pointer;
+  background-color: white;
+  border-radius: 2px;
+}
+
+.mapSelector input[type="radio"]{
+  margin-right: 2px;
+  vertical-align: sub;
+}
+
+.mapSelector span{
+  font-weight: bold;
+}
+
+
+.baseMap img{
+  border-radius: 8px;
+}
+
+.mapSelector{
+  position: relative;
+  bottom: 2em;
+  padding: 4px;
+  background-color: rgba(0, 0, 0, 0.7);
+  color: white;
+  font-size: 12px;
+}

reports/static/reports/css/scldata.css

@@ -218,6 +218,7 @@ select::-ms-expand {
   transition: .25s all ease;
 }
 
+/* range normal */
 
 .arrow_box {
 	position: relative;
@@ -251,3 +252,70 @@ select::-ms-expand {
 }
 
 
+/* range de comparacion */
+
+/* left */
+.arrow_box_left {
+	position: relative;
+	background: #ffffff;
+	border: 1px solid #ffa74f;
+    min-height: 30px;
+    bottom: 10px;
+}
+.arrow_box_left:after, .arrow_box_left:before {
+	top: 100%;
+	left: 50%;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+}
+
+.arrow_box_left:after {
+	border-color: rgba(255, 255, 255, 0);
+	border-top-color: #ffffff;
+	border-width: 10px;
+	margin-left: -10px;
+}
+.arrow_box_left:before {
+	border-color: rgba(255, 167, 79, 0);
+	border-top-color: #ffa74f;
+	border-width: 11px;
+	margin-left: -11px;
+}
+
+
+
+/* left */
+.arrow_box_right {
+	position: relative;
+	background: #ffffff;
+	border: 1px solid #ffa74f;
+    min-height: 30px;
+    bottom: 10px;
+}
+.arrow_box_right:after, .arrow_box_right:before {
+	top: 100%;
+	left: 50%;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+}
+
+.arrow_box_right:after {
+	border-color: rgba(255, 255, 255, 0);
+	border-top-color: #ffffff;
+	border-width: 10px;
+	margin-left: -10px;
+}
+.arrow_box_right:before {
+	border-color: rgba(255, 167, 79, 0);
+	border-top-color: #ffa74f;
+	border-width: 11px;
+	margin-left: -11px;
+}
\ No newline at end of file

reports/static/reports/js/Reports_scripts.js

@@ -131,6 +131,9 @@ function createmap(data) {
         })
     });
 
+    // fit (zoom) to polygon
+    map.getView().fit(feature.getGeometry());
+
 }
 
 
@@ -170,4 +173,3 @@ function is_public(purchase_id, status) {
         }
     });
 }
-

reports/static/reports/js/minimap.js

@@ -10,13 +10,28 @@ const polygonFeature = wktFormat.readFeature(polygon, {
 });
 
 // Create layers
-const mapLayer = new ol.layer.Tile({
+const light = new ol.layer.Tile({
     name: 'mapbox',
     source: new ol.source.XYZ({
-    url:'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token='+MAPBOX_ACCESS_TOKEN
+        url: 'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=' + MAPBOX_ACCESS_TOKEN
     })
 });
 
+const streets = new ol.layer.Tile({
+    name: 'mapbox',
+    source: new ol.source.XYZ({
+        url: 'http://tile.openstreetmap.org/{z}/{x}/{y}.png'
+    })
+});
+
+const night = new ol.layer.Tile({
+    name: 'mapbox',
+    source: new ol.source.XYZ({
+        url: 'https://api.mapbox.com/styles/v1/mapbox/navigation-guidance-night-v2/tiles/256/{z}/{x}/{y}?access_token=' + MAPBOX_ACCESS_TOKEN
+    })
+});
+
+
 const polygonLayer = new ol.layer.Vector({
     name: 'polygon',
     source: new ol.source.Vector({
@@ -29,11 +44,11 @@ const layers = new Map();
 // create map
 const map = new ol.Map({
     target: 'minimap',
-  layers: [mapLayer, polygonLayer],
+    layers: [light, polygonLayer],
     view: new ol.View({
         center: ol.proj.fromLonLat([-99.19, 19.61]),
         zoom: 4,
-    minZoom:4
+        minZoom: 4
     })
 });
 
@@ -79,7 +94,7 @@ function changeLayers(especific_layerName) {
             name: layerName,
             source: new ol.source.XYZ({
                 projection: 'EPSG:3857',
-        url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layerName+'/'+currentDate+'/{z}/{x}/{-y}.png',
+                url: '/reports/tiles/' + purchase_id + '/' + zone + '/' + layerName + '/' + currentDate + '/{z}/{x}/{-y}.png',
                 tilePixelRatio: 2
             })
         });
@@ -97,7 +112,9 @@ function changeLayers(especific_layerName) {
 // remove all if there isn't layername
 function removeLayer(layerName) {
     if (!layerName) {
-    layers.forEach(layer => { map.removeLayer(layer); });
+        layers.forEach(layer => {
+            map.removeLayer(layer);
+        });
         layers.clear();
         return;
     }
@@ -109,7 +126,7 @@ function removeLayer(layerName) {
 // set opacity to layers
 function setOpacity(value) {
     layers.forEach(layer => {
-    if(layer.get('name') != 'TCI') {
+        if (layer.get('name') != 'TCI') {
             layer.setOpacity(value)
         }
     })
@@ -121,16 +138,16 @@ function setOpacity(value) {
 
 //vigila cuando se cierra el menu de comparar y cuando se cierra desactiva la comparacion (si la clase de compare incluye menu-open está abierto)
 var compareMenu = document.getElementById('compare');
-var observer = new MutationObserver( function(mutations) {
-  mutations.forEach( function(mutation) {
+var observer = new MutationObserver(function (mutations) {
+    mutations.forEach(function (mutation) {
         if (mutation.attributeName == 'class') {
-      if(compareMenu.className.indexOf("open")===-1) {  //se cerró el menu de comparacion
+            if (compareMenu.className.indexOf("open") === -1) {  //se cerró el menu de comparacion
                 exitCompare();
             }
         }
     });
 });
-observer.observe(compareMenu, { attributes : true, attributeOldValue: true, attributeFilter : ['class'], subtree: true});
+observer.observe(compareMenu, {attributes: true, attributeOldValue: true, attributeFilter: ['class'], subtree: true});
 
 //crea el control swipe, que sirve para comparar
 var ctrl = new ol.control.Swipe();
@@ -141,12 +158,12 @@ function compare(labels) {
     var swipeControl = false;
 
     map.getControls().forEach(function (control) {  //checa si ya se añadio el control de comparacion (swipe), si no lo tiene, lo agrega
-    if(control instanceof ol.control.Swipe){ //si ya tiene el control agregado
-      swipeControl =true;
+        if (control instanceof ol.control.Swipe) { //si ya tiene el control agregado
+            swipeControl = true;
         }
     });
 
-  if(swipeControl==true) {  //si ya tiene el comparador no hace nada, ya esta en modo comparacion
+    if (swipeControl == true) {  //si ya tiene el comparador no hace nada, ya esta en modo comparacion
         //map.removeControl(swipeControlObj);
     } else {  //si no tiene el comparador lo agrega
         //removeImageLayers();
@@ -154,11 +171,14 @@ function compare(labels) {
         ctrl.set('position', 0.5);
         //console.log(map.controls)
         var labelDateLeft = labels[0]                 //por default compara la primera y ultima fecha
-    var labelDateRight = labels[labels.length-1]
+        var labelDateRight = labels[labels.length - 1]
+
+
+
 
         //pone las fechas por default en los selectores de fechas
-    document.getElementById("selectLeftCompare").value = labelDateLeft;
-    document.getElementById("selectRightCompare").value = labelDateRight;
+        //document.getElementById("selectLeftCompare").value = labelDateLeft;
+        //document.getElementById("selectRightCompare").value = labelDateRight;
 
         //agrega las capas izquierda/derecha
         selectLeft(labelDateLeft);
@@ -168,13 +188,14 @@ function compare(labels) {
         document.getElementById("selectLeft").style.display = "block";
         document.getElementById("selectRight").style.display = "block";
         document.getElementById("timeLine").style.display = "none";
+
     }
 }
 
 //sale del modo comparacion
 function exitCompare() {
     map.getControls().forEach(function (control) {  //checa si ya se añadio el control de comparacion (swipe)
-    if(control instanceof ol.control.Swipe){ //ya tiene el control agregado lo quita
+        if (control instanceof ol.control.Swipe) { //ya tiene el control agregado lo quita
             map.removeControl(control);
         }
     });
@@ -182,7 +203,7 @@ function exitCompare() {
     //quita las capas de comparacion izquierda/derecha
     var imageLayers = map.getLayers().getArray().slice();
     imageLayers.forEach(layer => {
-    if(layer.get('name') === 'left' || layer.get('name') === 'right') {
+        if (layer.get('name') === 'left' || layer.get('name') === 'right') {
             map.removeLayer(layer)
         }
     })
@@ -203,7 +224,7 @@ function selectLeft(date) {
         opacity: 1,
         source: new ol.source.XYZ({
             projection: 'EPSG:3857',
-      url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layer_type+'/'+labelDateLeft+'/{z}/{x}/{-y}.png',
+            url: '/reports/tiles/' + purchase_id + '/' + zone + '/' + layer_type + '/' + labelDateLeft + '/{z}/{x}/{-y}.png',
             tilePixelRatio: 2,
             minZoom: 10,
             maxZoom: 15
@@ -214,7 +235,10 @@ function selectLeft(date) {
 }
 
 //selecciona el lado derecho para comparar
-function selectRight(date){
+function selectRight(date) {
+    console.log("---------");
+    console.log(date)
+    console.log("---------");
     var labelDateRight = date;
     var layer_type = 'TCI';
     const right = new ol.layer.Tile({
@@ -222,7 +246,7 @@ function selectRight(date){
         opacity: 1,
         source: new ol.source.XYZ({
             projection: 'EPSG:3857',
-        url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layer_type+'/'+labelDateRight+'/{z}/{x}/{-y}.png',
+            url: '/reports/tiles/' + purchase_id + '/' + zone + '/' + layer_type + '/' + labelDateRight + '/{z}/{x}/{-y}.png',
             tilePixelRatio: 2,
             minZoom: 10,
             maxZoom: 15
@@ -233,20 +257,59 @@ function selectRight(date){
 }
 
 //selecciona comparacion vertical u horizontal
-function setCompareDirection(direction){
-  ctrl.set('orientation',direction)
+function setCompareDirection(direction) {
+    ctrl.set('orientation', direction)
 
     //mueve los selectores de fechas
-  if(direction === 'horizontal'){
+    if (direction === 'horizontal') {
         document.getElementById("selectLeft").style.bottom = "70%";
         document.getElementById("selectLeft").style.left = "15%";
         document.getElementById("selectRight").style.left = "15%";
     }
-  else{
+    else {
         document.getElementById("selectLeft").style.bottom = "50px";
         document.getElementById("selectLeft").style.left = "30%";
         document.getElementById("selectRight").style.left = "75%";
     }
 }
+
 //  Fin funciones de comparacion
 //******************************
+
+/************************* Functions de layer Sources ******************************/
+let currentMap = light;
+
+function changeMap(selectedMap) {
+    map.getLayers().getArray().forEach(function (layer) {
+        if (layer.values_.name == "mapbox") {
+            map.removeLayer(layer)
+        }
+    })
+    $('#' + selectedMap).prop('checked', true);
+    switch (selectedMap) {
+        case 'light':
+            map.getLayers().insertAt(0, light);
+            currentMap = light;
+            break;
+        case 'streets':
+            map.getLayers().insertAt(0, streets);
+            currentMap = streets;
+            break;
+        case 'night':
+            map.getLayers().insertAt(0, night);
+            currentMap = night;
+            break;
+    }
+}
+
+function showControlMap() {
+    if ($('#showControlMap').is(':visible')) {
+        $("#showControlMap").hide();
+        $("#hideControlMap").show();
+        $(".mapControl").show();
+    } else {
+        $("#showControlMap").show();
+        $("#hideControlMap").hide();
+        $(".mapControl").hide();
+    }
+}
\ No newline at end of file

reports/static/reports/js/reportImg.js

@@ -32,6 +32,9 @@ document.getElementById("myChart").onclick = function (evt) {
           layerDate: label
         });
 
+        // update date slider
+        $('input[id="inputRange"]').val(firstPoint._index);
+
         //console.log(myChart.legend.legendItems[firstPoint._datasetIndex].text) //nombre de la capa a la que pertenece (vegetación, agua, etc.)
         //if (!firstPoint) return;
         activePoints.forEach(function (value, index) {

reports/templates/aside.html

@@ -164,7 +164,6 @@
                         <i class="fa fa-file-zip-o"></i>
                         <span>Export to Zip</span>
                         <span class="pull-right-container">
-
                         <span class="label label-primary pull-right"></span>
                     </span>
                     </a>
@@ -188,6 +187,15 @@
                     </span>
                     </a>
                 </li>
+                <li>
+                    <a class="treeview submenu"  href="../../static/reports/tmpImages/repsat_test_dev/{{ email }}/{{ purchaseID }}/myvideo.mp4">
+                        <i class="fa fa-file-video-o"></i>
+                        <span>Video</span>
+                        <span class="pull-right-container">
+                        <span class="label label-primary pull-right"></span>
+                    </span>
+                    </a>
+                </li>
             </ul>
         </li>
         <li class="treeview">
@@ -284,6 +292,18 @@
             </ul>
         </li>
 
+        <li>
+            <a class="treeview " href="#" onclick="showControlMap()">
+                <i class="fa fa-globe"></i>
+                <i class="fa fa-globe" style="display:none"></i>
+                <span id="showControlMap">Show Maps</span>
+                <span id="hideControlMap" style="display:none">Hide Maps</span>
+                <span class="pull-right-container">
+                    <span class="label label-primary pull-right"></span>
+                </span>
+            </a>
+        </li>
+
 
   <!--      <li>
             <a class="treeview " href="#" onclick="showComparisons()">

reports/templates/sclData.html

@@ -5,6 +5,7 @@
     <link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'reports/css/scldata.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'reports/css/crossrange.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'reports/css/control-map.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'reports/css/ol-ext.css' %}" type="text/css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
@@ -135,23 +136,67 @@
         </div>
     </div>
 
-    <div id="selectLeft" class="container floating-panel" style="position:absolute; display:none; bottom: 50px; left: 30%; width: 300px; z-index: 1000">
-        <div class="select">
-                <select onchange="selectLeft(this.value)" id="selectLeftCompare">
+    <div id="selectLeft" class="container floating-panel"
+         style="position:absolute; display:none; bottom: 50px; left: 30%; width: 300px; z-index: 1000">
+        <div class="">
+            <div id="rangecontrol3"></div>
+            <!--<select onchange="selectLeft(this.value)" id="selectLeftCompare">
                  {% for label in labels %}
                        <option value="{{label}}" >{{ label|slice:"6:8" }}/{{ label|slice:"4:6" }}/{{label|slice:"0:4" }}</option>
                  {% endfor %}
-                </select>
+                </select>-->
+            <input class="cross-range" id="selectLeftCompare" type="range" min="0" max="{{ labels|length|add:'-1' }}"
+                   step="1" value="0" data-thumbwidth="20" style="background: transparent;">
         </div>
     </div>
 
-    <div id="selectRight" class="container floating-panel" style="position:absolute; display:none; bottom: 50px; left: 75%; width: 300px; z-index: 1000">
-        <div class="select">
-                <select onchange="selectRight(this.value)" id="selectRightCompare">
+    <div id="selectRight" class="container floating-panel"
+         style="position:absolute; display:none; bottom: 50px; left: 75%; width: 300px; z-index: 1000">
+        <div>
+        <div id="rangecontrol4"></div>
+            <!--<select onchange="selectRight(this.value)" id="selectRightCompare">
                  {% for label in labels %}
                        <option value="{{label}}" >{{ label|slice:"6:8" }}/{{ label|slice:"4:6" }}/{{label|slice:"0:4" }}</option>
                  {% endfor %}
-                </select>
+                </select>-->
+            <input class="cross-range" id="selectRightCompare" type="range" min="0" max="{{ labels|length|add:'-1' }}"
+                   step="1" value="0" data-thumbwidth="20" style="background: transparent;">
+        </div>
+    </div>
+
+    <div class="mapControl" style="display: none">
+        <div class="mapControl" style="">
+            <div id="controlMap" class="controlContainer">
+                <div class="row">
+                    <div class="col-lg-4">
+                        <div class="baseMap" onclick="changeMap('light')">
+                            <img src="../../static/images/light.png" width="100%" height="100%">
+                            <span class="mapSelector">
+                                <input id="light" type="radio" name="layerOption" checked="">
+                                <span>Noon</span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="col-lg-4">
+                        <div class="baseMap" onclick="changeMap('streets')">
+                            <img src="../../static/images/Streets.png" width="100%" height="100%">
+                            <span class="mapSelector">
+                                <input id="streets" type="radio" name="layerOption">
+                                <span>Streets</span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="col-lg-4">
+                        <div class="baseMap" onclick="changeMap('night')">
+                            <img src="../../static/images/night.png" width="100%" height="100%">
+                            <span class="mapSelector">
+                                <input id="night" type="radio" name="layerOption">
+                                <span>Night</span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 
@@ -309,45 +354,80 @@
             let fecha = $("option:eq(" + controlVal + ")").text();
             let valor = $("option:eq(" + controlVal + ")").val();
 
+
             var slider3 = $("#inputRange")[0];
             var sliderPos = slider3.value / slider3.max;
 
             var pixelPostion = slider3.clientWidth * sliderPos;
-            //this is your pixel value
-            console.log(pixelPostion);
 
             addImageLayer({
               layerDate: valor
             });
 
-            $("#maptitle").empty();
-            $("#maptitle").append("Map Date: " + fecha);
+
             $("#tooltiptext").empty();
             $("#tooltiptext").append(fecha);
-            console.log(position);
             $("#rangecontrol2").empty();
             $("#rangecontrol2").append('<span class="arrow_box" id="tooltiptext">'+fecha+'</span>');
             $('.arrow_box').css({'left':Math.round(pixelPostion-35) + 'px'})
+        });
+
+        $('input[id="selectLeftCompare"]').on('input', function () {
+            let control = $(this);
+            let controlMin = control.attr('min');
+            let controlMax = control.attr('max');
+            let controlVal = control.val();
+            let controlThumbWidth = control.data('thumbwidth');
+            let range = controlMax - controlMin;
+            let position = (controlVal - controlMin) / range * 100;
+            let positionOffset = Math.round(controlThumbWidth * position / 100) - controlThumbWidth / 2;
+            let fecha = $("option:eq(" + controlVal + ")").text();
+            let valor = $("option:eq(" + controlVal + ")").val();
+            selectLeft(valor);
+
+            var slider3 = $("#selectLeftCompare")[0];
+            var sliderPos = slider3.value / slider3.max;
+
+            var pixelPostion = slider3.clientWidth * sliderPos;
+
+
+
+
+            $("#tooltiptext2").empty();
+            $("#tooltiptext2").append(fecha);
+            $("#rangecontrol3").empty();
+            $("#rangecontrol3").append('<span class="arrow_box_left" id="tooltiptext2">'+fecha+'</span>');
+            $('.arrow_box_left').css({'left':Math.round(pixelPostion-35) + 'px'})
+        });
+
+
+        $('input[id="selectRightCompare"]').on('input', function () {
+            let control = $(this);
+            let controlMin = control.attr('min');
+            let controlMax = control.attr('max');
+            let controlVal = control.val();
+            let controlThumbWidth = control.data('thumbwidth');
+            let range = controlMax - controlMin;
+            let position = (controlVal - controlMin) / range * 100;
+            let positionOffset = Math.round(controlThumbWidth * position / 100) - controlThumbWidth / 2;
+            let fecha = $("option:eq(" + controlVal + ")").text();
+            let valor = $("option:eq(" + controlVal + ")").val();
+            selectRight(valor);
+
+            var slider3 = $("#selectRightCompare")[0];
+            var sliderPos = slider3.value / slider3.max;
+
+            var pixelPostion = slider3.clientWidth * sliderPos;
+
+
 
 
+            $("#tooltiptext3").empty();
+            $("#tooltiptext3").append(fecha);
+            $("#rangecontrol4").empty();
+            $("#rangecontrol4").append('<span class="arrow_box_right" id="tooltiptext3">'+fecha+'</span>');
+            $('.arrow_box_right').css({'left':Math.round(pixelPostion-35) + 'px'})
         });
-/*
-        var slider2 = document.getElementById("inputRange");
-        var sliderOffsetX = slider2.getBoundingClientRect().left ;//- document.documentElement.getBoundingClientRect().left;
-        var sliderOffsetY = slider2.getBoundingClientRect().top ;//- document.documentElement.getBoundingClientRect().top;
-        var sliderWidth = slider2.offsetWidth ;
-
-        slider2.addEventListener('mousemove', function (event) {
-            var currentMouseXPos = (event.clientX + window.pageXOffset) - sliderOffsetX;
-            var sliderValAtPos = Math.round(currentMouseXPos / sliderWidth * {{ labels|length }}+1);
-            value = sliderValAtPos - 1;
-            var fecha = $("option:eq(" + value + ")").text();
-            var valor = $("option:eq(" + value + ")").val();
-
-            //$("#tooltiptext").empty();
-            //$("#tooltiptext").css({"margin-left": currentMouseXPos + 'px', "margin-top": sliderOffsetY + 'px'});
-            //$("#tooltiptext").append(fecha);
-        });*/
     </script>
 
     <!-- page script -->

reports/views.py

@@ -109,14 +109,25 @@ def Reports(request):
     folders = []
     zip = ""
 
+    if(request.user.username == "demo"):
+        product_list = Purchase.objects.values('id', 'productList', 'aggreg_date', 'search__clouds',
+                'search__startDate', 'search__endDate', 'search__process_id__name',
+                'search__search_name', 'is_public','name','description', 'user__email'
+            ).filter(
+                user_id__in=[request.user.id, 37, 2],
+                purchased=1
+            )
+    else:
+        product_list = Purchase.objects.values('id', 'productList', 'aggreg_date', 'search__clouds',
+                'search__startDate', 'search__endDate', 'search__process_id__name',
+                'search__search_name', 'is_public','name','description', 'user__email'
+            ).filter(
+                user_id=request.user.id,
+                purchased=1
+            )
 
-
-    product_list = Purchase.objects.values('id', 'productList', 'aggreg_date', 'search__clouds', 'search__startDate',
-                                           'search__endDate', 'search__process_id__name', 'search__search_name',
-                                           'is_public','name','description').filter(
-        user_id=request.user.id, purchased=1)
     for producto in product_list:
-        log_info = USERS_PATH + request.user.email + "/" + str(producto['id']) + "/L2ASCL_AreaProcessing.log"
+        log_info = USERS_PATH + producto['user__email'] + "/" + str(producto['id']) + "/L2ASCL_AreaProcessing.log"
 
         #####################################################
         #                progress bar                       #
@@ -150,13 +161,13 @@ def Reports(request):
 
 
         initial_folder = "."
-        absolute_path = USERS_PATH + request.user.email + "/" + str(producto['id']) + "/"
+        absolute_path = USERS_PATH + producto['user__email'] + "/" + str(producto['id']) + "/"
         if not os.path.exists(absolute_path):
             print("folder out noes not exists")
         else:
             for files in os.listdir(absolute_path):
                 if files == 'scl_data.json':
-                    # print(files)
+                    # +(files)
                     initial_folder = files[:8]
                     break
                 elif files.endswith('_sclData.json'):
@@ -168,12 +179,12 @@ def Reports(request):
 
 
 
-        zip_path = USERS_PATH + request.user.email + "/" + str(producto['id'])
+        zip_path = USERS_PATH + producto['user__email'] + "/" + str(producto['id'])
         # print(zip_path)
 
         # "../ static / reports / tmpImages / repsat_test_dev / umorales @ centrogeo.edu.mx / "+str(producto['id']) / myzip.zip"
 
-        wkt = USERS_PATH + request.user.email + "/" + str(producto['id']) + "/findProducts.json"
+        wkt = USERS_PATH + producto['user__email'] + "/" + str(producto['id']) + "/findProducts.json"
         with open(wkt, 'r') as jsonfile:
             polygon = json.load(jsonfile)
 
@@ -266,6 +277,7 @@ def wsProcessProgress(request):
             })
 
             progress = 0
+            progress_text =""
             log_info = ""
 
         # productList2 = []

users/templates/User_profile.html

@@ -157,7 +157,11 @@
                                     </li>
                                     <!-- timeline item -->
                                     <li>
+                                        {% if request.user.username == "demo" %}
+                                            <i class="fa fa-file-text bg-green-active"></i>
+                                        {% else %}
                                             <i class="fa fa-cart-arrow-down bg-green-active"></i>
+                                        {% endif %}
 
                                         <div class="timeline-item">
                                             <span class="time">
@@ -169,7 +173,7 @@
                                                 </a>
                                             </span>
 
-                                            <h3 class="timeline-header no-border">You bought
+                                            <h3 class="timeline-header no-border">
                                                 <br>Process: <b>{{ product.process }}</b>
                                                 <br>Area: <b>{{ product.search_name }}</b>
                                                 <br>Size: <b>{{ product.size }}</b>
@@ -200,7 +204,12 @@
                                 <hr>
                             </div>
                             <div class="container">
+                                {% if request.user.username == "demo" %}
+                                    <h3 class="box-title" id="purchases_in">Reports Per Month</h3>
+                                {% else %}
                                     <h3 class="box-title" id="purchases_in">Purchases Per Month</h3>
+                                {% endif %}
+
                                 <div id="mostrar">
 
                                 </div>
@@ -364,7 +373,12 @@
             var label = myChart.data.labels[firstPoint._index];
             //if (!firstPoint) return;
             $('#purchases_in').empty();
-            $('#purchases_in').append("Purchases in " + label);
+            {% if request.user.username == "demo" %}
+                $('#purchases_in').append("Reports in " + label);
+            {% else %}
+                $('#purchases_in').append("Reports in " + label);
+            {% endif %}
+
 
 
             $.ajax({
@@ -382,7 +396,7 @@
                         "<tr>" +
                         "<th class=\"text-center\">Zone</th>" +
                         "<th class=\"text-center\">Process</th>" +
-                        "<th class=\"text-center\">Purchase Date</th>" +
+                        "<th class=\"text-center\">Consultation Date</th>" +
                         "<th class=\"text-center\">Start Date</th>" +
                         "<th class=\"text-center\">End Date</th>" +
                         "</tr>" +

users/templates/profile.html

@@ -80,9 +80,16 @@
                         <i class="fa fa-search margin-r-5"></i> <b>Searches</b> <a
                             class="pull-right">{{ data.searches }}</a>
                     </li>
+
                     <li class="list-group-item">
-                        <i class="fa fa-shopping-cart margin-r-5"></i> <b>Purchases</b> <a
-                            class="pull-right">{{ data.purchases }}</a>
+                        <i class="fa fa-shopping-cart margin-r-5"></i>
+                        {% if request.user.username == "demo" %}
+                            <b>Reports</b>
+                        {% else %}
+                            <b>Purchases</b>
+                        {% endif %}
+
+                        <a class="pull-right">{{ data.purchases }}</a>
                     </li>
                     <li class="list-group-item">
                         <i class="fa fa-download margin-r-5"></i> <b>In Process</b> <a
@@ -92,23 +99,23 @@
                         <i class="fa fa-pie-chart margin-r-5"></i> <b>Disk usage</b> <a
                             class="pull-right">{{ data.size }}</a>
                     </li>
-                    <li class="list-group-item">
 
-                        <div class="row  ccontent ">
-                            <div class="col-md-10 col-xs-10 col-lg-10 col-sm-10 col-xl-10">
+
+                    <li class="list-group-item">
                         <i class="fa fa-search-plus margin-r-5"></i>
                         <b>Advanced Search</b>
-                            </div>
-                            <div class="col-md-2 col-xs-2 col-lg-2 col-sm-2 col-xl-2 pull-right">
+                        <a class="pull-right">
                             <label class="switch">
                                 <input class="pull-right" id="{{ data.user_id }}" type="checkbox"
                                        onclick="change_permission({{ data.user_id }})"
                                         {% if data.advanced_search == True %} checked {% endif %}>
                                 <span class="slider round pull-right" style="margin-right: 0px"></span>
                             </label>
-                            </div>
-                        </div>
+                        </a>
                     </li>
+
+
+
                 </ul>
 
                 <!--a href="#" class="btn btn-primary btn-block"><b>Follow</b></a-->
@@ -148,16 +155,16 @@
 <script>
 
 
-function change_permission(user_id) {
+    function change_permission(user_id) {
         var checkBox = document.getElementById(user_id);
         if (checkBox.checked == true) {
             permission(user_id, 'True');
         } else {
             permission(user_id, 'False');
         }
-}
+    }
 
-function permission(user_id, status) {
+    function permission(user_id, status) {
         $.ajax({
             dataType: "json",
             url: 'ws/change_permission',
@@ -166,6 +173,6 @@ function permission(user_id, status) {
                 alert(data);
             }
         });
-}
+    }
 
 </script>
\ No newline at end of file