Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit 671d5737 authored by Irving David's avatar Irving David
Browse files
Options

Añadida funcion de comparacion entre dos fechas

parent 8126ca4f
Expand all Show whitespace changes
Inline Side-by-side
Showing with 27706 additions and 1 deletion
reports/static/reports/css/ol-ext.css 0 → 100644
View file @ 671d5737
This diff is collapsed.
reports/static/reports/css/scldata.css
View file @ 671d5737
......@@ -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
View file @ 671d5737
......@@ -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/static/reports/js/ol-ext.js 0 → 100644
View file @ 671d5737
This diff is collapsed.
reports/templates/aside.html
View file @ 671d5737
......@@ -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
View file @ 671d5737
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment