Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit dcac1d5c authored by Luis Ernesto Dominguez Uriostegui's avatar Luis Ernesto Dominguez Uriostegui
Browse files
Options

cambios de ulises realizados,boton historial de compras

parents 23298339 d55ba54d
Hide whitespace changes
Inline Side-by-side
Showing with 1241 additions and 697 deletions
.gitignore
View file @ dcac1d5c
# compiled code
*.pyc
*.pyc
# project
.idea/
__pycache__/
geosentinel/
geosentinel
db.sqlite3-journal
# django stufff
*.log
*.pot
*.pyc
__pycache__/
local_settings.py
db.sqlite3
media
# virtual env
.env
.venv
env/
venv/
ENV/
env.bak/
venv.bak/
# pyenv
.python-version
GeoInt_SIDT/urls.py
View file @ dcac1d5c
......@@ -27,4 +27,5 @@ urlpatterns = [
url(r'^reports/', include('reports.urls')),
url(r'^$', RedirectView.as_view(url='/catalog/', permanent=True)),
url(r'^accounts/', include('django.contrib.auth.urls')),
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
]
#+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
catalog/middleware.py
View file @ dcac1d5c
from django.shortcuts import HttpResponseRedirect
from django.urls import reverse
# from django.core.urlresolvers import reverse
class AuthRequiredMiddleware(object):
def __init__(self, get_response):
self.get_response = get_response
def __init__(self, get_response):
self.get_response = get_response
def __call__(self, request):
# Code to be executed for each request before
# the view (and later middleware) are called.
def __call__(self, request):
# Code to be executed for each request before
# the view (and later middleware) are called.
response = self.get_response(request)
print (request.path_info)
print (reverse('login'))
response = self.get_response(request)
print(request.path_info)
print(reverse('login'))
# if request.path_info == reverse('ws-news-list2'):
# return response
# if request.path_info == reverse('ws-news-list2'):
# return response
if not request.user.is_authenticated() and request.path_info != reverse('login'):
return HttpResponseRedirect(reverse('login'))
if not request.user.is_authenticated and request.path_info != reverse('login'):
return HttpResponseRedirect(reverse('login'))
# Code to be executed for each request/response after
# the view is called.
# Code to be executed for each request/response after
# the view is called.
return response
return response
catalog/static/catalog/js/Chart.min.js 0 → 100644
View file @ dcac1d5c
This source diff could not be displayed because it is too large. You can view the blob instead.
catalog/static/catalog/js/dataRetrieval.js
View file @ dcac1d5c
......@@ -26,33 +26,33 @@ var makeRequest = function (value) {
dataType : 'json',
success : function(data) {
polygonList = data.polygonList;
while (pol_element.firstChild) {
pol_element.removeChild(pol_element.firstChild);
}
if (polygonList.length <= 0) {
var temp = document.querySelector('#city_list_template');
// filling template
temp.content.querySelector('li').id = '';
temp.content.querySelectorAll('span')[0].textContent = 'No cities matched your search. Try again.';
temp.content.querySelectorAll('span')[1].textContent = '';
temp.content.querySelectorAll('div')[3].textContent = '';
var clone = document.importNode(temp.content, true);
document.querySelector('#polygon-list').appendChild(clone);
} else {
data.polygonList.forEach(function (polygon) {
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);
});
......@@ -84,16 +84,16 @@ function drawPolygon(element) {
osmap.removePolygon();
// draw wkt polygon
// osmap.addWKTPolygon(polygon.wkt_polygon);
osmap.addWKTPolygon(polygon.wkt_polygon);
// format coords to draw
var coords = osmap.formatCoords(polygon.geojson.geometry.coordinates);
// var coords = osmap.formatCoords(polygon.geojson.geometry.coordinates);
// get the biggest area
var biggest = osmap.getBiggestPolygon(coords);
// var biggest = osmap.getBiggestPolygon(coords);
// draw coordsR
osmap.addPolygon(biggest);
// osmap.addPolygon(biggest);
}
})
}
......@@ -114,7 +114,7 @@ $("#id_polygon").on('keyup', function (e) {
// this function cleans list of available products
function erase_product_list_globe() {
prevfeature = null;
prevfeature = new Map();
var pol_element = document.getElementById('product-list-globe');
while (pol_element.firstChild) {
pol_element.removeChild(pol_element.firstChild);
......@@ -140,21 +140,23 @@ function erase_product_list_cart() {
}
var prevfeature = null;
var prevfeature = new Map();
function drawApiResponse(element) {
var list_globe = document.getElementById('product-list-globe').children;
for (var i=0; i<list_globe.length; i++) {
var listElement = list_globe[i];
listElement.style.textDecoration = 'none';
}
for (var i=0; i<product_list.catalog.length; i++) {
var data = product_list.catalog[i];
if (data.uuid === element.id.replace("-li", '')) {
element.style.textDecoration = 'underline';
console.log("footprint:\n", data.product.footprint);
prevfeature = osmap.addfootprint(data.product.footprint, prevfeature);
if (!prevfeature.has(data.uuid)){
element.style.textDecoration = 'underline';
prevfeature.set(data.uuid, osmap.addfootprint(data.product.footprint, prevfeature));
}else{
if (prevfeature.length != 0){
element.style.textDecoration = 'none';
osmap.deletefootprint(prevfeature.get(data.uuid));
prevfeature.delete(data.uuid);
}
}
}
}
}
......@@ -162,7 +164,7 @@ function drawApiResponse(element) {
function createProductContainer() {
var temp_1 = document.querySelector('#product_cart_1');
// filling template
temp_1.content.querySelector('span').textContent = "Product";
......@@ -178,7 +180,7 @@ $('#ajax-input').focus(function () {
$('#option-list').show();
OPT_LIST_IS_HIDDEN = false;
}
}).blur(function () {
}).blur(function (event) {
INPUT_ON_FOCUS = false;
if (!OPT_LIST_IS_HIDDEN && $(this).val() && $(event.target).closest('#option-list').length) {
$('#option-list').hide();
......@@ -228,7 +230,7 @@ $(document).ready(function () {
var pol_element = document.getElementById('polygon-list');
var typingTimer;
var typingInterval = 800; //milliseconds
var typingInterval = 300; //milliseconds
var productListGlobe = [];
var cartProductList = []; // this array represent DB where products will be stored
var productsToObtain = [];
......@@ -243,17 +245,26 @@ $(document).ready(function () {
typingTimer = setTimeout(makeRequest.bind(null, value), typingInterval);
} else {
$('#option-list').hide();
while (pol_element.firstChild) {
pol_element.removeChild(pol_element.firstChild);
}
OPT_LIST_IS_HIDDEN = true;
return
}
});
// disable enter in search input
$('#ajax-input').on('keyup keypress', function(event) {
var keyCode = event.keyCode || event.which;
if (keyCode === 13) {
event.preventDefault();
return false;
}
});
// var PRODUCT_IN_LIST = false;
// function for making POST request to productList in view.py
......@@ -304,7 +315,7 @@ $(document).ready(function () {
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);
}
......@@ -397,7 +408,7 @@ $(document).ready(function () {
productsToObtain = [];
data.product_list.forEach(function (product) {
var temp_2 = document.querySelector('#product_cart_2');
// filling template
temp_2.content.querySelector('li').id = product.uuid;
temp_2.content.querySelector('h4').id = product.uuid + "-h4";
......@@ -424,7 +435,7 @@ $(document).ready(function () {
}
});
// purchasing products in cart
$('#purchased-product-form').submit(function (event) {
event.preventDefault();
......
catalog/static/catalog/js/openLayers4.js
View file @ dcac1d5c
......@@ -121,12 +121,13 @@ OpenStreetMapsClass.prototype.addWKTPolygon = function(wkt)
document.getElementById("id_polygon").value = wkt;
}
OpenStreetMapsClass.prototype.addfootprint = function(wkt, prevFeature)
{
if (prevFeature) {
OpenStreetMapsClass.prototype.deletefootprint = function (prevFeature) {
if (prevFeature){
this.vectorLayer.getSource().removeFeature(prevFeature);
}
}
OpenStreetMapsClass.prototype.addfootprint = function(wkt, prevFeature){
var format = new ol.format.WKT();
var feature = format.readFeature(wkt, {
......@@ -135,16 +136,16 @@ OpenStreetMapsClass.prototype.addfootprint = function(wkt, prevFeature)
});
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);
stroke: new ol.style.Stroke({
color: getRandomColor(),
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);
......@@ -263,3 +264,11 @@ OpenStreetMapsClass.prototype.iconStyle = function(url,x,y)
}
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
\ No newline at end of file
catalog/templates/L2ASCL_data (copy).html
View file @ dcac1d5c
{% extends "data_top.html" %}
{% load static %}
{% block content %}
<div class="wrapper">
<!-- Content Wrapper. Contains page content -->
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-6">
<!-- AREA CHART -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Area Km²</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div class="chart">
<canvas id="areaChart" style="height:250px"></canvas>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
<!-- DONUT CHART -->
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title">Donut Chart</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
<div class="wrapper">
<!-- Content Wrapper. Contains page content -->
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-6">
<!-- AREA CHART -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Area Km²</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i
class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div class="chart">
<canvas id="areaChart" style="height:250px"></canvas>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
<!-- DONUT CHART -->
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title">Donut Chart</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i
class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<canvas id="pieChart" style="height:250px"></canvas>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col (LEFT) -->
<div class="col-md-6">
<!-- LINE CHART -->
<!-- BAR CHART -->
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Bar Chart</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i
class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div class="chart">
<canvas id="barChart" style="height:230px"></canvas>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">MAP</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapsexite"><i
class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i
class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div class="chart">
<img id="satImage" src="{% static 'tmpImages/20180219_TCI_60m.jpg' %}" height="512px"/>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col (RIGHT) -->
</div>
<div class="box-body">
<canvas id="pieChart" style="height:250px"></canvas>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
<!-- /.row -->
</div>
<!-- /.col (LEFT) -->
<div class="col-md-6">
<!-- LINE CHART -->
<!-- BAR CHART -->
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">Bar Chart</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div class="chart">
<canvas id="barChart" style="height:230px"></canvas>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">MAP</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapsexite"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div class="chart">
<img id="satImage" src="{% static 'tmpImages/20180219_TCI_60m.jpg' %}" height="512px"/>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col (RIGHT) -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 2.4.0
</section>
<!-- /.content -->
</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>
{% endblock %}
{% block scripts %}
<!-- page script -->
<script>
var ctx = document.getElementById("areaChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [{{labels}}],
datasets: [{
label: 'Vegetacion (4)',
data: {{vegetation}},
backgroundColor: [
'rgba(0, 250, 132, 0.5)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
},
{
label: 'No Vegetacion (5)',
data: {{novegetation}},
backgroundColor: [
'rgba(155, 250, 0, 0.5)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
events: ['click'],
onClick: areaChartonClick,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
<!-- page script -->
<script>
var ctx = document.getElementById("areaChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'Line',
data: {
labels: [{{labels}}],
datasets: [{
label: 'Vegetacion (4)',
data: {{vegetation}},
backgroundColor: [
'rgba(0, 250, 132, 0.5)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
},
{
label: 'No Vegetacion (5)',
data: {{novegetation}},
backgroundColor: [
'rgba(155, 250, 0, 0.5)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
events: ['click'],
onClick: areaChartonClick,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}]
}
}
});
function areaChartonClick(e,element){
console.log(e);
console.log(element);
console.log(element[0]._index);
console.log(myChart);
console.log(myChart.config.data.labels[element[0]._index]);
document.getElementById("satImage").src="../../static/tmpImages/"+myChart.config.data.labels[element[0]._index]+"_TCI_60m.jpg"
};
</script>
}
});
function areaChartonClick(e, element) {
console.log(e);
console.log(element);
console.log(element[0]._index);
console.log(myChart);
console.log(myChart.config.data.labels[element[0]._index]);
document.getElementById("satImage").src = "../../static/tmpImages/" + myChart.config.data.labels[element[0]._index] + "_TCI_60m.jpg"
};
</script>
{% endblock %}
catalog/templates/base_top.html
View file @ dcac1d5c
<!DOCTYPE html>
{% load static %}
<html>
<head>
<head>
<title>Repositorio de Imágenes Satelitales</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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 'catalog/images/satellite.png' %}">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="{% static 'catalog/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css' %}">
<!-- Font Awesome -->
<link rel="stylesheet" href="{% static 'catalog/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">
<link rel="stylesheet"
href="{% static 'catalog/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 'catalog/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 'catalog/adminlte/dist/css/skins/_all-skins.css' %}">
<!-- Select2 -->
<link rel="stylesheet" href="{% static 'catalog/adminlte/bower_components/select2/dist/css/select2.min.css' %}">
<!-- jsPDF -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js'></script>
{% 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>-->
</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">
<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 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>
</div>
<!-- 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> -->
<!-- History -->
<li class="dropdown user user-menu">
{% block history %}
{% endblock %}
</li>
<!-- History -->
<!-- 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">
</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 %}
{% block sidebar %}{% endblock %}
</section>
<!-- /.sidebar -->
</aside>
</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>-->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- 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>-->
<!-- 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>
</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">
<form id='purchased-product-form' role="form" method="post">
{% csrf_token %}
<div class="container">
<div class="sidebar-title">
<h3><b>My cart</b></h3>
</div>
<div class="sidebar-button">
<button type="submit" name="search" id="purchase" class="btn btn-primary">
Purchase
</button>
</div>
</div>
<!-- this ul element is filled with data -->
<ul id="product-list-cart" class="sidebar-menu" data-widget="tree"></ul>
</form>
</div>
<!-- /.tab-pane -->
<!-- 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>
</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">
<form id='purchased-product-form' role="form" method="post">
{% csrf_token %}
<div class="container">
<div class="sidebar-title">
<h3><b>My cart</b></h3>
</div>
<div class="sidebar-button">
<button type="submit" name="search" id="purchase" class="btn btn-primary">
Purchase
</button>
</div>
</div>
<!-- this ul element is filled with data -->
<ul id="product-list-cart" class="sidebar-menu" data-widget="tree"></ul>
</form>
</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 -->
</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 -->
{% block templates %}{% endblock %}
<!-- T E M P L A T E S -->
<!-- MODAL 1 -->
{% block modal1 %}{% endblock %}
<!-- MODAL 1 -->
<!-- T E M P L A T E S -->
{% block templates %}{% endblock %}
<!-- T E M P L A T E S -->
<!-- MODAL 1 -->
{% block modal1 %}{% endblock %}
<!-- MODAL 1 -->
<!-- jQuery 3 -->
<script src="{% static 'catalog/adminlte/bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{% static 'catalog/adminlte/bower_components/jquery-ui/jquery-ui.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'catalog/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'catalog/adminlte/dist/js/adminlte.min.js' %}"></script>
<!-- Data management file -->
<script src="{% static 'catalog/js/dataRetrieval.js' %}" type="text/javascript"></script>
<!-- jQuery 3 -->
<script src="{% static 'catalog/adminlte/bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{% static 'catalog/adminlte/bower_components/jquery-ui/jquery-ui.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'catalog/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'catalog/adminlte/dist/js/adminlte.min.js' %}"></script>
<!-- Data management file -->
<script src="{% static 'catalog/js/dataRetrieval.js' %}" type="text/javascript"></script>
<!-- Chartsjs -->
<script src="{% static 'catalog/js/Chart.min.js' %}" type="text/javascript"></script>
{% block scripts %}{% endblock %}
</body>
{% block scripts %}{% endblock %}
</body>
</html>
catalog/templates/map.html
View file @ dcac1d5c
......@@ -2,158 +2,159 @@
{% load staticfiles %}
{% block headMedia %}
<link rel="stylesheet" href="{% static 'catalog/css/map.css'%}" type="text/css">
<link rel="stylesheet" href="{% static 'catalog/css/body.css'%}" type="text/css">
<link rel="stylesheet" href="{% static 'catalog/css/modal1.css'%}" type="text/css">
<!-- <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">-->
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
<link rel="stylesheet" href="{% static 'catalog/css/map.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'catalog/css/modal1.css' %}" type="text/css">
<!-- <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">-->
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
<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.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/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="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="{% static 'catalog/js/openLayers4.js'%}"></script>
<script src="{% static 'catalog/js/sidtMap.js'%}"></script>
<script src="{% static 'catalog/js/openLayers4.js' %}"></script>
<script src="{% static 'catalog/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 -->
<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>
<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>
<!-- 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>
</ul>
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
<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">
<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>
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</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>
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
<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>
<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>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
</ul>
{% endblock %}
{% block sidebar %}
<div class="form-group ">
<!-- search form -->
<form role="form" action="#" method="get" class="sidebar-form">
<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()">
<div class="form-group ">
<!-- search form -->
<form role="form" action="#" method="get" class="sidebar-form">
<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>
</span>
</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">
<li class="treeview">
<a href="#">
<i class="fa fa-sync-alt"></i>
<span>Process</span>
<span class="pull-right-container">
</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">
<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>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-calendar-alt"></i>
<span>Date range</span>
<span class="pull-right-container">
</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>
......@@ -171,16 +172,16 @@
<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">
</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>
......@@ -196,55 +197,97 @@
<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>
</a>
</li>
<li>
<!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe> -->
</li>
</ul>
</form>
</div>
<!-- form-group-->
<li>
<!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe> -->
</li>
</ul>
</form>
</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 history %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-history"></i>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<p>
Historial de compras
</p>
</li>
<div class="form-group">
<br>
<ul class="sidebar-menu" data-widget="tree">
<!-- History element -->
<li>
<a class="treeview " href="../reports/T15QZD_sclData">
<i class="fa fa-line-chart"></i>
<span>Report #</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<!-- End History element -->
<!-- History element -->
<li>
<a class="treeview " href="../reports/T16QBJ_sclData">
<i class="fa fa-line-chart"></i>
<span>Report #</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<!-- End History element -->
</ul>
</div>
</ul>
{% endblock %}
{% block content %}
<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>
</footer>
<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>
</footer>
{% endblock %}
{% block templates %}{% include "templates.html" %}{% endblock %}
......@@ -308,11 +351,11 @@
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
var prod_cart_url = "{% url 'cart-rqst' %}"; // url for requesting product saving in cart
var prod_from_cartDB_url = "{% url 'from-cart-rqst' %}"; // url for requesting product from cart table in DB
var purch_prod_url = "{% url 'purch-prod-rqst' %}";
</script>
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
var prod_cart_url = "{% url 'cart-rqst' %}"; // url for requesting product saving in cart
var prod_from_cartDB_url = "{% url 'from-cart-rqst' %}"; // url for requesting product from cart table in DB
var purch_prod_url = "{% url 'purch-prod-rqst' %}";
</script>
{% endblock %}
catalog/urls.py
View file @ dcac1d5c
......@@ -12,5 +12,4 @@ urlpatterns = [
url(r'^cartrequest/$', views.saveInCart, name='cart-rqst'),
url(r'^fromcartrqst/$', views.getFromCart, name='from-cart-rqst'),
url(r'^purchcartrqst/$', views.purchaseProduct, name='purch-prod-rqst'),
url(r'^scl/$', views.L2ASCL_data, name='L2ASCL-data')
]
catalog/views.py
View file @ dcac1d5c
......@@ -49,6 +49,7 @@ def requestToImage(request):
img_link = request.GET['value']
r = requests.get(img_link, auth=("emmhp", "geoemm29"), stream=True)
img_str = base64.b64encode(r.content)
img_str = img_str.decode('utf-8')
return JsonResponse({'img': img_str})
......@@ -89,8 +90,12 @@ def productList(request):
catalog = []
for p in products:
# img_link = products[p]['link_icon']
# img_link = img_link[:img_link.find("/")+2] + "emmhp:geoemm29@" + img_link[img_link.find("/")+2:]
# img_link = img_link[:img_link.find("/")+2] + "emmhp:geoemm29@" + img_link[img_link.find("/")+2:]
if products[p].get('tileid') is None:
titleid = products[p]['title'].split("_")
products[p]['tileid'] = titleid[5][1:]
catalog.append({
'process' : process,
'start_date' : init_date,
......@@ -262,11 +267,11 @@ def purchaseProduct(request):
## TODO: Add product L1C to Cart DB after product download. ##
#-------------------------------------------------------------------------------
def L2ASCL_data(request):
with open("/home/mchc/data.json") as f:
json_data = json.load(f)
print(json_data)
return render(request, 'L2ASCL_data.html', {"labels":",".join([k for k in json_data]), "vegetation":[v["4"] for k,v in json_data.items()] })
# def L2ASCL_data(request):
# with open("/home/ulises/REPSAT_NAS/mario_repsat_test/T15QZD_sclData.json") as f:
# json_data = json.load(f)
# print(json_data)
# return render(request, 'L2ASCL_data.html', {"labels":",".join([k for k in json_data]), "vegetation":[v["4"] for k,v in json_data.items()] })
#-------------------------------------------------------------------------------
# def purchaseProduct(request):
# """
......
db.sqlite3
View file @ dcac1d5c
No preview for this file type
reports/templates/L2ASCL_data.html
View file @ dcac1d5c
{% extends "data_top.html" %}
{% load static %}
{% block head %}
<link rel="stylesheet" href="{% static 'reports/css/scldata.css' %}">
{% extends "base_top.html" %}
{% load staticfiles %}
{% block headMedia %}
<link rel="stylesheet" href="{% static 'catalog/css/map.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'catalog/css/modal1.css' %}" type="text/css">
<!-- <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">-->
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css">
<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.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="{% static 'catalog/js/openLayers4.js' %}"></script>
<script src="{% static 'catalog/js/sidtMap.js' %}"></script>
{% endblock %}
{% block content %}
<!--<div class="wrapper">-->
<!-- Content Wrapper. Contains page content -->
<!-- Main content -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
Titulo
</div>
</div>
<div class="row">
<div class="col-lg-8">
<canvas id="myChart"></canvas>
</div>
<div class="col-lg-4">
<img id="satImage" src="{% static 'reports/tmpImages/20180219_TCI_60m.jpg' %}" height="512px"/>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small special-color-dark pt-5">
<!-- Footer Elements -->
<div class="container">
<!-- Social buttons -->
<ul class="list-unstyled list-inline text-center">
<li class="list-inline-item">
<a class="btn-floating btn-fb mx-1">
<i class="fa fa-facebook"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-tw mx-1">
<i class="fa fa-twitter"> </i>
</a>
{% 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="list-inline-item">
<a class="btn-floating btn-gplus mx-1">
<i class="fa fa-google-plus"> </i>
</a>
<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>
</li>
</ul>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-li mx-1">
<i class="fa fa-linkedin"> </i>
</a>
<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="list-inline-item">
<a class="btn-floating btn-dribbble mx-1">
<i class="fa fa-dribbble"> </i>
</a>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
<!-- Social buttons -->
</ul>
{% endblock %}
{% block sidebar %}
<div class="form-group">
<br>
<ul class="sidebar-menu" data-widget="tree">
<li>
<a class="treeview " href="{{ BASE_URL }}/catalog">
<i class="fa fa-map"></i>
<span>Home</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-area-chart"></i>
<span>Chart Type</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
<ul class="treeview-menu sidebar-form">
<li>
<a class="treeview " href="#" onclick="change('line')">
<i class="fa fa-bar-chart"></i>
<span>Line Chart</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<li>
<a class="treeview " href="#" onclick="change('bar')">
<i class="fa fa-bar-chart"></i>
<span>Bar Chart</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<li>
<a class="treeview " href="#" onclick="change('bubble')">
<i class="fa fa-bar-chart"></i>
<span>Bubble Chart</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<li>
<a class="treeview " href="#" onclick="change('polarArea')">
<i class="fa fa-bar-chart"></i>
<span>Polar Area Chart</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<li>
<a class="treeview " href="#" onclick="change('doughnut')">
<i class="fa fa-bar-chart"></i>
<span>Doughnut Chart</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<li>
<a class="treeview " href="#" onclick="change('pie')">
<i class="fa fa-bar-chart"></i>
<span>Pie Chart</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<li>
<a class="treeview " href="#" onclick="change('radar')">
<i class="fa fa-bar-chart"></i>
<span>Radar Chart</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-download"></i>
<span>Download as</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
<ul class="treeview-menu sidebar-form">
<li>
<a class="treeview pull-left" href="#">
<i class="fa fa-file-code-o"></i>
<span>Export to JSON</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<li>
<a class="treeview pull-left " href="#" id="downloadPdf">
<i class="fa fa-file-pdf-o"></i>
<span>Expor to PDF</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- Footer Elements -->
<!-- form-group-->
{% endblock %}
{% block user %}
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a href="http://geoint.mx/"> Centro de Investigación en Ciencias de Información Geoespacial.</a>
</div>
<!-- Copyright -->
<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 history %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-history"></i>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<p>
Historial de compras
</p>
</li>
<div class="form-group">
<br>
<ul class="sidebar-menu" data-widget="tree">
<!-- History element -->
<li>
<a class="treeview " href="{{ BASE_URL }}/reports/T15QZD_sclData">
<i class="fa fa-line-chart"></i>
<span>Report #</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<!-- End History element -->
<!-- History element -->
<li>
<a class="treeview " href="{{ BASE_URL }}/reports/T16QBJ_sclData">
<i class="fa fa-line-chart"></i>
<span>Report #</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<!-- End History element -->
</ul>
</div>
</ul>
{% endblock %}
{% block content %}
<!-- Content Wrapper. Contains page content -->
<!-- Main content -->
<div id="reportPage" class="wrapper" style="background-color: #ecf0f5">
<div class="text-center"><h1>{{ report_name }}</h1></div>
<!-- Content Wrapper. Contains page content -->
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-8">
<!-- AREA CHART -->
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title"> {{ type }} Chart Km²</h3>
</footer>
<!-- Footer -->
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i
class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div id="openchart" class="chart">
<canvas id="myChart" style="height: 574px"></canvas>
</div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
<!-- /.content -->
<!--</div>-->
</div>
<!-- /.col (LEFT) -->
<div class="col-md-4">
<!-- DONUT CHART -->
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title">Map Image</h3>
{% endblock %}
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i
class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i
class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<img onclick="window.open(this.src)" class="img-responsive" id="satImage" width="400"
height="400px"
style="margin-left: auto; margin-right: auto; display: block;">
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
</div>
<!-- /.row -->
</section>
<!-- /.content -->
</div>
<!-- Footer -->
<footer class=" page-footer font-small special-color-dark pt-5">
<!-- Footer Elements -->
<div class="container">
<!-- Social buttons
<ul class="list-unstyled list-inline text-center">
<li class="list-inline-item">
<a class="btn-floating btn-fb mx-1">
<i class="fa fa-faceboo"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-tw mx-1">
<i class="fa fa-twitter"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-gplus mx-1">
<i class="fa fa-google-plus"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-li mx-1">
<i class="fa fa-linkedin"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-dribbble mx-1">
<i class="fa fa-dribbble"> </i>
</a>
</li>
</ul>
<!-- Social buttons -->
</div>
<!-- Footer Elements -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2018 Copyright:
<a href="http://geoint.mx/"> Centro de Investigación en Ciencias de Información Geoespacial.</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- /.content -->
{% endblock %}
{% block scripts %}
<!-- page script -->
<script>
{% autoescape off %}
var config = {{graphData}}
config.options={
maintainAspectRatio:false,
<!-- scales: {xAxes: [{stacked: true}],yAxes: [{stacked: true}]},-->
title: {text:"SCL Image Classification Data (Km²)", display:true},
onClick: chartOnClick,
}
{% endautoescape %}
var ctx = document.getElementById('myChart').getContext('2d');
ctx.canvas.width = 256;
ctx.canvas.height = 512;
var myChart = new Chart(ctx, config);
function chartOnClick(e,element){
console.log(e);
console.log(element);
console.log(element[0]._index);
console.log(myChart);
console.log(myChart.config.data.labels[element[0]._index]);
document.getElementById("satImage").src="../../static/reports/tmpImages/"+myChart.config.data.labels[element[0]._index]+"_TCI_60m.jpg"
myChart.options.legend.onClick(e,element);
};
</script>
<!-- page script -->
<script>
var label;
// Recibimos el JSON con los datos desde el View
{% autoescape off %}
var config = {{graphData}}
config.options = {
responsive: true,
maintainAspectRatio: false,
<!-- scales: {xAxes: [{stacked: true}],yAxes: [{stacked: true}]},-->
title: {text: "SCL Image Classification Data (Km²)", display: true},
};
{% endautoescape %}
// Creamos una gráfica con los datos al macenados en config
var ctx = document.getElementById('myChart').getContext('2d');
//ctx.canvas.width = 256;
//ctx.canvas.height = 512;
var myChart = new Chart(ctx, config);
//var myChart;
// mostrar imagen al dar click en los puntos
document.getElementById("myChart").onclick = function (evt) {
var activePoints = myChart.getElementsAtEvent(evt);
var firstPoint = activePoints[0];
label = myChart.data.labels[firstPoint._index];
document.getElementById("satImage").src = "../../static/reports/tmpImages/" + label + "_TCI_60m.jpg"
};
// cambiar el tipo de gráfica
function change(newType) {
var ctx = document.getElementById("myChart").getContext("2d");
// Remove the old chart and all its event handles
if (myChart) {
myChart.destroy();
}
// Chart.js modifies the object you pass in. Pass a copy of the object so we can use the original object later
var temp = jQuery.extend(true, {}, config);
temp.type = newType;
if (newType == 'radar' || newType == 'pie' || newType == 'polarArea' || newType == 'doughnut') {
temp.options.scales.xAxes={"display": false};
temp.options.scales.yAxes={"display": false};
}
myChart = new Chart(ctx, temp);
};
// Transformar canvas a pdf
$('#downloadPdf').click(function (event) {
// obtener el tamaño de la página
var reportPageHeight = $('#reportPage').innerHeight();
var reportPageWidth = $('#reportPage').innerWidth();
// Creamos un nuevo canvas que rellenaremos con todos los demás canvas
var pdfCanvas = $('<canvas />').attr({
id: "canvaspdf",
width: reportPageWidth,
height: reportPageHeight
});
// Mantenemos la posicion del canvas
var pdfctx = $(pdfCanvas)[0].getContext('2d');
var pdfctxX = 0;
var pdfctxY = 0;
var buffer = 100;
// por cada gráfica ejecutamos la funcion
$("canvas").each(function (index) {
// obtenemos las medidas de la grafica
var canvasHeight = $(this).innerHeight();
var canvasWidth = $(this).innerWidth();
// Dibujamos la gráfica en el canvas
pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight);
pdfctxX += canvasWidth + buffer;
// nuestra página de informes está en un patrón de cuadrícula, por lo que se replica en el nuevo canvas
if (index % 2 === 1) {
pdfctxX = 0;
pdfctxY += canvasHeight + buffer;
}
});
// Crea un nuevo pdf y agrega nuestro nuevo canvas como imagen.
var pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]);
pdf.addImage($(pdfCanvas)[0], 'PNG', 0, 0);
// descargamos el pdf
pdf.save(label + '.pdf');
});
function export_json() {
}
</script>
{% endblock %}
reports/urls.py
View file @ dcac1d5c
from django.conf.urls import url
from . import views
from reports import views
urlpatterns = [
url(r'^$', views.report_L2ASCL, name='report'),
url(r'^(?P<report>\w+)$', views.report_L2ASCL, name='report'),
url(r'^(?P<report>[\w\-]+)/$', views.report_L2ASCL, name='report'),
]
reports/views.py
View file @ dcac1d5c
# -*- coding: utf-8 -*-
from __future__ import unicode_literals
import io
from django.http import FileResponse
from reportlab.pdfgen import canvas
from django.shortcuts import render
# Create your views here.
from collections import OrderedDict
import json
#-------------------------------------------------------------------------------
def report_L2ASCL(request, report=0):
with open("/home/mario/NAS_MarioCh/mario_repsat_test/T15QZD_sclData.json") as f:
json_data = OrderedDict(json.load(f))
graphData = dict()
graphData['type']="line"
data=dict()
data['labels'] = [ k for k,v in sorted(json_data.items()) ]
# data['click']="chartOnClick"
data['datasets'] = list()
labels = set()
for d in json_data:
labels |= set(json_data[d].keys())
labels.remove('date')
labelNames = ["No Data", "Saturated", "Shadows", "Cloud Shadows", "Vegetation", "Not-Vegetated", "Whater", "Unclassified", "Cloud Medium Probablilty", "Cloud Hight Probablilty", "Thin Cirrus", "Snow"]
colors = ["Black", "Red", "DarkGray", "Brown", "Green", "Yellow", "Blue", "Grey", "LightGray", "White", "Aqua", "Pink"]
for l in labels:
item = dict()
item['label'] = labelNames[int(l)]
if l == "0":
item['hidden'] = "true"
item['data'] = [ v[l] * 60*60/1000000. for k,v in sorted(json_data.items()) if l in v]
item['backgroundColor']=colors[int(l)]
data['datasets'].append(item)
graphData['data']=data
# graphData['options']['responsive']=True
# graphData['options']['maintainAspectRatio']=False
print( json.dumps(graphData).encode("utf-8"))
return render(request, 'L2ASCL_data.html', {"graphData":json.dumps(graphData).encode("utf-8")})
# -------------------------------------------------------------------------------
from reportlab.pdfgen import canvas
from GeoInt_SIDT import settings
def report_L2ASCL(request, report):
with open("/home/ulises/REPSAT_NAS/mario_repsat_test/"+report+".json") as f:
json_data = OrderedDict(json.load(f))
graphData = dict()
graphData['type'] = "line"
data = dict()
data['labels'] = [k for k, v in sorted(json_data.items())]
# data['click']="chartOnClick"
data['datasets'] = list()
labels = set()
for d in json_data:
labels |= set(json_data[d].keys())
labels.remove('date')
labelNames = ["No Data", "Saturated", "Shadows", "Cloud Shadows", "Vegetation", "Not-Vegetated", "Whater",
"Unclassified", "Cloud Medium Probablilty", "Cloud Hight Probablilty", "Thin Cirrus", "Snow"]
colors = ["Black", "Red", "DarkGray", "Brown", "Green", "Yellow", "Blue", "Grey", "LightGray", "White", "Aqua",
"Pink"]
for l in labels:
item = dict()
item['label'] = labelNames[int(l)]
# item['fill'] = "false"
if l == "0":
item['hidden'] = "true"
item['data'] = [v[l] * 60 * 60 / 1000000. for k, v in sorted(json_data.items()) if l in v]
item['backgroundColor'] = colors[int(l)]
data['datasets'].append(item)
graphData['data'] = data
#print(settings.BASE_URL)
# graphData['options']['responsive']=True
# graphData['options']['maintainAspectRatio']=False
#print(json.dumps(graphData).encode("utf-8"))
return render(request, 'L2ASCL_data.html', {"graphData": json.dumps(graphData), "report_name": report})
# -------------------------------------------------------------------------------
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