Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit 33e56229 authored by Ulises Morales Ramírez's avatar Ulises Morales Ramírez
Browse files
Options

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

parents bfc1fe9b 9559c629
Hide whitespace changes
Inline Side-by-side
Showing with 212 additions and 59 deletions
catalog/static/catalog/css/crossrange.css 0 → 100644
View file @ 33e56229
.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
View file @ 33e56229
...@@ -237,11 +237,15 @@ function drawApiResponse(element) { ...@@ -237,11 +237,15 @@ function drawApiResponse(element) {
if (data.uuid === element.id.replace("-li", '')) { if (data.uuid === element.id.replace("-li", '')) {
console.log("footprint:\n", data.product.footprint); console.log("footprint:\n", data.product.footprint);
if (!prevfeature.has(data.uuid)){ 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)); prevfeature.set(data.uuid, osmap.addfootprint(data.product.footprint, prevfeature));
}else{ }else{
if (prevfeature.length != 0){ 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)); osmap.deletefootprint(prevfeature.get(data.uuid));
prevfeature.delete(data.uuid); prevfeature.delete(data.uuid);
} }
...@@ -452,14 +456,13 @@ $(document).ready(function () { ...@@ -452,14 +456,13 @@ $(document).ready(function () {
success : function (res) { success : function (res) {
data.img = res.img; data.img = res.img;
var temp = document.querySelector('#product_list_template'); var temp = document.querySelector('#product_list_template');
// filling template // filling template
temp.content.querySelector('.single-product-input').id = data.uuid + "-div"; temp.content.querySelector('.single-product-input').id = data.uuid + "-div";
temp.content.querySelector('input').value = data.uuid; temp.content.querySelector('input').value = data.uuid;
temp.content.querySelector('li').id = data.uuid + "-li"; temp.content.querySelector('li').id = data.uuid + "-li";
temp.content.querySelector('h4').id = data.uuid + "-h4"; 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.producttype + "_" + data.product.tileid;
temp.content.querySelector('p').textContent = data.product.beginposition; 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.querySelector('img').src = "data:image/jpeg;base64, " + data.img;
temp.content.querySelectorAll('span')[1].textContent = data.product.identifier; temp.content.querySelectorAll('span')[1].textContent = data.product.identifier;
temp.content.querySelectorAll('span')[2].textContent = data.product.size; temp.content.querySelectorAll('span')[2].textContent = data.product.size;
...@@ -496,6 +499,12 @@ $(document).ready(function () { ...@@ -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 // adds product to cart
$('#product-to-cart-form').submit(function (event) { $('#product-to-cart-form').submit(function (event) {
......
catalog/templates/map.html
View file @ 33e56229
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<link rel="stylesheet" href="{% static 'catalog/css/map.css' %}" type="text/css"> <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/body.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'catalog/css/modal1.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://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="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"> <link rel="stylesheet" href="{% static 'catalog/css/waitingModal.css' %}" type="text/css">
...@@ -190,7 +191,8 @@ ...@@ -190,7 +191,8 @@
</a> </a>
<ul class="treeview-menu sidebar-form"> <ul class="treeview-menu sidebar-form">
<li> <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> </li>
</ul> </ul>
</li> </li>
...@@ -322,6 +324,23 @@ ...@@ -322,6 +324,23 @@
</script> </script>
<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 OpenStreetMapsClass("map", -99.145556,19.419444, 10);
var osmap = new sidtMap("map", -89.63873079999999,21.0404457, 7); var osmap = new sidtMap("map", -89.63873079999999,21.0404457, 7);
osmap.geolocation(); osmap.geolocation();
......
reports/static/reports/js/minimap.js
View file @ 33e56229
...@@ -78,7 +78,7 @@ function addImageLayer(labelDate) { ...@@ -78,7 +78,7 @@ function addImageLayer(labelDate) {
let currentZoom = map.getView().getZoom(); let currentZoom = map.getView().getZoom();
// fit and zoom // fit and zoom
map.getView().fit(ol.proj.transformExtent(data.boundingBox, 'EPSG:4326', 'EPSG:3857')) // map.getView().fit(ol.proj.transformExtent(data.boundingBox, 'EPSG:4326', 'EPSG:3857'))
map.getView().setZoom(currentZoom); map.getView().setZoom(currentZoom);
map.getView().setMinZoom(data.zoom.min); map.getView().setMinZoom(data.zoom.min);
map.getView().setMaxZoom(data.zoom.max); map.getView().setMaxZoom(data.zoom.max);
...@@ -101,7 +101,6 @@ function setOpacity(value) { ...@@ -101,7 +101,6 @@ function setOpacity(value) {
currentOpacity = value; currentOpacity = value;
imageLayers.forEach(layer => { imageLayers.forEach(layer => {
if(layer.get('name') != 'mapbox' && layer.get('name') != 'polygon' && layer.get('name') != 'TCI') { if(layer.get('name') != 'mapbox' && layer.get('name') != 'polygon' && layer.get('name') != 'TCI') {
console.log(layer.get('name'), layer);
layer.setOpacity(value) layer.setOpacity(value)
} }
}) })
...@@ -119,6 +118,28 @@ function getSelectedCheckbox() { ...@@ -119,6 +118,28 @@ function getSelectedCheckbox() {
return values; return values;
} }
$("input[name=layer_type]").on( "click", () => { function getDataIndexByCheckboxId(dataset, id) {
let foundIndex;
dataset.forEach(function (data, index) {
let label = 'sclcheck-' + data.label.toLowerCase().replace(' ', '-');
if (label === id) {
foundIndex = index;
}
})
return foundIndex;
}
$('input[name=layer_type]').on('click', function(){
const input = $(this);
const dataset = myChart.config.data.datasets;
const index = getDataIndexByCheckboxId(dataset, input.parent().attr('id'));
if (index > -1) {
myChart.getDatasetMeta(index).hidden=!input.prop("checked");
myChart.update()
}
addImageLayer(currentDate); addImageLayer(currentDate);
}); });
reports/static/reports/js/reportImg.js
View file @ 33e56229
...@@ -3,6 +3,7 @@ var ctx = document.getElementById('myChart').getContext('2d'); ...@@ -3,6 +3,7 @@ var ctx = document.getElementById('myChart').getContext('2d');
//ctx.canvas.width = 256; //ctx.canvas.width = 256;
//ctx.canvas.height = 512; //ctx.canvas.height = 512;
var myChart = new Chart(ctx, config); var myChart = new Chart(ctx, config);
//var activePoints = []; //var activePoints = [];
var activePoints = config.data.labels; var activePoints = config.data.labels;
var imageNumber = 0; var imageNumber = 0;
...@@ -18,15 +19,9 @@ config.data.datasets.forEach(function (layer) { ...@@ -18,15 +19,9 @@ config.data.datasets.forEach(function (layer) {
// mostrar imagen al dar click en los puntos // mostrar imagen al dar click en los puntos
document.getElementById("myChart").onclick = function (evt) { document.getElementById("myChart").onclick = function (evt) {
stop(); stop();
console.log("on click")
console.log("evento: ")
console.log(evt)
// activePoints = myChart.getElementsAtEvent(evt); // activePoints = myChart.getElementsAtEvent(evt);
var activePoint = myChart.getElementAtEvent(evt); var activePoint = myChart.getElementAtEvent(evt);
console.log("activePoint: ")
console.log(activePoint)
console.log(activePoint.length)
if(activePoint.length>0){ if(activePoint.length>0){
var firstPoint = activePoint[0]; var firstPoint = activePoint[0];
......
reports/templates/aside.html
View file @ 33e56229
...@@ -166,72 +166,72 @@ ...@@ -166,72 +166,72 @@
TCI TCI
</label> </label>
</div> </div>
<!-- <div class="form-check submenu"> <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" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_0">
<label class="form-check-label" for="sclcheck"> <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"> <div class="form-check submenu" style="display:none" id="sclcheck-saturated">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_1" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_1">
<label class="form-check-label" for="sclcheck"> <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"> <div class="form-check submenu" style="display:none" id="sclcheck-shadows">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_2" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_2">
<label class="form-check-label" for="sclcheck"> <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"> <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" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_3">
<label class="form-check-label" for="sclcheck"> <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"> <div class="form-check submenu" style="display:none" id="sclcheck-vegetation">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_4" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_4">
<label class="form-check-label" for="sclcheck"> <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"> <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" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_5">
<label class="form-check-label" for="sclcheck"> <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"> <div class="form-check submenu" style="display:none" id="sclcheck-water">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_6" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_6">
<label class="form-check-label" for="sclcheck"> <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"> <div class="form-check submenu" style="display:none" id="sclcheck-unclassified">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_7" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_7">
<label class="form-check-label" for="sclcheck"> <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"> <div class="form-check submenu" style="display:none" id="sclcheck-clouds">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_8" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_8">
<label class="form-check-label" for="sclcheck"> <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"> <div class="form-check submenu" style="display:none" id="sclcheck-snow">
<input class="form-check-input" type="checkbox" name="layer_type" value="SCL_9" id="sclcheck"> <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_9">
<label class="form-check-label" for="sclcheck"> <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
</label> </label>
......
reports/templates/sclData.html
View file @ 33e56229
...@@ -324,20 +324,25 @@ ...@@ -324,20 +324,25 @@
<script> <script>
var defaultLegendClickHandler = Chart.defaults.global.legend.onClick; var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
var newLegendClickHandler = function (e, legendItem) { var newLegendClickHandler = function (e, legendItem) {
var index = legendItem.datasetIndex; var index = legendItem.datasetIndex;
//console.log(e)
console.log(legendItem.datasetIndex)
console.log(legendItem.text)
var ch = this.chart; var ch = this.chart;
var meta = ch.getDatasetMeta(index); var meta = ch.getDatasetMeta(index);
console.log(meta.hidden) var layer = legendItem.text.toLowerCase().replace(/\s/g, '-');
var layer = legendItem.text.toLowerCase(); let checkbox_id = '#sclcheck-'+layer;
//layer = layer.replace(" ", "_");
layer = layer.replace(/\s/g, '_'); //reeemplaza los espacios con guion bajo
console.log(layer)
var activePoint = ch.getElementAtEvent(e); var activePoint = ch.getElementAtEvent(e);
// isDatasetVisible return the opposite status?
// change checkbox in imagelayer
$(checkbox_id+" :input").prop("checked", !ch.isDatasetVisible(index));
addImageLayer(currentDate);
// myChart.config.data.datasets
// myChart.getDatasetMeta(4).hidden=true
//console.log(document.getElementById("titleMap").textContent) //console.log(document.getElementById("titleMap").textContent)
// var label = document.getElementById("titleMap").textContent; //obtiene la fecha que se está viendo // var label = document.getElementById("titleMap").textContent; //obtiene la fecha que se está viendo
// label = label.replace(/\//g,''); // reemplaza los diagonales por nada // label = label.replace(/\//g,''); // reemplaza los diagonales por nada
...@@ -362,6 +367,18 @@ ...@@ -362,6 +367,18 @@
//} //}
}; };
var showSCLcheckboxes = function(datasets) {
if (!datasets || datasets.length < 1) {
return;
}
datasets.forEach(function(data) {
let checkbox_id = '#sclcheck-'+data.label.toLowerCase().replace(' ','-');
$(checkbox_id).show();
$(checkbox_id+" :input").prop("checked", false);
});
}
var label; var label;
// Recibimos el JSON con los datos desde el View // Recibimos el JSON con los datos desde el View
{% autoescape off %} {% autoescape off %}
...@@ -388,7 +405,8 @@ ...@@ -388,7 +405,8 @@
onClick: newLegendClickHandler, onClick: newLegendClickHandler,
} }
}; };
console.log(config);
showSCLcheckboxes(config.data.datasets);
{% endautoescape %} {% endautoescape %}
</script> </script>
<script type="text/javascript" src="{% static 'reports/js/reportImg.js' %}"></script> <script type="text/javascript" src="{% static 'reports/js/reportImg.js' %}"></script>
......
reports/views.py
View file @ 33e56229
...@@ -539,8 +539,8 @@ def ProcessChartData(path): ...@@ -539,8 +539,8 @@ def ProcessChartData(path):
item['label'] = labelNames[int(l)] item['label'] = labelNames[int(l)]
# item['fill'] = "false" # item['fill'] = "false"
if l == "0": # if l == "0":
item['hidden'] = "true" item['hidden'] = "true"
item['data'] = [v[l] * 60 * 60 / 1000000. if (l in v) else 0 for k, v in sorted(json_data.items())] item['data'] = [v[l] * 60 * 60 / 1000000. if (l in v) else 0 for k, v in sorted(json_data.items())]
item['backgroundColor'] = colors[int(l)] item['backgroundColor'] = colors[int(l)]
data['datasets'].append(item) data['datasets'].append(item)
......
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