Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit d55ba54d authored by Ulises Morales Ramírez's avatar Ulises Morales Ramírez
Browse files
Options

Merge branch 'reports' into 'dev' 

reportes, primera etapa

See merge request !2
parents fc0e7818 0b05b628
Hide whitespace changes
Inline Side-by-side
Showing with 1156 additions and 660 deletions
catalog/static/catalog/js/Chart.min.js 0 → 100644
View file @ d55ba54d
This source diff could not be displayed because it is too large. You can view the blob instead.
catalog/templates/L2ASCL_data (copy).html
View file @ d55ba54d
{% extends "data_top.html" %} {% extends "data_top.html" %}
{% load static %} {% load static %}
{% block content %} {% block content %}
<div class="wrapper"> <div class="wrapper">
<!-- Content Wrapper. Contains page content -->
<!-- Content Wrapper. Contains page content -->
<!-- Main content -->
<!-- Main content --> <section class="content">
<section class="content"> <div class="row">
<div class="row"> <div class="col-md-6">
<div class="col-md-6"> <!-- AREA CHART -->
<!-- AREA CHART --> <div class="box box-primary">
<div class="box box-primary"> <div class="box-header with-border">
<div class="box-header with-border"> <h3 class="box-title">Area Km²</h3>
<h3 class="box-title">Area Km²</h3>
<div class="box-tools pull-right">
<div class="box-tools pull-right"> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> class="fa fa-minus"></i>
</button> </button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> <button type="button" class="btn btn-box-tool" data-widget="remove"><i
</div> class="fa fa-times"></i></button>
</div> </div>
<div class="box-body"> </div>
<div class="chart"> <div class="box-body">
<canvas id="areaChart" style="height:250px"></canvas> <div class="chart">
</div> <canvas id="areaChart" style="height:250px"></canvas>
</div> </div>
<!-- /.box-body --> </div>
</div> <!-- /.box-body -->
<!-- /.box --> </div>
<!-- /.box -->
<!-- DONUT CHART -->
<div class="box box-danger"> <!-- DONUT CHART -->
<div class="box-header with-border"> <div class="box box-danger">
<h3 class="box-title">Donut Chart</h3> <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> <div class="box-tools pull-right">
</button> <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button> class="fa fa-minus"></i>
</div> </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>
<div class="box-body"> <!-- /.row -->
<canvas id="pieChart" style="height:250px"></canvas>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div> </section>
<!-- /.col (LEFT) --> <!-- /.content -->
<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
</div> </div>
<strong>Copyright &copy; 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights <!-- /.content-wrapper -->
reserved. <footer class="main-footer">
</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 %} {% endblock %}
{% block scripts %} {% block scripts %}
<!-- page script --> <!-- page script -->
<script> <script>
var ctx = document.getElementById("areaChart").getContext('2d'); var ctx = document.getElementById("areaChart").getContext('2d');
var myChart = new Chart(ctx, { var myChart = new Chart(ctx, {
type: 'line', type: 'Line',
data: { data: {
labels: [{{labels}}], labels: [{{labels}}],
datasets: [{ datasets: [{
label: 'Vegetacion (4)', label: 'Vegetacion (4)',
data: {{vegetation}}, data: {{vegetation}},
backgroundColor: [ backgroundColor: [
'rgba(0, 250, 132, 0.5)', 'rgba(0, 250, 132, 0.5)',
'rgba(54, 162, 235, 0.2)', 'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)', 'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)', 'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)', 'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)' 'rgba(255, 159, 64, 0.2)'
], ],
borderColor: [ borderColor: [
'rgba(255,99,132,1)', 'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)', 'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)', 'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)', 'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)', 'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)' 'rgba(255, 159, 64, 1)'
], ],
borderWidth: 1 borderWidth: 1
}, },
{ {
label: 'No Vegetacion (5)', label: 'No Vegetacion (5)',
data: {{novegetation}}, data: {{novegetation}},
backgroundColor: [ backgroundColor: [
'rgba(155, 250, 0, 0.5)', 'rgba(155, 250, 0, 0.5)',
'rgba(54, 162, 235, 0.2)', 'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)', 'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)', 'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)', 'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)' 'rgba(255, 159, 64, 0.2)'
], ],
borderColor: [ borderColor: [
'rgba(255,99,132,1)', 'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)', 'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)', 'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)', 'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)', 'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)' 'rgba(255, 159, 64, 1)'
], ],
borderWidth: 1 borderWidth: 1
}] }]
}, },
options: { options: {
events: ['click'], events: ['click'],
onClick: areaChartonClick, onClick: areaChartonClick,
scales: { scales: {
yAxes: [{ yAxes: [{
ticks: { ticks: {
beginAtZero:true beginAtZero: true
}
}]
} }
}] }
} });
}
}); function areaChartonClick(e, element) {
function areaChartonClick(e,element){ console.log(e);
console.log(e); console.log(element);
console.log(element); console.log(element[0]._index);
console.log(element[0]._index); console.log(myChart);
console.log(myChart); console.log(myChart.config.data.labels[element[0]._index]);
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"
document.getElementById("satImage").src="../../static/tmpImages/"+myChart.config.data.labels[element[0]._index]+"_TCI_60m.jpg" };
}; </script>
</script>
{% endblock %} {% endblock %}
catalog/templates/base_top.html
View file @ d55ba54d
<!DOCTYPE html> <!DOCTYPE html>
{% load static %} {% load static %}
<html> <html>
<head> <head>
<title>Repositorio de Imágenes Satelitales</title> <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"> <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' %}"> <link rel="icon" href="{% static 'catalog/images/satellite.png' %}">
<!-- Bootstrap 3.3.7 --> <!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="{% static 'catalog/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css' %}"> <link rel="stylesheet" href="{% static 'catalog/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css' %}">
<!-- Font Awesome --> <!-- Font Awesome -->
<link rel="stylesheet" href="{% static 'catalog/adminlte/bower_components/font-awesome/css/font-awesome.min.css' %}"> <link rel="stylesheet"
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> 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 --> <!-- Theme style -->
<link rel="stylesheet" href="{% static 'catalog/adminlte/dist/css/AdminLTE.css' %}"> <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. --> <!-- 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' %}"> <link rel="stylesheet" href="{% static 'catalog/adminlte/dist/css/skins/_all-skins.css' %}">
<!-- Select2 --> <!-- Select2 -->
<link rel="stylesheet" href="{% static 'catalog/adminlte/bower_components/select2/dist/css/select2.min.css' %}"> <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 %} {% block headMedia %}{% endblock %}
</head> </head>
<body class="hold-transition skin-yellow sidebar-mini"> <body class="hold-transition skin-yellow sidebar-mini">
<!-- <div id="map" class="map" tabindex="0"> </div>--> <!-- <div id="map" class="map" tabindex="0"> </div>-->
<!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe>--> <!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe>-->
<div class="wrmapper"> <div class="wrmapper">
<header class="main-header"> <header class="main-header">
<!-- Logo --> <!-- Logo -->
<a class="logo"> <a class="logo">
<!-- mini logo for sidebar mini 50x50 pixels --> <!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>G</b>eo</span> <span class="logo-mini"><b>G</b>eo</span>
<!-- logo for regular state and mobile devices --> <!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Geo</b>int</span> <span class="logo-lg"><b>Geo</b>int</span>
</a> </a>
<!-- Header Navbar: style can be found in header.less --> <!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top"> <nav class="navbar navbar-static-top">
<!-- Sidebar toggle button--> <!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"> <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span> <span class="sr-only">Toggle navigation</span>
</a> </a>
<div class="navbar-custom-menu">
<div class="navbar-custom-menu"> <ul class="nav navbar-nav">
<ul class="nav navbar-nav"> <!-- Messages: style can be found in dropdown.less-->
<!-- Messages: style can be found in dropdown.less--> <!-- <li class="dropdown messages-menu"> -->
<!-- <li class="dropdown messages-menu"> --> {#% block messages %#}{#% endblock %#}
{#% block messages %#}{#% endblock %#} <!-- </li> -->
<!-- </li> --> <!-- Notifications: style can be found in dropdown.less -->
<!-- Notifications: style can be found in dropdown.less --> <!-- <li class="dropdown notifications-menu"> -->
<!-- <li class="dropdown notifications-menu"> --> {#% block notifications %#}{#% endblock %#}
{#% block notifications %#}{#% endblock %#} <!-- </li> -->
<!-- </li> --> <!-- Tasks: style can be found in dropdown.less -->
<!-- Tasks: style can be found in dropdown.less --> <!-- <li class="dropdown tasks-menu"> -->
<!-- <li class="dropdown tasks-menu"> --> {#% block tasks %}{% endblock %#}
{#% block tasks %}{% endblock %#} <!-- </li> -->
<!-- </li> --> <!-- History -->
<!-- User Account: style can be found in dropdown.less --> <li class="dropdown user user-menu">
<li class="dropdown user user-menu"> {% block history %}
{% block user %}{% endblock %} {% endblock %}
</li> </li>
<!-- Control Sidebar Toggle Button --> <!-- History -->
<li> <!-- User Account: style can be found in dropdown.less -->
<a id="product-list-toggle" href="#" data-toggle="control-sidebar"><i class="fa fa-shopping-cart"></i></a> <li class="dropdown user user-menu">
</li> {% block user %}{% endblock %}
</ul> </li>
</div> <!-- 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> </nav>
</header> </header>
<!-- Left side column. contains the logo and sidebar --> <!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar"> <aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less --> <!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar"> <section class="sidebar">
{% block sidebar %}{% endblock %} {% block sidebar %}{% endblock %}
</section> </section>
<!-- /.sidebar --> <!-- /.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 --> <!-- Content Wrapper. Contains page content -->
<aside class="control-sidebar control-sidebar-dark"> <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 --> <!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-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="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="cart"><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-shopping-cart"></i></a>
</li>
</ul> </ul>
<!-- Tab panes --> <!-- Tab panes -->
<div class="tab-content"> <div class="tab-content">
<!-- Home tab content --> <!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab"> <div class="tab-pane" id="control-sidebar-home-tab">
<form id='product-to-cart-form' role="form" method="post"> <form id='product-to-cart-form' role="form" method="post">
{% csrf_token %} {% csrf_token %}
<div class="container"> <div class="container">
<div class="sidebar-title"> <div class="sidebar-title">
<h3><b>Products</b></h3> <h3><b>Products</b></h3>
</div> </div>
<div class="sidebar-button"> <div class="sidebar-button">
<button type="submit" name="search" id="add-cart" class="btn btn-primary"> <button type="submit" name="search" id="add-cart" class="btn btn-primary">
Add to cart Add to cart
</button> </button>
</div> </div>
</div> </div>
<!-- this ul element is filled with data --> <!-- this ul element is filled with data -->
<ul id="product-list-globe" class="control-sidebar-menu"></ul> <ul id="product-list-globe" class="control-sidebar-menu"></ul>
<!-- /.control-sidebar-menu --> <!-- /.control-sidebar-menu -->
</form> </form>
</div> </div>
<!-- /.tab-pane --> <!-- /.tab-pane -->
<!-- Stats tab content --> <!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div> <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
<!-- /.tab-pane --> <!-- /.tab-pane -->
<!-- Settings tab content --> <!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab"> <div class="tab-pane" id="control-sidebar-settings-tab">
<form id='purchased-product-form' role="form" method="post"> <form id='purchased-product-form' role="form" method="post">
{% csrf_token %} {% csrf_token %}
<div class="container"> <div class="container">
<div class="sidebar-title"> <div class="sidebar-title">
<h3><b>My cart</b></h3> <h3><b>My cart</b></h3>
</div> </div>
<div class="sidebar-button"> <div class="sidebar-button">
<button type="submit" name="search" id="purchase" class="btn btn-primary"> <button type="submit" name="search" id="purchase" class="btn btn-primary">
Purchase Purchase
</button> </button>
</div> </div>
</div> </div>
<!-- this ul element is filled with data --> <!-- this ul element is filled with data -->
<ul id="product-list-cart" class="sidebar-menu" data-widget="tree"></ul> <ul id="product-list-cart" class="sidebar-menu" data-widget="tree"></ul>
</form> </form>
</div> </div>
<!-- /.tab-pane --> <!-- /.tab-pane -->
</div> </div>
</aside> </aside>
<!-- /.control-sidebar --> <!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed immediately after the control sidebar --> <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar -->
<div class="control-sidebar-bg"></div> <div class="control-sidebar-bg"></div>
</div> </div>
<!-- ./wrapper --> <!-- ./wrapper -->
<!-- T E M P L A T E S --> <!-- T E M P L A T E S -->
{% block templates %}{% endblock %} {% block templates %}{% endblock %}
<!-- T E M P L A T E S --> <!-- T E M P L A T E S -->
<!-- MODAL 1 --> <!-- MODAL 1 -->
{% block modal1 %}{% endblock %} {% block modal1 %}{% endblock %}
<!-- MODAL 1 --> <!-- MODAL 1 -->
<!-- jQuery 3 --> <!-- jQuery 3 -->
<script src="{% static 'catalog/adminlte/bower_components/jquery/dist/jquery.min.js' %}"></script> <script src="{% static 'catalog/adminlte/bower_components/jquery/dist/jquery.min.js' %}"></script>
<!-- jQuery UI 1.11.4 --> <!-- jQuery UI 1.11.4 -->
<script src="{% static 'catalog/adminlte/bower_components/jquery-ui/jquery-ui.min.js' %}"></script> <script src="{% static 'catalog/adminlte/bower_components/jquery-ui/jquery-ui.min.js' %}"></script>
<!-- Bootstrap 3.3.7 --> <!-- Bootstrap 3.3.7 -->
<script src="{% static 'catalog/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script> <script src="{% static 'catalog/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- AdminLTE App --> <!-- AdminLTE App -->
<script src="{% static 'catalog/adminlte/dist/js/adminlte.min.js' %}"></script> <script src="{% static 'catalog/adminlte/dist/js/adminlte.min.js' %}"></script>
<!-- Data management file --> <!-- Data management file -->
<script src="{% static 'catalog/js/dataRetrieval.js' %}" type="text/javascript"></script> <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 %} {% block scripts %}{% endblock %}
</body> </body>
</html> </html>
catalog/templates/map.html
View file @ d55ba54d
...@@ -2,264 +2,307 @@ ...@@ -2,264 +2,307 @@
{% load staticfiles %} {% load staticfiles %}
{% block headMedia %} {% block headMedia %}
<link rel="stylesheet" href="{% static 'catalog/css/map.css'%}" type="text/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/body.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'catalog/css/modal1.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://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="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://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://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.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/openLayers4.js' %}"></script>
<script src="{% static 'catalog/js/sidtMap.js'%}"></script> <script src="{% static 'catalog/js/sidtMap.js' %}"></script>
{% endblock %} {% endblock %}
{% block messages %} {% block messages %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i> <i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span> <span class="label label-success">4</span>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li class="header">You have 4 messages</li> <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> <li>
<a href="#"> <!-- inner menu: contains the actual data -->
<div class="pull-left"> <ul class="menu">
<img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image"> <li><!-- start message -->
</div> <a href="#">
<h4> <div class="pull-left">
AdminLTE Design Team <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<small><i class="fa fa-clock-o"></i> 2 hours</small> </div>
</h4> <h4>
<p>Why not buy a new awesome theme?</p> Support Team
</a> <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>
</ul> <li class="footer"><a href="#">See All Messages</a></li>
</li> </ul>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
{% endblock %} {% endblock %}
{% block notifications %} {% block notifications %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i> <i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span> <span class="label label-warning">10</span>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li class="header">You have 10 notifications</li> <li class="header">You have 10 notifications</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li> <li>
<a href="#"> <!-- inner menu: contains the actual data -->
<i class="fa fa-users text-aqua"></i> 5 new members joined today <ul class="menu">
</a> <li>
</li> <a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
</li>
</ul>
</li> </li>
</ul> <li class="footer"><a href="#">View all</a></li>
</li> </ul>
<li class="footer"><a href="#">View all</a></li>
</ul>
{% endblock %} {% endblock %}
{% block tasks %} {% block tasks %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i> <i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span> <span class="label label-danger">9</span>
</a> </a>
<ul c{% load static %}lass="dropdown-menu"> <ul c{% load static %}lass="dropdown-menu">
<li class="header">You have 9 tasks</li> <li class="header">You have 9 tasks</li>
<li> <li>
<!-- inner menu: contains the actual data --> <!-- inner menu: contains the actual data -->
<ul class="menu"> <ul class="menu">
<li><!-- Task item --> <li><!-- Task item -->
<a href="#"> <a href="#">
<h3> <h3>
Design some buttons Design some buttons
<small class="pull-right">20%</small> <small class="pull-right">20%</small>
</h3> </h3>
<div class="progress xs"> <div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
<span class="sr-only">20% Complete</span> aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
</div> <span class="sr-only">20% Complete</span>
</div> </div>
</a> </div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li> </li>
<!-- end task item --> </ul>
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
{% endblock %} {% endblock %}
{% block sidebar %} {% block sidebar %}
<div class="form-group "> <div class="form-group ">
<!-- search form --> <!-- search form -->
<form role="form" action="#" method="get" class="sidebar-form"> <form role="form" action="#" method="get" class="sidebar-form">
<div class="input-group"> <div class="input-group">
<input type="text" id="ajax-input" name="value" autocomplete="off" class="form-control" placeholder="Search region..."> <input type="text" id="ajax-input" name="value" class="form-control" placeholder="Search region...">
<span class="input-group-btn"> <span class="input-group-btn">
<button type="button" name="search" id="search-btn" class="btn btn-flat" onclick="erase_input()"> <button type="button" name="search" id="search-btn" class="btn btn-flat" onclick="erase_input()">
<i class="fa fa-eraser"></i> <i class="fa fa-eraser"></i>
</button> </button>
</span> </span>
</div> </div>
<div class="row" id="option-list"> <div class="row" id="option-list">
<div class="col-12"> <div class="col-12">
<ul id="polygon-list" class="no-bullet"></ul> <ul id="polygon-list" class="no-bullet"></ul>
</div> </div>
</div> </div>
</form> </form>
<!-- /search form --> <!-- /search form -->
<!-- sidebar menu: : style can be found in sidebar.less --> <!-- sidebar menu: : style can be found in sidebar.less -->
<!-- <form role="form" target="catalogFrame" action="{% url 'productList' %}" method="post"> --> <!-- <form role="form" target="catalogFrame" action="{% url 'productList' %}" method="post"> -->
<form id='product-form' role="form" method="post"> <form id='product-form' role="form" method="post">
{% csrf_token %} {% csrf_token %}
<ul class="sidebar-menu" data-widget="tree"> <ul class="sidebar-menu" data-widget="tree">
<li class="treeview"> <li class="treeview">
<a href="#"> <a href="#">
<i class="fa fa-sync-alt"></i> <i class="fa fa-sync-alt"></i>
<span>Process</span> <span>Process</span>
<span class="pull-right-container"> <span class="pull-right-container">
<span class="label label-primary pull-right"></span> <span class="label label-primary pull-right"></span>
</span> </span>
</a> </a>
<ul class="treeview-menu sidebar-form"> <ul class="treeview-menu sidebar-form">
<li class="col-xs-12">{{searchForm.platform}}</li> <li class="col-xs-12">{{ searchForm.platform }}</li>
</ul> </ul>
</li> </li>
<li class="treeview"> <li class="treeview">
<a href="#"> <a href="#">
<i class="fa fa-calendar-alt"></i> <i class="fa fa-calendar-alt"></i>
<span>Date range</span> <span>Date range</span>
<span class="pull-right-container"> <span class="pull-right-container">
<span class="label label-primary pull-right"></span> <span class="label label-primary pull-right"></span>
</span> </span>
</a> </a>
<ul class="treeview-menu sidebar-form"> <ul class="treeview-menu sidebar-form">
<li>{{searchForm.start}}</li> <li>{{ searchForm.start }}</li>
<li>{{searchForm.end}}</li> <li>{{ searchForm.end }}</li>
</ul> </ul>
</li> </li>
<li class="treeview "> <li class="treeview ">
<a href="#"> <a href="#">
<i class="fa fa-map"></i> <i class="fa fa-map"></i>
<span>Polygon</span> <span>Polygon</span>
<span class="pull-right-container"> <span class="pull-right-container">
<span class="label label-primary pull-right"></span> <span class="label label-primary pull-right"></span>
</span> </span>
</a> </a>
<ul class="treeview-menu sidebar-form"> <ul class="treeview-menu sidebar-form">
<li>{{searchForm.polygon}}</li> <li>{{ searchForm.polygon }}</li>
</ul> </ul>
</li> </li>
<li class="treeview "> <li class="treeview ">
<a href="#"> <a href="#">
<i class="fa fa-cloud"></i> <i class="fa fa-cloud"></i>
<span>Cloud percentage</span> <span>Cloud percentage</span>
<span class="pull-right-container"> <span class="pull-right-container">
<span class="label label-primary pull-right"></span> <span class="label label-primary pull-right"></span>
</span> </span>
</a> </a>
<ul class="treeview-menu sidebar-form"> <ul class="treeview-menu sidebar-form">
<li> <li>
<input class="form-control" type="number" value="100" name="cloudPercentage"> <input class="form-control" type="number" value="100" name="cloudPercentage">
</li> </li>
</ul> </ul>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
<span> <span>
<button type="submit" name="search" id="search-btn" class="btn btn-primary"><i class="fa fa-search"></i> Search</button> <button type="submit" name="search" id="search-btn" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
<!-- <button name="search" id="search-btn" class="btn btn-primary">Search</button> --> <!-- <button name="search" id="search-btn" class="btn btn-primary">Search</button> -->
</span> </span>
</a> </a>
</li> </li>
<li> <li>
<!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe> --> <!-- <iframe id="catalogFrame" name="catalogFrame">my frame</iframe> -->
</li> </li>
</ul> </ul>
</form> </form>
</div> </div>
<!-- form-group--> <!-- form-group-->
{% endblock %} {% endblock %}
{% block user %} {% block user %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-user"></i> <i class="fa fa-user"></i>
<!--<img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">--> <!--<img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">-->
<!--<span class="hidden-xs">Alexander Pierce</span>--> <!--<span class="hidden-xs">Alexander Pierce</span>-->
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<!-- User image --> <!-- User image -->
<li class="user-header"> <li class="user-header">
<!--<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">--> <!--<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">-->
<p> <p>
{{ user.get_full_name }} {{ user.get_full_name }}
<small>{{ user.get_username }}</small> <small>{{ user.get_username }}</small>
</p> </p>
</li> </li>
<!-- Menu Body --> <!-- Menu Body -->
<!--<li class="user-body">--> <!--<li class="user-body">-->
<!--</li>--> <!--</li>-->
<!-- Menu Footer--> <!-- Menu Footer-->
<li class="user-footer"> <li class="user-footer">
<div class="pull-left"> <div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a> <a href="#" class="btn btn-default btn-flat">Profile</a>
</div> </div>
<div class="pull-right"> <div class="pull-right">
<a href="{% url 'logout'%}?next={{request.path}}" class="btn btn-default btn-flat">Sign out</a> <a href="{% url 'logout' %}?next={{ request.path }}" class="btn btn-default btn-flat">Sign out</a>
</div> </div>
</li> </li>
</ul> </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 %} {% endblock %}
{% block content %} {% block content %}
<div id="map" class="map" tabindex="0"> </div> <div id="map" class="map" tabindex="0"></div>
<footer class="my-footer"> <footer class="my-footer">
<strong> <strong>
<a href="http://www.centrogeo.org.mx/">© 2018 Centro de Investigación en Ciencias de Información Geoespacial</a> <a href="http://www.centrogeo.org.mx/">© 2018 Centro de Investigación en Ciencias de Información
</strong> Geoespacial</a>
</footer> </strong>
</footer>
{% endblock %} {% endblock %}
{% block templates %}{% include "templates.html" %}{% endblock %} {% block templates %}{% include "templates.html" %}{% endblock %}
{% block modal1 %}{% include "mssgModal.html" %}{% endblock %} {% block modal1 %}{% include "mssgModal.html" %}{% endblock %}
{% block scripts %} {% block scripts %}
<script> <script>
//var osmap = new OpenStreetMapsClass("map", -99.145556,19.419444, 10); //var osmap = new OpenStreetMapsClass("map", -99.145556,19.419444, 10);
var osmap = new sidtMap("map", -89.63873079999999,21.0404457, 7); var osmap = new sidtMap("map", -89.63873079999999, 21.0404457, 7);
osmap.geolocation(); osmap.geolocation();
osmap.addInteraction(); osmap.addInteraction();
var req_url = "{% url 'search-submit' %}"; // url for requesting polygon data var req_url = "{% url 'search-submit' %}"; // url for requesting polygon data
var prod_req_url = "{% url 'productList' %}"; // url for requesting product data var prod_req_url = "{% url 'productList' %}"; // url for requesting product data
var img_req_url = "{% url 'img-rqst' %}"; // url for requesting preview image 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_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 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' %}"; var purch_prod_url = "{% url 'purch-prod-rqst' %}";
</script> </script>
{% endblock %} {% endblock %}
catalog/urls.py
View file @ d55ba54d
...@@ -12,5 +12,4 @@ urlpatterns = [ ...@@ -12,5 +12,4 @@ urlpatterns = [
url(r'^cartrequest/$', views.saveInCart, name='cart-rqst'), url(r'^cartrequest/$', views.saveInCart, name='cart-rqst'),
url(r'^fromcartrqst/$', views.getFromCart, name='from-cart-rqst'), url(r'^fromcartrqst/$', views.getFromCart, name='from-cart-rqst'),
url(r'^purchcartrqst/$', views.purchaseProduct, name='purch-prod-rqst'), url(r'^purchcartrqst/$', views.purchaseProduct, name='purch-prod-rqst'),
url(r'^scl/$', views.L2ASCL_data, name='L2ASCL-data')
] ]
catalog/views.py
View file @ d55ba54d
...@@ -267,11 +267,11 @@ def purchaseProduct(request): ...@@ -267,11 +267,11 @@ def purchaseProduct(request):
## TODO: Add product L1C to Cart DB after product download. ## ## TODO: Add product L1C to Cart DB after product download. ##
#------------------------------------------------------------------------------- #-------------------------------------------------------------------------------
def L2ASCL_data(request): # def L2ASCL_data(request):
with open("/home/mchc/data.json") as f: # with open("/home/ulises/REPSAT_NAS/mario_repsat_test/T15QZD_sclData.json") as f:
json_data = json.load(f) # json_data = json.load(f)
print(json_data) # 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()] }) # 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): # def purchaseProduct(request):
# """ # """
......
db.sqlite3
View file @ d55ba54d
No preview for this file type
geosentinel
View file @ d55ba54d
/home/emmanuelhp/Documentos/GeoSentinel/geosentinel /home/ulises/django-apps/GeoSentinel/geosentinel
\ No newline at end of file \ No newline at end of file
reports/templates/L2ASCL_data.html
View file @ d55ba54d
{% extends "data_top.html" %} {% extends "base_top.html" %}
{% load static %} {% load staticfiles %}
{% block head %}
<link rel="stylesheet" href="{% static 'reports/css/scldata.css' %}"> {% 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 %} {% endblock %}
{% block content %} {% block messages %}
<!--<div class="wrapper">--> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<!-- Content Wrapper. Contains page content --> <i class="fa fa-envelope-o"></i>
<!-- Main content --> <span class="label label-success">4</span>
<div class="container-fluid"> </a>
<div class="row"> <ul class="dropdown-menu">
<div class="col-lg-12"> <li class="header">You have 4 messages</li>
Titulo <li>
</div> <!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- start message -->
</div> <a href="#">
<div class="row"> <div class="pull-left">
<div class="col-lg-8"> <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
<canvas id="myChart"></canvas> </div>
</div> <h4>
<div class="col-lg-4"> Support Team
<img id="satImage" src="{% static 'reports/tmpImages/20180219_TCI_60m.jpg' %}" height="512px"/> <small><i class="fa fa-clock-o"></i> 5 mins</small>
</div> </h4>
<p>Why not buy a new awesome theme?</p>
</div> </a>
</li>
<!-- end message -->
</div> <li>
<!-- Footer --> <a href="#">
<footer class="page-footer font-small special-color-dark pt-5"> <div class="pull-left">
<img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
<!-- Footer Elements --> </div>
<div class="container"> <h4>
AdminLTE Design Team
<!-- Social buttons --> <small><i class="fa fa-clock-o"></i> 2 hours</small>
<ul class="list-unstyled list-inline text-center"> </h4>
<li class="list-inline-item"> <p>Why not buy a new awesome theme?</p>
<a class="btn-floating btn-fb mx-1"> </a>
<i class="fa fa-facebook"> </i> </li>
</a> </ul>
</li>
<li class="list-inline-item">
<a class="btn-floating btn-tw mx-1">
<i class="fa fa-twitter"> </i>
</a>
</li> </li>
<li class="list-inline-item"> <li class="footer"><a href="#">See All Messages</a></li>
<a class="btn-floating btn-gplus mx-1"> </ul>
<i class="fa fa-google-plus"> </i> {% endblock %}
</a> {% 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>
<li class="list-inline-item"> <li class="footer"><a href="#">View all</a></li>
<a class="btn-floating btn-li mx-1"> </ul>
<i class="fa fa-linkedin"> </i> {% endblock %}
</a> {% 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>
<li class="list-inline-item"> <li class="footer">
<a class="btn-floating btn-dribbble mx-1"> <a href="#">View all tasks</a>
<i class="fa fa-dribbble"> </i>
</a>
</li> </li>
</ul> </ul>
<!-- Social buttons --> {% 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> </div>
<!-- Footer Elements --> <!-- form-group-->
{% endblock %}
{% block user %}
<!-- Copyright --> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
<div class="footer-copyright text-center py-3">© 2018 Copyright: <i class="fa fa-user"></i>
<a href="http://geoint.mx/"> Centro de Investigación en Ciencias de Información Geoespacial.</a> <!--<img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">-->
</div> <!--<span class="hidden-xs">Alexander Pierce</span>-->
<!-- Copyright --> </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> <div class="box-tools pull-right">
<!-- Footer --> <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 %} {% block scripts %}
<!-- page script --> <!-- page script -->
<script> <script>
{% autoescape off %} var label;
var config = {{graphData}} // Recibimos el JSON con los datos desde el View
config.options={ {% autoescape off %}
maintainAspectRatio:false, var config = {{graphData}}
<!-- scales: {xAxes: [{stacked: true}],yAxes: [{stacked: true}]},--> config.options = {
title: {text:"SCL Image Classification Data (Km²)", display:true}, responsive: true,
maintainAspectRatio: false,
onClick: chartOnClick, <!-- scales: {xAxes: [{stacked: true}],yAxes: [{stacked: true}]},-->
title: {text: "SCL Image Classification Data (Km²)", display: true},
};
} {% endautoescape %}
{% endautoescape %} // Creamos una gráfica con los datos al macenados en config
var ctx = document.getElementById('myChart').getContext('2d'); var ctx = document.getElementById('myChart').getContext('2d');
ctx.canvas.width = 256; //ctx.canvas.width = 256;
ctx.canvas.height = 512; //ctx.canvas.height = 512;
var myChart = new Chart(ctx, config); var myChart = new Chart(ctx, config);
function chartOnClick(e,element){ //var myChart;
console.log(e);
console.log(element); // mostrar imagen al dar click en los puntos
console.log(element[0]._index); document.getElementById("myChart").onclick = function (evt) {
console.log(myChart); var activePoints = myChart.getElementsAtEvent(evt);
console.log(myChart.config.data.labels[element[0]._index]); var firstPoint = activePoints[0];
label = myChart.data.labels[firstPoint._index];
document.getElementById("satImage").src="../../static/reports/tmpImages/"+myChart.config.data.labels[element[0]._index]+"_TCI_60m.jpg" document.getElementById("satImage").src = "../../static/reports/tmpImages/" + label + "_TCI_60m.jpg"
myChart.options.legend.onClick(e,element); };
};
</script> // 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 %} {% endblock %}
reports/urls.py
View file @ d55ba54d
from django.conf.urls import url from django.conf.urls import url
from . import views from . import views
from reports import views
urlpatterns = [ 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 @ d55ba54d
# -*- coding: utf-8 -*- # -*- coding: utf-8 -*-
from __future__ import unicode_literals from __future__ import unicode_literals
import io
from django.http import FileResponse
from reportlab.pdfgen import canvas
from django.shortcuts import render from django.shortcuts import render
# Create your views here. # Create your views here.
from collections import OrderedDict from collections import OrderedDict
import json 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)) from reportlab.pdfgen import canvas
graphData = dict()
graphData['type']="line" from GeoInt_SIDT import settings
data=dict()
data['labels'] = [ k for k,v in sorted(json_data.items()) ] def report_L2ASCL(request, report):
# data['click']="chartOnClick" with open("/home/ulises/REPSAT_NAS/mario_repsat_test/"+report+".json") as f:
data['datasets'] = list() json_data = OrderedDict(json.load(f))
labels = set() graphData = dict()
for d in json_data: graphData['type'] = "line"
labels |= set(json_data[d].keys())
labels.remove('date') data = dict()
data['labels'] = [k for k, v in sorted(json_data.items())]
labelNames = ["No Data", "Saturated", "Shadows", "Cloud Shadows", "Vegetation", "Not-Vegetated", "Whater", "Unclassified", "Cloud Medium Probablilty", "Cloud Hight Probablilty", "Thin Cirrus", "Snow"] # data['click']="chartOnClick"
colors = ["Black", "Red", "DarkGray", "Brown", "Green", "Yellow", "Blue", "Grey", "LightGray", "White", "Aqua", "Pink"] data['datasets'] = list()
for l in labels: labels = set()
item = dict() for d in json_data:
item['label'] = labelNames[int(l)] labels |= set(json_data[d].keys())
if l == "0": labels.remove('date')
item['hidden'] = "true"
item['data'] = [ v[l] * 60*60/1000000. for k,v in sorted(json_data.items()) if l in v] labelNames = ["No Data", "Saturated", "Shadows", "Cloud Shadows", "Vegetation", "Not-Vegetated", "Whater",
item['backgroundColor']=colors[int(l)] "Unclassified", "Cloud Medium Probablilty", "Cloud Hight Probablilty", "Thin Cirrus", "Snow"]
data['datasets'].append(item) colors = ["Black", "Red", "DarkGray", "Brown", "Green", "Yellow", "Blue", "Grey", "LightGray", "White", "Aqua",
"Pink"]
graphData['data']=data for l in labels:
item = dict()
# graphData['options']['responsive']=True item['label'] = labelNames[int(l)]
# graphData['options']['maintainAspectRatio']=False # item['fill'] = "false"
print( json.dumps(graphData).encode("utf-8")) if l == "0":
return render(request, 'L2ASCL_data.html', {"graphData":json.dumps(graphData).encode("utf-8")}) 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