Añadida funcion de comparacion entre dos fechas

reports/static/reports/css/scldata.css

@@ -162,3 +162,58 @@ input[type=range]::-webkit-slider-thumb {
     border-radius: 100%;
     cursor: pointer;
 } */
+
+/* Reset Select */
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  outline: 0;
+  box-shadow: none;
+  border: 0 !important;
+  background: #2c3e50;
+  background-image: none;
+}
+/* Custom Select */
+.select {
+  position: relative;
+  display: block;
+  width: 9em;
+  height: 3em;
+  line-height: 3;
+  background: #2c3e50;
+  overflow: hidden;
+  border-radius: .25em;
+}
+select {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0 0 0 .5em;
+  color: #fff;
+  cursor: pointer;
+}
+select::-ms-expand {
+  display: none;
+}
+/* Arrow */
+.select::after {
+  content: '\25BC';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0 1em;
+  background: #34495e;
+  pointer-events: none;
+}
+/* Transition */
+.select:hover::after {
+  color: #f39c12;
+}
+.select::after {
+  -webkit-transition: .25s all ease;
+  -o-transition: .25s all ease;
+  transition: .25s all ease;
+}

reports/static/reports/js/minimap.js

@@ -136,3 +136,154 @@ $('input[name=layer_type]').on('click', function(){
 
   addImageLayer(currentDate);
 });
+
+//*****************************
+//  Funciones de comparacion
+
+//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) {
+        if (mutation.attributeName == 'class'){
+            if(compareMenu.className.indexOf("open")===-1){  //se cerró el menu de comparacion
+                //console.log("cerrado")
+                exitCompare();
+            }
+        }
+    });
+} );
+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(); 
+
+
+//funcion que inicia la comparacion
+//recibe la lista de fechas y por default compara la primera y la ultima
+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(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();
+        map.addControl(ctrl);
+        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]
+
+        //pone las fechas por default en los selectores de fechas
+        document.getElementById("selectLeftCompare").value = labelDateLeft;
+        document.getElementById("selectRightCompare").value = labelDateRight;   
+        
+         //agrega las capas izquierda/derecha
+        selectLeft(labelDateLeft); 
+        selectRight(labelDateRight);
+        
+        //muestra los selectores de fechas y oculta la linea de tiempo
+        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)
+        //console.log(control)
+        if(control instanceof ol.control.Swipe){ //ya tiene el control agregado lo quita
+            map.removeControl(control);
+        }
+    });   
+
+    //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') {
+        map.removeLayer(layer)
+      }
+    })  
+    
+    //oculta los selectores de fechas y muestra la linea de tiempo
+    document.getElementById("selectLeft").style.display = "none";
+    document.getElementById("selectRight").style.display = "none";
+    document.getElementById("timeLine").style.display = "block";
+}
+
+
+//selecciona el lado izquierdo para comparar
+function selectLeft(date){
+    //console.log("select left")
+    var labelDateLeft = date
+    var layer_type = 'TCI'
+            const left = new ol.layer.Tile({
+            name: 'left',
+            opacity: 1,
+            source: new ol.source.XYZ({
+                projection: 'EPSG:3857',
+                url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layer_type+'/'+labelDateLeft+'/{z}/{x}/{-y}.png',
+                tilePixelRatio: 2,
+                minZoom: 10,
+                maxZoom: 15
+            })
+            });        
+    map.addLayer(left);   
+    ctrl.addLayer(left);
+    
+}
+
+//selecciona el lado derecho para comparar
+function selectRight(date){
+    //console.log("select right")
+    var labelDateRight = date
+    var layer_type = 'TCI'
+            const right = new ol.layer.Tile({
+            name: 'right',
+            opacity: 1,
+            source: new ol.source.XYZ({
+                projection: 'EPSG:3857',
+                url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layer_type+'/'+labelDateRight+'/{z}/{x}/{-y}.png',
+                tilePixelRatio: 2,
+                minZoom: 10,
+                maxZoom: 15
+            })
+            });        
+    map.addLayer(right);   
+    ctrl.addLayer(right, true);  
+    
+}
+
+//selecciona comparacion vertical u horizontal
+function setCompareDirection(direction){
+    //console.log("direction")
+    ctrl.set('orientation',direction)
+    
+    //mueve los selectores de fechas
+    if(direction === 'horizontal'){
+        document.getElementById("selectLeft").style.bottom = "70%";
+        document.getElementById("selectLeft").style.left = "15%";
+        
+        document.getElementById("selectRight").style.left = "15%";
+    }
+    else{
+        document.getElementById("selectLeft").style.bottom = "50px";
+        document.getElementById("selectLeft").style.left = "30%";
+        
+        document.getElementById("selectRight").style.left = "75%";
+    }
+}
+
+//  Fin funciones de comparacion
+//******************************

