Skip to content

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

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

parents 4e6f8d72 e130a25f
Show whitespace changes
Inline Side-by-side
Showing with 411 additions and 87 deletions
catalog/static/css/body.css
View file @ e29d5187
......@@ -72,7 +72,7 @@ li.pol {
.box.box-solid.box-warning>.box-header {
color: #ffffff;
background: #dc7828;
background-color: #dc7828
background-color: #dc7828;
}
.box {
......@@ -110,3 +110,90 @@ li.pol {
padding-left: 280px;
}
/*--------option list classes--------*/
/*----------product list clases----------*/
.ajax-input {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
border-radius: 3px;
box-shadow: none;
border-color: #222d32;
}
div .item-info-view {
position: absolute;
background: white;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
top: 52px;
left: -402px;
width: 400px;
height: 418px;
background-color: #dc7828;
}
ul.control-sidebar-menu li div.item-info-view {
display: none;
}
ul.control-sidebar-menu li:hover div.item-info-view {
display: block;
}
div .cropped-preview {
max-height: 140px;
overflow: hidden;
}
div .cropped-preview img {
width: 100%;
border-top-left-radius: 10px;
}
div .polygon-item-data {
margin: 10px;
color: white;
}
div .polygon-item-data .city {
font-size: 20px;
font-weight: bolder;
padding-bottom: 5px;
border-bottom: 2px solid;
}
div .polygon-item-data .info {
font-size: 16px;
margin-top: 15px;
margin-left: 15px;
}
div .polygon-item-data .info .type {
font-weight: bold;
margin-left: 10px;
}
div .polygon-item-data .info .data-info {
margin-left: 27px;
}
div .item-info-view .button-add-del {
padding-left: 58%;
}
/*----------product list clases----------*/
catalog/static/js/dataRetrieval.js
View file @ e29d5187
......@@ -41,6 +41,7 @@
// value: value
// });
var OPT_LIST_IS_HIDDEN = true;
var INPUT_ON_FOCUS = false;
var polygonList;
var makeRequest = function (value) {
......@@ -95,6 +96,10 @@ var makeRequest = function (value) {
function drawPolygon(element) {
polygonList.forEach(function (polygon) {
if (polygon.id === element.id) {
// set input box with polygon city name
var input_text = polygon.city + ", " + polygon.state;
$("#ajax-input").val(input_text);
// remove prev polygon
osmap.removePolygon();
......@@ -110,27 +115,32 @@ function drawPolygon(element) {
})
}
$('#ajax-input').focus(function () {
console.log('in');
INPUT_ON_FOCUS = true;
if (OPT_LIST_IS_HIDDEN && $(this).val()) {
$('#option-list').show();
OPT_LIST_IS_HIDDEN = false;
}
}).blur(function () {
INPUT_ON_FOCUS = false;
if (!OPT_LIST_IS_HIDDEN && $(this).val() && $(event.target).closest('#option-list').length) {
$('#option-list').hide();
OPT_LIST_IS_HIDDEN = true;
}
});
$('#polygon-list').click(function () {
$('#option-list').hide();
OPT_LIST_IS_HIDDEN = true;
$('#ajax-input').value = $(this)
// $('#ajax-input').value = $(this);
});
$(document).click(function (event) {
if (!OPT_LIST_IS_HIDDEN) {
if (!OPT_LIST_IS_HIDDEN && !INPUT_ON_FOCUS) {
//if click is triggered outside '#option-list' element remove the list
if(!$(event.target).closest('#option-list').length > 0 ) {
$('#option-list').hide();
......@@ -166,4 +176,86 @@ $(document).ready(function () {
return
}
});
var productListGlobe = []; // this array represent DB where products will be storaged
var PRODUCT_IN_LIST = false;
// function for making POST request to productList in view.py
$('#product-form').submit(function (event) {
var submit_data = $('#product-form').serialize();
$.ajax({
type: "POST",
url: prod_req_url,
data: submit_data,
dataType: 'json',
success: function (data) {
console.log("DATA: ", data);
if (productListGlobe.length > 0) {
PRODUCT_IN_LIST = false;
for (var i = 0; i < productListGlobe.length; i++) {
if (productListGlobe[i].id === data.id) {
i = productListGlobe.length;
PRODUCT_IN_LIST = true;
}
}
}
if (!PRODUCT_IN_LIST) {
console.log("DEFS: ahora crea producto");
productListGlobe.push(data);
var product_html = '<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.city_name + '</h4>'+
'<p>May 26th 2018</p>'+
'</div>'+
'</a>'+
// '</li>'+
// '<div id="' + data.id + '-hover" class="row">'+
// '<div class="col-12">'+
'<div id="' + data.id + '-hover" class="item-info-view">'+
'<div class="cropped-preview">'+
'<img src="' + data.img + '">'+
'</div>'+
'<div class="polygon-item-data">'+
'<div class="city">' + data.city_name + '</div>'+
'<p class="info">'+
'<i class="fa fa-sync-alt"></i>'+
'<span class="type">Process:</span><br>'+
'<span class="data-info">' + data.process + '</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 class="info">'+
'<i class="fa fa-cloud"></i>'+
'<span class="type">Cloud percentage:</span><br>'+
'<span class="data-info">' + data.cloud_percentage + ' %</span>'+
'</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">Remove</button>'+
'</div>'+
'</div>'+
// '</div>'+
// '</div>'+
'</li>';
$('#product-list-globe').append(product_html);
}
}
});
event.preventDefault();
});
});
$("li.hover-me").on('mouseenter', 'li', function () {
console.log("enter!");
});
catalog/templates/base_top.html
View file @ e29d5187
......@@ -86,12 +86,12 @@
{% block content %}{% endblock %}
</div>
<!-- /.content-wrapper -->
<!-- <footer class="main-footer">-->
<!-- <div class="pull-right hidden-xs">-->
<!-- <b>Version</b> 2.4.0-->
<!-- </div>-->
<!-- <strong>Copyright &copy; 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights reserved.-->
<!-- </footer>-->
<!-- <footer class="main-footer">-->
<!-- <div class="pull-right hidden-xs">-->
<!-- <b>Version</b> 2.4.0-->
<!-- </div>-->
<!-- <strong>Copyright &copy; 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights reserved.-->
<!-- </footer>-->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
......@@ -104,8 +104,124 @@
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">Products</h3>
<iframe id="catalogFrame" name="catalogFrame" frameBorder="0" height="450" width="210">my frame</iframe>
<h3 class="control-sidebar-heading"><b>Products</b></h3>
<ul id="product-list-globe" class="control-sidebar-menu">
<!-- <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>
<li id="va-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">Valladolid, Yucatán</h4>
<p>May 26th 2018</p>
</div>
</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> -->
</ul>
<!-- <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 -->
</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
......@@ -128,6 +244,8 @@
</div>
<!-- /.form-group -->
<h3 class="control-sidebar-heading">Chat Settings</h3>
<div class="form-group">
......@@ -137,20 +255,17 @@
</label>
</div>
<!-- /.form-group -->
</form>
</div>
<!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<!-- Add the sidebar's background. This div must be placed immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->
<!-- jQuery 3 -->
<script src="{% static 'adminlte/bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- jQuery UI 1.11.4 -->
......
catalog/templates/map.html
View file @ e29d5187
......@@ -119,7 +119,7 @@
{% block sidebar %}
<div class="form-group ">
<!-- search form -->
<form role="form" action="{% url 'search-submit' %}" method="post" class="sidebar-form">
<!-- <form role="form" action="{% url 'search-submit' %}" method="post" class="sidebar-form">
{% csrf_token %}
<div class="input-group">
<input type="text" id="ajax-input" list="polygon-list" name="value" class="form-control" placeholder="Search...">
......@@ -133,13 +133,20 @@
<ul id="polygon-list" class="no-bullet"></ul>
</div>
</div>
</form>
</form> -->
<!-- /search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<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">
{% csrf_token %}
<input type="text" id="ajax-input" name="city" class="ajax-input" placeholder="Search region...">
<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">
<li class="active treeview">
<li class="treeview">
<a href="#">
<i class="fa fa-sync-alt"></i>
<span>Process</span>
......@@ -154,7 +161,7 @@
<li class="treeview">
<a href="#">
<i class="fa fa-calendar-alt"></i>
<span>Date Range</span>
<span>Date range</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
......@@ -191,9 +198,14 @@
<a href="#"><i class="fa fa-search"></i>
<span>
<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> -->
</span>
</a>
</li>
<li>
<!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe> -->
</li>
</ul>
</form>
</div>
......@@ -252,5 +264,6 @@
osmap.geolocation();
osmap.addInteraction();
var req_url = "{% url 'search-submit' %}"; // url for requesting polygon data
var prod_req_url = "{% url 'productList' %}" // url for requesting product data
</script>
{% endblock %}
catalog/views.py
View file @ e29d5187
......@@ -11,6 +11,7 @@ from django.template import loader
from urllib import urlencode
import requests, json, unicodedata
from apis.sentinel import APISentinel
import random
# Create your views here.
#-------------------------------------------------------------------------------
......@@ -37,27 +38,43 @@ def productList(request):
"""
View function for home page of site.
"""
queryDict = request.POST
# s = APISentinel()
# s.getProducts()
polygon = queryDict["polygon"]
process = queryDict["platform"]
endDate = queryDict["end"]
initDate = queryDict["start"]
cloudPercentage = queryDict["cloudPercentage"]
sentinel = APISentinel()
products = sentinel.getProducts(polygon, initDate, endDate, cloudPercentage)
products_json = json.dumps(products, ensure_ascii=False, default=str)
# r2 = dict(request.POST)
# r2.pop('csrfmiddlewaretoken', None)
r2 = dict(request.POST)
r2.pop('csrfmiddlewaretoken', None)
# print("R2: ", r2.keys());
# url = 'https://api.daac.asf.alaska.edu/services/search/param?'+urlencode(r2, 'utf-8')+"&output=JSON"
# response = requests.get(url)
# json = response.json()
return render(request,'productList.html', {"catalog":products_json}) #"catalog":json[0]})
## ----------- aqui llamada a api sentinel -----------
## ---------- antes consultad en DB si no se tiene ya el producto ------
## ----------- aqui llamada a api 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)])
item_data = {
'id': random_id,
'img': '/static/images/sat_preview/sat_test.jpg',
'city_name': r2['city'][0],
'process': r2['platform'][0],
'start_date': r2['start'][0][:10],
'end_date': r2['end'][0][:10],
'polygon': r2['polygon'][0],
'cloud_percentage': r2['cloudPercentage'][0]
}
# response = requests.get(url)
# json = response.json()
# return render(request, 'productList.html', {}) #"catalog":json[0]})
# return HttpResponse(json.dumps(item_data, ensure_ascii=True), content_type="application/json")
# return render(request, 'productList.html', {'item_data': item_data})
return JsonResponse(item_data);
#-------------------------------------------------------------------------------
class SearchSubmitView(View):
......
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