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

catalog/static/catalog/css/crossrange.css

+.cross-range {
+  -webkit-appearance: none;
+  width: 100%;
+  margin: 4.05px 0;
+}
+.cross-range:focus {
+  outline: none;
+}
+.cross-range::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 7.9px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: #dc7828;
+  border-radius: 25px;
+  border: 1px solid #dc7828;
+}
+.cross-range::-webkit-slider-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 16px;
+  width: 16px;
+  border-radius: 50px;
+  background: #ffffff;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -5.05px;
+}
+.cross-range:focus::-webkit-slider-runnable-track {
+  background: #e0863e;
+}
+.cross-range::-moz-range-track {
+  width: 100%;
+  height: 7.9px;
+  cursor: pointer;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  background: #dc7828;
+  border-radius: 25px;
+  border: 1px solid #dc7828;
+}
+.cross-range::-moz-range-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 16px;
+  width: 16px;
+  border-radius: 50px;
+  background: #ffffff;
+  cursor: pointer;
+}
+.cross-range::-ms-track {
+  width: 100%;
+  height: 7.9px;
+  cursor: pointer;
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+}
+.cross-range::-ms-fill-lower {
+  background: #ca6c21;
+  border: 1px solid #dc7828;
+  border-radius: 50px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+.cross-range::-ms-fill-upper {
+  background: #dc7828;
+  border: 1px solid #dc7828;
+  border-radius: 50px;
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+}
+.cross-range::-ms-thumb {
+  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  border: 1px solid #000000;
+  height: 16px;
+  width: 16px;
+  border-radius: 50px;
+  background: #ffffff;
+  cursor: pointer;
+  height: 7.9px;
+}
+.cross-range:focus::-ms-fill-lower {
+  background: #dc7828;
+}
+.cross-range:focus::-ms-fill-upper {
+  background: #e0863e;
+}
+
+#opacitySlide {
+  background: transparent;
+  padding-left: 10px;
+  padding-right: 10px;
+}

catalog/static/catalog/js/dataRetrieval.js

