Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit dac74eac authored by Emmanuel René Huchim Puc's avatar Emmanuel René Huchim Puc
Browse files
Options

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

parents 24dd9f6c cfb3df0a
Hide whitespace changes
Inline Side-by-side
Showing with 293 additions and 261 deletions
catalog/forms.py
View file @ dac74eac
...@@ -12,7 +12,7 @@ platforms = [ ...@@ -12,7 +12,7 @@ platforms = [
class ASFSearchForm(forms.Form): class ASFSearchForm(forms.Form):
polygon = forms.CharField(widget=forms.TextInput(attrs={'class':"form-control"})) polygon = forms.CharField(widget=forms.TextInput(attrs={'class':"form-control"}))
platform = forms.ChoiceField(choices=platforms, widget=forms.Select(attrs={'class':"form-control"})) platform = forms.ChoiceField(choices=platforms, widget=forms.Select(attrs={'class':"form-control"}))
start = forms.DateField(widget=forms.DateTimeInput(attrs={'type':'datetime-local'}), required=False) start = forms.DateField(widget=forms.DateTimeInput(attrs={'type':'datetime-local'}), required=True)
end = forms.DateField(widget=forms.DateTimeInput(attrs={'type':'datetime-local'}), required=False) end = forms.DateField(widget=forms.DateTimeInput(attrs={'type':'datetime-local'}), required=True)
maxResults = forms.IntegerField() maxResults = forms.IntegerField()
catalog/static/css/body.css
View file @ dac74eac
...@@ -144,7 +144,20 @@ div .item-info-view { ...@@ -144,7 +144,20 @@ div .item-info-view {
top: 52px; top: 52px;
left: -402px; left: -402px;
width: 400px; width: 400px;
height: 418px; height: 360px;
background-color: #dc7828;
}
div .item-info-cart-view {
position: absolute;
background: white;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
top: -106px;
left: -417px;
width: 400px;
height: 360px;
background-color: #dc7828; background-color: #dc7828;
} }
...@@ -157,10 +170,14 @@ ul.control-sidebar-menu li:hover div.item-info-view { ...@@ -157,10 +170,14 @@ ul.control-sidebar-menu li:hover div.item-info-view {
} }
div .cropped-preview { div .cropped-preview {
max-height: 140px; max-height: 200px;
overflow: hidden; overflow: hidden;
} }
div .cropped-preview img {
width: 50px;
}
div .cropped-preview img { div .cropped-preview img {
width: 100%; width: 100%;
border-top-left-radius: 10px; border-top-left-radius: 10px;
...@@ -172,7 +189,7 @@ div .polygon-item-data { ...@@ -172,7 +189,7 @@ div .polygon-item-data {
} }
div .polygon-item-data .city { div .polygon-item-data .city {
font-size: 20px; font-size: 12px;
font-weight: bolder; font-weight: bolder;
padding-bottom: 5px; padding-bottom: 5px;
border-bottom: 2px solid; border-bottom: 2px solid;
...@@ -197,12 +214,32 @@ div .item-info-view .button-add-del { ...@@ -197,12 +214,32 @@ div .item-info-view .button-add-del {
padding-left: 58%; padding-left: 58%;
} }
div #product-list-globe { div #product-list-globe,
max-height: 100px; div #product-list-cart-items {
max-height: 500px;
overflow: auto;
}
div #product-list-cart-items {
max-height: 167px;
overflow: auto; overflow: auto;
} }
div .sidebar-title h3 {
float: left;
}
div .sidebar-button button {
margin-top: 17px;
margin-left: 10px;
}
/*----------product list clases----------*/ /*----------product list clases----------*/
div .draw-button {
float: left;
margin-left: 20px;
}
div .sidebar-input { div .sidebar-input {
border-radius: 3px; border-radius: 3px;
border: 1px solid #374850; border: 1px solid #374850;
......
catalog/static/css/map.css
View file @ dac74eac
...@@ -25,3 +25,8 @@ html, body ...@@ -25,3 +25,8 @@ html, body
background-color: rgba(220,220,220,0.9); background-color: rgba(220,220,220,0.9);
float:right; float:right;
} }
#div-draw-btn
{
text-align: center;
}
\ No newline at end of file
catalog/static/js/dataRetrieval.js
View file @ dac74eac
// // Get the <datalist> and <input> elements.
// var input = document.getElementById('ajax-input');
// var value = input.value;
// var dataList = document.getElementById('polygon-list');
// console.log("VALUE:", value);
// // Create a new XMLHttpRequest.
// var request = new XMLHttpRequest();
//
// // Handle state changes for the request.
// request.onreadystatechange = function(response) {
// if (request.readyState === 4) {
// if (request.status === 200) {
// // Parse the JSON
// var jsonOptions = JSON.parse(request.responseText);
//
// // Loop over the JSON array.
// jsonOptions.forEach(function(item) {
// // Create a new <option> element.
// var option = document.createElement('option');
// // Set the value using the item in the JSON array.
// option.value = item;
// // Add the <option> element to the <datalist>.
// dataList.appendChild(option);
// });
//
// // Update the placeholder text.
// input.placeholder = "Search...";
// } else {
// // An error occured :(
// input.placeholder = "Couldn't load datalist options :(";
// }
// }
// };
//
// // Update the placeholder text.
// input.placeholder = "Loading options...";
//
// // Set up and make the request.
// request.open('POST', 'http://localhost:8080/catalog/searchsubmit/', true);
// request.send({
// value: value
// });
var OPT_LIST_IS_HIDDEN = true; var OPT_LIST_IS_HIDDEN = true;
var INPUT_ON_FOCUS = false; var INPUT_ON_FOCUS = false;
var polygonList; var polygonList;
var product_list = [];
var makeRequest = function (value) { var makeRequest = function (value) {
var pol_element = document.getElementById('polygon-list'); var pol_element = document.getElementById('polygon-list');
...@@ -118,6 +77,19 @@ function drawPolygon(element) { ...@@ -118,6 +77,19 @@ function drawPolygon(element) {
}) })
} }
function erase_input() {
$('#ajax-input').val('');
}
var prevfeature = null;
function drawApiResponse(element) {
product_list.catalog.forEach(function (data) {
if (data.id === element.id) {
// osmap.removePolygon();
prevfeature = osmap.addfootprint(data.product.footprint, prevfeature);
}
})
}
$('#ajax-input').focus(function () { $('#ajax-input').focus(function () {
console.log('in'); console.log('in');
...@@ -160,6 +132,10 @@ $(document).ready(function () { ...@@ -160,6 +132,10 @@ $(document).ready(function () {
var typingTimer; var typingTimer;
var typingInterval = 800; //milliseconds var typingInterval = 800; //milliseconds
var productListPrev = [];
var productListGlobe = [];
var productListCart = {}; // this array represent DB where products will be stored
// On keyup, start the contdown // On keyup, start the contdown
$('#ajax-input').on('input', function () { $('#ajax-input').on('input', function () {
var value = $('#ajax-input').val(); var value = $('#ajax-input').val();
...@@ -180,7 +156,6 @@ $(document).ready(function () { ...@@ -180,7 +156,6 @@ $(document).ready(function () {
} }
}); });
var productListGlobe = []; // this array represent DB where products will be stored
var PRODUCT_IN_LIST = false; var PRODUCT_IN_LIST = false;
// function for making POST request to productList in view.py // function for making POST request to productList in view.py
...@@ -193,13 +168,19 @@ $(document).ready(function () { ...@@ -193,13 +168,19 @@ $(document).ready(function () {
data: submit_data, data: submit_data,
dataType: 'json', dataType: 'json',
success: function (data) { success: function (data) {
PRODUCT_IN_LIST = false;
productListGlobe = [];
productListPrev = [];
console.log("DATA: ", data); console.log("DATA: ", data);
product_list = data;
productListGlobe = data.catalog;
console.log('GLOBEEE: ', productListGlobe);
if (productListGlobe.length > 0) { if (productListPrev.length > 0) {
PRODUCT_IN_LIST = false; PRODUCT_IN_LIST = false;
for (var i = 0; i < productListGlobe.length; i++) { for (var i = 0; i < productListPrev.length; i++) {
if (productListGlobe[i].id === data.id) { if (productListPrev[i].id === data.id) {
i = productListGlobe.length; i = productListPrev.length;
PRODUCT_IN_LIST = true; PRODUCT_IN_LIST = true;
} }
} }
...@@ -207,53 +188,52 @@ $(document).ready(function () { ...@@ -207,53 +188,52 @@ $(document).ready(function () {
if (!PRODUCT_IN_LIST) { if (!PRODUCT_IN_LIST) {
console.log("DEFS: ahora crea producto"); console.log("DEFS: ahora crea producto");
productListGlobe.push(data); productListPrev.push(data);
data.catalog.forEach(function (data) { data.catalog.forEach(function (data) {
console.log("DD: ", data); console.log("DD: ", data);
var product_html = '<li id="' + data.id + ' class="hover-me">'+ $.ajax({
'<a href="javascript:void(0)">'+ type: "GET",
'<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>'+ url: img_req_url,
'<div class="menu-info">'+ data: {
'<h4 class="control-sidebar-subheading">' + data.city_name + '</h4>'+ // 'csrfmiddlewaretoken': document.getElementsByName('csrfmiddlewaretoken')[0].value,
'<p>May 26th 2018</p>'+ 'value': data.product.link_icon
'</div>'+ },
'</a>'+ dataType: 'text',
// '</li>'+ success: function (response) {
// '<div id="' + data.id + '-hover" class="row">'+ console.log("from img response: ", response);
// '<div class="col-12">'+ var product_html = '<li id="' + data.id + '" onclick="drawApiResponse(this)" class="hover-me">'+
'<a href="javascript:void(0)">'+
'<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>'+
'<div class="menu-info">'+
'<h4 class="control-sidebar-subheading">' + data.product.producttype + '_' + data.product.tileid + '</h4>'+
'<p>' + data.product.beginposition + '</p>'+
'</div>'+
'</a>'+
'<div id="' + data.id + '-hover" class="item-info-view">'+ '<div id="' + data.id + '-hover" class="item-info-view">'+
'<div class="cropped-preview">'+ '<div class="cropped-preview">'+
'<img src="' + data.img + '">'+ '<img src="' + data.img + '">'+
// '<img src="data:image/jpeg;base64, ' + raw_img + '">'+
'</div>'+ '</div>'+
'<div class="polygon-item-data">'+ '<div class="polygon-item-data">'+
'<div class="city">' + data.city_name + '</div>'+ '<div class="city">' + data.product.identifier + '</div>'+
'<p class="info">'+ '<p class="info">'+
'<i class="fa fa-sync-alt"></i>'+ '<i class="fa fa-sync-alt"></i>'+
'<span class="type">Process:</span><br>'+ '<span class="type">Size:</span><br>'+
'<span class="data-info">' + data.process + '</span>'+ '<span class="data-info">' + data.product.size + '</span>'+
'</p>'+
'<p class="info">'+
'<i class="fa fa-calendar-alt"></i>'+
'<span class="type">Date range:</span><br>'+
'<span class="data-info">From ' + data.start_date + ' to ' + data.end_date + '</span>'+
'</p>'+ '</p>'+
'<p class="info">'+ '<p class="info">'+
'<i class="fa fa-cloud"></i>'+ '<i class="fa fa-gear"></i>'+
'<span class="type">Cloud percentage:</span><br>'+ '<span class="type">Instrument:</span><br>'+
'<span class="data-info">' + data.cloud_percentage + ' %</span>'+ '<span class="data-info">' + data.product.instrumentname + '</span>'+
'</p>'+ '</p>'+
'</div>'+ '</div>'+
'<div class="button-add-del">'+
'<button type="button" class="btn btn-success">Add to cart</button> '+
'<button type="button" class="btn btn-danger">Remove</button>'+
'</div>'+
'</div>'+ '</div>'+
// '</div>'+ '</li>';
// '</div>'+
'</li>';
$('#product-list-globe').append(product_html); $('#product-list-globe').append(product_html);
}
});
}); });
} }
} }
...@@ -261,4 +241,71 @@ $(document).ready(function () { ...@@ -261,4 +241,71 @@ $(document).ready(function () {
event.preventDefault(); event.preventDefault();
}); });
$('#add-cart').click(function () {
var product_id = productListGlobe[0].id;
productListCart[product_id] = productListGlobe;
console.log("CAAART: ", productListCart);
var globe_element = document.getElementById('product-list-globe');
while (globe_element.firstChild) {
globe_element.removeChild(globe_element.firstChild);
}
var product_html = '<li class="treeview">'+
'<a href="#">'+
'<i class="fa fa-cubes"></i>'+
'<span>Product Name</span>'+
'<span class="pull-right-container">'+
'<span class="label label-primary pull-right"></span>'+
'</span>'+
'</a>'+
'<ul class="treeview-menu sidebar-form">'+
'<li>'+
'<ul id="product-list-cart-items" class="control-sidebar-menu">';
var product_html_li = '';
console.log("djdj: ", productListGlobe);
productListGlobe.forEach(function (data) {
console.log("SS: ", data.product.size);
product_html_li += '<li id="' + data.id + ' class="hover-me">'+
'<a href="javascript:void(0)">'+
'<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>'+
'<div class="menu-info">'+
'<h4 class="control-sidebar-subheading">' + data.product.producttype + '_' + data.product.tileid + '</h4>'+
'<p>' + data.product.beginposition + '</p>'+
'</div>'+
'</a>'+
'<div id="' + data.id + '-hover" class="item-info-cart-view">'+
'<div class="cropped-preview">'+
'<img src="' + data.img + '">'+
'</div>'+
'<div class="polygon-item-data">'+
'<div class="city">' + data.product.identifier + '</div>'+
'<p class="info">'+
'<i class="fa fa-sync-alt"></i>'+
'<span class="type">Size:</span><br>'+
'<span class="data-info">' + data.product.size + '</span>'+
'</p>'+
'<p class="info">'+
'<i class="fa fa-calendar-gear"></i>'+
'<span class="type">Instrument:</span><br>'+
'<span class="data-info">' + data.product.instrumentname + '</span>'+
'</p>'+
'</div>'+
'</div>'+
'</li>';
});
product_html_li += '</ul>'+
'</li>'+
'</ul>'+
'</li>';
$('#product-list-cart').append(product_html + product_html_li);
// product_html = '';
});
}); });
catalog/static/js/openLayers4.js
View file @ dac74eac
...@@ -120,6 +120,38 @@ OpenStreetMapsClass.prototype.addWKTPolygon = function(wkt) ...@@ -120,6 +120,38 @@ OpenStreetMapsClass.prototype.addWKTPolygon = function(wkt)
document.getElementById("id_polygon").value = wkt; document.getElementById("id_polygon").value = wkt;
} }
OpenStreetMapsClass.prototype.addfootprint = function(wkt, prevFeature)
{
if (prevFeature) {
this.vectorLayer.getSource().removeFeature(prevFeature);
}
var format = new ol.format.WKT();
var feature = format.readFeature(wkt, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857'
});
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#dc7828',
width: 1
}),
fill: new ol.style.Fill({
color: 'rgba(255,255,0,0.1)'
})
})
feature.setStyle(style);
this.map.getView().fit(feature.getGeometry(), {duration: 1000, padding: [0, 0, 70, 0]});
this.vectorLayer.getSource().addFeature(feature);
return feature;
}
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
/** /**
* calculate the area of each polygon and return the coords of the biggest polygon * calculate the area of each polygon and return the coords of the biggest polygon
......
catalog/static/js/sidtMap.js
View file @ dac74eac
...@@ -105,24 +105,22 @@ function sidtMap(divID, lng, lat, z) ...@@ -105,24 +105,22 @@ function sidtMap(divID, lng, lat, z)
this.map.on("pointermove",function(e){self.onMousemove(e)}); this.map.on("pointermove",function(e){self.onMousemove(e)});
}; };
sidtMap.prototype = Object.create( OpenStreetMapsClass.prototype ); sidtMap.prototype = Object.create( OpenStreetMapsClass.prototype );
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
sidtMap.prototype.addInteraction = function()
sidtMap.prototype.draw = function ()
{ {
var self = this; var self = this;
this.interaction = new ol.interaction.Draw({ this.interaction = new ol.interaction.Draw({
source:this.vectorLayer.getSource(), source:this.vectorLayer.getSource(),
features: this.features, features: this.features,
type: "Polygon" type: "Polygon"
}); });
this.selectPointerMove = new ol.interaction.Select({
condition: ol.events.condition.pointerMove
});
this.interaction.on("drawend",function(e){ this.interaction.on("drawend",function(e){
self.showCoords(e.feature.getGeometry()); self.showCoords(e.feature.getGeometry());
self.map.removeInteraction(self.interaction);
}); });
this.interaction.on("drawstart",function(e){ this.interaction.on("drawstart",function(e){
...@@ -133,6 +131,18 @@ sidtMap.prototype.addInteraction = function() ...@@ -133,6 +131,18 @@ sidtMap.prototype.addInteraction = function()
this.map.addInteraction(this.selectPointerMove); this.map.addInteraction(this.selectPointerMove);
} }
sidtMap.prototype.addInteraction = function()
{
var self = this;
this.interactionSelect = new ol.interaction.Select({
condition: ol.events.condition.pointerMove
});
this.map.addInteraction(this.interactionSelect);
}
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
sidtMap.prototype.onMousemove = function(e) sidtMap.prototype.onMousemove = function(e)
{ {
......
catalog/templates/base_top.html
View file @ dac74eac
...@@ -104,124 +104,18 @@ ...@@ -104,124 +104,18 @@
<div class="tab-content"> <div class="tab-content">
<!-- Home tab content --> <!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab"> <div class="tab-pane" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading"><b>Products</b></h3> <div class="container">
<ul id="product-list-globe" class="control-sidebar-menu"></ul> <div class="sidebar-title">
<h3><b>Products</b></h3>
<!-- <li id="me-id">
<a href="javascript:void(0)">
<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Mérida, Yucatán</h4>
<p>May 26th 2018</p>
</div>
</a>
</li>
<div id="me-id-hover" class="row">
<div class="col-12">
<div id="polygon id" class="item-info-view">
<div class="cropped-preview">
<img src="{% static 'images/sat_preview/sat_test.jpg' %}">
</div>
<div class="polygon-item-data">
<div class="city">Mérida, Yucatán</div>
<p class="info">
<span class="type">Process:</span><br>
Vegetation index
</p>
<p class="info">
<span class="type">Date range:</span><br>
2018-05-19 to 2018-05-26
</p>
<p class="info">
<span class="type">Polygon:</span><br>
WKT format
</p>
<p class="info">
<span class="type">Cloud percentage:</span><br>
25%
</p>
</div>
<div class="button-add-del">
<button type="button" class="btn btn-success">Add to cart</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div> </div>
<li id="va-id"> <div class="sidebar-button">
<a href="javascript:void(0)"> <button type="button" name="search" id="add-cart" class="btn btn-primary">
<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i> Add to cart
</button>
<div class="menu-info"> </div>
<h4 class="control-sidebar-subheading">Valladolid, Yucatán</h4> </div>
<p>May 26th 2018</p> <!-- this ul element is filled with data -->
</div> <ul id="product-list-globe" class="control-sidebar-menu"></ul>
</a>
</li>
<div id="va-id-hover" class="row">
<div class="col-12">
<div id="polygon id" class="item-info-view">
<div class="cropped-preview">
<img src="{% static 'images/sat_preview/sat_test.jpg' %}">
</div>
<div class="polygon-item-data">
<div class="city">Valladolid, Yucatán</div>
<p class="info">
<span class="type">Process:</span><br>
Water bodies
</p>
<p class="info">
<span class="type">Date range:</span><br>
2018-05-19 to 2018-05-26
</p>
<p class="info">
<span class="type">Polygon:</span><br>
WKT format
</p>
<p class="info">
<span class="type">Cloud percentage:</span><br>
40%
</p>
</div>
<div class="button-add-del">
<button type="button" class="btn btn-success">Add to cart</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div> -->
<!-- <h3 class="control-sidebar-heading">Recent Activity</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
<p>Will be 23 on April 24th</p>
</div>
</a>
</li>
</ul> -->
<!-- /.control-sidebar-menu -->
<!-- <h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="label label-danger pull-right">70%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
</ul> -->
<!-- /.control-sidebar-menu --> <!-- /.control-sidebar-menu -->
</div> </div>
<!-- /.tab-pane --> <!-- /.tab-pane -->
...@@ -230,33 +124,18 @@ ...@@ -230,33 +124,18 @@
<!-- /.tab-pane --> <!-- /.tab-pane -->
<!-- Settings tab content --> <!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab"> <div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post"> <div class="container">
<h3 class="control-sidebar-heading">General Settings</h3> <div class="sidebar-title">
<h3><b>My cart</b></h3>
<div class="form-group"> </div>
<label class="control-sidebar-subheading"> <div class="sidebar-button">
Report panel usage <button type="button" name="search" id="add-cart" class="btn btn-primary">
<input type="checkbox" class="pull-right" checked> Buy products
</label> </button>
</div>
<p>
Some information about this general settings option
</p>
</div>
<!-- /.form-group -->
<h3 class="control-sidebar-heading">Chat Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked>
</label>
</div> </div>
<!-- /.form-group --> <!-- this ul element is filled with data -->
</form> <ul id="product-list-cart" class="sidebar-menu" data-widget="tree"></ul>
</div> </div>
<!-- /.tab-pane --> <!-- /.tab-pane -->
</div> </div>
......
catalog/templates/map.html
View file @ dac74eac
...@@ -123,7 +123,7 @@ ...@@ -123,7 +123,7 @@
<div class="input-group"> <div class="input-group">
<input type="text" id="ajax-input" name="value" class="form-control" placeholder="Search region..."> <input type="text" id="ajax-input" name="value" class="form-control" placeholder="Search region...">
<span class="input-group-btn"> <span class="input-group-btn">
<button type="button" name="search" id="search-btn" class="btn btn-flat"> <button type="button" name="search" id="search-btn" class="btn btn-flat" onclick="erase_input()">
<i class="fa fa-eraser"></i> <i class="fa fa-eraser"></i>
</button> </button>
</span> </span>
...@@ -139,11 +139,6 @@ ...@@ -139,11 +139,6 @@
<!-- <form role="form" target="catalogFrame" action="{% url 'productList' %}" method="post"> --> <!-- <form role="form" target="catalogFrame" action="{% url 'productList' %}" method="post"> -->
<form id='product-form' role="form" method="post"> <form id='product-form' role="form" method="post">
{% csrf_token %} {% csrf_token %}
<div class="row" id="option-list">
<div class="col-12">
<ul id="polygon-list" class="no-bullet"></ul>
</div>
</div>
<ul class="sidebar-menu" data-widget="tree"> <ul class="sidebar-menu" data-widget="tree">
<li class="treeview"> <li class="treeview">
<a href="#"> <a href="#">
...@@ -199,8 +194,7 @@ ...@@ -199,8 +194,7 @@
<li> <li>
<a href="#"> <a href="#">
<span> <span>
<i class="fa fa-search"></i> <button type="submit" name="search" id="search-btn" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
<button type="submit" name="search" id="search-btn" class="btn btn-primary">Search</button>
<!-- <button name="search" id="search-btn" class="btn btn-primary">Search</button> --> <!-- <button name="search" id="search-btn" class="btn btn-primary">Search</button> -->
</span> </span>
</a> </a>
...@@ -212,6 +206,10 @@ ...@@ -212,6 +206,10 @@
</ul> </ul>
</form> </form>
</div> </div>
<div id="div-draw-btn" class="draw-button">
<button type="submit" name="draw" id="draw-btn" class="btn btn-primary" onclick="osmap.draw()"><i class="fa fa-object-ungroup"></i> Dibujar</button>
</div>
<!-- form-group--> <!-- form-group-->
{% endblock %} {% endblock %}
...@@ -268,5 +266,6 @@ ...@@ -268,5 +266,6 @@
osmap.addInteraction(); osmap.addInteraction();
var req_url = "{% url 'search-submit' %}"; // url for requesting polygon data var req_url = "{% url 'search-submit' %}"; // url for requesting polygon data
var prod_req_url = "{% url 'productList' %}" // url for requesting product data var prod_req_url = "{% url 'productList' %}" // url for requesting product data
var img_req_url = "{% url 'img-rqst' %}" // url for requestim preview image
</script> </script>
{% endblock %} {% endblock %}
catalog/urls.py
View file @ dac74eac
...@@ -7,6 +7,7 @@ urlpatterns = [ ...@@ -7,6 +7,7 @@ urlpatterns = [
url(r'^$', views.map, name='map'), url(r'^$', views.map, name='map'),
url(r'^productlist/$', views.productList, name='productList'), url(r'^productlist/$', views.productList, name='productList'),
url(r'^regionsearched/$', views.regionSearched, name='regionSearched'), url(r'^regionsearched/$', views.regionSearched, name='regionSearched'),
url(r'^searchsubmit/$', views.SearchSubmitView.as_view(), name='search-submit') url(r'^searchsubmit/$', views.SearchSubmitView.as_view(), name='search-submit'),
url(r'^imgrequest/$', views.requestToImage, name='img-rqst')
] ]
catalog/views.py
View file @ dac74eac
...@@ -9,9 +9,12 @@ from django.urls import reverse ...@@ -9,9 +9,12 @@ from django.urls import reverse
from django.views.generic.base import View from django.views.generic.base import View
from django.template import loader from django.template import loader
from urllib import urlencode from urllib import urlencode
import requests, json, unicodedata import requests, json, unicodedata, sys
from apis.sentinel import APISentinel
import random sys.path.append('../')
from geosentinel import APISentinel
sentinel = APISentinel.APISentinel('emmhp', 'geoemm29')
# Create your views here. # Create your views here.
#------------------------------------------------------------------------------- #-------------------------------------------------------------------------------
...@@ -33,6 +36,18 @@ def map(request): ...@@ -33,6 +36,18 @@ def map(request):
# Render the HTML template index.html with the data in the context variable # Render the HTML template index.html with the data in the context variable
return render(request, 'map.html', { "searchForm": form }) return render(request, 'map.html', { "searchForm": form })
#-------------------------------------------------------------------------------
def requestToImage(request):
# print("REQUEST: ", request.GET)
img_link = request.GET['value']
# img_link = img_link[:img_link.find("/") + 2] + "emmhp:geoemm29@" + img_link[img_link.find("/") + 2:]
# r = requests.get(img_link, auth=("emmhp", "geoemm29"), stream=True)
# print("RAAAW: ", r.raw.read())
return JsonResponse({'img': "reqToIMG"})
# return HttpResponse(r.raw.read(), content_type="image/jpeg")
#------------------------------------------------------------------------------- #-------------------------------------------------------------------------------
def productList(request): def productList(request):
""" """
...@@ -45,33 +60,40 @@ def productList(request): ...@@ -45,33 +60,40 @@ def productList(request):
area = req['polygon'][0] area = req['polygon'][0]
init_date = req['start'][0][:10] init_date = req['start'][0][:10]
end_date = req['end'][0][:10] end_date = req['end'][0][:10]
cloud_percentage = req['cloudPercentage'][0] cloud_percentage = "[0 TO " + req['cloudPercentage'][0] + "]"
## ----- aqui llamada a api sentinel ## ----- aqui llamada a api sentinel
## ----- antes consultar en DB si no se tiene ya el producto ## ----- antes consultar en DB si no se tiene ya el producto
sentinel = APISentinel() date = ("".join(init_date.split('-')), "".join(end_date.split('-')))
products = sentinel.getProducts(area, init_date, end_date, cloud_percentage) params = {"platformname": "Sentinel-2"}
# if cloud_percentage.strip():
# params['cloudcoverpercentage'] = cloud_percentage
params['cloudcoverpercentage'] = cloud_percentage
products = sentinel.getProducts(area, date, params)
## simulation of 6-digit random id, this will be obtain from sentinel(?) ## simulation of 6-digit random id, this will be obtain from sentinel(?)
# random_id = ''.join(["%s" % random.randint(0, 9) for i in range(0, 6)]) # random_id = ''.join(["%s" % random.randint(0, 9) for i in range(0, 6)])
## path from image preview storage location ## path from image preview storage location
img_preview = '/static/images/sat_preview/sat_test.jpg' img_preview = '/static/images/sat_preview/sat_test.jpg'
item_data = {
'img' : img_preview,
'process' : process,
'start_date' : init_date,
'end_date' : end_date,
'cloud_percentage': cloud_percentage
}
# se crea una lista de objetos del catalogo # se crea una lista de objetos del catalogo
catalog = [] catalog = []
for p in products: for p in products:
item_data['id'] = products[p]['uuid'] img_link = products[p]['link_icon']
item_data['product'] = products[p] img_link = img_link[:img_link.find("/")+2] + "emmhp:geoemm29@" + img_link[img_link.find("/")+2:]
catalog.append(item_data)
catalog.append({
'process' : process,
'start_date' : init_date,
'end_date' : end_date,
'cloud_percentage': cloud_percentage,
'product' : products[p],
'id' : products[p]['uuid'],
'img' : img_preview
})
return JsonResponse({'catalog':catalog}); return JsonResponse({'catalog':catalog});
......
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