Skip to content

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

reportes, primera etapa

parent fc0e7818
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 @ 0b05b628
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 @ 0b05b628
{% 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 @ 0b05b628
<!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 @ 0b05b628
...@@ -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 @ 0b05b628
...@@ -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 @ 0b05b628
...@@ -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 @ 0b05b628
No preview for this file type
geosentinel
View file @ 0b05b628
/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 @ 0b05b628
{% 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 @ 0b05b628
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 @ 0b05b628
# -*- 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