descripcion reportes

parent 8e44387e
...@@ -350,7 +350,7 @@ a[disabled="disabled"] { ...@@ -350,7 +350,7 @@ a[disabled="disabled"] {
.fas.fa-chevron-right { .fas.fa-chevron-right {
position: absolute; position: absolute;
right: 0; right: 0;
top: 40%; top: 40%;
margin-right: 5px; margin-right: 5px;
color: rgba(0,60,136,.5); color: rgba(0,60,136,.5);
......
...@@ -39,15 +39,21 @@ function dragElement(elmnt) { ...@@ -39,15 +39,21 @@ function dragElement(elmnt) {
} }
} }
function showGraph(type=false){
if ($('.showChart').is(':visible') || type==true){
function showGraph(type = false) {
if ($('.showChart').is(':visible') || type == true) {
$("#draggableChart").css('z-index', 10); $("#draggableChart").css('z-index', 10);
$(".showChart").hide(); $(".showChart").hide();
$(".hideChart").show(); $(".hideChart").show();
}else{ sessionStorage.showChart = true;
} else {
$("#draggableChart").css('z-index', -1); $("#draggableChart").css('z-index', -1);
$(".showChart").show(); $(".showChart").show();
$(".hideChart").hide(); $(".hideChart").hide();
sessionStorage.showChart = false;
} }
} }
......
MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'; MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
MAX_OPACITY = 1; MAX_OPACITY = 1;
FIRST_IMAGE_LAYER_INDEX = 2; FIRST_IMAGE_LAYER_INDEX = 2;
document.getElementById("light").checked=true; document.getElementById("light").checked = true;
// create wkt polygon // create wkt polygon
const wktFormat = new ol.format.WKT(); const wktFormat = new ol.format.WKT();
...@@ -35,8 +35,8 @@ const night = new ol.layer.Tile({ ...@@ -35,8 +35,8 @@ const night = new ol.layer.Tile({
const cycle = new ol.layer.Tile({ const cycle = new ol.layer.Tile({
name: 'mapbox', name: 'mapbox',
source: new ol.source.XYZ({ source: new ol.source.XYZ({
url: 'https://api.tiles.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token=' + MAPBOX_ACCESS_TOKEN url: 'https://api.tiles.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token=' + MAPBOX_ACCESS_TOKEN
}), }),
}); });
...@@ -92,9 +92,11 @@ function addImageLayer(data) { ...@@ -92,9 +92,11 @@ function addImageLayer(data) {
} }
// remove old layers and add layers with new date // remove old layers and add layers with new date
let current = []
function changeLayers(especific_layerName) { function changeLayers(especific_layerName) {
const layersToChance = especific_layerName ? especific_layerName.split() : getSelectedLayersName();
const layersToChance = especific_layerName ? especific_layerName.split() : getSelectedLayersName();
removeLayer(especific_layerName); removeLayer(especific_layerName);
layersToChance.forEach(layerName => { layersToChance.forEach(layerName => {
...@@ -114,6 +116,7 @@ function changeLayers(especific_layerName) { ...@@ -114,6 +116,7 @@ function changeLayers(especific_layerName) {
} }
layers.set(layerName, xyz); layers.set(layerName, xyz);
sessionStorage.setItem(layerName,layerName); // replace
}); });
} }
...@@ -129,6 +132,7 @@ function removeLayer(layerName) { ...@@ -129,6 +132,7 @@ function removeLayer(layerName) {
map.removeLayer(layers.get(layerName)); map.removeLayer(layers.get(layerName));
layers.delete(layerName); layers.delete(layerName);
sessionStorage.layers = layers;
} }
// set opacity to layers // set opacity to layers
...@@ -138,6 +142,7 @@ function setOpacity(value) { ...@@ -138,6 +142,7 @@ function setOpacity(value) {
layer.setOpacity(value) layer.setOpacity(value)
} }
}) })
sessionStorage.layerOpacity = value;
} }
...@@ -164,13 +169,13 @@ var ctrl = new ol.control.Swipe(); ...@@ -164,13 +169,13 @@ var ctrl = new ol.control.Swipe();
//recibe la lista de fechas y por default compara la primera y la ultima //recibe la lista de fechas y por default compara la primera y la ultima
function compare(labels) { function compare(labels) {
var swipeControl = false; var swipeControl = false;
//oculta la grafica si esta abierta //oculta la grafica si esta abierta
$("#draggableChart").css('z-index', -1); $("#draggableChart").css('z-index', -1);
$(".showChart").show(); $(".showChart").show();
$(".hideChart").hide(); $(".hideChart").hide();
//desactiva el botón de mostrar la gráfica //desactiva el botón de mostrar la gráfica
$('#showGraph').attr('disabled',true); $('#showGraph').attr('disabled', true);
map.getControls().forEach(function (control) { //checa si ya se añadio el control de comparacion (swipe), si no lo tiene, lo agrega 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 if (control instanceof ol.control.Swipe) { //si ya tiene el control agregado
...@@ -189,8 +194,6 @@ function compare(labels) { ...@@ -189,8 +194,6 @@ function compare(labels) {
var labelDateRight = labels[labels.length - 1] var labelDateRight = labels[labels.length - 1]
//pone las fechas por default en los selectores de fechas //pone las fechas por default en los selectores de fechas
//document.getElementById("selectLeftCompare").value = labelDateLeft; //document.getElementById("selectLeftCompare").value = labelDateLeft;
//document.getElementById("selectRightCompare").value = labelDateRight; //document.getElementById("selectRightCompare").value = labelDateRight;
...@@ -227,9 +230,9 @@ function exitCompare() { ...@@ -227,9 +230,9 @@ function exitCompare() {
document.getElementById("selectLeft").style.display = "none"; document.getElementById("selectLeft").style.display = "none";
document.getElementById("selectRight").style.display = "none"; document.getElementById("selectRight").style.display = "none";
document.getElementById("timeLine").style.display = "block"; document.getElementById("timeLine").style.display = "block";
//activa el boton de la grafica //activa el boton de la grafica
$('#showGraph').attr('disabled',false); $('#showGraph').attr('disabled', false);
} }
...@@ -295,9 +298,11 @@ function setCompareDirection(direction) { ...@@ -295,9 +298,11 @@ function setCompareDirection(direction) {
//****************************** //******************************
/************************* Functions de layer Sources ******************************/ /************************* Functions de layer Sources ******************************/
let currentMap = light;
function changeMap(selectedMap) { function changeMap(selectedMap) {
sessionStorage.selectepMap = selectedMap;
map.getLayers().getArray().forEach(function (layer) { map.getLayers().getArray().forEach(function (layer) {
if (layer.values_.name == "mapbox") { if (layer.values_.name == "mapbox") {
map.removeLayer(layer) map.removeLayer(layer)
...@@ -325,7 +330,7 @@ function changeMap(selectedMap) { ...@@ -325,7 +330,7 @@ function changeMap(selectedMap) {
} }
function showControlMap() { function showControlMap() {
if ($('#showControlMap').is(':visible')) { if ($('#showControlMap').is(':visible')) {
$("#showControlMap").hide(); $("#showControlMap").hide();
$("#hideControlMap").show(); $("#hideControlMap").show();
......
...@@ -22,14 +22,14 @@ document.getElementById("myChart").onclick = function (evt) { ...@@ -22,14 +22,14 @@ document.getElementById("myChart").onclick = function (evt) {
// activePoints = myChart.getElementsAtEvent(evt); // activePoints = myChart.getElementsAtEvent(evt);
var activePoint = myChart.getElementAtEvent(evt); var activePoint = myChart.getElementAtEvent(evt);
if(activePoint.length>0){ if (activePoint.length > 0) {
var firstPoint = activePoint[0]; var firstPoint = activePoint[0];
var label = myChart.data.labels[firstPoint._index]; var label = myChart.data.labels[firstPoint._index];
//console.log(firstPoint._datasetIndex) //indice de la clase a la que pertenece (vegetación, agua, etc.) //console.log(firstPoint._datasetIndex) //indice de la clase a la que pertenece (vegetación, agua, etc.)
addImageLayer({ addImageLayer({
layerDate: label layerDate: label
}); });
// update date slider // update date slider
...@@ -53,37 +53,38 @@ document.getElementById("myChart").onclick = function (evt) { ...@@ -53,37 +53,38 @@ document.getElementById("myChart").onclick = function (evt) {
}; };
function play() { function play() {
$("#play").hide(); $("#play").hide();
$("#stop").show(); $("#stop").show();
// $(".next").hide(); // $(".next").hide();
// $(".prev").hide(); // $(".prev").hide();
// $("#showImage").addClass('col-lg-offset-1'); // $("#showImage").addClass('col-lg-offset-1');
playImages = setInterval(function () { next(); }, 4000); playImages = setInterval(function () {
next();
}, 4000);
} }
//**************************** //****************************
function scl_on(imagePoint) { function scl_on(imagePoint) {
console.log("scl on!!") console.log("scl on!!")
label = imagePoint; label = imagePoint;
//console.log({{SCL_PATH}}) //console.log({{SCL_PATH}})
document.getElementById("satImage").src = "../../static/reports/tmpImages/repsat_test_dev/{{SCL_PATH}}" + label + "_SCL_60m_clasificationMap.png" document.getElementById("satImage").src = "../../static/reports/tmpImages/repsat_test_dev/{{SCL_PATH}}" + label + "_SCL_60m_clasificationMap.png"
// $(".next").show(); // $(".next").show();
// $(".prev").show(); // $(".prev").show();
} }
function open_big_image(image) { function open_big_image(image) {
console.log("Opening big image") console.log("Opening big image")
console.log("image:") console.log("image:")
console.log(image) console.log(image)
image_big = image.replace("/thumbnails", ""); image_big = image.replace("/thumbnails", "");
console.log(image_big) console.log(image_big)
window.open(image_big) window.open(image_big)
// $(".next").show(); // $(".next").show();
// $(".prev").show(); // $(".prev").show();
} }
//******************************** //********************************
function stop() { function stop() {
...@@ -143,6 +144,8 @@ function updateImage(imagePoint) { ...@@ -143,6 +144,8 @@ function updateImage(imagePoint) {
} }
function change(newType) { function change(newType) {
sessionStorage.charttype = newType;
var ctx = document.getElementById("myChart").getContext("2d"); var ctx = document.getElementById("myChart").getContext("2d");
// Remove the old chart and all its event handles // Remove the old chart and all its event handles
...@@ -153,14 +156,12 @@ function change(newType) { ...@@ -153,14 +156,12 @@ function change(newType) {
// Chart.js modifies the object you pass in. Pass a copy of the object so we can use the original object later // Chart.js modifies the object you pass in. Pass a copy of the object so we can use the original object later
// -------------- set last values when the chart was destroyed ------ // -------------- set last values when the chart was destroyed ------
let selectedLayers = getSelectedLayersName().map( layerName => { let selectedLayers = getSelectedLayersName().map(layerName => {
const layerCheckbox = $(':checkbox[value='+layerName+']'); const layerCheckbox = $(':checkbox[value=' + layerName + ']');
return layerCheckbox.parent().attr('id') return layerCheckbox.parent().attr('id')
}); });
selectedLayers = selectedLayers.filter(layerId => layerId!=null); selectedLayers = selectedLayers.filter(layerId => layerId != null);
selectedLayers = selectedLayers.map(layerId => layerId.replace('sclcheck-', '').replace('-', ' ')); selectedLayers = selectedLayers.map(layerId => layerId.replace('sclcheck-', '').replace('-', ' '));
config.data.datasets.forEach(data => { config.data.datasets.forEach(data => {
...@@ -175,28 +176,29 @@ function change(newType) { ...@@ -175,28 +176,29 @@ function change(newType) {
var temp = jQuery.extend(true, {}, config); var temp = jQuery.extend(true, {}, config);
if (newType == "stackedBar"){ if (newType == "stackedBar") {
temp.type = "bar"; temp.type = "bar";
temp.options.scales.xAxes = [{ "stacked": true }]; temp.options.scales.xAxes = [{"stacked": true}];
temp.options.scales.yAxes = [{ "stacked": true }]; temp.options.scales.yAxes = [{"stacked": true}];
}else{ } else {
temp.type = newType; temp.type = newType;
if (newType == 'radar' || newType == 'pie' || newType == 'polarArea' || newType == 'doughnut') { if (newType == 'radar' || newType == 'pie' || newType == 'polarArea' || newType == 'doughnut') {
temp.options.scales.xAxes = [{ "display": false, "stacked": false }]; temp.options.scales.xAxes = [{"display": false, "stacked": false}];
temp.options.scales.yAxes = [{ "display": false, "stacked": false }]; temp.options.scales.yAxes = [{"display": false, "stacked": false}];
} }
} }
myChart = new Chart(ctx, temp); myChart = new Chart(ctx, temp);
showGraph(true) //showGraph(true)
}; };
let img, imgWidth=0, slider=false, clicked=0; let img, imgWidth = 0, slider = false, clicked = 0;
function initComparisons() { function initComparisons() {
// $("#showSecondImage").show() // $("#showSecondImage").show()
// setTimeout(function() { // setTimeout(function() {
img = document.getElementsByClassName("img-comp-overlay")[0]; img = document.getElementsByClassName("img-comp-overlay")[0];
compareImages(img); compareImages(img);
//}); //});
// setTimeout(function(){ // setTimeout(function(){
// img = document.getElementsByClassName("img-comp-overlay")[0]; // img = document.getElementsByClassName("img-comp-overlay")[0];
...@@ -205,7 +207,7 @@ function initComparisons() { ...@@ -205,7 +207,7 @@ function initComparisons() {
} }
function compareImages(img) { function compareImages(img) {
var imgHeight; var imgHeight;
/*get the width and height of the img element*/ /*get the width and height of the img element*/
imgWidth = document.getElementById("showImage").offsetWidth; imgWidth = document.getElementById("showImage").offsetWidth;
imgHeight = img.offsetHeight; imgHeight = img.offsetHeight;
...@@ -276,15 +278,15 @@ function slide(x) { ...@@ -276,15 +278,15 @@ function slide(x) {
slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px"; slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px";
} }
function deleteComparisons(){ function deleteComparisons() {
slider.removeEventListener("mousedown", slideReady); slider.removeEventListener("mousedown", slideReady);
slider.removeEventListener("touchstart", slideReady); slider.removeEventListener("touchstart", slideReady);
window.removeEventListener("mouseup", slideFinish) ; window.removeEventListener("mouseup", slideFinish);
window.removeEventListener("touchstop", slideFinish); window.removeEventListener("touchstop", slideFinish);
window.removeEventListener("mousemove", slideMove); window.removeEventListener("mousemove", slideMove);
window.removeEventListener("touchmove", slideMove); window.removeEventListener("touchmove", slideMove);
$(".img-comp-slider").remove(); $(".img-comp-slider").remove();
slider= false; slider = false;
} }
//deleteComparisons(); //deleteComparisons();
...@@ -299,7 +301,7 @@ function selectImage1(date, element) { ...@@ -299,7 +301,7 @@ function selectImage1(date, element) {
document.getElementById("satImageFirst").src = "../../static/reports/tmpImages/repsat_test_dev/" + image_path + date + "_TCI_60m.jpg" document.getElementById("satImageFirst").src = "../../static/reports/tmpImages/repsat_test_dev/" + image_path + date + "_TCI_60m.jpg"
} }
function selectImage2(date,element) { function selectImage2(date, element) {
$("#imageListSecond li").removeClass("active"); $("#imageListSecond li").removeClass("active");
element.classList.add("active"); element.classList.add("active");
let label = date.toString(); let label = date.toString();
...@@ -310,7 +312,7 @@ function selectImage2(date,element) { ...@@ -310,7 +312,7 @@ function selectImage2(date,element) {
$('.nav-tabs a').on('shown.bs.tab', function (evt) { $('.nav-tabs a').on('shown.bs.tab', function (evt) {
let tab = $(evt.target).text(); let tab = $(evt.target).text();
if(tab == "Comparison"){ if (tab == "Comparison") {
initComparisons() initComparisons()
} }
}); });
......
...@@ -89,7 +89,7 @@ ...@@ -89,7 +89,7 @@
</a> </a>
<ul class="treeview-menu sidebar-form"> <ul class="treeview-menu sidebar-form">
<li> <li>
<a class="treeview submenu" href="#" onclick="change('line')"> <a class="treeview submenu" href="#" onclick="change('line');showGraph(true)">
<i class="fa fa-bar-chart"></i> <i class="fa fa-bar-chart"></i>
<span>Line Chart</span> <span>Line Chart</span>
<span class="pull-right-container"> <span class="pull-right-container">
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
</a> </a>
</li> </li>
<li> <li>
<a class="treeview submenu" href="#" onclick="change('bar')"> <a class="treeview submenu" href="#" onclick="change('bar');showGraph(true)">
<i class="fa fa-bar-chart"></i> <i class="fa fa-bar-chart"></i>
<span>Bar Chart</span> <span>Bar Chart</span>
<span class="pull-right-container"> <span class="pull-right-container">
...@@ -107,7 +107,7 @@ ...@@ -107,7 +107,7 @@
</a> </a>
</li> </li>
<li> <li>
<a class="treeview submenu" href="#" onclick="change('stackedBar')"> <a class="treeview submenu" href="#" onclick="change('stackedBar');showGraph(true)">
<i class="fa fa-bar-chart"></i> <i class="fa fa-bar-chart"></i>
<span>Stacked Bar Chart</span> <span>Stacked Bar Chart</span>
<span class="pull-right-container"> <span class="pull-right-container">
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
</a> </a>
</li> </li>
<li> <li>
<a class="treeview submenu" href="#" onclick="change('polarArea')"> <a class="treeview submenu" href="#" onclick="change('polarArea');showGraph(true)">
<i class="fa fa-bar-chart"></i> <i class="fa fa-bar-chart"></i>
<span>Polar Area Chart</span> <span>Polar Area Chart</span>
<span class="pull-right-container"> <span class="pull-right-container">
...@@ -125,7 +125,7 @@ ...@@ -125,7 +125,7 @@
</a> </a>
</li> </li>
<li> <li>
<a class="treeview submenu" href="#" onclick="change('doughnut')"> <a class="treeview submenu" href="#" onclick="change('doughnut');showGraph(true)">
<i class="fa fa-bar-chart"></i> <i class="fa fa-bar-chart"></i>
<span>Doughnut Chart</span> <span>Doughnut Chart</span>
<span class="pull-right-container"> <span class="pull-right-container">
...@@ -134,7 +134,7 @@ ...@@ -134,7 +134,7 @@
</a> </a>
</li> </li>
<li> <li>
<a class="treeview submenu" href="#" onclick="change('pie')"> <a class="treeview submenu" href="#" onclick="change('pie');showGraph(true)">
<i class="fa fa-bar-chart"></i> <i class="fa fa-bar-chart"></i>
<span>Pie Chart</span> <span>Pie Chart</span>
<span class="pull-right-container"> <span class="pull-right-container">
...@@ -143,7 +143,7 @@ ...@@ -143,7 +143,7 @@
</a> </a>
</li> </li>
<li> <li>
<a class="treeview submenu" href="#" onclick="change('radar')"> <a class="treeview submenu" href="#" onclick="change('radar');showGraph(true)">
<i class="fa fa-bar-chart"></i> <i class="fa fa-bar-chart"></i>
<span>Radar Chart</span> <span>Radar Chart</span>
<span class="pull-right-container"> <span class="pull-right-container">
...@@ -219,70 +219,70 @@ ...@@ -219,70 +219,70 @@
</label> </label>
</div> </div>
<div class="form-check submenu" style="display:none" id="sclcheck-no-data"> <div class="form-check submenu" style="display:none" id="sclcheck-no-data">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_0"> <input class="form-check-input" type="checkbox" name="layer_type" id="SCL_0" value="SCL_0">
<label class="form-check-label"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #383838"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #383838"></i>
&nbspSCL No Data &nbspSCL No Data
</label> </label>
</div> </div>
<div class="form-check submenu" style="display:none" id="sclcheck-saturated"> <div class="form-check submenu" style="display:none" id="sclcheck-saturated">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_1"> <input class="form-check-input" type="checkbox" name="layer_type" id="SCL_1" value="SCL_1">
<label class="form-check-label"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #de3d3d"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #de3d3d"></i>
&nbspSCL Saturated &nbspSCL Saturated
</label> </label>
</div> </div>
<div class="form-check submenu" style="display:none" id="sclcheck-shadows"> <div class="form-check submenu" style="display:none" id="sclcheck-shadows">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_2"> <input class="form-check-input" type="checkbox" name="layer_type" id="SCL_2" value="SCL_2">
<label class="form-check-label"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #696767"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #696767"></i>
&nbspSCL Shadows &nbspSCL Shadows
</label> </label>
</div> </div>
<div class="form-check submenu" style="display:none" id="sclcheck-cloud-shadows"> <div class="form-check submenu" style="display:none" id="sclcheck-cloud-shadows">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_3"> <input class="form-check-input" type="checkbox" name="layer_type" id="SCL_3" value="SCL_3">
<label class="form-check-label"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #98775b"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #98775b"></i>
&nbspSCL Cloud Shadows &nbspSCL Cloud Shadows
</label> </label>
</div> </div>
<div class="form-check submenu" style="display:none" id="sclcheck-vegetation"> <div class="form-check submenu" style="display:none" id="sclcheck-vegetation">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_4"> <input class="form-check-input" type="checkbox" name="layer_type" id="SCL_4" value="SCL_4">
<label class="form-check-label"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #44ba5d"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #44ba5d"></i>
&nbspSCL Vegetation &nbspSCL Vegetation
</label> </label>
</div> </div>
<div class="form-check submenu" style="display:none" id="sclcheck-not-vegetated"> <div class="form-check submenu" style="display:none" id="sclcheck-not-vegetated">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_5"> <input class="form-check-input" type="checkbox" name="layer_type" id="SCL_5" value="SCL_5">
<label class="form-check-label"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #fff98b"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #fff98b"></i>
&nbspSCL Not-Vegetated &nbspSCL Not-Vegetated
</label> </label>
</div> </div>
<div class="form-check submenu" style="display:none" id="sclcheck-water"> <div class="form-check submenu" style="display:none" id="sclcheck-water">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_6"> <input class="form-check-input" type="checkbox" name="layer_type" id="SCL_6" value="SCL_6">
<label class="form-check-label"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #659acc"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #659acc"></i>
&nbspSCL Water &nbspSCL Water
</label> </label>
</div> </div>
<div class="form-check submenu" style="display:none" id="sclcheck-unclassified"> <div class="form-check submenu" style="display:none" id="sclcheck-unclassified">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_7"> <input class="form-check-input" type="checkbox" name="layer_type" id="SCL_7" value="SCL_7">
<label class="form-check-label"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #ababab"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #ababab"></i>
&nbspSCL Unclassified &nbspSCL Unclassified
</label> </label>
</div> </div>
<div class="form-check submenu" style="display:none" id="sclcheck-clouds"> <div class="form-check submenu" style="display:none" id="sclcheck-clouds">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_8"> <input class="form-check-input" type="checkbox" name="layer_type" id="SCL_8" value="SCL_8">
<label class="form-check-label"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #dddddd"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #dddddd"></i>
&nbspSCL Clouds &nbspSCL Clouds
</label> </label>
</div> </div>
<div class="form-check submenu" style="display:none" id="sclcheck-snow"> <div class="form-check submenu" style="display:none" id="sclcheck-snow">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_9"> <input class="form-check-input" type="checkbox" name="layer_type" id="SCL_9" value="SCL_9">
<label class="form-check-label"> <label class="form-check-label">
<i class="fa fa-circle" aria-hidden="true" style="color: #ff8afa"></i> <i class="fa fa-circle" aria-hidden="true" style="color: #ff8afa"></i>
&nbspSCL Snow &nbspSCL Snow
...@@ -309,7 +309,7 @@ ...@@ -309,7 +309,7 @@
<ul class="treeview-menu sidebar-form text-center"> <ul class="treeview-menu sidebar-form text-center">
<span> <span>
<div class="form-check submenu" onclick="changeMap('light')"> <div class="form-check submenu" onclick="changeMap('light')">
<input id="light" type="radio" name="layerOption" checked> <input id="light" type="radio" name="layerOption">
<span>Noon</span> <span>Noon</span>
</div> </div>
<div class="form-check submenu" onclick="changeMap('streets')"> <div class="form-check submenu" onclick="changeMap('streets')">
...@@ -317,7 +317,7 @@ ...@@ -317,7 +317,7 @@
<span>Streets</span> <span>Streets</span>
</div> </div>
<div class="form-check submenu" onclick="changeMap('night')"> <div class="form-check submenu" onclick="changeMap('night')">
<input id="night" type="radio" name="layerOption" checked=""> <input id="night" type="radio" name="layerOption" checked>
<span>Night</span> <span>Night</span>
</div> </div>
<div class="form-check submenu" onclick="changeMap('cycle')"> <div class="form-check submenu" onclick="changeMap('cycle')">
......
...@@ -122,7 +122,8 @@ ...@@ -122,7 +122,8 @@
<!-- Main content --> <!-- Main content -->
<div id="timeLine" class="container col-md-12 floating-panel slidecontainer" <div id="timeLine" class="container col-md-12 floating-panel slidecontainer"
style="position:absolute; display:block; bottom: 40px; width: 500px; z-index: 1000"> style="position:absolute; display:block; bottom: 40px; width: 500px; z-index: 1000">
<div id="set_Range_date" class="col-md-4 pull-left" style="margin-right: -15%">{{ labels|first|slice:"6:8" }}/{{ labels|first|slice:"4:6" }}/{{ labels|first|slice:"0:4" }}</div> <div id="set_Range_date" class="col-md-4 pull-left"
style="margin-right: -15%">{{ labels|first|slice:"6:8" }}/{{ labels|first|slice:"4:6" }}/{{ labels|first|slice:"0:4" }}</div>
<div class="range-control col-md-8" id="rangecontrol"> <div class="range-control col-md-8" id="rangecontrol">
<input class="cross-range" id="inputRange" type="range" min="0" max="{{ labels|length|add:'-1' }}" step="1" <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;"> value="0" data-thumbwidth="20" style="background: transparent;">
...@@ -140,7 +141,8 @@ ...@@ -140,7 +141,8 @@
<div id="selectLeft" class="container col-md-12 floating-panel" <div id="selectLeft" class="container col-md-12 floating-panel"
style="position:absolute; display:none; bottom: 50px; left: 30%; width: 300px; z-index: 1000"> style="position:absolute; display:none; bottom: 50px; left: 30%; width: 300px; z-index: 1000">
<div id="set_Range_date2" class="col-md-4 pull-left">{{ labels|first|slice:"6:8" }}/{{ labels|first|slice:"4:6" }}/{{ labels|first|slice:"0:4" }}</div> <div id="set_Range_date2"
class="col-md-4 pull-left">{{ labels|first|slice:"6:8" }}/{{ labels|first|slice:"4:6" }}/{{ labels|first|slice:"0:4" }}</div>
<div class="col-md-8"> <div class="col-md-8">
<!--<select onchange="selectLeft(this.value)" id="selectLeftCompare"> <!--<select onchange="selectLeft(this.value)" id="selectLeftCompare">
...@@ -155,7 +157,7 @@ ...@@ -155,7 +157,7 @@
<div id="selectRight" class="container col-md-12 floating-panel" <div id="selectRight" class="container col-md-12 floating-panel"
style="position:absolute; display:none; bottom: 50px; left: 75%; width: 300px; z-index: 1000"> style="position:absolute; display:none; bottom: 50px; left: 75%; width: 300px; z-index: 1000">
<div id="set_Range_date3" class="col-md-4 pull-left">{{ labels|last|slice:"6:8" }}/{{ labels|last|slice:"4:6" }}/{{ labels|last|slice:"0:4" }}</div> <div id="set_Range_date3" class="col-md-4 pull-left">{{ labels|last|slice:"6:8" }}/{{ labels|last|slice:"4:6" }}/{{ labels|last|slice:"0:4" }}</div>
<div class="col-md-8"> <div class="col-md-8">
<!--<select onchange="selectRight(this.value)" id="selectRightCompare"> <!--<select onchange="selectRight(this.value)" id="selectRightCompare">
...@@ -220,8 +222,10 @@ ...@@ -220,8 +222,10 @@
<div id="reportPage" class="wrapper" style="background-color: #ecf0f5"> <div id="reportPage" class="wrapper" style="background-color: #ecf0f5">
<div id="minimap" class="minimap"></div> <div id="minimap" class="minimap"></div>
<section class="content"> <section class="content">
<a href="#" id="button_left" title="Previous" onclick="previus_report({{ request.path_info|slice:"9:" }})"><i class="fas fa-chevron-left"></i></a> <a href="#" id="button_left" title="Previous"
<a href="#" id="button_right" title="Next" onclick="next_report({{ request.path_info|slice:"9:" }})"><i class="fas fa-chevron-right"></i></a> onclick="previus_report({{ request.path_info|slice:"9:" }})"><i class="fas fa-chevron-left"></i></a>
<a href="#" id="button_right" title="Next" onclick="next_report({{ request.path_info|slice:"9:" }})"><i
class="fas fa-chevron-right"></i></a>
<div class="row col-lg-11 title"> <div class="row col-lg-11 title">
<div class="box box-success box-solid info"> <div class="box box-success box-solid info">
<div class="box-header with-border"> <div class="box-header with-border">
...@@ -567,7 +571,7 @@ ...@@ -567,7 +571,7 @@
index = 0; index = 0;
console.log(lista_productos[index]); console.log(lista_productos[index]);
window.location.replace("../reports/"+lista_productos[index]); window.location.replace("../reports/" + lista_productos[index]);
} }
function previus_report(number) { function previus_report(number) {
...@@ -576,13 +580,59 @@ ...@@ -576,13 +580,59 @@
index--; index--;
console.log(index); console.log(index);
if (index < 0) if (index < 0)
index = lista_productos.length-1; index = lista_productos.length - 1;
console.log(lista_productos[index]); console.log(lista_productos[index]);
window.location.replace("../reports/"+lista_productos[index]); window.location.replace("../reports/" + lista_productos[index]);
} }
$(document).ready(function(){
console.log(sessionStorage)
if (sessionStorage.showChart==="true"){
showGraph(true)
}
if (sessionStorage.charttype){
change(sessionStorage.charttype);
}
if(sessionStorage.selectedMap){
currentMap = sessionStorage.selectedMap;
}
if(sessionStorage.SCL_0){
$('#SCL_0').prop('checked', true);
}
if(sessionStorage.SCL_2){
$('#SCL_2').prop('checked', true);
}
if(sessionStorage.SCL_3){
$('#SCL_3').prop('checked', true);
}
if(sessionStorage.SCL_4){
$('#SCL_4').prop('checked', true);
}
if(sessionStorage.SCL_5){
$('#SCL_5').prop('checked', true);
}
if(sessionStorage.SCL_6){
$('#SCL_6').prop('checked', true);
}
if(sessionStorage.SCL_7){
$('#SCL_7').prop('checked', true);
}
if(sessionStorage.SCL_8){
$('#SCL_8').prop('checked', true);
}
if (sessionStorage.selectedMap==='night'){
changeMap('night')
}
});
</script> </script>
<script type="text/javascript" src="{% static 'reports/js/reportImg.js' %}"></script> <script type="text/javascript" src="{% static 'reports/js/reportImg.js' %}"></script>
<script type="text/javascript" src="{% static 'reports/js/reportPdf.js' %}"></script> <script type="text/javascript" src="{% static 'reports/js/reportPdf.js' %}"></script>
......
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