Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit b0133c01 authored by Renán Sosa Guillen's avatar Renán Sosa Guillen
Browse files
Options

templates update

parent c1b6be88
Hide whitespace changes
Inline Side-by-side
Showing with 542 additions and 604 deletions
catalog/static/js/dataRetrieval.js
View file @ b0133c01
// ------------------------------------------
// Script for managing data with javascript
// ------------------------------------------
var OPT_LIST_IS_HIDDEN = true;
var INPUT_ON_FOCUS = false;
var polygonList;
......@@ -7,15 +11,17 @@ var PRODUCT_COUNTER = 0;
var makeRequest = function (value) {
var pol_element = document.getElementById('polygon-list');
// petición de municipios a base de datos
// variable req_url en map.html
$.ajax({
type: "POST",
url: req_url,
data: {
'csrfmiddlewaretoken': document.getElementsByName('csrfmiddlewaretoken')[0].value,
'value': value
type : "POST",
url : req_url,
data : {
'csrfmiddlewaretoken' : document.getElementsByName('csrfmiddlewaretoken')[0].value,
'value' : value
},
dataType: 'json',
success: function(data) {
dataType : 'json',
success : function(data) {
polygonList = data.polygonList;
while (pol_element.firstChild) {
......@@ -23,26 +29,16 @@ var makeRequest = function (value) {
}
data.polygonList.forEach(function (polygon) {
// '<li onclick="drawPolygon(this)" id="'+ polygon.id +'" class="pol">' + polygon.city + ", " + polygon.state + '</li>'
var html_element = '<li id="'+ polygon.id +'" onclick="drawPolygon(this)" class="pol">' +
'<div class="box box-warning box-solid">'+
'<div class="box-header with-border">'+
'<span class="pol-title">'+
polygon.city + ', ' + polygon.state +
'</span>'+
'</div>'+
'<div class="box-body">'+
'<span class="pol-body">'+
polygon.description +
'</span><br>'+
'<div class="pol-src">'+
'Fuente: ' + polygon.source +
'</div>'+
'</div>'+
'</div>'+
'</li>';
$('#polygon-list').append(html_element);
var temp = document.querySelector('#city_list_template');
// filling template
temp.content.querySelector('li').id = polygon.id;
temp.content.querySelectorAll('span')[0].textContent = polygon.city + ", " + polygon.state;
temp.content.querySelectorAll('span')[1].textContent = polygon.description;
temp.content.querySelectorAll('div')[3].textContent = "Fuente: " + polygon.source;
var clone = document.importNode(temp.content, true);
document.querySelector('#polygon-list').appendChild(clone);
});
if (OPT_LIST_IS_HIDDEN) {
......@@ -113,6 +109,7 @@ function drawApiResponse(element) {
})
}
$('#ajax-input').focus(function () {
console.log('in');
INPUT_ON_FOCUS = true;
......@@ -151,11 +148,10 @@ $(document).ready(function () {
var pol_element = document.getElementById('polygon-list');
var typingTimer;
var typingInterval = 800; //milliseconds
var productListPrev = [];
var typingInterval = 800; //milliseconds
var productListPrev = [];
var productListGlobe = [];
var productListCart = {}; // this array represent DB where products will be stored
var productListCart = {}; // this array represent DB where products will be stored
// On keyup, start the contdown
$('#ajax-input').on('input', function () {
......@@ -185,18 +181,20 @@ $(document).ready(function () {
erase_product_list_globe();
// petición de producto a base de datos
// variable prod_req_url en map.html
$.ajax({
type: "POST",
url: prod_req_url,
data: submit_data,
dataType: 'json',
success: function (data) {
PRODUCT_IN_LIST = false;
type : "POST",
url : prod_req_url,
data : submit_data,
dataType : 'json',
success : function (data) {
PRODUCT_IN_LIST = false;
productListGlobe = [];
productListPrev = [];
productListPrev = [];
console.log("DATA: ", data);
product_list = data;
productListGlobe = data.catalog;
product_list = data;
// productListGlobe = data.catalog;
console.log('GLOBEEE: ', productListGlobe);
if (productListPrev.length > 0) {
......@@ -214,50 +212,38 @@ $(document).ready(function () {
productListPrev.push(data);
// var div_top = 148;
data.catalog.forEach(function (data) {
console.log("DD: ", data);
// petición de imagen a webservice
$.ajax({
type: "GET",
url: img_req_url,
data: {
// 'csrfmiddlewaretoken': document.getElementsByName('csrfmiddlewaretoken')[0].value,
'value': data.product.link_icon
type : "GET",
url : img_req_url,
data : {
'value' : data.product.link_icon
},
dataType: 'json',
success: function (res) {
// console.log("DIV_TOP: ", div_top);
var product_html = '<li id="' + data.id + '">' +
'<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" onclick="drawApiResponse(this)">' +
data.product.producttype + '_' + data.product.tileid +
'</h4>' +
'<p>' + data.product.beginposition + '</p>' +
'<input type="checkbox" name="product_selected" value="' + data.id + '" checked>' +
'</div>'+
'</a>' +
// '<div class="info-product-box bg-geo" style="top: ' + div_top + 'px;">' +
'<div class="info-product-box bg-geo">' +
'<span class="info-product-box-img">' +
'<img src="data:image/jpeg;base64, ' + res.img + '">' +
'</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;
dataType : 'json',
success : function (res) {
data.img = res.img;
var temp = document.querySelector('#product_list_template');
// filling template
temp.content.querySelector('li').id = data.id;
temp.content.querySelector('h4').id = data.id + "-h4";
temp.content.querySelector('h4').textContent = data.product.producttype + "_" + data.product.tileid;
temp.content.querySelector('p').textContent = data.product.beginposition;
temp.content.querySelector('input').value = data.id;
temp.content.querySelector('img').src = "data:image/jpeg;base64, " + data.img;
temp.content.querySelectorAll('span')[1].textContent = data.product.identifier;
temp.content.querySelectorAll('span')[2].textContent = data.product.size;
temp.content.querySelectorAll('span')[3].textContent = data.product.instrumentname;
var clone = document.importNode(temp.content, true);
document.querySelector('#product-list-globe').appendChild(clone);
}
});
console.log("DD: ", data);
productListGlobe.push(data);
});
$('#cart').removeClass("active");
......@@ -288,20 +274,19 @@ $(document).ready(function () {
var submit_data_array = submit_data.split("&product_selected=");
PRODUCT_COUNTER += 1; // this variable counts the number of products in shopping cart
var product_html = '<li class="treeview">'+
'<a href="#">'+
'<i class="fa fa-cubes"></i>'+
'<span>Product ' + PRODUCT_COUNTER + '</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 = '';
var temp_1 = document.querySelector('#product_cart_1');
var prod_id = temp_1.content.querySelectorAll('ul')[1].id + "-" + PRODUCT_COUNTER.toString();
// filling template
temp_1.content.querySelector('span').textContent = "Product " + PRODUCT_COUNTER.toString();
temp_1.content.querySelectorAll('ul')[1].id = prod_id;
var clone_1 = document.importNode(temp_1.content, true);
document.querySelector('#product-list-cart').appendChild(clone_1);
// var div_top = 148;
console.log("djdj: ", productListGlobe);
productListGlobe.forEach(function (data) {
if (submit_data_array.indexOf(data.id) > -1) {
......@@ -309,42 +294,21 @@ $(document).ready(function () {
console.log("SS: ", data.product.size);
erase_product_list_globe_by_id(data.id);
product_html_li += '<li id="' + data.id + '">' +
'<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;
}
});
var temp_2 = document.querySelector('#product_cart_2');
product_html_li += '</ul>'+
'</li>'+
'</ul>'+
'</li>';
// filling template
temp_2.content.querySelector('li').id = data.id;
temp_2.content.querySelector('h4').id = data.id + "-h4";
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);
$('#product-list-cart').append(product_html + product_html_li);
var clone_2 = document.importNode(temp_2.content, true);
document.querySelector('#' + prod_id).appendChild(clone_2);
}
});
});
});
catalog/templates/base_top.html
View file @ b0133c01
<!DOCTYPE html>
{% load static %}
<html>
<head>
<title>Repositorio de Imágenes Satelitales</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="icon" href="{% static 'images/satellite.png' %}">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="{% static 'adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css' %}">
<!-- Font Awesome -->
<link rel="stylesheet" href="{% static 'adminlte/bower_components/font-awesome/css/font-awesome.min.css' %}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<!-- Theme style -->
<link rel="stylesheet" href="{% static 'adminlte/dist/css/AdminLTE.css' %}">
<!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="{% static 'adminlte/dist/css/skins/_all-skins.css' %}">
<!-- Select2 -->
<link rel="stylesheet" href="{% static 'adminlte/bower_components/select2/dist/css/select2.min.css' %}">
{% block headMedia %}{% endblock %}
<head>
<title>Repositorio de Imágenes Satelitales</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="icon" href="{% static 'images/satellite.png' %}">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="{% static 'adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css' %}">
<!-- Font Awesome -->
<link rel="stylesheet" href="{% static 'adminlte/bower_components/font-awesome/css/font-awesome.min.css' %}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<!-- Theme style -->
<link rel="stylesheet" href="{% static 'adminlte/dist/css/AdminLTE.css' %}">
<!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="{% static 'adminlte/dist/css/skins/_all-skins.css' %}">
<!-- Select2 -->
<link rel="stylesheet" href="{% static 'adminlte/bower_components/select2/dist/css/select2.min.css' %}">
{% block headMedia %}{% endblock %}
</head>
<body class="hold-transition skin-yellow sidebar-mini">
<!-- <div id="map" class="map" tabindex="0"> </div>-->
<!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe>-->
<div class="wrmapper">
<header class="main-header">
<!-- Logo -->
<a href="index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>G</b>eo</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Geo</b>int</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
</head>
<body class="hold-transition skin-yellow sidebar-mini">
<!-- <div id="map" class="map" tabindex="0"> </div>-->
<!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe>-->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<!-- <li class="dropdown messages-menu"> -->
{#% block messages %#}{#% endblock %#}
<!-- </li> -->
<!-- Notifications: style can be found in dropdown.less -->
<!-- <li class="dropdown notifications-menu"> -->
{#% block notifications %#}{#% endblock %#}
<!-- </li> -->
<!-- Tasks: style can be found in dropdown.less -->
<!-- <li class="dropdown tasks-menu"> -->
{#% block tasks %}{% endblock %#}
<!-- </li> -->
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
{% block user %}{% endblock %}
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<a id="product-list-toggle" href="#" data-toggle="control-sidebar"><i class="fa fa-shopping-cart"></i></a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
{% block sidebar %}{% endblock %}
</section>
<!-- /.sidebar -->
</aside>
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="index2.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>G</b>eo</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Geo</b>int</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<!-- <li class="dropdown messages-menu"> -->
{#% block messages %#}{#% endblock %#}
<!-- </li> -->
<!-- Notifications: style can be found in dropdown.less -->
<!-- <li class="dropdown notifications-menu"> -->
{#% block notifications %#}{#% endblock %#}
<!-- </li> -->
<!-- Tasks: style can be found in dropdown.less -->
<!-- <li class="dropdown tasks-menu"> -->
{#% block tasks %}{% endblock %#}
<!-- </li> -->
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
{% block user %}{% endblock %}
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<a id="product-list-toggle" href="#" data-toggle="control-sidebar"><i class="fa fa-shopping-cart"></i></a>
</li>
</ul>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" style="border:0px solid blue;">
{% block content %}{% endblock %}
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
{% block sidebar %}{% endblock %}
</section>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" style="border:0px solid blue;">
{% 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>-->
<!-- /.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>-->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li id="globe"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-globe"></i></a></li>
<li id="cart"><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-shopping-cart"></i></a></li>
<li id="globe"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-globe"></i></a></li>
<li id="cart"><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-shopping-cart"></i></a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab">
<form id='product-to-cart-form' role="form" method="post">
{% csrf_token %}
<div class="container">
<div class="sidebar-title">
<h3><b>Products</b></h3>
</div>
<div class="sidebar-button">
<button type="submit" name="search" id="add-cart" class="btn btn-primary">
Add to cart
</button>
</div>
<!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab">
<form id='product-to-cart-form' role="form" method="post">
{% csrf_token %}
<div class="container">
<div class="sidebar-title">
<h3><b>Products</b></h3>
</div>
<!-- this ul element is filled with data -->
<ul id="product-list-globe" class="control-sidebar-menu">
{# <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 -->
</form>
</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<div class="container">
<div class="sidebar-title">
<h3><b>My cart</b></h3>
</div>
<div class="sidebar-button">
<button type="button" name="search" id="add-cart" class="btn btn-primary">
Buy products
</button>
</div>
<div class="sidebar-button">
<button type="submit" name="search" id="add-cart" class="btn btn-primary">
Add to cart
</button>
</div>
<!-- this ul element is filled with data -->
<ul id="product-list-cart" class="sidebar-menu" data-widget="tree"></ul>
</div>
<!-- this ul element is filled with data -->
<ul id="product-list-globe" class="control-sidebar-menu"></ul>
<!-- /.control-sidebar-menu -->
</form>
</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<div class="container">
<div class="sidebar-title">
<h3><b>My cart</b></h3>
</div>
<div class="sidebar-button">
<button type="button" name="search" id="add-cart" class="btn btn-primary">
Buy products
</button>
</div>
</div>
<!-- this ul element is filled with data -->
<ul id="product-list-cart" class="sidebar-menu" data-widget="tree"></ul>
</div>
<!-- /.tab-pane -->
</div>
</aside>
<!-- /.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 -->
<!-- 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>
<!-- /.tab-pane -->
</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>
</aside>
<!-- /.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 -->
</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>
<!-- jQuery 3 -->
<script src="{% static 'adminlte/bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{% static 'adminlte/bower_components/jquery-ui/jquery-ui.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'adminlte/dist/js/adminlte.min.js' %}"></script>
<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 -->
<script src="{% static 'adminlte/bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{% static 'adminlte/bower_components/jquery-ui/jquery-ui.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'adminlte/dist/js/adminlte.min.js' %}"></script>
<!-- Data management file -->
<script src="{% static 'js/dataRetrieval.js' %}" type="text/javascript"></script>
{% block scripts %}{% endblock %}
</body>
{% block scripts %}{% endblock %}
</body>
</html>
catalog/templates/map.html
View file @ b0133c01
{% extends "base_top.html" %}
{% load staticfiles %}
{% block headMedia %}
<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="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
{% block headMedia %}
<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="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
<script src="{% static 'js/openLayers4.js'%}"></script>
<script src="{% static 'js/sidtMap.js'%}"></script>
<script src="{% static 'js/openLayers4.js'%}"></script>
<script src="{% static 'js/sidtMap.js'%}"></script>
{% endblock %}
{% block messages %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<!-- end message -->
<li>
<a href="#">
<div class="pull-left">
<img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
AdminLTE Design Team
<small><i class="fa fa-clock-o"></i> 2 hours</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
</ul>
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
{% block messages %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<!-- end message -->
<li>
<a href="#">
<div class="pull-left">
<img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
AdminLTE Design Team
<small><i class="fa fa-clock-o"></i> 2 hours</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
</ul>
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
{% endblock %}
{% block notifications %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
</li>
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
{% endblock %}
{% block tasks %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul c{% load static %}lass="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- Task item -->
<a href="#">
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul c{% load static %}lass="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- Task item -->
<a href="#">
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
{% endblock %}
{% block sidebar %}
<div class="form-group ">
<div class="form-group ">
<!-- search form -->
<form role="form" action="#" method="get" class="sidebar-form">
<div class="input-group">
<div class="input-group">
<input type="text" id="ajax-input" name="value" class="form-control" placeholder="Search region...">
<span class="input-group-btn">
<button type="button" name="search" id="search-btn" class="btn btn-flat" onclick="erase_input()">
<i class="fa fa-eraser"></i>
</button>
<button type="button" name="search" id="search-btn" class="btn btn-flat" onclick="erase_input()">
<i class="fa fa-eraser"></i>
</button>
</span>
</div>
<div class="row" id="option-list">
<div class="col-12">
<ul id="polygon-list" class="no-bullet"></ul>
</div>
</div>
</div>
<div class="row" id="option-list">
<div class="col-12">
<ul id="polygon-list" class="no-bullet"></ul>
</div>
</div>
</form>
<!-- /search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<!-- <form role="form" target="catalogFrame" action="{% url 'productList' %}" method="post"> -->
<form id='product-form' role="form" method="post">
{% csrf_token %}
<ul class="sidebar-menu" data-widget="tree">
{% csrf_token %}
<ul class="sidebar-menu" data-widget="tree">
<li class="treeview">
<a href="#">
<i class="fa fa-sync-alt"></i>
<span>Process</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
<ul class="treeview-menu sidebar-form">
<li class="col-xs-12">{{searchForm.platform}}</li>
</ul>
<a href="#">
<i class="fa fa-sync-alt"></i>
<span>Process</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
<ul class="treeview-menu sidebar-form">
<li class="col-xs-12">{{searchForm.platform}}</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-calendar-alt"></i>
<span>Date range</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
<ul class="treeview-menu sidebar-form">
<li>{{searchForm.start}}</li>
<li>{{searchForm.end}}</li>
</ul>
<a href="#">
<i class="fa fa-calendar-alt"></i>
<span>Date range</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
<ul class="treeview-menu sidebar-form">
<li>{{searchForm.start}}</li>
<li>{{searchForm.end}}</li>
</ul>
</li>
<li class="treeview ">
<a href="#">
<i class="fa fa-map"></i>
<span>Polygon</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
<ul class="treeview-menu sidebar-form">
<li>{{searchForm.polygon}}</li>
</ul>
<a href="#">
<i class="fa fa-map"></i>
<span>Polygon</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
<ul class="treeview-menu sidebar-form">
<li>{{searchForm.polygon}}</li>
</ul>
</li>
<li class="treeview ">
<a href="#">
<i class="fa fa-cloud"></i>
<span>Cloud percentage</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
<ul class="treeview-menu sidebar-form">
<li>
<input class="form-control" type="number" name="cloudPercentage">
</li>
</ul>
<a href="#">
<i class="fa fa-cloud"></i>
<span>Cloud percentage</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
<ul class="treeview-menu sidebar-form">
<li>
<input class="form-control" type="number" name="cloudPercentage">
</li>
</ul>
</li>
<li>
<a href="#">
<span>
<button type="submit" name="search" id="search-btn" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
<!-- <button name="search" id="search-btn" class="btn btn-primary">Search</button> -->
</span>
</a>
<a href="#">
<span>
<button type="submit" name="search" id="search-btn" class="btn btn-primary"><i class="fa fa-search"></i> 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> -->
<!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe> -->
</li>
</ul>
</ul>
</form>
</div>
<!-- form-group-->
</div>
<!-- form-group-->
{% endblock %}
{% block user %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-user"></i>
<!-- <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">-->
<!-- <span class="hidden-xs">Alexander Pierce</span>-->
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<!-- <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">-->
<p>
{{ user.get_full_name }}
<small>{{ user.get_username }}</small>
</p>
</li>
<!-- Menu Body -->
<!-- <li class="user-body">-->
<!-- </li>-->
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="{% url 'logout'%}?next={{request.path}}" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-user"></i>
<!--<img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">-->
<!--<span class="hidden-xs">Alexander Pierce</span>-->
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<!--<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">-->
<p>
{{ user.get_full_name }}
<small>{{ user.get_username }}</small>
</p>
</li>
<!-- Menu Body -->
<!--<li class="user-body">-->
<!--</li>-->
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="{% url 'logout'%}?next={{request.path}}" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
{% endblock %}
{% block content %}
<div id="map" class="map" tabindex="0"> </div>
<div id="map" class="map" tabindex="0"> </div>
<footer class="my-footer">
<strong>
<a href="http://www.centrogeo.org.mx/">© 2018 Centro de Investigación en Ciencias de Información Geoespacial</a>
</strong>
......@@ -256,13 +242,14 @@
{% endblock %}
{% block scripts %}
<script>
//var osmap = new OpenStreetMapsClass("map", -99.145556,19.419444, 10);
var osmap = new sidtMap("map", -89.63873079999999,21.0404457, 7);
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
var img_req_url = "{% url 'img-rqst' %}" // url for requestim preview image
</script>
<script>
//var osmap = new OpenStreetMapsClass("map", -99.145556,19.419444, 10);
var osmap = new sidtMap("map", -89.63873079999999,21.0404457, 7);
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
var img_req_url = "{% url 'img-rqst' %}" // url for requesting preview image
</script>
{% endblock %}
catalog/views.py
View file @ b0133c01
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
from django.shortcuts import render
from catalog.forms import ASFSearchForm
from catalog.models import Polygon
from django.http import HttpResponse, JsonResponse, HttpResponseRedirect
from django.urls import reverse
from django.views.generic.base import View
from django.template import loader
from django.template import loader, RequestContext
from urllib import urlencode
import requests, json, unicodedata, sys
import base64
......@@ -17,6 +16,7 @@ from geosentinel import APISentinel
sentinel = APISentinel.APISentinel('emmhp', 'geoemm29')
# Create your views here.
#-------------------------------------------------------------------------------
def login(request):
......@@ -24,9 +24,9 @@ def login(request):
View function for home page of site.
"""
# Render the HTML template index.html with the data in the context variable
return render(request,'login.html',{})
#-------------------------------------------------------------------------------
def map(request):
"""
......@@ -40,10 +40,8 @@ def map(request):
#-------------------------------------------------------------------------------
def requestToImage(request):
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)
img_str = base64.b64encode(r.content)
r = requests.get(img_link, auth=("emmhp", "geoemm29"), stream=True)
img_str = base64.b64encode(r.content)
return JsonResponse({'img': img_str})
......@@ -64,7 +62,7 @@ def productList(request):
## ----- aqui llamada a api sentinel
## ----- antes consultar en DB si no se tiene ya el producto
date = ("".join(init_date.split('-')), "".join(end_date.split('-')))
date = ("".join(init_date.split('-')), "".join(end_date.split('-')))
params = {"platformname": "Sentinel-2"}
# if cloud_percentage.strip():
......@@ -73,8 +71,6 @@ def productList(request):
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
img_preview = '/static/images/sat_preview/sat_test.jpg'
......@@ -85,33 +81,20 @@ def productList(request):
img_link = img_link[:img_link.find("/")+2] + "emmhp:geoemm29@" + img_link[img_link.find("/")+2:]
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
'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});
# 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})
return JsonResponse({'catalog': catalog});
#-------------------------------------------------------------------------------
class SearchSubmitView(View):
template = 'map.html'
# template = 'search_submit.html'
def strip_accents(self, s):
return ''.join((c for c in unicodedata.normalize('NFD', s) if unicodedata.category(c) != 'Mn'))
......@@ -123,86 +106,29 @@ class SearchSubmitView(View):
searchValue = self.strip_accents(searchValue).lower()
## A simple query for Polygon objects whose name is 'searchValue'
# polygonList = Polygon.objects.filter(name=searchValue)
polygonList = Polygon.objects.filter(name__startswith=searchValue)
# data = []
list = []
data_list = []
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
# })
list.append({
'id': str(polygon.id),
'city': polygonInfo['properties']['NOMGEO'],
'state': polygonInfo['properties']['ENT_NAME'],
'geojson': polygonInfo,
'wkt_polygon': polygon.wkt_polygon,
'description': polygon.description,
'source': polygon.source
data_list.append({
'id' : str(polygon.id),
'city' : polygonInfo['properties']['NOMGEO'],
'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 = {
'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)
#-------------------------------------------------------------------------------
# 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):
"""
......@@ -210,7 +136,7 @@ def regionSearched(request):
"""
city_name = request.POST['value']
cityList = Polygon.objects.filter(name=city_name)
cityList = Polygon.objects.filter(name=city_name)
if len(cityList) > 0:
print cityList
......
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