Commit b0133c01 authored by Renán Sosa Guillen's avatar Renán Sosa Guillen

templates update

parent c1b6be88
// ------------------------------------------
// Script for managing data with javascript
// ------------------------------------------
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;
...@@ -7,15 +11,17 @@ var PRODUCT_COUNTER = 0; ...@@ -7,15 +11,17 @@ var PRODUCT_COUNTER = 0;
var makeRequest = function (value) { var makeRequest = function (value) {
var pol_element = document.getElementById('polygon-list'); var pol_element = document.getElementById('polygon-list');
// petición de municipios a base de datos
// variable req_url en map.html
$.ajax({ $.ajax({
type: "POST", type : "POST",
url: req_url, url : req_url,
data: { data : {
'csrfmiddlewaretoken': document.getElementsByName('csrfmiddlewaretoken')[0].value, 'csrfmiddlewaretoken' : document.getElementsByName('csrfmiddlewaretoken')[0].value,
'value': value 'value' : value
}, },
dataType: 'json', dataType : 'json',
success: function(data) { success : function(data) {
polygonList = data.polygonList; polygonList = data.polygonList;
while (pol_element.firstChild) { while (pol_element.firstChild) {
...@@ -23,26 +29,16 @@ var makeRequest = function (value) { ...@@ -23,26 +29,16 @@ var makeRequest = function (value) {
} }
data.polygonList.forEach(function (polygon) { data.polygonList.forEach(function (polygon) {
// '<li onclick="drawPolygon(this)" id="'+ polygon.id +'" class="pol">' + polygon.city + ", " + polygon.state + '</li>' var temp = document.querySelector('#city_list_template');
var html_element = '<li id="'+ polygon.id +'" onclick="drawPolygon(this)" class="pol">' +
'<div class="box box-warning box-solid">'+ // filling template
'<div class="box-header with-border">'+ temp.content.querySelector('li').id = polygon.id;
'<span class="pol-title">'+ temp.content.querySelectorAll('span')[0].textContent = polygon.city + ", " + polygon.state;
polygon.city + ', ' + polygon.state + temp.content.querySelectorAll('span')[1].textContent = polygon.description;
'</span>'+ temp.content.querySelectorAll('div')[3].textContent = "Fuente: " + polygon.source;
'</div>'+
'<div class="box-body">'+ var clone = document.importNode(temp.content, true);
'<span class="pol-body">'+ document.querySelector('#polygon-list').appendChild(clone);
polygon.description +
'</span><br>'+
'<div class="pol-src">'+
'Fuente: ' + polygon.source +
'</div>'+
'</div>'+
'</div>'+
'</li>';
$('#polygon-list').append(html_element);
}); });
if (OPT_LIST_IS_HIDDEN) { if (OPT_LIST_IS_HIDDEN) {
...@@ -113,6 +109,7 @@ function drawApiResponse(element) { ...@@ -113,6 +109,7 @@ function drawApiResponse(element) {
}) })
} }
$('#ajax-input').focus(function () { $('#ajax-input').focus(function () {
console.log('in'); console.log('in');
INPUT_ON_FOCUS = true; INPUT_ON_FOCUS = true;
...@@ -152,7 +149,6 @@ $(document).ready(function () { ...@@ -152,7 +149,6 @@ $(document).ready(function () {
var typingTimer; var typingTimer;
var typingInterval = 800; //milliseconds var typingInterval = 800; //milliseconds
var productListPrev = []; var productListPrev = [];
var productListGlobe = []; var productListGlobe = [];
var productListCart = {}; // this array represent DB where products will be stored var productListCart = {}; // this array represent DB where products will be stored
...@@ -185,18 +181,20 @@ $(document).ready(function () { ...@@ -185,18 +181,20 @@ $(document).ready(function () {
erase_product_list_globe(); erase_product_list_globe();
// petición de producto a base de datos
// variable prod_req_url en map.html
$.ajax({ $.ajax({
type: "POST", type : "POST",
url: prod_req_url, url : prod_req_url,
data: submit_data, data : submit_data,
dataType: 'json', dataType : 'json',
success: function (data) { success : function (data) {
PRODUCT_IN_LIST = false; PRODUCT_IN_LIST = false;
productListGlobe = []; productListGlobe = [];
productListPrev = []; productListPrev = [];
console.log("DATA: ", data); console.log("DATA: ", data);
product_list = data; product_list = data;
productListGlobe = data.catalog; // productListGlobe = data.catalog;
console.log('GLOBEEE: ', productListGlobe); console.log('GLOBEEE: ', productListGlobe);
if (productListPrev.length > 0) { if (productListPrev.length > 0) {
...@@ -214,50 +212,38 @@ $(document).ready(function () { ...@@ -214,50 +212,38 @@ $(document).ready(function () {
productListPrev.push(data); productListPrev.push(data);
// var div_top = 148; // var div_top = 148;
data.catalog.forEach(function (data) { data.catalog.forEach(function (data) {
console.log("DD: ", data);
// petición de imagen a webservice
$.ajax({ $.ajax({
type: "GET", type : "GET",
url: img_req_url, url : img_req_url,
data: { data : {
// 'csrfmiddlewaretoken': document.getElementsByName('csrfmiddlewaretoken')[0].value, 'value' : data.product.link_icon
'value': data.product.link_icon
}, },
dataType: 'json', dataType : 'json',
success: function (res) { success : function (res) {
// console.log("DIV_TOP: ", div_top); data.img = res.img;
var product_html = '<li id="' + data.id + '">' + var temp = document.querySelector('#product_list_template');
'<a href="javascript:void(0)">' +
'<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>' + // filling template
'<div class="menu-info">' + temp.content.querySelector('li').id = data.id;
'<h4 id="' + data.id + '-h4" class="control-sidebar-subheading" onclick="drawApiResponse(this)">' + temp.content.querySelector('h4').id = data.id + "-h4";
data.product.producttype + '_' + data.product.tileid + temp.content.querySelector('h4').textContent = data.product.producttype + "_" + data.product.tileid;
'</h4>' + temp.content.querySelector('p').textContent = data.product.beginposition;
'<p>' + data.product.beginposition + '</p>' + temp.content.querySelector('input').value = data.id;
'<input type="checkbox" name="product_selected" value="' + data.id + '" checked>' + temp.content.querySelector('img').src = "data:image/jpeg;base64, " + data.img;
'</div>'+ temp.content.querySelectorAll('span')[1].textContent = data.product.identifier;
'</a>' + temp.content.querySelectorAll('span')[2].textContent = data.product.size;
// '<div class="info-product-box bg-geo" style="top: ' + div_top + 'px;">' + temp.content.querySelectorAll('span')[3].textContent = data.product.instrumentname;
'<div class="info-product-box bg-geo">' +
'<span class="info-product-box-img">' + var clone = document.importNode(temp.content, true);
'<img src="data:image/jpeg;base64, ' + res.img + '">' + document.querySelector('#product-list-globe').appendChild(clone);
'</span>' +
'<div class="info-product-box-content">' +
'<span class="info-product-box-text">' + data.product.identifier + '</span>' +
'<span class="info-product-box-number">' + data.product.size + '</span>' +
'<div class="progress">' +
'<div class="progress-bar" style="width: 100%"></div>' +
'</div>' +
'<span class="progress-description">' + data.product.instrumentname + '</span>' +
'</div>' +
'</div>' +
'</li>';
$('#product-list-globe').append(product_html);
// div_top += 75;
} }
}); });
console.log("DD: ", data);
productListGlobe.push(data);
}); });
$('#cart').removeClass("active"); $('#cart').removeClass("active");
...@@ -288,20 +274,19 @@ $(document).ready(function () { ...@@ -288,20 +274,19 @@ $(document).ready(function () {
var submit_data_array = submit_data.split("&product_selected="); var submit_data_array = submit_data.split("&product_selected=");
PRODUCT_COUNTER += 1; // this variable counts the number of products in shopping cart PRODUCT_COUNTER += 1; // this variable counts the number of products in shopping cart
var product_html = '<li class="treeview">'+
'<a href="#">'+ var temp_1 = document.querySelector('#product_cart_1');
'<i class="fa fa-cubes"></i>'+ var prod_id = temp_1.content.querySelectorAll('ul')[1].id + "-" + PRODUCT_COUNTER.toString();
'<span>Product ' + PRODUCT_COUNTER + '</span>'+
'<span class="pull-right-container">'+ // filling template
'<span class="label label-primary pull-right"></span>'+ temp_1.content.querySelector('span').textContent = "Product " + PRODUCT_COUNTER.toString();
'</span>'+ temp_1.content.querySelectorAll('ul')[1].id = prod_id;
'</a>'+
'<ul class="treeview-menu sidebar-form">'+ var clone_1 = document.importNode(temp_1.content, true);
'<li>'+ document.querySelector('#product-list-cart').appendChild(clone_1);
'<ul id="product-list-cart-items" class="control-sidebar-menu">';
var product_html_li = '';
// var div_top = 148; // var div_top = 148;
console.log("djdj: ", productListGlobe); console.log("djdj: ", productListGlobe);
productListGlobe.forEach(function (data) { productListGlobe.forEach(function (data) {
if (submit_data_array.indexOf(data.id) > -1) { if (submit_data_array.indexOf(data.id) > -1) {
...@@ -309,42 +294,21 @@ $(document).ready(function () { ...@@ -309,42 +294,21 @@ $(document).ready(function () {
console.log("SS: ", data.product.size); console.log("SS: ", data.product.size);
erase_product_list_globe_by_id(data.id); erase_product_list_globe_by_id(data.id);
product_html_li += '<li id="' + data.id + '">' + var temp_2 = document.querySelector('#product_cart_2');
'<a href="javascript:void(0)">' +
'<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>' +
'<div class="menu-info">' +
'<h4 id="' + data.id + '-h4" class="control-sidebar-subheading">' +
data.product.producttype + '_' + data.product.tileid +
'</h4>' +
'<p>' + data.product.beginposition + '</p>' +
'</div>'+
'</a>' +
// '<div class="info-product-box bg-geo" style="top: ' + div_top + 'px;">' +
'<div class="info-product-cart-box bg-geo">' +
'<span class="info-product-box-img">' +
'<img src="/static/images/sat_preview/sat_test.jpg">' +
'</span>' +
'<div class="info-product-box-content">' +
'<span class="info-product-box-text">' + data.product.identifier + '</span>' +
'<span class="info-product-box-number">' + data.product.size + '</span>' +
'<div class="progress">' +
'<div class="progress-bar" style="width: 100%"></div>' +
'</div>' +
'<span class="progress-description">' + data.product.instrumentname + '</span>' +
'</div>' +
'</div>' +
'</li>';
// div_top += 52;
}
});
product_html_li += '</ul>'+ // filling template
'</li>'+ temp_2.content.querySelector('li').id = data.id;
'</ul>'+ temp_2.content.querySelector('h4').id = data.id + "-h4";
'</li>'; temp_2.content.querySelector('h4').textContent = data.product.producttype + "_" + data.product.tileid;
temp_2.content.querySelector('p').textContent = data.product.beginposition;
temp_2.content.querySelector('img').src = "data:image/jpeg;base64, " + data.img;
temp_2.content.querySelectorAll('span')[1].textContent = data.product.identifier;
temp_2.content.querySelectorAll('span')[2].textContent = data.product.size;
temp_2.content.querySelectorAll('span')[3].textContent = data.product.instrumentname;
// console.log("DUPLI2: ", product_html + product_html_li); var clone_2 = document.importNode(temp_2.content, true);
$('#product-list-cart').append(product_html + product_html_li); document.querySelector('#' + prod_id).appendChild(clone_2);
}
});
}); });
}); });
...@@ -18,15 +18,12 @@ ...@@ -18,15 +18,12 @@
<!-- Select2 --> <!-- Select2 -->
<link rel="stylesheet" href="{% static 'adminlte/bower_components/select2/dist/css/select2.min.css' %}"> <link rel="stylesheet" href="{% static 'adminlte/bower_components/select2/dist/css/select2.min.css' %}">
{% block headMedia %}{% endblock %} {% block headMedia %}{% endblock %}
</head> </head>
<body class="hold-transition skin-yellow sidebar-mini"> <body class="hold-transition skin-yellow sidebar-mini">
<!-- <div id="map" class="map" tabindex="0"> </div>--> <!-- <div id="map" class="map" tabindex="0"> </div>-->
<!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe>--> <!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe>-->
<div class="wrapper">
<div class="wrmapper">
<header class="main-header"> <header class="main-header">
<!-- Logo --> <!-- Logo -->
<a href="index2.html" class="logo"> <a href="index2.html" class="logo">
...@@ -114,33 +111,7 @@ ...@@ -114,33 +111,7 @@
</div> </div>
</div> </div>
<!-- this ul element is filled with data --> <!-- this ul element is filled with data -->
<ul id="product-list-globe" class="control-sidebar-menu"> <ul id="product-list-globe" class="control-sidebar-menu"></ul>
{# <li id="4569852" 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">#}
{# S2MSI1C_15QZ#}
{# </h4>#}
{# <p>2018-05-15T16:18:29.027</p>#}
{# <input type="checkbox" value="4569852">#}
{# </div>#}
{# </a>#}
{# <div class="info-product-box bg-geo" style="top: 148px;">#}
{# <span class="info-product-box-img">#}
{# <img src="/static/images/sat_preview/sat_test.jpg">#}
{# </span>#}
{# <div class="info-product-box-content">#}
{# <span class="info-product-box-text">S2B_MSIL1C_20180515T161829_N0206_R040_T15QZD_20180515T194031</span>#}
{# <span class="info-product-box-number">686.51 MB</span>#}
{# <div class="progress">#}
{# <div class="progress-bar" style="width: 100%"></div>#}
{# </div>#}
{# <span class="progress-description">Multi-Spectral Instrument</span>#}
{# </div>#}
{# </div>#}
{# </li>#}
</ul>
<!-- /.control-sidebar-menu --> <!-- /.control-sidebar-menu -->
</form> </form>
</div> </div>
...@@ -169,8 +140,98 @@ ...@@ -169,8 +140,98 @@
<!-- /.control-sidebar --> <!-- /.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 class="control-sidebar-bg"></div>
</div> </div>
<!-- ./wrapper --> <!-- ./wrapper -->
<!-- T E M P L A T E S -->
<!-- city list template -->
<template id="city_list_template">
<li id="" onclick="drawPolygon(this)" class="pol">
<div class="box box-warning box-solid">
<div class="box-header with-border">
<span class="pol-title"></span>
</div>
<div class="box-body">
<span class="pol-body"></span><br>
<div class="pol-src"></div>
</div>
</div>
</li>
</template>
<!-- city list template -->
<!-- product list template -->
<template id="product_list_template">
<li id="">
<a href="javascript:void(0)">
<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>
<div class="menu-info">
<h4 id="" class="control-sidebar-subheading" onclick="drawApiResponse(this)"></h4>
<p></p>
<input type="checkbox" name="product_selected" value="" checked>
</div>
</a>
<div class="info-product-box bg-geo">
<span class="info-product-box-img">
<img src="">
</span>
<div class="info-product-box-content">
<span class="info-product-box-text"></span>
<span class="info-product-box-number"></span>
<div class="progress">
<div class="progress-bar" style="width: 100%"></div>
</div>
<span class="progress-description"></span>
</div>
</div>
</li>
</template>
<!-- product list template -->
<!-- product in cart templates -->
<template id="product_cart_1">
<li class="treeview">
<a href="#">
<i class="fa fa-cubes"></i>
<span></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"></ul>
</li>
</ul>
</li>
</template>
<template id="product_cart_2">
<li id="">
<a href="javascript:void(0)">
<i class="menu-icon glyphicon glyphicon-bookmark bg-red"></i>
<div class="menu-info">
<h4 id="" class="control-sidebar-subheading"></h4>
<p></p>
</div>
</a>
<div class="info-product-cart-box bg-geo">
<span class="info-product-box-img">
<img src="">
</span>
<div class="info-product-box-content">
<span class="info-product-box-text"></span>
<span class="info-product-box-number"></span>
<div class="progress">
<div class="progress-bar" style="width: 100%"></div>
</div>
<span class="progress-description"></span>
</div>
</div>
</li>
</template>
<!-- product in cart templates -->
<!-- T E M P L A T E S -->
<!-- jQuery 3 --> <!-- jQuery 3 -->
<script src="{% static 'adminlte/bower_components/jquery/dist/jquery.min.js' %}"></script> <script src="{% static 'adminlte/bower_components/jquery/dist/jquery.min.js' %}"></script>
...@@ -180,7 +241,7 @@ ...@@ -180,7 +241,7 @@
<script src="{% static 'adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script> <script src="{% static 'adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- AdminLTE App --> <!-- AdminLTE App -->
<script src="{% static 'adminlte/dist/js/adminlte.min.js' %}"></script> <script src="{% static 'adminlte/dist/js/adminlte.min.js' %}"></script>
<!-- Data management file -->
<script src="{% static 'js/dataRetrieval.js' %}" type="text/javascript"></script> <script src="{% static 'js/dataRetrieval.js' %}" type="text/javascript"></script>
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}
......
{% extends "base_top.html" %} {% extends "base_top.html" %}
{% load staticfiles %} {% load staticfiles %}
{% block headMedia %}
{% block headMedia %}
<link rel="stylesheet" href="{% static 'css/map.css'%}" type="text/css"> <link rel="stylesheet" href="{% static 'css/map.css'%}" type="text/css">
<link rel="stylesheet" href="{% static 'css/body.css'%}" type="text/css"> <link rel="stylesheet" href="{% static 'css/body.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">
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
<script src="{% static 'js/openLayers4.js'%}"></script> <script src="{% static 'js/openLayers4.js'%}"></script>
<script src="{% static 'js/sidtMap.js'%}"></script> <script src="{% static 'js/sidtMap.js'%}"></script>
{% endblock %} {% endblock %}
{% block messages %} {% block messages %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i> <i class="fa fa-envelope-o"></i>
...@@ -47,7 +48,6 @@ ...@@ -47,7 +48,6 @@
<p>Why not buy a new awesome theme?</p> <p>Why not buy a new awesome theme?</p>
</a> </a>
</li> </li>
</ul> </ul>
</li> </li>
<li class="footer"><a href="#">See All Messages</a></li> <li class="footer"><a href="#">See All Messages</a></li>
...@@ -55,7 +55,6 @@ ...@@ -55,7 +55,6 @@
{% endblock %} {% endblock %}
{% block notifications %} {% block notifications %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i> <i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span> <span class="label label-warning">10</span>
...@@ -76,12 +75,9 @@ ...@@ -76,12 +75,9 @@
</li> </li>
<li class="footer"><a href="#">View all</a></li> <li class="footer"><a href="#">View all</a></li>
</ul> </ul>
{% endblock %} {% endblock %}
{% block tasks %} {% block tasks %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i> <i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span> <span class="label label-danger">9</span>
...@@ -98,15 +94,12 @@ ...@@ -98,15 +94,12 @@
<small class="pull-right">20%</small> <small class="pull-right">20%</small>
</h3> </h3>
<div class="progress xs"> <div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span> <span class="sr-only">20% Complete</span>
</div> </div>
</div> </div>
</a> </a>
</li> </li>
<!-- end task item --> <!-- end task item -->
</ul> </ul>
</li> </li>
...@@ -114,10 +107,10 @@ ...@@ -114,10 +107,10 @@
<a href="#">View all tasks</a> <a href="#">View all tasks</a>
</li> </li>
</ul> </ul>
{% endblock %} {% endblock %}
{% block sidebar %} {% block sidebar %}
<div class="form-group "> <div class="form-group ">
<!-- search form --> <!-- search form -->
<form role="form" action="#" method="get" class="sidebar-form"> <form role="form" action="#" method="get" class="sidebar-form">
<div class="input-group"> <div class="input-group">
...@@ -205,32 +198,28 @@ ...@@ -205,32 +198,28 @@
</li> </li>
</ul> </ul>
</form> </form>
</div> </div>
<!-- form-group-->
<!-- form-group-->
{% endblock %} {% endblock %}
{% block user %} {% block user %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-user"></i> <i class="fa fa-user"></i>
<!-- <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">--> <!--<img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">-->
<!-- <span class="hidden-xs">Alexander Pierce</span>--> <!--<span class="hidden-xs">Alexander Pierce</span>-->
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<!-- User image --> <!-- User image -->
<li class="user-header"> <li class="user-header">
<!-- <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">--> <!--<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">-->
<p> <p>
{{ user.get_full_name }} {{ user.get_full_name }}
<small>{{ user.get_username }}</small> <small>{{ user.get_username }}</small>
</p> </p>
</li> </li>
<!-- Menu Body --> <!-- Menu Body -->
<!-- <li class="user-body">--> <!--<li class="user-body">-->
<!--</li>-->
<!-- </li>-->
<!-- Menu Footer--> <!-- Menu Footer-->
<li class="user-footer"> <li class="user-footer">
<div class="pull-left"> <div class="pull-left">
...@@ -241,14 +230,11 @@ ...@@ -241,14 +230,11 @@
</div> </div>
</li> </li>
</ul> </ul>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div id="map" class="map" tabindex="0"> </div> <div id="map" class="map" tabindex="0"> </div>
<footer class="my-footer"> <footer class="my-footer">
<strong> <strong>
<a href="http://www.centrogeo.org.mx/">© 2018 Centro de Investigación en Ciencias de Información Geoespacial</a> <a href="http://www.centrogeo.org.mx/">© 2018 Centro de Investigación en Ciencias de Información Geoespacial</a>
</strong> </strong>
...@@ -261,8 +247,9 @@ ...@@ -261,8 +247,9 @@
var osmap = new sidtMap("map", -89.63873079999999,21.0404457, 7); var osmap = new sidtMap("map", -89.63873079999999,21.0404457, 7);
osmap.geolocation(); osmap.geolocation();
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 var img_req_url = "{% url 'img-rqst' %}" // url for requesting preview image
</script> </script>
{% endblock %} {% endblock %}
# -*- coding: utf-8 -*- # -*- coding: utf-8 -*-
from __future__ import unicode_literals from __future__ import unicode_literals
from django.shortcuts import render from django.shortcuts import render
from catalog.forms import ASFSearchForm from catalog.forms import ASFSearchForm
from catalog.models import Polygon from catalog.models import Polygon
from django.http import HttpResponse, JsonResponse, HttpResponseRedirect from django.http import HttpResponse, JsonResponse, HttpResponseRedirect
from django.urls import reverse 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, RequestContext
from urllib import urlencode from urllib import urlencode
import requests, json, unicodedata, sys import requests, json, unicodedata, sys
import base64 import base64
...@@ -17,6 +16,7 @@ from geosentinel import APISentinel ...@@ -17,6 +16,7 @@ from geosentinel import APISentinel
sentinel = APISentinel.APISentinel('emmhp', 'geoemm29') sentinel = APISentinel.APISentinel('emmhp', 'geoemm29')
# Create your views here. # Create your views here.
#------------------------------------------------------------------------------- #-------------------------------------------------------------------------------
def login(request): def login(request):
...@@ -24,9 +24,9 @@ def login(request): ...@@ -24,9 +24,9 @@ def login(request):
View function for home page of site. View function for home page of site.
""" """
# 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,'login.html',{}) return render(request,'login.html',{})
#------------------------------------------------------------------------------- #-------------------------------------------------------------------------------
def map(request): def map(request):
""" """
...@@ -40,8 +40,6 @@ def map(request): ...@@ -40,8 +40,6 @@ def map(request):
#------------------------------------------------------------------------------- #-------------------------------------------------------------------------------
def requestToImage(request): def requestToImage(request):
img_link = request.GET['value'] 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) r = requests.get(img_link, auth=("emmhp", "geoemm29"), stream=True)
img_str = base64.b64encode(r.content) img_str = base64.b64encode(r.content)
...@@ -73,8 +71,6 @@ def productList(request): ...@@ -73,8 +71,6 @@ def productList(request):
products = sentinel.getProducts(area, date, params) products = sentinel.getProducts(area, date, params)
## 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)])
## 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'
...@@ -88,30 +84,17 @@ def productList(request): ...@@ -88,30 +84,17 @@ def productList(request):
'process' : process, 'process' : process,
'start_date' : init_date, 'start_date' : init_date,
'end_date' : end_date, 'end_date' : end_date,
'cloud_percentage': cloud_percentage, 'cloud_percentage' : cloud_percentage,
'product' : products[p], 'product' : products[p],
'id' : products[p]['uuid'], 'id' : products[p]['uuid'],
'img' : img_preview 'img' : img_preview
}) })
return JsonResponse({'catalog':catalog}); return JsonResponse({'catalog': catalog});
# 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":json[0]})
# return HttpResponse(json.dumps(item_data, ensure_ascii=True), content_type="application/json")
# return render(request, 'productList.html', {'item_data': item_data})
#------------------------------------------------------------------------------- #-------------------------------------------------------------------------------
class SearchSubmitView(View): class SearchSubmitView(View):
template = 'map.html' template = 'map.html'
# template = 'search_submit.html'
def strip_accents(self, s): def strip_accents(self, s):
return ''.join((c for c in unicodedata.normalize('NFD', s) if unicodedata.category(c) != 'Mn')) return ''.join((c for c in unicodedata.normalize('NFD', s) if unicodedata.category(c) != 'Mn'))
...@@ -123,86 +106,29 @@ class SearchSubmitView(View): ...@@ -123,86 +106,29 @@ class SearchSubmitView(View):
searchValue = self.strip_accents(searchValue).lower() searchValue = self.strip_accents(searchValue).lower()
## A simple query for Polygon objects whose name is 'searchValue' ## A simple query for Polygon objects whose name is 'searchValue'
# polygonList = Polygon.objects.filter(name=searchValue)
polygonList = Polygon.objects.filter(name__startswith=searchValue) polygonList = Polygon.objects.filter(name__startswith=searchValue)
# data = [] data_list = []
list = []
if len(polygonList) > 0: if len(polygonList) > 0:
for polygon in polygonList: for polygon in polygonList:
polygonInfo = json.loads(polygon.json_info) polygonInfo = json.loads(polygon.json_info)
# data.append({ data_list.append({
# 'city' : polygon.name, 'id' : str(polygon.id),
# 'state' : self.state_parser[polygonInfo['properties']['CVE_ENT']], 'city' : polygonInfo['properties']['NOMGEO'],
# 'geojson': polygon.json_info 'state' : polygonInfo['properties']['ENT_NAME'],
# }) 'geojson' : polygonInfo,
list.append({ 'wkt_polygon' : polygon.wkt_polygon,
'id': str(polygon.id), 'description' : polygon.description,
'city': polygonInfo['properties']['NOMGEO'], 'source' : polygon.source
'state': polygonInfo['properties']['ENT_NAME'],
'geojson': polygonInfo,
'wkt_polygon': polygon.wkt_polygon,
'description': polygon.description,
'source': polygon.source
}) })
# context = {
# 'searchValue': searchValue,
# 'data': json.dumps(data, ensure_ascii=True)
# }
data = { data = {
'polygonList': list 'polygonList' : data_list
} }
# rendered_template = template.render(context, request)
# print("DATA:", data)
# return HttpResponse(rendered_template, content_type='application/json')
# return HttpResponse(json.dumps(data, ensure_ascii=True), content_type='application/json')
return JsonResponse(data) return JsonResponse(data)
#-------------------------------------------------------------------------------
# class SearchSubmitView(View):
# template = 'map.html'
# # template = 'search_submit.html'
# state_parser = {'31': "Yucatán"}
#
# def post(self, request):
# template = loader.get_template(self.template)
# searchValue = request.POST.get('value', '')
#
# ## A simple query for Polygon objects whose name is 'searchValue'
# polygonList = Polygon.objects.filter(name=searchValue)
#
# data = []
# if len(polygonList) > 0:
# for polygon in polygonList:
# polygonInfo = json.loads(polygon.json_info)
#
# # data.append({
# # 'city' : polygon.name,
# # 'state' : self.state_parser[polygonInfo['properties']['CVE_ENT']],
# # 'geojson': polygon.json_info
# # })
# data.append({
# 'city': polygonInfo['properties']['NOMGEO'],
# 'state': self.state_parser[polygonInfo['properties']['CVE_ENT']],
# 'geojson': polygonInfo
# })
#
# context = {
# 'searchValue': searchValue,
# 'data': data
# }
#
# # rendered_template = template.render(context, request)
# print("DATA:", data)
# # return render(request, self.template, context)
# return HttpResponseRedirect(reverse(map), json.dumps(data, ensure_ascii=True), content_type='application/json')
#------------------------------------------------------------------------------- #-------------------------------------------------------------------------------
def regionSearched(request): def regionSearched(request):
""" """
......
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