reports/templates/aside.html

@@ -35,6 +35,44 @@
                     <span class="label label-primary pull-right"></span>
                 </span>
             </a>
+            
+        <li class="treeview" id="compare">
+            <a href="#" onclick="compare(labels)">
+                <i class="fas fa-columns"></i>
+                <span>Compare</span>
+                <span class="pull-right-container">
+              <span class="label label-primary pull-right"></span>
+            </span>
+            </a>
+            <ul class="treeview-menu sidebar-form" id="compareOptions">
+                <li>
+                    <a class="treeview submenu" href="#" onclick="setCompareDirection('vertical')" id="compvertical">
+                        <i class="fas fa-arrows-alt-v"></i>
+                        <span>Vertical</span>
+                    </span>
+                    </a>
+                </li>
+                <li>
+                    <a class="treeview submenu" href="#" onclick="setCompareDirection('horizontal')" id="comphorizontal">
+                        <i class="fas fa-arrows-alt-h"></i>
+                        <span>Horizontal</span>
+                    </span>
+                    </a>
+                </li>
+            </ul>
+        </li>            
+ 
+<!-- 
+            <a class="treeview " href="#" onclick="compare(labels)">
+                <i class="fas fa-columns"></i></i>
+                <i class="fa fa-eye-slash hideChart" style="display:none"></i>
+                <span class="showChart">Compare</span>
+                <span class="hideChart" style="display:none">Not compare</span>
+                <span class="pull-right-container">
+                    <span class="label label-primary pull-right"></span>
+                </span>
+            </a>            
+ -->           
         </li>
         {% endif %}
         <li class="treeview">

reports/templates/sclData.html

@@ -5,12 +5,14 @@
     <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/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"
           type="text/css">
     <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
     <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
+    <script type="text/javascript" src="{% static 'reports/js/ol-ext.js' %}"></script>
 {% endblock %}
 {% block messages %}
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
@@ -117,7 +119,7 @@
 {% block content %}
     <!-- Content Wrapper. Contains page content -->
     <!-- Main content -->
-    <div class="container floating-panel slidecontainer" style="position:absolute; bottom: 40px; left: 12%; width: 500px; z-index: 1000">
+    <div id="timeLine" class="container floating-panel slidecontainer" style="position:absolute;  display:block; bottom: 40px; left: 12%; width: 500px; z-index: 1000">
         <div class="range-control" id="rangecontrol">
             <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="0" max="{{ labels|length|add:'-1' }}" step="1" value="0" data-thumbwidth="20" style="background: transparent;">
@@ -132,6 +134,26 @@
         </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">
+                 {% for label in labels %}
+                       <option value="{{label}}" >{{ label|slice:"6:8" }}/{{ label|slice:"4:6" }}/{{label|slice:"0:4" }}</option>
+                 {% endfor %}
+                </select>
+        </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">
+                 {% for label in labels %}
+                       <option value="{{label}}" >{{ label|slice:"6:8" }}/{{ label|slice:"4:6" }}/{{label|slice:"0:4" }}</option>
+                 {% endfor %}
+                </select>
+        </div>
+    </div>     
+
     <div id="reportPage" class="wrapper" style="background-color: #ecf0f5">
         <div id="minimap" class="minimap"></div>