@@ -237,11 +237,15 @@ function drawApiResponse(element) {
         if (data.uuid === element.id.replace("-li", '')) {
             console.log("footprint:\n", data.product.footprint);
             if (!prevfeature.has(data.uuid)){
-                element.style.textDecoration = 'underline';
+                //element.style.textDecoration = 'underline';
+                let divh4 = element.children[0].children[1].children[0];
+                divh4.innerHTML = divh4.textContent + ' <i class="fa fa-eye" style="color:green"> </i>';
                 prevfeature.set(data.uuid, osmap.addfootprint(data.product.footprint, prevfeature));
             }else{
                 if (prevfeature.length != 0){
-                    element.style.textDecoration = 'none';
+                    //element.style.textDecoration = 'none';
+                    let divh4 = element.children[0].children[1].children[0]
+                    divh4.innerHTML = divh4.textContent + ' <i class="fa fa-eye-slash" style="color: #dd4b39"> </i>';
                     osmap.deletefootprint(prevfeature.get(data.uuid));
                     prevfeature.delete(data.uuid);
                 }
@@ -452,14 +456,13 @@ $(document).ready(function () {
                             success  : function (res) {
                                 data.img = res.img;
                                 var temp = document.querySelector('#product_list_template');
-
                                 // filling template
                                 temp.content.querySelector('.single-product-input').id = data.uuid + "-div";
                                 temp.content.querySelector('input').value              = data.uuid;
                                 temp.content.querySelector('li').id                    = data.uuid + "-li";
                                 temp.content.querySelector('h4').id                    = data.uuid + "-h4";
-                                temp.content.querySelector('h4').textContent           = data.product.producttype + "_" + data.product.tileid;
-                                temp.content.querySelector('p').textContent            = data.product.beginposition;
+                                temp.content.querySelector('p').textContent            = data.product.producttype + "_" + data.product.tileid;
+                                temp.content.querySelector('h4').innerHTML             = parserDate(data.product.beginposition) + ' <i class="fa fa-eye-slash" style="color: #dd4b39"> </i>';
                                 temp.content.querySelector('img').src                  = "data:image/jpeg;base64, " + data.img;
                                 temp.content.querySelectorAll('span')[1].textContent   = data.product.identifier;
                                 temp.content.querySelectorAll('span')[2].textContent   = data.product.size;
@@ -496,6 +499,12 @@ $(document).ready(function () {
         });
     });
 
+    function parserDate(parsedate){
+        let fullDate = parsedate.split('T');
+        let date = fullDate[0].split('-');
+            date = date[1] + "/" + date[2] + "/" + date[0];
+        return date + " " + fullDate[1].split('.')[0];
+    }
 
     // adds product to cart
     $('#product-to-cart-form').submit(function (event) {

catalog/templates/map.html

@@ -5,6 +5,7 @@
     <link rel="stylesheet" href="{% static 'catalog/css/map.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'catalog/css/modal1.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'catalog/css/crossrange.css' %}" type="text/css">
     <!--  <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">-->
     <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
     <link rel="stylesheet" href="{% static 'catalog/css/waitingModal.css' %}" type="text/css">
@@ -190,7 +191,8 @@
           </a>
           <ul class="treeview-menu sidebar-form">
             <li>
-              <input class="form-control" type="number" value="100" name="cloudPercentage">
+              <input class="form-text" id="clouds" value="5" oninput="setCloudPercentageSlider(this.value)" name="cloudPercentage" disabled>
+              <input class="cross-range" type="range" min="0" max="100" step="1" value="5" oninput="setCloudPercentage(this.value)" id="cloudPercentageSelector" name=cloudPercentage>
             </li>
           </ul>
         </li>
@@ -322,6 +324,23 @@
 
   </script>
   <script>
+  
+    function setCloudPercentage(clouds) {
+        //console.log(clouds)
+        document.getElementById("clouds").value=clouds;
+    }  
+    function setCloudPercentageSlider(clouds) {
+        //console.log(clouds)
+        //TODO
+        document.getElementById("cloudPercentageSelector").value=clouds;
+        if(parseInt(clouds)>100){
+            document.getElementById("cloudPercentageSelector").value=100;
+        }
+        if(parseInt(clouds)<0){
+            document.getElementById("cloudPercentageSelector").value=0;
+        }        
+    }    
+  
     //var osmap = new OpenStreetMapsClass("map", -99.145556,19.419444, 10);
     var osmap = new sidtMap("map", -89.63873079999999,21.0404457, 7);
     osmap.geolocation();

reports/templates/aside.html

 <div class="form-group">
     <br>
     <ul class="sidebar-menu" data-widget="tree">
-        {% if request.user.is_authenticated %}
-        <li>
-            <a class="treeview " href="{{ BASE_URL }}/reports">
-                <i class="fa fa-map"></i>
-                <span>Home</span>
-                <span class="pull-right-container">
-              <span class="label label-primary pull-right"></span>
-            </span>
-            </a>
-        </li>
-        {% endif %}
         {% if folders %}
         <li class="treeview">
             <a href="#">

reports/templates/sclData.html

@@ -119,12 +119,11 @@
     <!-- Main content -->
     <div class="container floating-panel" style="position:absolute; bottom: 40px; left: 12%; width: 500px; z-index: 1000">
         <div class="range-control" id="rangecontrol">
-            <span id="tooltiptext">No Data</span>
-            <input class="cross-range" id="inputRange" type="range" min="0" max="{{ labels|length }}" step="1" value="0" data-thumbwidth="20" style="background: transparent;">
+            <span id="tooltiptext">{{ labels|first|slice:"6:8" }}/{{ labels|first|slice:"4:6" }}/{{ labels|first|slice:"0:4" }}</span>
+            <input class="cross-range" id="inputRange" type="range" min="1" max="{{ labels|length }}" step="1" value="1" data-thumbwidth="20" style="background: transparent;">
 
 
             <datalist class="range__list" id="number">
-                <option>No Data</option>
                 {% for label in labels %}
                 <option class="range__opt" value="{{ label }}">{{ label|slice:"6:8" }}/{{ label|slice:"4:6" }}/{{label|slice:"0:4" }}</option>
                 {% endfor %}