Skip to content

GeoInt_SIDT
GeoInt_SIDT
Commit 8ec19c3c authored by Sergio Adrian Gongora Euan's avatar Sergio Adrian Gongora Euan
Browse files
Options

update with dev

parents afe2dc5b cea0dbaf
Show whitespace changes
Inline Side-by-side
Showing with 28657 additions and 362 deletions
administration/templates/Platform.html 0 → 100644
View file @ 8ec19c3c
{% extends "base_top.html" %}
{% load staticfiles %}
{% block headMedia %}
<link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
{% endblock %}
{% block messages %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<!-- end message -->
<li>
<a href="#">
<div class="pull-left">
<img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
AdminLTE Design Team
<small><i class="fa fa-clock-o"></i> 2 hours</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
</ul>
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
{% endblock %}
{% block notifications %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
</li>
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
{% endblock %}
{% block tasks %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul c{% load static %}lass="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- Task item -->
<a href="#">
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
{% endblock %}
{% block sidebar %}
{% include 'administration_aside.html' %}
{% endblock %}
{% block user %}
{% include "user_button.html" %}
{% endblock %}
{% block content %}
<div class="wrapper" style="background-color: #ecf0f5;">
<!-- Content Wrapper. Contains page content -->
<!-- Main content -->
<section class="content">
<div class="panel panel-default">
<div class="panel-heading">{{ Viewname }}</div>
<div class="panel-body text-center">
<div class="row col-md-1 pull-right ">
<a class="btn btn-success btn-sm col-md-6 col-sm-6 col-xs-6 col-lg-6 col-xl-6">New</a>
<br>
<br>
</div>
<table data-toggle="table" id="example" class="table table-striped table-bordered"
style="width:100%">
<thead>
<th>ID</th>
<th>Name</th>
<th>Acronym</th>
<th>Status</th>
<th>Actions</th>
</thead>
<tbody>
{% for platform in platforms %}
<tr>
<td>{{ platform.id }}</td>
<td>{{ platform.name }}</td>
<td>{{ platform.acronym }}</td>
<form method="post" action="{% url 'update' %}">
{% csrf_token %}
<input type="hidden" name="request_path" value="{{ request.path }}">
<input type="hidden" name="user_id" value="{{ user.user_id }}">
<td>
<input type="checkbox" name="is_superuser" value="1"
{% if not request.user.is_superuser %}disabled{% endif %}
{% if platform.status == True %}checked{% endif %}>
</td>
<td>
<button {% if not request.user.is_superuser %}disabled{% endif %} title="save" type="submit" class="btn btn-success"><i
class="fa fa-save"></i></button>
</td>
</form>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</section>
<!-- /.content -->
</div>
<footer class=" page-footer font-small special-color-dark pt-5" style="bottom: 0; position: absolute">
<!-- 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">© 2019 Copyright:
<a href="http://geoint.mx/"> Centro de Investigación en Ciencias de Información Geoespacial.</a>
</div>
<!-- Copyright -->
</footer>
{% if messages %}
<div class="container col-md-2 col-lg-2 col-xs-2 col-sm-2" style="bottom: 0; right: 0;position: absolute">
{% for message in messages %}
<div {% if message.tags %} class="fade in alert alert-dismissible alert-{{ message.tags }}"{% endif %}>
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>{{ message.tags }}!</strong> {{ message }}.
</div>
{% endfor %}
</div>
{% endif %}
{% endblock %}
{% block templates %}{% include "templates.html" %}{% endblock %}
{% block scripts %}
<script>
$(document).ready(function () {
$('#example').DataTable
({
language:
{
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate":
{
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria":
{
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
},
responsive:
{
details:
{
type: 'column',
target: 'tr'
}
},
columnDefs:
[{
className: 'control',
orderable: false,
targets: 0
}],
order: [1, 'asc']
});
});
</script>
{% endblock %}
\ No newline at end of file
administration/templates/Process.html 0 → 100644
View file @ 8ec19c3c
{% extends "base_top.html" %}
{% load staticfiles %}
{% block headMedia %}
<link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
{% endblock %}
{% block messages %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<!-- end message -->
<li>
<a href="#">
<div class="pull-left">
<img src="dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
AdminLTE Design Team
<small><i class="fa fa-clock-o"></i> 2 hours</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
</ul>
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
{% endblock %}
{% block notifications %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
</li>
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
{% endblock %}
{% block tasks %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul c{% load static %}lass="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- Task item -->
<a href="#">
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
{% endblock %}
{% block sidebar %}
{% include 'administration_aside.html' %}
{% endblock %}
{% block user %}
{% include "user_button.html" %}
{% endblock %}
{% block content %}
<div class="wrapper" style="background-color: #ecf0f5;">
<!-- Content Wrapper. Contains page content -->
<!-- Main content -->
<section class="content">
<div class="panel panel-default">
<div class="panel-heading">{{ Viewname }}</div>
<div class="panel-body text-center">
<table data-toggle="table" id="example" class="table table-striped table-bordered"
style="width:100%">
<thead>
<th>ID</th>
<th>Name</th>
<th>Platform</th>
<th>Product Level</th>
<th>Status</th>
<th>Actions</th>
</thead>
<tbody>
{% for process in process %}
<tr>
<td>{{ process.id }}</td>
<td>{{ process.name }}</td>
<td>{{ process.platform_id }}</td>
<td>{{ process.product_level }}</td>
<form method="post" action="{% url 'update' %}">
{% csrf_token %}
<input type="hidden" name="request_path" value="{{ request.path }}">
<input type="hidden" name="user_id" value="{{ user.user_id }}">
<td>
<input type="checkbox" name="status" value="1"
{% if not request.user.is_superuser %}disabled{% endif %}
{% if process.status == True %}checked{% endif %}>
</td>
<td>
<button {% if not request.user.is_superuser %}disabled{% endif %} title="save" type="submit" class="btn btn-success"><i
class="fa fa-save"></i></button>
</td>
</form>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</section>
<!-- /.content -->
</div>
<footer class=" page-footer font-small special-color-dark pt-5" style="bottom: 0; position: absolute">
<!-- 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">© 2019 Copyright:
<a href="http://geoint.mx/"> Centro de Investigación en Ciencias de Información Geoespacial.</a>
</div>
<!-- Copyright -->
</footer>
{% endblock %}
{% block templates %}{% include "templates.html" %}{% endblock %}
{% block scripts %}
<script>
$(document).ready(function () {
$('#example').DataTable();
});
</script>
{% endblock %}
\ No newline at end of file
administration/templates/administration_aside.html
View file @ 8ec19c3c
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<br> <br>
<ul class="sidebar-menu" data-widget="tree"> <ul class="sidebar-menu" data-widget="tree">
<li> <li>
<a class="treeview " href="{{ BASE_URL }}/administration"> <a class="treeview " href="{% url 'Dashboard' %}">
<i class="fa fa-home"></i> <i class="fa fa-home"></i>
<span>Dashboard</span> <span>Dashboard</span>
<span class="pull-right-container"> <span class="pull-right-container">
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
</a> </a>
</li> </li>
<li> <li>
<a class="treeview " href="../../administration/request"> <a class="treeview " href="{% url 'request' %}">
<i class="fa fa-user-plus"></i> <i class="fa fa-user-plus"></i>
<span>Request</span> <span>Request</span>
<span class="pull-right-container"> <span class="pull-right-container">
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</a> </a>
</li> </li>
<li> <li>
<a class="treeview " href="../../administration/users"> <a class="treeview " href="{% url 'active_users' %}">
<i class="fa fa-users"></i> <i class="fa fa-users"></i>
<span>Active users</span> <span>Active users</span>
<span class="pull-right-container"> <span class="pull-right-container">
...@@ -29,6 +29,24 @@ ...@@ -29,6 +29,24 @@
</a> </a>
</li> </li>
<li> <li>
<a class="treeview " href="{% url 'all_process' %}">
<i class="fa fa-sync-alt"></i>
<span>Catalog of Process</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<li>
<a class="treeview " href="{% url 'all_platform' %}">
<i class="fa fa-satellite"></i>
<span>Catalog of Platforms</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
<!--li>
<a class="treeview " href="#" onclick="window.history.back();"> <a class="treeview " href="#" onclick="window.history.back();">
<i class="fa fa-backward"></i> <i class="fa fa-backward"></i>
<span>Back</span> <span>Back</span>
...@@ -36,6 +54,6 @@ ...@@ -36,6 +54,6 @@
<span class="label label-primary pull-right"></span> <span class="label label-primary pull-right"></span>
</span> </span>
</a> </a>
</li> </li-->
</ul> </ul>
</div> </div>
\ No newline at end of file
administration/templates/dashboard.html
View file @ 8ec19c3c
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
<script src="{% static 'js/Chart.min.js' %}"></script> <script src="{% static 'js/Chart.min.js' %}"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
{% endblock %} {% endblock %}
{% block messages %} {% block messages %}
...@@ -146,7 +147,7 @@ ...@@ -146,7 +147,7 @@
<span class="info-box-text">Active Users</span> <span class="info-box-text">Active Users</span>
<span class="info-box-number">{{ Usuarios }}</span> <span class="info-box-number">{{ Usuarios }}</span>
<span class="info-box-more pull-right"> <span class="info-box-more pull-right">
<a href="../../administration/users" class="small-box-footer"> <a href="{% url 'active_users' %}" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i> More info <i class="fa fa-arrow-circle-right"></i>
</a> </a>
</span> </span>
...@@ -168,7 +169,7 @@ ...@@ -168,7 +169,7 @@
<span class="info-box-text">User Registrations</span> <span class="info-box-text">User Registrations</span>
<span class="info-box-number">{{ Solicitud }}</span> <span class="info-box-number">{{ Solicitud }}</span>
<span class="info-box-more pull-right"> <span class="info-box-more pull-right">
<a href="../../administration/request" class="small-box-footer"> <a href="{% url 'request' %}" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i> More info <i class="fa fa-arrow-circle-right"></i>
</a> </a>
</span> </span>
...@@ -186,9 +187,7 @@ ...@@ -186,9 +187,7 @@
<span class="info-box-text">Processing</span> <span class="info-box-text">Processing</span>
<span class="info-box-number">{{ Descargando }}</span> <span class="info-box-number">{{ Descargando }}</span>
<span class="info-box-more pull-right"> <span class="info-box-more pull-right">
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</span> </span>
</div> </div>
<!-- /.info-box-content --> <!-- /.info-box-content -->
...@@ -204,9 +203,6 @@ ...@@ -204,9 +203,6 @@
<span class="info-box-text">Repsat Storage</span> <span class="info-box-text">Repsat Storage</span>
<span class="info-box-number">{{ size_repsat }}</span> <span class="info-box-number">{{ size_repsat }}</span>
<span class="info-box-more pull-right"> <span class="info-box-more pull-right">
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</span> </span>
</div> </div>
<!-- /.info-box-content --> <!-- /.info-box-content -->
...@@ -222,9 +218,6 @@ ...@@ -222,9 +218,6 @@
<span class="info-box-text">Sentinel Storage</span> <span class="info-box-text">Sentinel Storage</span>
<span class="info-box-number">{{ size_sentinel }}</span> <span class="info-box-number">{{ size_sentinel }}</span>
<span class="info-box-more pull-right"> <span class="info-box-more pull-right">
<a href="#" class="small-box-footer">
More info <i class="fa fa-arrow-circle-right"></i>
</a>
</span> </span>
</div> </div>
<!-- /.info-box-content --> <!-- /.info-box-content -->
...@@ -368,19 +361,56 @@ ...@@ -368,19 +361,56 @@
<!-- /.content --> <!-- /.content -->
</div> </div>
</footer>
{% if messages %}
<div class="container col-md-2 col-lg-2 col-xs-2 col-sm-2" style="bottom: 0; right: 0;position: absolute">
{% for message in messages %}
<div {% if message.tags %} class="fade in alert alert-dismissible alert-{{ message.tags }}"{% endif %}> {% endblock %}
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>{{ message.tags }}!</strong> {{ message }}. {% block footer %}
<footer class=" page-footer font-small special-color-dark pt-5" style="bottom: 0; position: absolute">
<!-- 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> </div>
{% endfor %} <!-- Footer Elements -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2019 Copyright:
<a href="http://geoint.mx/"> Centro de Investigación en Ciencias de Información Geoespacial.</a>
</div> </div>
{% endif %} <!-- Copyright -->
<div id="ol"></div>
</footer>
{% endblock %} {% endblock %}
{% block templates %} {% block templates %}
...@@ -407,20 +437,11 @@ ...@@ -407,20 +437,11 @@
{% endfor %} {% endfor %}
], ],
backgroundColor: [ backgroundColor: [
'rgba(255, 99, 132, 0.2)', 'rgba(222, 130, 50, 0.2)'
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
], ],
borderColor: [ borderColor: [
'rgba(255,99,132,1)', 'rgba(222, 130, 50,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
], ],
borderWidth: 1 borderWidth: 1
}] }]
...@@ -437,7 +458,6 @@ ...@@ -437,7 +458,6 @@
}); });
// mostrar imagen al dar click en los puntos // mostrar imagen al dar click en los puntos
document.getElementById("salesChart").onclick = function (evt) { document.getElementById("salesChart").onclick = function (evt) {
// activePoints = myChart.getElementsAtEvent(evt); // activePoints = myChart.getElementsAtEvent(evt);
...@@ -458,35 +478,34 @@ ...@@ -458,35 +478,34 @@
console.log("hola"); console.log("hola");
$('#mostrar').empty(); $('#mostrar').empty();
$('#mostrar').append("<table class=\"table table-hover\" id=\"example\">"+ $('#mostrar').append("<table class=\"table table-hover\" id=\"example\">" +
"<thead>" + "<thead>" +
"<tr>" + "<tr>" +
"<th class=\"text-center\">User ID</th>" + "<th class=\"text-center\">User ID</th>" +
"<th class=\"text-center\">User</th>" + "<th class=\"text-center\">User</th>" +
"<th class=\"text-center\">E-Mail</th>" + "<th class=\"text-center\">E-Mail</th>" +
"<th class=\"text-center\">Purchases</th>" + "<th class=\"text-center\">Purchases</th>" +
"<th class=\"text-center\">Storage</th>" + //"<th class=\"text-center\">Storage</th>" +
"<th class=\"text-center\">Downloads in process</th>" + "<th class=\"text-center\">Downloads in process</th>" +
"</tr>" + "</tr>" +
"</thead>" + "</thead>" +
"<tbody id=\"tbody\" class=\"text-center\">"); "<tbody id=\"tbody\" class=\"text-center\">");
$.each(data, function (key, val) { $.each(data, function (key, val) {
$("#tbody").append("<tr>"+ $("#tbody").append("<tr>" +
"<td>"+val['user_id']+"</td>"+ "<td>" + val['user_id'] + "</td>" +
"<td>"+val['username']+"</td>"+ "<td>" + val['username'] + "</td>" +
"<td>"+val['email']+"</td>"+ "<td>" + val['email'] + "</td>" +
"<td>"+val['purchases']+"</td>"+ "<td>" + val['purchases'] + "</td>" +
"<td>"+val['storage']+"</td>"+ //"<td>"+val['storage']+"</td>"+
"<td>"+val['in_process']+"</td>"+ "<td>" + val['in_process'] + "</td>" +
"</tr>" "</tr>"
); );
}); });
$('#mostrar').append("</tbody>" + $('#mostrar').append("</tbody>" +
"</table>"); "</table>");
$('#example').DataTable({ $('#example').DataTable({});
});
} }
}); });
......
administration/templates/users_table.html
View file @ 8ec19c3c
...@@ -195,51 +195,7 @@ ...@@ -195,51 +195,7 @@
{% block scripts %} {% block scripts %}
<script> <script>
$(document).ready(function () { $(document).ready(function () {
$('#example').DataTable $('#example').DataTable();
({
language:
{
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate":
{
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria":
{
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
},
responsive:
{
details:
{
type: 'column',
target: 'tr'
}
},
columnDefs:
[{
className: 'control',
orderable: false,
targets: 0
}],
order: [1, 'asc']
});
}); });
</script> </script>
{% endblock %} {% endblock %}
\ No newline at end of file
administration/urls.py
View file @ 8ec19c3c
...@@ -4,8 +4,10 @@ from . import views ...@@ -4,8 +4,10 @@ from . import views
urlpatterns = [ urlpatterns = [
url(r'^$', views.Dashboard, name='Dashboard'), url(r'^$', views.Dashboard, name='Dashboard'),
url(r'^request/$', views.Request_users, name='Request'), url(r'^request/$', views.Request_users, name='request'),
url(r'^update/$', views.update_user, name='update'), url(r'^update/$', views.update_user, name='update'),
url(r'^users/$', views.active_users, name='users'), url(r'^users/$', views.active_users, name='active_users'),
url(r'^platform/$', views.all_Platform, name='all_platform'),
url(r'^process/$', views.all_Process, name='all_process'),
url(r'^ws/report_table$', views.wsPurchasesPM, name='wsPurchasesPM'), url(r'^ws/report_table$', views.wsPurchasesPM, name='wsPurchasesPM'),
] ]
\ No newline at end of file
administration/views.py
View file @ 8ec19c3c
...@@ -13,7 +13,7 @@ from django.http import HttpResponse, HttpResponseRedirect, HttpRequest, Http404 ...@@ -13,7 +13,7 @@ from django.http import HttpResponse, HttpResponseRedirect, HttpRequest, Http404
# Create your views here. # Create your views here.
from django.views.decorators.csrf import csrf_exempt from django.views.decorators.csrf import csrf_exempt
from catalog.models import Purchase, Search from catalog.models import Purchase, Search, Platform, Process
from catalog.views import config from catalog.views import config
USERS_PATH = config['PATHS']['PATH_NAS'] USERS_PATH = config['PATHS']['PATH_NAS']
...@@ -250,4 +250,32 @@ def best_unit_size(bytes_size): ...@@ -250,4 +250,32 @@ def best_unit_size(bytes_size):
return str(round(bu_size,2))+" "+unit return str(round(bu_size,2))+" "+unit
#------------------------------------------------ #------------------------------------------------
def all_Platform (request):
platforms = Platform.objects.all()
platforms_list=[]
for platform in platforms:
platforms_list.append({
"id": platform.id,
"name": platform.name,
"acronym": platform.acronym,
"status": platform.status,
})
return render(request,"Platform.html",{'platforms': platforms_list})
#------------------------------------------------
def all_Process (request):
process = Process.objects.values('id','name','status','platform__name','productLevel')
process_list = []
for process in process:
process_list.append({
"id": process['id'],
"name": process['name'],
"platform_id": process['platform__name'],
"product_level": process['productLevel'],
"status": process['status'],
})
return render(request, "Process.html", {'process': process_list})
catalog/models.py
View file @ 8ec19c3c
...@@ -10,6 +10,7 @@ from django.db import models ...@@ -10,6 +10,7 @@ from django.db import models
class Platform(models.Model): class Platform(models.Model):
name = models.CharField(max_length=64) name = models.CharField(max_length=64)
acronym = models.CharField(max_length=16) acronym = models.CharField(max_length=16)
status = models.BooleanField(default=True)
class Polygon(models.Model): class Polygon(models.Model):
...@@ -53,6 +54,7 @@ class Process(models.Model): ...@@ -53,6 +54,7 @@ class Process(models.Model):
name = models.CharField(max_length=50) name = models.CharField(max_length=50)
platform = models.ForeignKey(Platform, on_delete=models.CASCADE, default='') platform = models.ForeignKey(Platform, on_delete=models.CASCADE, default='')
productLevel = models.CharField(max_length=8, default='') productLevel = models.CharField(max_length=8, default='')
status = models.BooleanField(default=True)
class Search(models.Model): class Search(models.Model):
......
catalog/static/catalog/css/map.css
View file @ 8ec19c3c
...@@ -33,3 +33,7 @@ html, body ...@@ -33,3 +33,7 @@ html, body
text-decoration: none; text-decoration: none;
color: black; color: black;
} }
#cloudPercentageSelector {
background: transparent;
}
catalog/templates/base_top.html
View file @ 8ec19c3c
...@@ -24,6 +24,9 @@ ...@@ -24,6 +24,9 @@
<!-- jsPDF --> <!-- jsPDF -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js'></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
{% block headMedia %}{% endblock %} {% block headMedia %}{% endblock %}
</head> </head>
<body class="hold-transition skin-yellow sidebar-mini"> <body class="hold-transition skin-yellow sidebar-mini">
...@@ -33,7 +36,8 @@ ...@@ -33,7 +36,8 @@
<div class="wrmapper"> <div class="wrmapper">
<header class="main-header"> <header class="main-header">
<!-- Logo --> <!-- Logo -->
<a {% if request.user.is_authenticated %}href="{{ BASE_URL }}/catalog" {% else %} href="../../../" {% endif %}class="logo"> <a {% if request.user.is_authenticated %}href="{{ BASE_URL }}/catalog" {% else %}
href="../../../" {% endif %}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 -->
...@@ -123,8 +127,10 @@ ...@@ -123,8 +127,10 @@
<aside class="control-sidebar control-sidebar-dark"> <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" class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-globe"></i></a></li> <li id="globe" class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i
<li id="cart"><a href="#control-sidebar-settings-tab" onclick="updateCart()" data-toggle="tab"><i class="fa fa-shopping-cart"></i></a> class="fa fa-globe"></i></a></li>
<li id="cart"><a href="#control-sidebar-settings-tab" onclick="updateCart()" data-toggle="tab"><i
class="fa fa-shopping-cart"></i></a>
</li> </li>
</ul> </ul>
<!-- Tab panes --> <!-- Tab panes -->
...@@ -197,9 +203,10 @@ ...@@ -197,9 +203,10 @@
{% 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 modals %}{% endblock %}
<!-- MODAL 1 --> <!-- MODAL 1 -->
<!-- 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 -->
...@@ -209,7 +216,19 @@ ...@@ -209,7 +216,19 @@
<!-- Chartsjs --> <!-- Chartsjs -->
<script src="{% static 'catalog/js/Chart.min.js' %}" type="text/javascript"></script> <script src="{% static 'catalog/js/Chart.min.js' %}" type="text/javascript"></script>
{% block footer %}{% endblock %}
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}
<div id="ol"></div>
{% if messages %}
<div class="container col-md-2 col-lg-2 col-xs-2 col-sm-2" style="bottom: 0; right: 0;position: absolute">
{% for message in messages %}
<div {% if message.tags %} class="fade in alert alert-dismissible alert-{{ message.tags }}"{% endif %}>
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong>{{ message.tags }}!</strong> {{ message }}.
</div>
{% endfor %}
</div>
{% endif %}
</body> </body>
</html> </html>
catalog/templates/user_button.html
View file @ 8ec19c3c
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<ul class="sidebar-menu" data-widget="tree"> <ul class="sidebar-menu" data-widget="tree">
<!-- History element --> <!-- History element -->
<li> <li>
<a class="treeview " href="../../../users"> <a class="treeview " href="{% url 'users' %}">
<i class="fa fa-user-circle"></i> <i class="fa fa-user-circle"></i>
<span>Profile</span> <span>Profile</span>
<span class="pull-right-container"> <span class="pull-right-container">
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<!-- End History element --> <!-- End History element -->
<!-- History element --> <!-- History element -->
<li> <li>
<a class="treeview " href="{{ BASE_URL }}/reports"> <a class="treeview " href="{% url 'reports' %}">
<i class="fa fa-history"></i> <i class="fa fa-history"></i>
<span>Shopping History</span> <span>Shopping History</span>
<span class="pull-right-container"> <span class="pull-right-container">
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</a> </a>
</li> </li>
<li> <li>
<a class="treeview " href="{{ BASE_URL }}/catalog/cart"> <a class="treeview " href="{% url 'show-cart' %}">
<i class="fa fa-shopping-cart"></i> <i class="fa fa-shopping-cart"></i>
<span>View shopping cart</span> <span>View shopping cart</span>
<span class="pull-right-container"> <span class="pull-right-container">
......
catalog/views.py
View file @ 8ec19c3c
...@@ -616,7 +616,6 @@ def Pay(request): ...@@ -616,7 +616,6 @@ def Pay(request):
@csrf_exempt @csrf_exempt
def IPN(request): def IPN(request):
PATH_USERS = config['PATHS']['PATH_USERS'] PATH_USERS = config['PATHS']['PATH_USERS']
print()
f = open(PATH_USERS+"myfile.txt", "w") f = open(PATH_USERS+"myfile.txt", "w")
x = request.POST.dict() x = request.POST.dict()
f.write('variables') f.write('variables')
......
reports/static/reports/css/ol-ext.css 0 → 100644
View file @ 8ec19c3c
.ol-control i {
cursor: default;
}
/* Bar style */
.ol-control.ol-bar {
left: 50%;
min-height: 1em;
min-width: 1em;
position: absolute;
top: 0.5em;
transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
white-space: nowrap;
}
/* Hide subbar when not inserted in a parent bar */
.ol-control.ol-toggle .ol-option-bar {
display: none;
}
/* Default position for controls */
.ol-control.ol-bar .ol-bar {
position: static;
}
.ol-control.ol-bar .ol-control {
position: relative;
top: auto;
left:auto;
right:auto;
bottom: auto;
display: inline-block;
vertical-align: middle;
background: none;
padding: 0;
margin: 0;
transform: none;
-webkit-transform: none;
}
.ol-control.ol-bar .ol-bar {
position: static;
}
.ol-control.ol-bar .ol-control button {
margin:2px 1px;
}
/* Positionning */
.ol-control.ol-bar.ol-left {
left: 0.5em;
top: 50%;
-webkit-transform: translate(0px, -50%);
transform: translate(0px, -50%);
}
.ol-control.ol-bar.ol-left .ol-control {
display: block;
}
.ol-control.ol-bar.ol-right {
left: auto;
right: 0.5em;
top: 50%;
-webkit-transform: translate(0px, -50%);
transform: translate(0px, -50%);
}
.ol-control.ol-bar.ol-right .ol-control {
display: block;
}
.ol-control.ol-bar.ol-bottom {
top: auto;
bottom: 0.5em;
}
.ol-control.ol-bar.ol-top.ol-left,
.ol-control.ol-bar.ol-top.ol-right {
top: 4.5em;
-webkit-transform:none;
transform:none;
}
.ol-touch .ol-control.ol-bar.ol-top.ol-left,
.ol-touch .ol-control.ol-bar.ol-top.ol-right {
top: 5.5em;
}
.ol-control.ol-bar.ol-bottom.ol-left,
.ol-control.ol-bar.ol-bottom.ol-right {
top: auto;
bottom: 0.5em;
-webkit-transform:none;
transform:none;
}
/* Group buttons */
.ol-control.ol-bar.ol-group {
margin: 1px 1px 1px 0;
}
.ol-control.ol-bar.ol-right .ol-group,
.ol-control.ol-bar.ol-left .ol-group {
margin: 1px 1px 0 1px;
}
.ol-control.ol-bar.ol-group button {
border-radius:0;
margin: 0 0 0 1px;
}
.ol-control.ol-bar.ol-right.ol-group button,
.ol-control.ol-bar.ol-left.ol-group button,
.ol-control.ol-bar.ol-right .ol-group button,
.ol-control.ol-bar.ol-left .ol-group button {
margin: 0 0 1px 0;
}
.ol-control.ol-bar.ol-group .ol-control:first-child > button {
border-radius: 5px 0 0 5px;
}
.ol-control.ol-bar.ol-group .ol-control:last-child > button {
border-radius: 0 5px 5px 0;
}
.ol-control.ol-bar.ol-left.ol-group .ol-control:first-child > button,
.ol-control.ol-bar.ol-right.ol-group .ol-control:first-child > button,
.ol-control.ol-bar.ol-left .ol-group .ol-control:first-child > button,
.ol-control.ol-bar.ol-right .ol-group .ol-control:first-child > button {
border-radius: 5px 5px 0 0;
}
.ol-control.ol-bar.ol-left.ol-group .ol-control:last-child > button,
.ol-control.ol-bar.ol-right.ol-group .ol-control:last-child > button,
.ol-control.ol-bar.ol-left .ol-group .ol-control:last-child > button,
.ol-control.ol-bar.ol-right .ol-group .ol-control:last-child > button {
border-radius: 0 0 5px 5px;
}
/* */
.ol-control.ol-bar .ol-rotate {
opacity:1;
visibility: visible;
}
.ol-control.ol-bar .ol-rotate button {
display: block
}
/* Active buttons */
.ol-control.ol-bar .ol-toggle.ol-active > button {
background: rgba(60, 136, 0, 0.7)
}
.ol-control.ol-bar .ol-toggle.ol-active button:hover {
background: rgba(60, 136, 0, 0.7)
}
.ol-control.ol-toggle button:disabled {
background: rgba(0,60,136,.3);
}
/* Subbar toolbar */
.ol-control.ol-bar .ol-control.ol-option-bar {
display: none;
position:absolute;
top:100%;
left:0;
margin: 5px 0;
border-radius: 0;
background: rgba(255,255,255, 0.8);
/* border: 1px solid rgba(0, 60, 136, 0.5); */
-webkit-box-shadow: 0 0 0 1px rgba(0, 60, 136, 0.5), 1px 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0 1px rgba(0, 60, 136, 0.5), 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.ol-control.ol-bar .ol-option-bar:before {
content: "";
border: 0.5em solid transparent;
border-color: transparent transparent rgba(0, 60, 136, 0.5);
position: absolute;
bottom: 100%;
left: 0.3em;
}
.ol-control.ol-bar .ol-option-bar .ol-control {
display: table-cell;
}
.ol-control.ol-bar .ol-control .ol-bar
{ display: none;
}
.ol-control.ol-bar .ol-control.ol-active > .ol-option-bar {
display: block;
}
.ol-control.ol-bar .ol-control.ol-collapsed ul {
display: none;
}
.ol-control.ol-bar .ol-control.ol-text-button > div:hover,
.ol-control.ol-bar .ol-control.ol-text-button > div {
background: none;
color: rgba(0, 60, 136, 0.5);
width: auto;
min-width: 1.375em;
margin: 0;
}
.ol-control.ol-bar .ol-control.ol-text-button {
font-size:0.9em;
border-left: 1px solid rgba(0, 60, 136, 0.8);
border-radius: 0;
}
.ol-control.ol-bar .ol-control.ol-text-button:first-child {
border-left:0;
}
.ol-control.ol-bar .ol-control.ol-text-button > div {
padding: .11em 0.3em;
font-weight: normal;
font-size: 1.14em;
font-family: Arial,Helvetica,sans-serif;
}
.ol-control.ol-bar .ol-control.ol-text-button div:hover {
color: rgba(0, 60, 136, 1);
}
.ol-control.ol-bar.ol-bottom .ol-option-bar {
top: auto;
bottom: 100%;
}
.ol-control.ol-bar.ol-bottom .ol-option-bar:before {
border-color: rgba(0, 60, 136, 0.5) transparent transparent ;
bottom: auto;
top: 100%;
}
.ol-control.ol-bar.ol-left .ol-option-bar {
left:100%;
top: 0;
bottom: auto;
margin: 0 5px;
}
.ol-control.ol-bar.ol-left .ol-option-bar:before {
border-color: transparent rgba(0, 60, 136, 0.5) transparent transparent;
bottom: auto;
right: 100%;
left: auto;
top: 0.3em;
}
.ol-control.ol-bar.ol-right .ol-option-bar {
right:100%;
left:auto;
top: 0;
bottom: auto;
margin: 0 5px;
}
.ol-control.ol-bar.ol-right .ol-option-bar:before {
border-color: transparent transparent transparent rgba(0, 60, 136, 0.5);
bottom: auto;
left: 100%;
top: 0.3em;
}
.ol-control.ol-bar.ol-left .ol-option-bar .ol-option-bar,
.ol-control.ol-bar.ol-right .ol-option-bar .ol-option-bar {
top: 100%;
bottom: auto;
left: 0.3em;
right: auto;
margin: 5px 0;
}
.ol-control.ol-bar.ol-right .ol-option-bar .ol-option-bar {
right: 0.3em;
left: auto;
}
.ol-control.ol-bar.ol-left .ol-option-bar .ol-option-bar:before,
.ol-control.ol-bar.ol-right .ol-option-bar .ol-option-bar:before {
border-color: transparent transparent rgba(0, 60, 136, 0.5);
bottom: 100%;
top: auto;
left: 0.3em;
right: auto;
}
.ol-control.ol-bar.ol-right .ol-option-bar .ol-option-bar:before {
right: 0.3em;
left: auto;
}
.ol-editbar .ol-button button {
position: relative;
display: inline-block;
font-style: normal;
-webkit-box-sizing: border-box;
box-sizing: border-box;
vertical-align: middle;
}
.ol-editbar .ol-button button:before,
.ol-editbar .ol-button button:after {
content: "";
border-width: 0;
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: currentColor;
}
.ol-editbar .ol-button button:focus {
outline: none;
}
.ol-editbar .ol-selection > button:before {
width: .6em;
height: 1em;
background-color: transparent;
border: .5em solid currentColor;
border-width: 0 .25em .65em;
border-color: currentColor transparent;
-webkit-box-shadow:0 0.6em 0 -0.23em;
box-shadow:0 0.6em 0 -0.23em;
top: .35em;
left: .5em;
-webkit-transform: translate(-50%, -50%) rotate(-30deg);
transform: translate(-50%, -50%) rotate(-30deg);
}
.ol-editbar .ol-selection0 > button:after {
width: .28em;
height: .6em;
background-color: transparent;
border: .5em solid currentColor;
border-width: 0 .05em .7em;
border-color: currentColor transparent;
top: .5em;
left: .7em;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.ol-editbar .ol-delete button:after,
.ol-editbar .ol-delete button:before {
width: 1em;
height: .2em;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
}
.ol-editbar .ol-delete button:after {
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
.ol-editbar .ol-info button:before {
width: .25em;
height: .6em;
border-radius: .03em;
top: .47em;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.ol-editbar .ol-info button:after {
width: .25em;
height: .2em;
border-radius: .03em;
-webkit-box-shadow: -0.1em 0.35em, -0.1em 0.82em, 0.1em 0.82em;
box-shadow: -0.1em 0.35em, -0.1em 0.82em, 0.1em 0.82em;
top: .12em;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.ol-editbar .ol-drawpoint button:before {
width: .7em;
height: .7em;
border-radius: 50%;
border: .15em solid currentColor;
background-color: transparent;
top: .2em;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.ol-editbar .ol-drawpoint button:after {
width: .4em;
height: .4em;
border: .15em solid currentColor;
border-color: currentColor transparent;
border-width: .4em .2em 0;
background-color: transparent;
top: .8em;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.ol-editbar .ol-drawline > button:before,
.ol-editbar .ol-drawpolygon > button:before,
.ol-editbar .ol-drawhole > button:before {
width: .8em;
height: .8em;
border: .13em solid currentColor;
background-color: transparent;
border-width: .2em .13em .09em;
top: .2em;
left: .25em;
-webkit-transform: rotate(10deg) perspective(1em) rotateX(40deg);
transform: rotate(10deg) perspective(1em) rotateX(40deg);
}
.ol-editbar .ol-drawline > button:before {
border-bottom: 0;
}
.ol-editbar .ol-drawline > button:after,
.ol-editbar .ol-drawhole > button:after,
.ol-editbar .ol-drawpolygon > button:after {
width: .3em;
height: .3em;
top: 0.2em;
left: .25em;
-webkit-box-shadow: -0.2em 0.55em, 0.6em 0.1em, 0.65em 0.7em;
box-shadow: -0.2em 0.55em, 0.6em 0.1em, 0.65em 0.7em;
}
.ol-editbar .ol-drawhole > button:after {
-webkit-box-shadow: -0.2em 0.55em, 0.6em 0.1em, 0.65em 0.7em, 0.25em 0.35em;
box-shadow: -0.2em 0.55em, 0.6em 0.1em, 0.65em 0.7em, 0.25em 0.35em;
}
.ol-editbar .ol-offset > button i,
.ol-editbar .ol-transform > button i {
position: absolute;
width: .9em;
height: .9em;
overflow: hidden;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ol-editbar .ol-offset > button i{
width: .8em;
height: .8em;
}
.ol-editbar .ol-offset > button i:before,
.ol-editbar .ol-transform > button i:before,
.ol-editbar .ol-transform > button i:after {
content: "";
height: 1em;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
-webkit-box-shadow: 0.5em 0 0 0.1em, -0.5em 0 0 0.1em;
box-shadow: 0.5em 0 0 0.1em, -0.5em 0 0 0.1em;
width: .1em;
position: absolute;
background-color: currentColor;
}
.ol-editbar .ol-offset > button i:before{
-webkit-box-shadow: 0.45em 0 0 0.1em, -0.45em 0 0 0.1em;
box-shadow: 0.45em 0 0 0.1em, -0.45em 0 0 0.1em;
}
.ol-editbar .ol-transform > button i:after {
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
.ol-editbar .ol-split > button:before {
width: .3em;
height: .3em;
top: .81em;
left: .75em;
border-radius: 50%;
-webkit-box-shadow: 0.1em -0.4em, -0.15em -0.25em;
box-shadow: 0.1em -0.4em, -0.15em -0.25em;
}
.ol-editbar .ol-split > button:after {
width: .8em;
height: .8em;
top: .15em;
left: -.1em;
border: .1em solid currentColor;
border-width: 0 .2em .2em 0;
background-color: transparent;
border-radius: .1em;
-webkit-transform: rotate(20deg) scaleY(.6) rotate(-45deg);
transform: rotate(20deg) scaleY(.6) rotate(-45deg);
}
.ol-editbar .ol-drawregular > button:before {
width: .9em;
height: .9em;
top: 50%;
left: 50%;
border: .1em solid currentColor;
background-color: transparent;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ol-editbar .ol-drawregular .ol-bar .ol-text-button > div > div > div {
border: .5em solid currentColor;
border-color: transparent currentColor;
display: inline-block;
cursor: pointer;
vertical-align: text-bottom;
}
.ol-editbar .ol-drawregular .ol-bar:before,
.ol-control.ol-bar.ol-editbar .ol-drawregular .ol-bar {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.ol-editbar .ol-drawregular .ol-bar .ol-text-button {
min-width: 6em;
text-align: center;
}
.ol-editbar .ol-drawregular .ol-bar .ol-text-button > div > div > div:first-child {
border-width: .5em .5em .5em 0;
margin: 0 .5em 0 0;
}
.ol-editbar .ol-drawregular .ol-bar .ol-text-button > div > div > div:last-child {
border-width: .5em 0 .5em .5em;
margin: 0 0 0 .5em;
}
.ol-gauge
{ top: 0.5em;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.ol-gauge > *
{ display: inline-block;
vertical-align: middle;
}
.ol-gauge > span
{
margin: 0 0.5em;
}
.ol-gauge > div
{ width: 200px;
border: 1px solid rgba(0,60,136,.5);
border-radius: 3px;
padding:1px;
}
.ol-gauge button
{ height: 0.8em;
margin:0;
max-width:100%;
}
.ol-control.ol-bookmark
{ top: 0.5em;
left: 3em;
}
.ol-control.ol-bookmark button
{ position: relative;
}
.ol-control.ol-bookmark > button::before
{ content: "";
position: absolute;
border-width: 10px 5px 4px;
border-style: solid;
border-color: #fff;
border-bottom-color: transparent;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 0;
}
.ol-control.ol-bookmark > div
{ display: none;
min-width: 5em;
}
.ol-control.ol-bookmark input
{ font-size: 0.9em;
margin: 0.1em 0 ;
padding: 0 0.5em;
}
.ol-control.ol-bookmark ul
{ margin:0;
padding: 0;
list-style: none;
min-width: 10em;
}
.ol-control.ol-bookmark li
{ color: rgba(0,60,136,0.8);
font-size: 0.9em;
padding: 0 0.2em 0 0.5em;
cursor: default;
clear:both;
}
.ol-control.ol-bookmark li:hover
{ background-color: rgba(0,60,136,.5);
color: #fff;
}
.ol-control.ol-bookmark > div button
{ width: 1em;
height: 0.8em;
float: right;
background-color: transparent;
cursor: pointer;
border-radius: 0;
}
.ol-control.ol-bookmark > div button:before
{ content: "\2A2F";
color: #936;
font-size: 1.2em;
line-height: 1em;
border-radius: 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ol-bookmark ul li button,
.ol-bookmark input
{ display: none;
}
.ol-bookmark.ol-editable ul li button,
.ol-bookmark.ol-editable input
{ display: block;
}
.ol-control.ol-bar.ol-geobar .ol-control {
display: inline-block;
vertical-align: middle;
}
.ol-control.ol-bar.ol-geobar .ol-bar {
display: none;
}
.ol-bar.ol-geobar.ol-active .ol-bar {
display: inline-block;
}
.ol-bar.ol-geobar .geolocBt button:before,
.ol-bar.ol-geobar .geolocBt button:after {
content: "";
display: block;
position: absolute;
border: 1px solid transparent;
border-width: 0.3em 0.8em 0 0.2em;
border-color: #fff transparent transparent;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
top: .45em;
left: 0.15em;
font-size: 1.2em;
}
.ol-bar.ol-geobar .geolocBt button:after {
border-width: 0 0.8em .3em 0.2em;
border-color: transparent transparent #fff;
-webkit-transform: rotate(-61deg);
transform: rotate(-61deg);
}
.ol-bar.ol-geobar .startBt button:before {
content: "";
display: block;
position: absolute;
width: 1em;
height: 1em;
background-color: #800;
border-radius: 50%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.ol-bar.ol-geobar .pauseBt button:before,
.ol-bar.ol-geobar .pauseBt button:after {
content: "";
display: block;
position: absolute;
width: .25em;
height: 1em;
background-color: #fff;
top: 50%;
left: 35%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.ol-bar.ol-geobar .pauseBt button:after {
left: 65%;
}
.ol-control.ol-bar.ol-geobar .centerBt,
.ol-control.ol-bar.ol-geobar .pauseBt,
.ol-bar.ol-geobar.pauseTrack .startBt,
.ol-bar.ol-geobar.centerTrack .startBt,
.ol-bar.ol-geobar.centerTrack.pauseTrack .pauseBt,
.ol-bar.ol-geobar.centerTrack .pauseBt {
display: none;
}
.ol-bar.ol-geobar.pauseTrack .pauseBt,
.ol-bar.ol-geobar.centerTrack .centerBt{
display: inline-block;
}
.ol-control.ol-globe
{ position: absolute;
left: 0.5em;
bottom: 0.5em;
border-radius: 50%;
opacity: 0.7;
transform: scale(0.5);
transform-origin: 0 100%;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 100%;
}
.ol-control.ol-globe:hover
{ opacity: 0.9;
}
.ol-control.ol-globe .panel
{ display:block;
width:170px;
height:170px;
background-color:#fff;
cursor: pointer;
border-radius: 50%;
overflow: hidden;
-webkit-box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5);
box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.5);
}
.ol-control.ol-globe .panel .ol-viewport
{ border-radius: 50%;
}
.ol-control.ol-globe .ol-pointer
{ display: block;
background-color: #fff;
width:10px;
height: 10px;
border:10px solid red;
position: absolute;
top: 50%;
left:50%;
transform: translate(-15px, -40px);
-webkit-transform: translate(-15px, -40px);
border-radius: 50%;
z-index:1;
transition: opacity 0.15s, top 0s, left 0s;
-webkit-transition: opacity 0.15s, top 0s, left 0s;
}
.ol-control.ol-globe .ol-pointer.hidden
{ opacity:0;
transition: opacity 0.15s, top 3s, left 5s;
-webkit-transition: opacity 0.15s, top 3s, left 5s;
}
.ol-control.ol-globe .ol-pointer::before
{ border-radius: 50%;
-webkit-box-shadow: 6px 6px 10px 5px #000;
box-shadow: 6px 6px 10px 5px #000;
content: "";
display: block;
height: 0;
left: 0;
position: absolute;
top: 23px;
width: 0;
}
.ol-control.ol-globe .ol-pointer::after
{ content:"";
width:0;
height:0;
display: block;
position: absolute;
border-width: 20px 10px 0;
border-color: red transparent;
border-style: solid;
left: -50%;
top: 100%;
}
.ol-control.ol-globe .panel::before {
border-radius: 50%;
-webkit-box-shadow: -20px -20px 80px 2px rgba(0, 0, 0, 0.7) inset;
box-shadow: -20px -20px 80px 2px rgba(0, 0, 0, 0.7) inset;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.ol-control.ol-globe .panel::after {
border-radius: 50%;
-webkit-box-shadow: 0 0 20px 7px rgba(255, 255, 255, 1);
box-shadow: 0 0 20px 7px rgba(255, 255, 255, 1);
content: "";
display: block;
height: 0;
left: 23%;
position: absolute;
top: 20%;
-webkit-transform: rotate(-40deg);
transform: rotate(-40deg);
width: 20%;
z-index: 1;
}
.ol-control.ol-globe.ol-collapsed .panel
{ display:none;
}
.ol-control-top.ol-globe
{ bottom: auto;
top: 5em;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
.ol-control-right.ol-globe
{ left: auto;
right: 0.5em;
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
}
.ol-control-right.ol-control-top.ol-globe
{ left: auto;
right: 0.5em;
transform-origin: 100% 0;
-webkit-transform-origin: 100% 0;
}
.ol-gridreference
{ background: #fff;
border: 1px solid #000;
overflow: auto;
max-height: 100%;
top:0;
right:0;
}
.ol-gridreference input
{ width:100%;
}
.ol-gridreference ul
{ margin:0;
padding:0;
list-style: none;
}
.ol-gridreference li
{ padding: 0 0.5em;
cursor: pointer;
}
.ol-gridreference ul li:hover
{ background-color: #ccc;
}
.ol-gridreference li.ol-title,
.ol-gridreference li.ol-title:hover
{ background:rgba(0,60,136,.5);
color:#fff;
cursor:default;
}
.ol-gridreference ul li .ol-ref
{ margin-left: 0.5em;
}
.ol-gridreference ul li .ol-ref:before
{ content:"(";
}
.ol-gridreference ul li .ol-ref:after
{ content:")";
}
.ol-control.ol-imageline {
bottom:0;
left: 0;
right: 0;
padding: 0;
overflow: visible;
-webkit-transition: .3s;
transition: .3s;
}
.ol-control.ol-imageline.ol-collapsed {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.ol-imageline > div {
height: 4em;
position: relative;
white-space: nowrap;
scroll-behavior: smooth;
overflow: hidden;
width: 100%;
}
.ol-imageline.ol-touch > div {
overflow-x: auto;
}
.ol-imageline > div.ol-move {
scroll-behavior: unset;
}
.ol-control.ol-imageline button {
position: absolute;
top: -1em;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
margin: .65em;
-webkit-box-shadow: 0 0 0 0.15em rgba(255,255,255,.4);
box-shadow: 0 0 0 0.15em rgba(255,255,255,.4);
}
.ol-control.ol-imageline button:before {
content: '';
position: absolute;
-webkit-transform: translate(-50%, -50%) rotate(135deg);
transform: translate(-50%, -50%) rotate(135deg);
top: 40%;
left: 50%;
width: .4em;
height: .4em;
border: .1em solid currentColor;
border-width: .15em .15em 0 0;
}
.ol-control.ol-imageline.ol-collapsed button:before {
top: 60%;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
}
.ol-imageline,
.ol-imageline:hover {
background-color: rgba(0,0,0,.75);
}
.ol-imageline.ol-arrow:after,
.ol-imageline.ol-arrow:before {
content: "";
position: absolute;
top: 50%;
left: .2em;
border-color: #fff #000;
border-width: 1em .6em 1em 0;
border-style: solid;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 1;
opacity: .8;
pointer-events: none;
-webkit-box-shadow: -0.6em 0 0 1em #fff;
box-shadow: -0.6em 0 0 1em #fff;
}
.ol-imageline.ol-arrow:after {
border-width: 1em 0 1em .6em;
left: auto;
right: .2em;
-webkit-box-shadow: 0.6em 0 0 1em #fff;
box-shadow: 0.6em 0 0 1em #fff;
}
.ol-imageline .ol-image {
position: relative;
height: 100%;
display: inline-block;
cursor: pointer;
}
.ol-imageline img {
max-height: 100%;
border: .25em solid transparent;
-webkit-box-sizing: border-box;
box-sizing: border-box;
opacity: 0;
-webkit-transition: 1s;
transition: 1s;
}
.ol-imageline img.ol-loaded {
opacity:1;
}
.ol-imageline .ol-image.select {
background-color: #fff;
}
.ol-imageline .ol-image span {
position: absolute;
width: 125%;
max-height: 2.4em;
left: 50%;
bottom: 0;
display: none;
color: #fff;
background-color: rgba(0,0,0,.5);
font-size: .8em;
overflow: hidden;
white-space: normal;
text-align: center;
line-height: 1.2em;
-webkit-transform: translateX(-50%) scaleX(.8);
transform: translateX(-50%) scaleX(.8);
}
/*
.ol-imageline .ol-image.select span,
*/
.ol-imageline .ol-image:hover span {
display: block;
}
.ol-control.ol-routing.ol-isochrone .ol-method-time,
.ol-control.ol-routing.ol-isochrone .ol-method-distance,
.ol-control.ol-routing.ol-isochrone > button {
position: relative;
}
.ol-control.ol-routing.ol-isochrone .ol-method-time:before,
.ol-control.ol-routing.ol-isochrone > button:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: .1em solid currentColor;
width: .8em;
height: .8em;
border-radius: 50%;
-webkit-box-shadow: 0 -0.5em 0 -0.35em, 0.4em -0.35em 0 -0.35em;
box-shadow: 0 -0.5em 0 -0.35em, 0.4em -0.35em 0 -0.35em;
clip: unset;
}
.ol-control.ol-routing.ol-isochrone .ol-method-time:after,
.ol-control.ol-routing.ol-isochrone > button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-60deg);
transform: translate(-50%, -50%) rotate(-60deg);
border-radius: 50%;
border: .3em solid transparent;
border-right-color: currentColor;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
clip: unset;
}
.ol-control.ol-routing.ol-isochrone .ol-method-distance:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-30deg);
transform: translate(-50%, -50%) rotate(-30deg);
width: 1em;
height: .5em;
border: .1em solid currentColor;
-webkit-box-sizing: border-box;
box-sizing: border-box
}
.ol-control.ol-routing.ol-isochrone .ol-method-distance:after {
content: '';
position: absolute;
width: .1em;
height: .15em;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-30deg);
transform: translate(-50%, -50%) rotate(-30deg);
-webkit-box-shadow: inset 0 -0.15em, 0 0.1em, 0.25em 0.1em, -0.25em 0.1em;
box-shadow: inset 0 -0.15em, 0 0.1em, 0.25em 0.1em, -0.25em 0.1em;
}
.ol-control.ol-routing.ol-isochrone .ol-direction-direct:before,
.ol-control.ol-routing.ol-isochrone .ol-direction-reverse:before {
content: '';
position: absolute;
top: 50%;
left: 30%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: .3em;
height: .3em;
border-radius: 50%;
border: .1em solid currentColor;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: 0.25em 0 0 -0.05em;
box-shadow: 0.25em 0 0 -0.05em;
}
.ol-control.ol-routing.ol-isochrone .ol-direction-direct:after,
.ol-control.ol-routing.ol-isochrone .ol-direction-reverse:after {
content: '';
position: absolute;
top: 50%;
left: 70%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: .4em solid transparent;
border-width: .4em 0 .4em .4em;
border-color: transparent currentColor;
}
.ol-control.ol-routing.ol-isochrone .ol-direction-reverse:after {
border-width: .4em .4em .4em 0;
}
.ol-control.ol-isochrone.ol-collapsed .content {
display: none;
}
.ol-control.ol-isochrone input[type="number"] {
width: 3em;
text-align: right;
margin: 0 .1em;
}
.ol-control.ol-isochrone .ol-distance input[type="number"] {
width: 5em;
}
.ol-isochrone .ol-time,
.ol-isochrone .ol-distance {
display: none;
}
.ol-isochrone .ol-time.selected,
.ol-isochrone .ol-distance.selected {
display: block;
}
.ol-control.ol-layerswitcher-popup
{ position: absolute;
right: 0.5em;
text-align: left;
top: 3em;
}
.ol-control.ol-layerswitcher-popup .panel
{ clear:both;
background:#fff;
}
.ol-layerswitcher-popup .panel
{ list-style: none;
padding: 0.25em;
margin:0;
overflow: hidden;
}
.ol-layerswitcher-popup .panel ul
{ list-style: none;
padding: 0 0 0 20px;
overflow: hidden;
}
.ol-layerswitcher-popup.ol-collapsed .panel
{ display:none;
}
.ol-layerswitcher-popup.ol-forceopen .panel
{ display:block;
}
.ol-layerswitcher-popup button
{ background-color: white;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==");
background-position: center;
background-repeat: no-repeat;
float: right;
height: 38px;
width: 38px;
}
.ol-layerswitcher-popup li
{ color:#369;
padding:0.25em 1em;
font-family:"Trebuchet MS",Helvetica,sans-serif;
cursor:pointer;
}
.ol-layerswitcher-popup li.ol-header
{ display: none;
}
.ol-layerswitcher-popup li.select
{ background:rgba(0, 60, 136, 0.7);
color:#fff;
}
.ol-layerswitcher-popup li:hover
{ background:rgba(0, 60, 136, 0.9);
color:#fff;
}
.ol-control.ol-layerswitcher
{ position: absolute;
right: 0.5em;
text-align: left;
top: 3em;
max-height: calc(100% - 6em);
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
.ol-control.ol-layerswitcher .ol-switchertopdiv,
.ol-control.ol-layerswitcher .ol-switcherbottomdiv
{ display: block
}
.ol-control.ol-layerswitcher.ol-collapsed .ol-switchertopdiv,
.ol-control.ol-layerswitcher.ol-collapsed .ol-switcherbottomdiv
{ display: none;
}
.ol-layerswitcher.ol-forceopen.ol-collapsed .ol-switchertopdiv,
.ol-layerswitcher.ol-forceopen.ol-collapsed .ol-switcherbottomdiv
{ display: block;
}
.ol-control.ol-layerswitcher .ol-switchertopdiv,
.ol-control.ol-layerswitcher .ol-switcherbottomdiv
{ position: absolute;
top:0;
left:0;
right:0;
height: 45px;
background: #fff;
z-index:2;
opacity:1;
cursor: pointer;
border-top:2px solid transparent;
border-bottom:2px solid #369;
margin:0 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.ol-control.ol-layerswitcher .ol-switcherbottomdiv
{ top: auto;
bottom: 0;
height: 2em;
border-top:2px solid #369;
border-bottom:2px solid transparent;
}
.ol-control.ol-layerswitcher .ol-switchertopdiv:before,
.ol-control.ol-layerswitcher .ol-switcherbottomdiv:before
{ content:"";
position: absolute;
left:50%;
top:50%;
border:10px solid transparent;
width:0;
height:0;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
opacity:0.8;
}
.ol-control.ol-layerswitcher .ol-switchertopdiv:hover:before,
.ol-control.ol-layerswitcher .ol-switcherbottomdiv:hover:before
{ opacity:1;
}
.ol-control.ol-layerswitcher .ol-switchertopdiv:before
{ border-bottom-color: #369;
border-top: 0;
}
.ol-control.ol-layerswitcher .ol-switcherbottomdiv:before
{ border-top-color: #369;
border-bottom: 0;
}
.ol-control.ol-layerswitcher .panel
{ background-color: #fff;
border-radius: 0 0 2px 2px;
clear: both;
display: block; /* display:block to show panel on over */
}
.ol-layerswitcher .panel
{ list-style: none;
padding: 0.5em 0.5em 0;
margin:0;
overflow: hidden;
font-family: Tahoma,Geneva,sans-serif;
font-size:0.9em;
-webkit-transition: top 0.3s;
transition: top 0.3s;
position: relative;
top:0;
}
.ol-layerswitcher .panel ul
{ list-style: none;
padding: 0 0 0 20px;
overflow: hidden;
clear: both;
}
/** Customize checkbox
*/
.ol-layerswitcher input[type="radio"],
.ol-layerswitcher input[type="checkbox"]
{ display:none;
}
.ol-layerswitcher .panel li
{ -weblit-transition: -webkit-transform 0.2s linear;
-webkit-transition: -webkit-transform 0.2s linear;
transition: -webkit-transform 0.2s linear;
transition: transform 0.2s linear;
transition: transform 0.2s linear, -webkit-transform 0.2s linear;
clear: both;
display: block;
border:1px solid transparent;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* drag and drop */
.ol-layerswitcher .panel li.drag
{ opacity: 0.5;
transform:scale(0.8);
-webkit-transform:scale(0.8);
}
.ol-dragover
{ background:rgba(51,102,153,0.5);
opacity:0.8;
}
.ol-layerswitcher .panel li.forbidden,
.forbidden .ol-layerswitcher-buttons div,
.forbidden .layerswitcher-opacity div
{ background:rgba(255,0,0,0.5);
color:#f00!important;
}
/* cursor management */
.ol-layerswitcher.drag,
.ol-layerswitcher.drag *
{ cursor:not-allowed!important;
cursor:no-drop!important;
}
.ol-layerswitcher.drag .panel li.dropover,
.ol-layerswitcher.drag .panel li.dropover *
{ cursor: pointer!important;
cursor: n-resize!important;
cursor: ns-resize!important;
cursor: -webkit-grab!important;
cursor: grab!important;
cursor: -webkit-grabbing!important;
cursor: grabbing!important;
}
.ol-layerswitcher .panel li.dropover
{ background: rgba(51, 102, 153, 0.5);
}
.ol-layerswitcher .panel li label
{ display: inline-block;
height: 1.4em;
max-width: 12em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 0.2em 0 1.7em;
position: relative;
}
.ol-layerswitcher [type="radio"] + label:before,
.ol-layerswitcher [type="checkbox"] + label:before,
.ol-layerswitcher [type="radio"]:checked + label:after,
.ol-layerswitcher [type="checkbox"]:checked + label:after
{ content: '';
position: absolute;
left: 0.1em; top: 0.1em;
width: 1.2em; height: 1.2em;
border: 2px solid #369;
background: #fff;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.ol-layerswitcher [type="radio"] + label:before,
.ol-layerswitcher [type="radio"] + label:after
{ border-radius: 50%;
}
.ol-layerswitcher [type="radio"]:checked + label:after
{ background: #369 none repeat scroll 0 0;
margin: 0.3em;
width: 0.6em;
height: 0.6em;
}
.ol-layerswitcher [type="checkbox"]:checked + label:after
{ background: transparent;
border-width: 0 3px 3px 0;
border-style: solid;
border-color: #369;
width: 0.7em;
height: 1em;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
left: 0.55em;
top: -0.05em;
-webkit-box-shadow: 1px 0px 1px 1px #fff;
box-shadow: 1px 0px 1px 1px #fff;
}
.ol-layerswitcher .panel li.ol-layer-hidden
{ opacity: 0.6;
}
.ol-layerswitcher.ol-collapsed .panel
{ display:none;
}
.ol-layerswitcher.ol-forceopen .panel
{ display:block;
}
.ol-layerswitcher button {
background-color: white;
float: right;
z-index: 10;
position: relative;
font-size: 1.7em;
}
.ol-touch .ol-layerswitcher button {
font-size: 2.5em;
}
.ol-layerswitcher button:before,
.ol-layerswitcher button:after {
content: "";
position:absolute;
width: .75em;
height: .75em;
border-radius: 0.15em;
-webkit-transform: scaleY(.8) rotate(45deg);
transform: scaleY(.8) rotate(45deg);
}
.ol-layerswitcher button:before {
background: #e2e4e1;
top: .32em;
left: .34em;
-webkit-box-shadow: 0.1em 0.1em #325158;
box-shadow: 0.1em 0.1em #325158;
}
.ol-layerswitcher button:after {
top: .22em;
left: .34em;
background: #83bcc5;
background-image: radial-gradient( circle at .85em .6em, #70b3be 0, #70b3be .65em, #83bcc5 .65em);
}
.ol-layerswitcher-buttons
{ display:block;
float: right;
text-align:right;
}
.ol-layerswitcher-buttons > div
{ display: inline-block;
position: relative;
cursor: pointer;
height:1em;
width:1em;
margin:2px;
line-height: 1em;
text-align: center;
background: #369;
vertical-align: middle;
color: #fff;
}
.ol-layerswitcher .panel li > div
{ display: inline-block;
position: relative;
}
/* line break */
.ol-layerswitcher .ol-separator
{ display:block;
width:0;
height:0;
padding:0;
margin:0;
}
.ol-layerswitcher .layerup
{ float: right;
height:2.5em;
background-color: #369;
opacity: 0.5;
cursor: move;
cursor: ns-resize;
}
.ol-layerswitcher .layerup:before,
.ol-layerswitcher .layerup:after
{ border-color: #fff transparent;
border-style: solid;
border-width: 0.4em 0.4em 0;
content: "";
height: 0;
position: absolute;
bottom: 3px;
left: 0.1em;
width: 0;
}
.ol-layerswitcher .layerup:after
{ border-width: 0 0.4em 0.4em;
top:3px;
bottom: auto;
}
.ol-layerswitcher .layerInfo
{ background: #369;
border-radius: 100%;
}
.ol-layerswitcher .layerInfo:before
{ color: #fff;
content: "i";
display: block;
font-size: 0.8em;
font-weight: bold;
text-align: center;
width: 1.25em;
position:absolute;
left: 0;
top: 0;
}
.ol-layerswitcher .layerTrash
{ background: #369;
}
.ol-layerswitcher .layerTrash:before
{ color: #fff;
content: "\00d7";
font-size:1em;
top: 50%;
left: 0;
right: 0;
text-align: center;
line-height: 1em;
margin: -0.5em 0;
position: absolute;
}
.ol-layerswitcher .layerExtent
{ background: #369;
}
.ol-layerswitcher .layerExtent:before
{ border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
content: "";
display: block;
position: absolute;
left: 6px;
right: 2px;
top: 6px;
bottom: 3px;
}
.ol-layerswitcher .layerExtent:after
{ border-left: 1px solid #fff;
border-top: 1px solid #fff;
content: "";
display: block;
position: absolute;
bottom: 6px;
left: 2px;
right: 6px;
top: 3px;
}
.ol-layerswitcher .expend-layers,
.ol-layerswitcher .collapse-layers
{ margin: 0 2px;
background-color: transparent;
}
.ol-layerswitcher .expend-layers:before,
.ol-layerswitcher .collapse-layers:before
{ content:"";
position:absolute;
top:50%;
left:0;
margin-top:-2px;
height:4px;
width:100%;
background:#369;
}
.ol-layerswitcher .expend-layers:after
{ content:"";
position:absolute;
left:50%;
top:0;
margin-left:-2px;
width:4px;
height:100%;
background:#369;
}
/*
.ol-layerswitcher .collapse-layers:before
{ content:"";
position:absolute;
border:0.5em solid #369;
border-color: #369 transparent transparent;
margin-top:0.25em;
}
.ol-layerswitcher .expend-layers:before
{ content:"";
position:absolute;
border:0.5em solid #369;
border-color: transparent transparent transparent #369 ;
margin-left:0.25em;
}
*/
.ol-layerswitcher .layerswitcher-opacity
{ position:relative;
border: 1px solid #369;
height: 3px;
width: 120px;
margin:5px 1em 10px 7px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
background: #69c;
background: -webkit-gradient(linear, left top, right top, from(rgba(0,60,136,0)), to(rgba(0,60,136,0.6)));
background: linear-gradient(to right, rgba(0,60,136,0), rgba(0,60,136,0.6));
cursor: pointer;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor,
.ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor:before
{ position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
background: rgba(0,60,136,0.5);
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
}
.ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor:before
{ content: "";
position: absolute;
width: 50%;
height: 50%;
}
.ol-touch .ol-layerswitcher .layerswitcher-opacity .layerswitcher-opacity-cursor
{ width: 26px;
height: 26px;
}
.ol-layerswitcher .layerswitcher-opacity-label {
display:none;
position: absolute;
right: -2.5em;
bottom: 5px;
font-size: 0.8em;
}
.ol-layerswitcher .layerswitcher-opacity-label::after {
content:"%";
}
.ol-layerswitcher .layerswitcher-progress
{ display:block;
margin:-4px 1em 2px 7px;
width: 120px;
}
.ol-layerswitcher .layerswitcher-progress div
{ background-color: #369;
height:2px;
display:block;
width:0;
}
.ol-control.ol-layerswitcher-image
{ position: absolute;
right: 0.5em;
text-align: left;
top: 1em;
transition: all 0.2s ease 0s;
-webkit-transition: all 0.2s ease 0s;
}
.ol-control.ol-layerswitcher-image.ol-collapsed
{ top:3em;
transition: none;
-webkit-transition: none;
}
.ol-layerswitcher-image .panel
{ list-style: none;
padding: 0.25em;
margin:0;
overflow: hidden;
}
.ol-layerswitcher-image .panel ul
{ list-style: none;
padding: 0 0 0 20px;
overflow: hidden;
}
.ol-layerswitcher-image.ol-collapsed .panel
{ display:none;
}
.ol-layerswitcher-image.ol-forceopen .panel
{ display:block;
clear:both;
}
.ol-layerswitcher-image button
{ background-color: white;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==");
background-position: center;
background-repeat: no-repeat;
float: right;
height: 38px;
width: 38px;
display:none;
}
.ol-layerswitcher-image.ol-collapsed button
{ display:block;
position:relative;
}
.ol-layerswitcher-image li
{ border-radius: 4px;
border: 3px solid transparent;
-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
display: inline-block;
width: 64px;
height: 64px;
margin:2px;
position: relative;
background-color: #fff;
overflow: hidden;
vertical-align: middle;
cursor:pointer;
}
.ol-layerswitcher-image li.ol-layer-hidden
{ opacity: 0.5;
border-color:#555;
}
.ol-layerswitcher-image li.ol-header
{ display: none;
}
.ol-layerswitcher-image li img
{ position:absolute;
max-width:100%;
}
.ol-layerswitcher-image li.select
{ border: 3px solid red;
}
.ol-layerswitcher-image li p
{ display:none;
}
.ol-layerswitcher-image li:hover p
{ background-color: rgba(0, 0, 0, 0.5);
color: #fff;
bottom: 0;
display: block;
left: 0;
margin: 0;
overflow: hidden;
position: absolute;
right: 0;
text-align: center;
height:1.2em;
font-family:Verdana, Geneva, sans-serif;
font-size:0.8em;
}
.ol-control.ol-legend {
bottom: .5em;
left: .5em;
z-index: 1;
max-height: 90%;
max-width: 90%;
overflow-x: hidden;
overflow-y: auto;
}
.ol-control.ol-legend button {
position: relative;
display: none;
}
.ol-control.ol-legend.ol-collapsed button {
display: block;
}
.ol-control.ol-legend.ol-uncollapsible button {
display: none;
}
.ol-control.ol-legend button.ol-closebox {
display: block;
position: absolute;
top: 0;
right: 0;
background: none;
cursor: pointer;
z-index: 1;
}
.ol-control.ol-legend.ol-uncollapsible button.ol-closebox,
.ol-control.ol-legend.ol-collapsed button.ol-closebox {
display: none;
}
.ol-control.ol-legend button.ol-closebox:before {
content: "\D7";
background: none;
color: rgba(0,60,136,.5);
font-size: 1.3em;
}
.ol-control.ol-legend button.ol-closebox:hover:before {
color: rgba(0,60,136,1);
}
.ol-control.ol-legend.ol-uncollapsible .ol-legendImg,
.ol-control.ol-legend .ol-legendImg {
position: absolute;
z-index: -1;
}
.ol-control.ol-legend.ol-collapsed .ol-legendImg {
display: none;
}
.ol-control.ol-legend.ol-uncollapsible .ol-legendImg {
display: block ;
}
.ol-control.ol-legend .ol-legendImg canvas {
height: 100%;;
}
.ol-control.ol-legend > button:first-child:before,
.ol-control.ol-legend > button:first-child:after {
content: "";
position: absolute;
top: .25em;
left: .2em;
width: .2em;
height: .2em;
background-color: currentColor;
-webkit-box-shadow: 0 0.35em, 0 0.7em;
box-shadow: 0 0.35em, 0 0.7em;
}
.ol-control.ol-legend button:first-child:after {
top: .27em;
left: .55em;
height: .15em;
width: .6em;
}
.ol-legend ul {
min-width: 1.5em;
min-height: 1.5em;
margin: 0 0 2px;
padding: 0;
list-style: none;
display: inline-block;
}
.ol-control.ol-legend.ol-collapsed ul {
display: none;
}
.ol-control.ol-legend.ol-uncollapsible ul {
display: block;
}
.ol-legend ul li.ol-title {
text-align: center;
font-weight: bold;
}
.ol-legend ul li {
overflow: hidden;
padding: 0 .5em;
}
.ol-legend ul li div {
display: inline-block;
vertical-align: middle;
}
.ol-control.ol-legend .ol-legend {
display: inline-block;
}
.ol-control.ol-legend.ol-collapsed .ol-legend {
display: none;
}
.ol-control.ol-mapzone {
position: absolute;
right: 0.5em;
text-align: left;
top: .5em;
max-height: calc(100% - 6em);
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
.ol-control.ol-mapzone.ol-collapsed {
top: 3em;
}
.ol-control.ol-mapzone button {
position: relative;
float: right;
margin-top: 2.2em;
}
.ol-touch .ol-control.ol-mapzone button {
margin-top: 1.67em;
}
.ol-control.ol-mapzone.ol-collapsed button {
margin-top: 0;
}
.ol-control.ol-mapzone button i {
border: .1em solid currentColor;
border-radius: 50%;
width: .9em;
height: .9em;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ol-control.ol-mapzone button i:before {
content: "";
background-color: currentColor;
width: 0.4em;
height: .4em;
position: absolute;
left: .5em;
top: 0.3em;
border-radius: 50%;
-webkit-box-shadow: .05em .3em 0 -.051em currentColor,
-.05em -.35em 0 -.1em currentColor,
-.5em -.35em 0 0em currentColor,
-.65em .1em 0 -.03em currentColor,
-.65em -.05em 0 -.05em currentColor;
box-shadow: .05em .3em 0 -.051em currentColor,
-.05em -.35em 0 -.1em currentColor,
-.5em -.35em 0 0em currentColor,
-.65em .1em 0 -.03em currentColor,
-.65em -.05em 0 -.05em currentColor
}
.ol-mapzone > div {
position: relative;
display: inline-block;
width: 5em;
height: 5em;
margin: 0 .2em 0 0;
}
.ol-control.ol-mapzone.ol-collapsed > div {
display: none;
}
.ol-mapzone > div p {
margin: 0;
position: absolute;
bottom: 0;
/* background: rgba(255,255,255,.5); */
color: #fff;
font-weight: bold;
text-align: center;
width: 160%;
overflow: hidden;
font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
-webkit-transform: scaleX(.625);
transform: scaleX(.625);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
cursor: default;
}
.ol-notification {
width: 150%;
bottom: 0;
border: 0;
background: none;
margin: 0;
padding: 0;
}
.ol-notification > div,
.ol-notification > div:hover {
position: absolute;
background-color: rgba(0,0,0,.8);
color: #fff;
bottom: 0;
left: 33.33%;
max-width: calc(66% - 4em);
min-width: 5em;
max-height: 5em;
min-height: 1em;
border-radius: 4px 4px 0 0;
padding: .2em .5em;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: .3s;
transition: .3s;
opacity: 1;
}
.ol-notification.ol-collapsed > div {
bottom: -5em;
opacity: 0;
}
.ol-notification a {
color: #9cf;
cursor: pointer;
}
.ol-overlay
{ position: absolute;
top: 0;
left: 0;
width:100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
padding: 1em;
color: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 1;
opacity: 0;
display: none;
cursor: default;
overflow: hidden;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.ol-overlay.slide-up
{ transform: translateY(100%);
-webkit-transform: translateY(100%);
}
.ol-overlay.slide-down
{ -webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.ol-overlay.slide-left
{ -webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.ol-overlay.slide-right
{ -webkit-transform: translateX(100%);
transform: translateX(100%);
}
.ol-overlay.zoom
{ top: 50%;
left: 50%;
opacity:0.5;
-webkit-transform: translate(-50%,-50%) scale(0);
transform: translate(-50%,-50%) scale(0);
}
.ol-overlay.zoomout
{ -webkit-transform: scale(3);
transform: scale(3);
}
.ol-overlay.zoomrotate
{ top: 50%;
left: 50%;
opacity:0.5;
-webkit-transform: translate(-50%,-50%) scale(0) rotate(360deg);
transform: translate(-50%,-50%) scale(0) rotate(360deg);
}
.ol-overlay.stretch
{ top: 50%;
left: 50%;
opacity:0.5;
-webkit-transform: translate(-50%,-50%) scaleX(0);
transform: translate(-50%,-50%) scaleX(0) ;
}
.ol-overlay.stretchy
{ top: 50%;
left: 50%;
opacity:0.5;
-webkit-transform: translate(-50%,-50%) scaleY(0);
transform: translate(-50%,-50%) scaleY(0) ;
}
.ol-overlay.wipe
{ opacity: 1;
/* clip: must be set programmatically */
/* clip-path: use % but not crossplatform (IE) */
}
.ol-overlay.flip
{ -webkit-transform: perspective(600px) rotateY(180deg);
transform: perspective(600px) rotateY(180deg);
}
.ol-overlay.card
{ opacity: 0.5;
-webkit-transform: translate(-80%, 100%) rotate(-0.5turn);
transform: translate(-80%, 100%) rotate(-0.5turn);
}
.ol-overlay.book
{ -webkit-transform: perspective(600px) rotateY(-180deg) scaleX(0.6);
transform: perspective(600px) rotateY(-180deg) scaleX(0.6) ;
-webkit-transform-origin: 10% 50%;
transform-origin: 10% 50%;
}
.ol-overlay.book.visible
{ -webkit-transform-origin: 10% 50%;
transform-origin: 10% 50%;
}
.ol-overlay.ol-visible
{ opacity:1;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform: none;
transform: none;
}
.ol-overlay .ol-closebox
{ position: absolute;
top: 1em;
right: 1em;
width: 1em;
height: 1em;
cursor: pointer;
z-index:1;
}
.ol-overlay .ol-closebox:before
{ content: "\274c";
display: block;
text-align: center;
vertical-align: middle;
}
.ol-control.ol-overview
{ position: absolute;
left: 0.5em;
text-align: left;
bottom: 0.5em;
}
.ol-control.ol-overview .panel
{ display:block;
width:150px;
height:150px;
margin:2px;
background-color:#fff;
border:1px solid #369;
cursor: pointer;
}
.ol-overview:not(.ol-collapsed) button
{ position:absolute;
bottom:2px;
left:2px;
z-index:2;
}
.ol-control.ol-overview.ol-collapsed .panel
{ display:none;
}
.ol-overview.ol-collapsed button:before
{ content:'\00bb';
}
.ol-overview button:before
{ content:'\00ab';
}
.ol-control-right.ol-overview
{ left: auto;
right: 0.5em;
}
.ol-control-right.ol-overview:not(.ol-collapsed) button
{ left:auto;
right:2px;
}
.ol-control-right.ol-overview.ol-collapsed button:before
{ content:'\00ab';
}
.ol-control-right.ol-overview button:before
{ content:'\00bb';
}
.ol-control-top.ol-overview
{ bottom: auto;
top: 5em;
}
.ol-control-top.ol-overview:not(.ol-collapsed) button
{ bottom:auto;
top:2px;
}
.ol-permalink
{ position: absolute;
top:0.5em;
right: 2.5em;
}
.ol-touch .ol-permalink
{ right: 3em;
}
.ol-permalink button
{ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AcFBjYE1ZK03gAAAUlJREFUOMuVk71KA1EQhc/NaiP+gCRpFHwGBSFlCrFVfAsbwSJCBMv06QIGJOBziI3EYAgkjU8gIloIAasIn4WzMqx34zrN7J6de+6ZmbNSgQDSfADcATPgHbgCyvonSYv8KEzWdofegH3gwmG9Ikq67sAESFzNueHThTyiEIKAmr2OJCUhhO30Aou+5aUQU2Ik65K2JC1KegohPGfUBkmvksqShnntHEcGOs60NXHfjmKz6czZTsNqbhzW+muwY2ATWAWawCOwBgxcTfvnvCPxKx4Cy5bPgBWgauRpdL2ImNlGhp3MabETm8mh94nDk4yCNE5/KTGg7xxbyhYAG0AN2AEqURIDZ0a0Fxn+LXAPXDpzRqMk6cOedz1ubdYl1b6NHgZRJe72nuu/CdSBl+yKi/zZlTnbaeXOJIesClwDU+ATeEhtX5TkCwAWUyAsHH1QAAAAAElFTkSuQmCC');
background-position: center;
background-repeat: no-repeat;
}
.ol-control.ol-profil {
position: absolute;
top: 0.5em;
right: 3em;
text-align: right;
overflow: hidden;
}
.ol-profil .ol-inner {
position: relative;
padding: 0.5em;
font-size: 0.8em;
}
.ol-control.ol-profil .ol-inner {
display: block;
background-color: rgba(255,255,255,0.7);
margin: 2.3em 2px 2px;
}
.ol-control.ol-profil.ol-collapsed .ol-inner {
display: none;
}
.ol-profil canvas {
display: block;
}
.ol-profil button {
display: block;
position: absolute;
right: 2px;
background-position: center;
background-repeat: no-repeat;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAPCAYAAAALWoRrAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AgXCR4dn7j9TAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAz0lEQVQ4y7WTMU4CURRFz0xIpLUBEhdAY2tJYW1jaWlsXYVxDWyBhWCFCYugYgnDFPMOhTMJGf3AwHiqn/uTk5v/3gfAH6b0RH7sMiIe1Ts162z+q2lVVbd1XqijLuJk0zzP1/VxCGyApLgsy+HJphGx8DeFOm6L1bn6eVQaEW+m2amTRqx+1fkqKY2Ie0+zUx/U7WGYfNMsy57PmMMN8A1MWsWeUoPyivV8PWtPOzL7D+lYHfUtBXgHGLTCJfBxodD6k9Dsm8BLE17LobQ39nJC61aLVoVsAAAAAElFTkSuQmCC');
}
.ol-profil.ol-collapsed button {
position: static;
}
.ol-profil .ol-profilbar,
.ol-profil .ol-profilcursor {
position:absolute;
pointer-events: none;
width: 1px;
display: none;
}
.ol-profil .ol-profilcursor {
width: 0;
height: 0;
}
.ol-profil .ol-profilcursor:before {
content:"";
pointer-events: none;
display: block;
margin: -2px;
width:5px;
height:5px;
}
.ol-profil .ol-profilbar,
.ol-profil .ol-profilcursor:before {
background: red;
}
.ol-profil table {
text-align: center;
width: 100%;
}
.ol-profil table span {
display: block;
}
.ol-profilpopup {
background-color: rgba(255, 255, 255, 0.5);
margin: 0.5em;
padding: 0 0.5em;
position: absolute;
top:-1em;
white-space: nowrap;
}
.ol-profilpopup.ol-left {
right:0;
}
.ol-profil table td {
padding: 0 2px;
}
.ol-profil table .track-info {
display: table-row;
}
.ol-profil table .point-info {
display: none;
}
.ol-profil .over table .track-info {
display: none;
}
.ol-profil .over table .point-info {
display: table-row;
}
.ol-profil p {
text-align: center;
margin:0;
}
.ol-control.ol-routing {
top: 0.5em;
left: 3em;
max-height: 90%;
overflow-y: auto;
}
.ol-touch .ol-control.ol-routing {
left: 3.5em;
}
.ol-control.ol-routing.ol-searching {
opacity: .5;
}
.ol-control.ol-routing .ol-car,
.ol-control.ol-routing > button {
position: relative;
}
.ol-control.ol-routing .ol-car:after,
.ol-control.ol-routing > button:after {
content: "";
position: absolute;
width: .78em;
height: 0.6em;
border-radius: 40% 50% 0 0 / 50% 70% 0 0;
-webkit-box-shadow: inset 0 0 0 0.065em, -0.35em 0.14em 0 -0.09em, inset 0 -0.37em, inset -0.14em 0.005em;
box-shadow: inset 0 0 0 0.065em, -0.35em 0.14em 0 -0.09em, inset 0 -0.37em, inset -0.14em 0.005em;
clip: rect(0 1em .5em -1em);
top: .35em;
left: .4em;
}
.ol-control.ol-routing .ol-car:before,
.ol-control.ol-routing > button:before {
content: "";
position: absolute;
width: .28em;
height: .28em;
border-radius: 50%;
-webkit-box-shadow: inset 0 0 0 1em, 0.65em 0;
box-shadow: inset 0 0 0 1em, 0.65em 0;
top: 0.73em;
left: .20em;
}
.ol-control.ol-routing .ol-pedestrian:after {
content: "";
position: absolute;
width: .3em;
height: .4em;
top: .25em;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-box-shadow: inset 0.3em 0, 0.1em 0.5em 0 -0.1em, -0.1em 0.5em 0 -0.1em, 0.25em 0.1em 0 -0.1em, -0.25em 0.1em 0 -0.1em;
box-shadow: inset 0.3em 0, 0.1em 0.5em 0 -0.1em, -0.1em 0.5em 0 -0.1em, 0.25em 0.1em 0 -0.1em, -0.25em 0.1em 0 -0.1em;
border-top: .2em solid transparent;
}
.ol-control.ol-routing .ol-pedestrian:before {
content: "";
position: absolute;
width: .3em;
height: .3em;
top: .1em;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 50%;
background-color: currentColor;
}
.ol-control.ol-routing.ol-collapsed .content {
display: none;
}
.ol-routing .ol-search.ol-collapsed ul {
display: none;
}
.ol-routing .ol-search ul .copy {
display: none;
}
.ol-routing .ol-search ul.history {
/* display: none; */
}
.ol-routing .content > div > * {
display: inline-block;
vertical-align: top;
}
.ol-routing .ol-result ul {
list-style: none;
display: block;
}
.ol-routing .ol-result li {
position: relative;
min-height: 1.65em;
}
.ol-routing .ol-result li i {
display: block;
font-size: .8em;
font-weight: bold;
}
.ol-routing .ol-result li:before {
content: "";
border: 5px solid transparent;
position: absolute;
left: -1.75em;
border-bottom-color: #369;
border-width: .6em .4em .6em;
-webkit-transform-origin: 50% 125%;
transform-origin: 50% 125%;
-webkit-box-shadow: 0 0.65em 0 -0.25em #369;
box-shadow: 0 0.65em 0 -0.25em #369;
top: -.8em;
}
.ol-routing .ol-result li:after {
content: "";
position: absolute;
width: 0.3em;
height: .6em;
left: -1.5em;
background: #369;
top: .6em;
}
.ol-routing .ol-result li.R:before {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.ol-routing .ol-result li.FR:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.ol-routing .ol-result li.L:before {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.ol-routing .ol-result li.FL:before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.ol-routing .content > i {
vertical-align: middle;
}
.ol-routing .ol-button,
.ol-routing .ol-button:focus,
.ol-routing .ol-pedestrian,
.ol-routing .ol-car {
font-size: 1.1em;
position: relative;
display: inline-block;
width: 1.4em;
height: 1.4em;
color: rgba(0,60,136,1);
background-color: transparent;
margin: 0 .1em;
opacity: .5;
vertical-align: middle;
outline: none;
cursor: pointer;
}
.ol-routing .ol-button:hover,
.ol-routing .ol-button.selected,
.ol-routing i.selected {
opacity: 1;
background: transparent;
}
.ol-viewport .ol-scale {
left: .5em;
bottom: 2.5em;
text-align: center;
-webkit-transform: scaleX(.8);
-webkit-transform-origin: 0 0;
transform: scaleX(.8);
transform-origin: 0 0;
}
.ol-viewport .ol-scale input {
background: none;
border: 0;
width: 8em;
text-align: center;
}
.ol-search{
top: 0.5em;
left: 3em;
}
.ol-touch .ol-search {
left: 3.5em;
}
.ol-search button {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAABPUlEQVQoU41SwXHCQAzUHh58eoUOIBWEDkI6oAToIKkg7iAuwakgpAIowXRACcnrzp6BzchjMx4wE/S6kW5XK60gvQghzJIkmVoqSZI9gJ9+/fINS5Cc1HX9QXIlIr/tpwcRyb33b7cIGnAIYQdg4pxbjcfj0nJ1Xc+Px+PGObdN03Q9RIAQwgpAnqbp7FKmjQGgJLlU1d2V7BjjRkQO3vvXIXarkyxVNbsCm2QR2Q0V7XOMMReRmfd+OQQubN6hYgs22ZtbnRcAtiRfLueqqmpJ8ovko6oeBq0KIWQA3gFkzrlmMafTaUEyI/mpqmbhVTRWWbRdbClPbeobQNES5KPRqOxs7DBn8K1DsAOKMZYApiTXqlrcDe4d0XN7jWeCfzt351tVle2iGalTcBd4gGDvvZ/fDe4RmCOFLe8Pr7mvEP2N9PQAAAAASUVORK5CYII=");
background-repeat: no-repeat;
background-position: center center;
background-size: 1em;
top: 2px;
left: 2px;
float: left;
}
.ol-search input {
display: inline-block;
border: 0;
margin: 1px 1px 1px 2px;
font-size: 1.14em;
padding-left: 0.3em;
height: 1.375em;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.1s;
transition: all 0.1s;
}
.ol-touch .ol-search input,
.ol-touch .ol-search ul {
font-size: 1.5em;
}
.ol-control.ol-search.ol-collapsed > * {
display: none;
}
.ol-control.ol-search.ol-collapsed > button {
display: block;
}
.ol-search ul {
list-style: none;
padding: 0;
margin: 0;
display: block;
clear: both;
cursor: pointer;
max-width: 17em;
overflow-x: hidden;
z-index: 1;
background: #fff;
}
/*
.ol-control.ol-search ul {
position: absolute;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
}
*/
.ol-search ul li {
padding: 0.1em 0.5em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ol-search ul li.select,
.ol-search ul li:hover {
background-color: rgba(0,60,136,.5);
color: #fff;
}
.ol-search ul li img {
float: left;
max-height: 2em;
}
.ol-search li.copy {
background: rgba(0,0,0,.5);
color: #fff;
}
.ol-search li.copy a {
color: #fff;
text-decoration: none;
}
.ol-search.searching:before {
content: '';
position: absolute;
height: 3px;
left: 0;
top: 1.6em;
-webkit-animation: pulse .5s infinite alternate linear;
animation: pulse .5s infinite alternate linear;
background: red;
z-index: 2;
}
@-webkit-keyframes pulse {
0% { left:0; right: 95%; }
50% { left: 30%; right: 30%; }
100% { left: 95%; right: 0; }
}
@keyframes pulse {
0% { left:0; right: 95%; }
50% { left: 30%; right: 30%; }
100% { left: 95%; right: 0; }
}
.ol-search.IGNF-parcelle input {
width: 13.5em;
}
.ol-search.IGNF-parcelle input:-moz-read-only {
background: #ccc;
opacity: .8;
}
.ol-search.IGNF-parcelle input:read-only {
background: #ccc;
opacity: .8;
}
.ol-search.IGNF-parcelle.ol-collapsed-list > ul.autocomplete {
display: none;
}
.ol-search.IGNF-parcelle label {
display: block;
clear: both;
}
.ol-search.IGNF-parcelle > div * {
width: 5em;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
margin: .1em;
font-size: 1em;
}
.ol-search.IGNF-parcelle ul.autocomplete-page {
margin-top:.5em;
width:100%;
text-align: center;
display: none;
}
.ol-search.IGNF-parcelle.ol-collapsed-list ul.autocomplete-parcelle,
.ol-search.IGNF-parcelle.ol-collapsed-list ul.autocomplete-page {
display: block;
}
.ol-search.IGNF-parcelle.ol-collapsed ul.autocomplete-page,
.ol-search.IGNF-parcelle.ol-collapsed ul.autocomplete-parcelle,
.ol-search.IGNF-parcelle ul.autocomplete-parcelle {
display: none;
}
.ol-search.IGNF-parcelle ul.autocomplete-page li {
display: inline-block;
color: #fff;
background: rgba(0,60,136,.5);
border-radius: 50%;
width: 1.3em;
height: 1.3em;
padding: .1em;
margin: 0 .1em;
}
.ol-search.IGNF-parcelle ul.autocomplete-page li.selected {
background: rgba(0,60,136,1);
}
/* GPS */
.ol-searchgps input.search {
display: none;
}
.ol-control.ol-searchgps > button:first-child {
background-image: none;
}
.ol-control.ol-searchgps > button:first-child:before {
content: "x/y";
display: block;
-webkit-transform: scaleX(.8);
transform: scaleX(.8);
}
.ol-control.ol-searchgps .ol-latitude,
.ol-control.ol-searchgps .ol-longitude {
clear: both;
}
.ol-control.ol-searchgps .ol-latitude label,
.ol-control.ol-searchgps .ol-longitude label {
width: 5.5em;
display: inline-block;
text-align: right;
-webkit-transform: scaleX(.8);
transform: scaleX(.8);
margin: 0 -.8em 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.ol-control.ol-searchgps .ol-latitude input,
.ol-control.ol-searchgps .ol-longitude input {
max-width: 10em;
}
.ol-control.ol-searchgps .ol-switch {
cursor: pointer;
float: right;
margin: .5em;
font-size: .9em;
}
.ol-control.ol-searchgps .ol-switch input {
display: none;
}
.ol-control.ol-searchgps .ol-switch span {
color: rgba(0,60,136,.5);
position: relative;
cursor: pointer;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
width: 1.6em;
height: 1em;
display: inline-block;
border-radius: 1em;
font-size: 1.3em;
vertical-align: middle;
margin: 0 .2em;
}
.ol-control.ol-searchgps .ol-switch span:before {
position: absolute;
content: "";
height: 1em;
width: 1em;
left: 0;
top: 50%;
background-color: #fff;
-webkit-transition: .4s;
transition: .4s;
border-radius: 1em;
display: block;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border: 2px solid #ccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.ol-control.ol-searchgps .ol-switch input:checked + span {
background-color: currentColor;
}
.ol-control.ol-searchgps .ol-switch input:checked + span:before {
-webkit-transform: translate(.6em,-50%);
transform: translate(.6em,-50%);
border-color: currentColor;
}
.ol-searchgps .ol-decimal{
display: inline-block;
}
.ol-searchgps .ol-dms,
.ol-searchgps.ol-dms .ol-decimal {
display: none;
width: 3em;
text-align: right;
}
.ol-searchgps.ol-dms .ol-dms {
display: inline-block;
}
.ol-searchgps span.ol-dms {
width: auto;
}
.ol-searchgps.ol-control.ol-collapsed button.ol-geoloc {
display: none;
}
.ol-searchgps button.ol-geoloc {
top: 0;
float: right;
margin-right: 3px;
background-image: none;
position: relative;
}
.ol-searchgps button.ol-geoloc:before {
content:"";
position: absolute;
left: 50%;
right: 50%;
width: .6em;
height: .6em;
border: .1em solid currentColor;
border-radius: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.ol-searchgps button.ol-geoloc:after {
content:"";
position: absolute;
left: 50%;
right: 50%;
width: .2em;
height: .2em;
background-color: transparent;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-webkit-box-shadow:
.45em 0 currentColor, -.45em 0 currentColor, 0 -.45em currentColor, 0 .45em currentColor,
.25em 0 currentColor, -.25em 0 currentColor, 0 -.25em currentColor, 0 .25em currentColor;
box-shadow:
.45em 0 currentColor, -.45em 0 currentColor, 0 -.45em currentColor, 0 .45em currentColor,
.25em 0 currentColor, -.25em 0 currentColor, 0 -.25em currentColor, 0 .25em currentColor;
}
.ol-control.ol-select {
top: .5em;
left: 3em;
}
.ol-control.ol-select > button:before {
content: "";
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: .73em;
height: .73em;
background-color: transparent;
border: .12em solid currentColor;
border-radius: 100%;
top: .35em;
left: .35em;
}
.ol-control.ol-select > button:after {
content: "";
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 1.1em;
left: 1em;
border-width: .08em .23em;
border-style: solid;
border-radius: .03em;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-box-shadow: -0.18em 0 0 -0.03em;
box-shadow: -0.18em 0 0 -0.03em;
}
.ol-select > div button {
width: auto;
padding: 0 .5em;
float: right;
font-weight: normal;
}
.ol-select .ol-delete {
width: 1.5em;
height: 1em;
vertical-align: middle;
display: inline-block;
position: relative;
cursor: pointer;
}
.ol-select .ol-delete:before {
content:'\00d7';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
font-weight: bold;
}
.ol-control.ol-select input {
font-size: 1em;
}
.ol-control.ol-select select {
font-size: 1em;
max-width: 10em;
}
.ol-control.ol-select select option.ol-default {
color: #999;
font-style: italic;
}
.ol-control.ol-select > div {
display: block;
}
.ol-control.ol-select.ol-collapsed > div {
display: none;
}
.ol-control.ol-select.ol-select-check {
max-width: 20em;
}
.ol-control.ol-select.ol-select-check label,
.ol-control.ol-select-check div {
position: relative;
display: inline-block;
}
.ol-control.ol-select.ol-select-condition input,
.ol-control.ol-select.ol-select-check input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.ol-control.ol-select.ol-select-condition label div {
position: relative;
padding: 0 1em 0 2em;
}
.ol-control.ol-select.ol-select-condition label div:before {
content: "";
position: absolute;
left: 0;
height: 1.1em;
width: 1.8em;
background-color: rgba(192,192,192,.7);
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 1em;
}
.ol-control.ol-select.ol-select-condition label div:after {
content: "";
position: absolute;
left: .1em;
top: .1em;
height: .9em;
width: .9em;
background-color: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 1em;
-webkit-transition: .3s;
transition: .3s;
}
.ol-control.ol-select.ol-select-condition input:checked ~ div:after {
left: .7em;
}
.ol-control.ol-select.ol-select-check label > div {
padding: 0 1em 0 1.5em;
}
.ol-control.ol-select.ol-select-check label > div:before {
content: "";
position: absolute;
width: 1.1em;
height: 1.1em;
left: .2em;
background-color: rgba(192,192,192,.7);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.ol-control.ol-select.ol-select-check label.ol-radio > div:before {
border-radius: 50%;
}
.ol-control.ol-select.ol-select-condition label > div:hover:before,
.ol-control.ol-select.ol-select-check label > div:hover:before {
background-color: rgba(128,128,128,.7);
}
.ol-control.ol-select.ol-select-condition input:checked ~ div:before,
.ol-control.ol-select.ol-select-check input:checked ~ div:before {
background-color: rgba(0,60,136,.7);
}
.ol-control.ol-select.ol-select-check label.ol-checkbox input:checked ~ div:after {
content: "";
position: absolute;
width: .5em;
height: .8em;
top: .05em;
left: .5em;
border: 2px solid #fff;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.ol-control.ol-select.ol-select-check label.ol-radio input:checked ~ div:before {
border: .3em solid rgba(0,60,136,.7);
background-color: #fff;
}
.ol-select ul {
list-style: none;
margin: 0;
padding: 0;
}
.ol-control.ol-select input[type="text"] {
width: 8em;
}
.ol-select .ol-autocomplete {
display: inline;
}
.ol-select .ol-autocomplete ul {
position: absolute;
display: block;
background: #fff;
border: 1px solid #999;
min-width: 10em;
font-size: .85em;
}
.ol-select .ol-autocomplete ul li {
padding: 0 .5em;
}
.ol-select .ol-autocomplete ul li:hover {
color: #fff;
background: rgba(0,60,136,.5);
}
.ol-select ul.ol-hidden {
display: none;
}
.ol-select-multi li > div:hover,
.ol-select-multi li > div.ol-control.ol-select {
position: relative;
top: unset;
left: unset;
background: transparent;
}
.ol-select-multi li > div > button,
.ol-select-multi li > div .ol-ok {
display: none;
}
.ol-select-multi li .ol-control.ol-select.ol-collapsed > div,
.ol-select-multi li > div > div {
display: block;
}
.ol-control.ol-storymap {
top: .5em;
left: .5em;
bottom: .5em;
max-width: 35%;
border-radius: .5em;
position: absolute;
height: auto;
}
.ol-storymap {
overflow: hidden;
padding: 0;
height: 100%;
position: relative;
scroll-behavior: smooth;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ol-storymap.ol-move {
scroll-behavior: unset;
}
.ol-storymap.ol-touch {
overflow-y: auto;
}
.ol-storymap .ol-scroll-top,
.ol-storymap .ol-scroll-next {
position: relative;
min-height: 1em;
color: rgba(0,60,136,.5);
}
.ol-storymap .ol-scroll-top:before,
.ol-storymap .ol-scroll-next:before {
content: "";
border: .3em solid currentColor;
border-radius: .3em;
border-color: transparent currentColor currentColor transparent;
width: .8em;
height: .8em;
display: block;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
-webkit-animation: ol-bounce-bottom 0.35s linear infinite alternate;
animation: ol-bounce-bottom 0.35s linear infinite alternate;
pointer-events: none;
}
.ol-storymap .ol-scroll-top:before {
border-color: currentColor transparent transparent currentColor;
-webkit-animation: ol-bounce-top 0.35s linear infinite alternate;
animation: ol-bounce-top 0.35s linear infinite alternate;
}
@-webkit-keyframes ol-bounce-top{
from {top: -.2em;}
to {top: .5em;}
}
@keyframes ol-bounce-top{
from {top: -.2em;}
to {top: .5em;}
}
@-webkit-keyframes ol-bounce-bottom{
from {bottom: -.2em;}
to {bottom: .5em;}
}
@keyframes ol-bounce-bottom{
from {bottom: -.2em;}
to {bottom: .5em;}
}
.ol-swipe
{ position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.ol-swipe:before
{ content: "";
position: absolute;
top: -5000px;
bottom: -5000px;
left: 50%;
width: 4px;
background: #fff;
z-index:-1;
transform: translate(-2px, 0);
-webkit-transform: translate(-2px, 0);
}
.ol-swipe.horizontal:before
{ left: -5000px;
right: -5000px;
top: 50%;
bottom: auto;
width: auto;
height: 4px;
}
.ol-swipe,
.ol-swipe button
{ cursor: ew-resize;
}
.ol-swipe.horizontal,
.ol-swipe.horizontal button
{ cursor: ns-resize;
}
.ol-swipe:after,
.ol-swipe button:before,
.ol-swipe button:after
{ content: "";
position: absolute;
top: 25%;
bottom: 25%;
left: 50%;
width: 2px;
background: rgba(255,255,255,0.8);
transform: translate(-1px, 0);
-webkit-transform: translate(-1px, 0);
}
.ol-swipe button:after
{ transform: translateX(5px);
-webkit-transform: translateX(5px);
}
.ol-swipe button:before
{ transform: translateX(-7px);
-webkit-transform: translateX(-7px);
}
.ol-control.ol-timeline {
bottom: 0;
left: 0;
right: 0;
-webkit-transition: .3s;
transition: .3s;
}
.ol-control.ol-timeline.ol-collapsed {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
.ol-timeline {
overflow: hidden;
padding: 2px 0 0;
}
.ol-timeline .ol-scroll {
overflow: hidden;
padding: 0;
scroll-behavior: smooth;
line-height: 1em;
height: 6em;
padding: 0 50%;
}
.ol-timeline .ol-scroll.ol-move {
scroll-behavior: unset;
}
.ol-timeline.ol-touch .ol-scroll{
overflow-x: auto;
}
.ol-timeline.ol-hasbutton .ol-scroll {
margin-left: 1.5em;
padding: 0 calc(50% - .75em);
}
.ol-timeline .ol-buttons {
display: none;
position: absolute;
top: 0;
background: rgba(255,255,255,.5);
width: 1.5em;
bottom: 0;
left: 0;
z-index: 10;
}
.ol-timeline.ol-hasbutton .ol-buttons {
display: block;
}
.ol-timeline .ol-buttons button {
font-size: 1em;
margin: 1px;
position: relative;
}
.ol-timeline .ol-buttons .ol-zoom-in:before,
.ol-timeline .ol-buttons .ol-zoom-out:before {
content: "+";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ol-timeline .ol-buttons .ol-zoom-out:before{
content: '−';
}
.ol-timeline .ol-scroll > div {
height: 100%;
position: relative;
}
.ol-timeline .ol-scroll .ol-times {
background: rgba(255,255,255,.5);
height: 1em;
bottom: 0;
position: absolute;
left: -1000px;
right: -1000px;
}
.ol-timeline .ol-scroll .ol-time {
position: absolute;
font-size: .7em;
color: #999;
bottom: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.ol-timeline .ol-scroll .ol-time.ol-year {
color: #666;
z-index: 1;
}
.ol-timeline .ol-scroll .ol-time:before {
content: "";
position: absolute;
bottom: 1.2em;
left: 50%;
height: 500px;
border-left: 1px solid currentColor;
}
.ol-timeline .ol-scroll .ol-features {
position: absolute;
top: 0;
bottom: 1em;
left: -200px;
right: -1000px;
margin: 0 0 0 200px;
overflow: hidden;
}
.ol-timeline .ol-scroll .ol-feature {
position: absolute;
font-size: .7em;
color: #999;
top: 0;
background: #fff;
max-width: 3em;
max-height: 2.4em;
min-height: 1em;
line-height: 1.2em;
border: 1px solid #ccc;
overflow: hidden;
padding: 0 .5em 0 0;
-webkit-transition: all .3s;
transition: all .3s;
cursor: pointer;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.ol-timeline.ol-zoomhover .ol-scroll .ol-feature:hover,
.ol-timeline.ol-zoomhover .ol-scroll .ol-feature.ol-select {
z-index: 1;
-webkit-transform: scale(1.2);
transform: scale(1.2);
background: #eee;
/* max-width: 14em!important; */
}
/* Center */
.ol-timeline .ol-center-date {
display: none;
position: absolute;
left: 50%;
height: 100%;
width: 2px;
bottom: 0;
z-index: 2;
pointer-events: none;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #f00;
opacity: .4;
}
.ol-timeline.ol-hasbutton .ol-center-date {
left: calc(50% + .75em);
}
/* Show center */
.ol-timeline.ol-pointer .ol-center-date {
display: block;
}
.ol-timeline.ol-pointer .ol-center-date:before,
.ol-timeline.ol-pointer .ol-center-date:after {
content: '';
border: 0.3em solid transparent;
border-width: .3em .25em;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.ol-timeline.ol-pointer .ol-center-date:before {
border-top-color: #f00;
top: 0;
}
.ol-timeline.ol-pointer .ol-center-date:after {
border-bottom-color: #f00;
bottom: 0
}
/* show interval */
.ol-timeline.ol-interval .ol-center-date {
display: block;
background-color: transparent;
border: 0 solid #000;
border-width: 0 10000px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
opacity: .2;
}
.ol-target-overlay .ol-target
{ border: 1px solid transparent;
-webkit-box-shadow: 0 0 1px 1px #fff;
box-shadow: 0 0 1px 1px #fff;
display: block;
height: 20px;
width: 0;
}
.ol-target-overlay .ol-target:after,
.ol-target-overlay .ol-target:before
{ content:"";
border: 1px solid #369;
-webkit-box-shadow: 0 0 1px 1px #fff;
box-shadow: 0 0 1px 1px #fff;
display: block;
width: 20px;
height: 0;
position:absolute;
top:10px;
left:-10px;
}
.ol-target-overlay .ol-target:after
{ -webkit-box-shadow: none; box-shadow: none;
height: 20px;
width: 0;
top:0px;
left:0px;
}
.ol-overlay-container .ol-magnify
{ background: rgba(0,0,0, 0.5);
border:3px solid #369;
border-radius: 50%;
height: 150px;
width: 150px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
position:relative;
z-index:0;
}
.ol-overlay-container .ol-magnify:before
{ border-radius: 50%;
-webkit-box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.25) inset;
box-shadow: 0 0 40px 2px rgba(0, 0, 0, 0.25) inset;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.ol-overlay-container .ol-magnify:after
{
border-radius: 50%;
-webkit-box-shadow: 0 0 20px 7px rgba(255, 255, 255, 1);
box-shadow: 0 0 20px 7px rgba(255, 255, 255, 1);
content: "";
display: block;
height: 0;
left: 23%;
position: absolute;
top: 20%;
width: 20%;
z-index: 1;
transform: rotate(-40deg);
-webkit-transform: rotate(-40deg);
}
/** popup animation using visible class
*/
.ol-popup.anim
{ visibility: hidden;
}
/** No transform when visible
*/
.ol-popup.anim.visible
{ visibility: visible;
transform: none;
-webkit-transform: none;
-webkit-animation: ol-popup_bounce 0.4s ease 1;
animation: ol-popup_bounce 0.4s ease 1;
}
@-webkit-keyframes ol-popup_bounce
{ from { -webkit-transform: scale(0); transform: scale(0); }
50% { -webkit-transform: scale(1.1); transform: scale(1.1) }
80% { -webkit-transform: scale(0.95); transform: scale(0.95) }
to { -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes ol-popup_bounce
{ from { -webkit-transform: scale(0); transform: scale(0); }
50% { -webkit-transform: scale(1.1); transform: scale(1.1) }
80% { -webkit-transform: scale(0.95); transform: scale(0.95) }
to { -webkit-transform: scale(1); transform: scale(1); }
}
/* Hide to prevent flickering on animate */
.ol-popup.anim.visible .anchor
{ /* animation: ol-popup_opacity 0.4s ease 1; */
}
@-webkit-keyframes ol-popup_opacity
{ from { visibility:hidden }
to { visibility:hidden }
}
@keyframes ol-popup_opacity
{ from { visibility:hidden }
to { visibility:hidden }
}
/** Transform Origin */
.ol-popup.anim.ol-popup-bottom.ol-popup-left
{ transform-origin:0 100%;
-webkit-transform-origin:0 100%;
}
.ol-popup.anim.ol-popup-bottom.ol-popup-right
{ transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
}
.ol-popup.anim.ol-popup-bottom.ol-popup-center
{ transform-origin:50% 100%;
-webkit-transform-origin:50% 100%;
}
.ol-popup.anim.ol-popup-top.ol-popup-left
{ transform-origin:0 0;
-webkit-transform-origin:0 0;
}
.ol-popup.anim.ol-popup-top.ol-popup-right
{ transform-origin:100% 0;
-webkit-transform-origin:100% 0;
}
.ol-popup.anim.ol-popup-top.ol-popup-center
{ transform-origin:50% 0;
-webkit-transform-origin:50% 0;
}
.ol-popup.anim.ol-popup-middle.ol-popup-left
{ transform-origin:0 50%;
-webkit-transform-origin:0 50%;
}
.ol-popup.anim.ol-popup-middle.ol-popup-right
{ transform-origin:100% 50%;
-webkit-transform-origin:100% 50%;
}
/** ol.popup */
.ol-popup {
font-size:0.9em;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ol-popup .ol-popup-content {
overflow:hidden;
cursor: default;
padding: 0.25em 0.5em;
}
.ol-popup.hasclosebox .ol-popup-content {
margin-right: 1.7em;
}
.ol-popup .ol-popup-content:after {
clear: both;
content: "";
display: block;
font-size: 0;
height: 0;
}
/** Anchor position */
.ol-popup .anchor {
display:block;
width:0px;
height:0px;
background:red;
position:absolute;
margin: -11px 21px;
pointer-events: none;
}
.ol-popup .anchor:after,
.ol-popup .anchor:before {
position:absolute;
}
.ol-popup-right .anchor:after,
.ol-popup-right .anchor:before {
right:0;
}
.ol-popup-top .anchor { top:0; }
.ol-popup-bottom .anchor { bottom:0; }
.ol-popup-right .anchor { right:0; }
.ol-popup-left .anchor { left:0; }
.ol-popup-center .anchor {
left:50%;
margin-left: 0!important;
}
.ol-popup-middle .anchor {
top:50%;
margin-top: 0!important;
}
.ol-popup-center.ol-popup-middle .anchor {
display:none;
}
/** Fixed popup */
.ol-popup.ol-fixed {
margin: 0!important;
top: .5em!important;
right: .5em!important;
left: auto!important;
bottom: auto!important;
}
.ol-popup.ol-fixed .anchor {
display: none;
}
.ol-popup.ol-fixed.anim {
-webkit-animation: none;
animation: none;
}
.ol-popup .ol-fix {
width: 1em;
height: .9em;
background: #fff;
position: relative;
float: right;
margin: .2em;
cursor: pointer;
}
.ol-popup .ol-fix:before {
content: "";
width: .8em;
height: .7em;
display: block;
border: .1em solid #666;
border-right-width: 0.1em;
border-right-width: .3em;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: .1em;
}
/** Add a shadow to the popup */
.ol-popup.shadow {
-webkit-box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.5);
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.5);
}
/** Close box */
.ol-popup .closeBox {
background-color: rgba(0, 60, 136, 0.5);
color: #fff;
border: 0;
border-radius: 2px;
cursor: pointer;
float: right;
font-size: 0.9em;
font-weight: 700;
width: 1.4em;
height: 1.4em;
margin: 5px 5px 0 0;
padding: 0;
position: relative;
display:none;
}
.ol-popup.hasclosebox .closeBox {
display:block;
}
.ol-popup .closeBox:hover {
background-color: rgba(0, 60, 136, 0.7);
}
/* the X */
.ol-popup .closeBox:after {
content: "\00d7";
font-size:1.5em;
top: 50%;
left: 0;
right: 0;
width: 100%;
text-align: center;
line-height: 1em;
margin: -0.5em 0;
position: absolute;
}
/** Modify touch poup */
.ol-popup.modifytouch {
background-color: #eee;
}
.ol-popup.modifytouch .ol-popup-content {
padding: 0 0.25em;
font-size: 0.85em;
white-space: nowrap;
}
.ol-popup.modifytouch .ol-popup-content a {
text-decoration: none;
}
/** Tool tips popup*/
.ol-popup.tooltips {
background-color: #ffa;
}
.ol-popup.tooltips .ol-popup-content{
padding: 0 0.25em;
font-size: 0.85em;
white-space: nowrap;
}
/** Default popup */
.ol-popup.default {
background-color: #fff;
border:1px solid #69f;
border-radius: 5px;
margin:11px 0;
}
.ol-popup-left.default {
margin:11px 10px 11px -22px;
}
.ol-popup-right.default {
margin:11px -22px 11px 10px;
}
.ol-popup-middle.default {
margin:0 10px;
}
.ol-popup.default .anchor:after,
.ol-popup.default .anchor:before {
content:"";
border-color: #69f transparent;
border-style: solid;
border-width: 11px;
margin: 0 -11px;
}
.ol-popup.default .anchor:after {
border-color: #fff transparent;
border-width: 9px;
margin: 3px -9px;
}
.ol-popup-top.default .anchor:before,
.ol-popup-top.default .anchor:after {
border-top:0;
top:0;
}
.ol-popup-bottom.default .anchor:before,
.ol-popup-bottom.default .anchor:after {
border-bottom:0;
bottom:0;
}
.ol-popup-middle.default .anchor:before {
margin: -11px -33px;
border-color: transparent #69f;
}
.ol-popup-middle.default .anchor:after {
margin: -9px -30px;
border-color: transparent #fff;
}
.ol-popup-middle.ol-popup-left.default .anchor:before,
.ol-popup-middle.ol-popup-left.default .anchor:after
{ border-left:0;
}
.ol-popup-middle.ol-popup-right.default .anchor:before,
.ol-popup-middle.ol-popup-right.default .anchor:after
{ border-right:0;
}
/** Placemark popup */
.ol-popup.placemark {
font-size: 15px;
color: #c00;
background-color: #fff;
border: .45em solid currentColor;
margin: .65em 0;
width: 2em;
height: 2em;
border-radius: 50%;
min-width: unset;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform-origin: 50% 150%!important;
transform-origin: 50% 150%!important;
}
.ol-popup.placemark .ol-popup-content {
overflow: hidden;
cursor: default;
padding: 0;
text-align: center;
margin: -.1em;
}
.ol-popup.placemark .anchor {
margin: -.4em;
}
.ol-popup.placemark .anchor:before {
content: "";
margin: -.5em -.5em;
background: transparent;
width: 1em;
height: .5em;
border-radius: 50%;
-webkit-box-shadow: 0 1em 0.5em rgba(0,0,0,.5);
box-shadow: 0 1em 0.5em rgba(0,0,0,.5);
}
.ol-popup.placemark .anchor:after {
content: "";
border-color: currentColor transparent;
border-style: solid;
border-width: 1em .7em 0;
margin: -.75em -.7em;
bottom:0;
}
/** Placemark Shield */
.ol-popup.placemark.shield {
border-radius: .2em;
}
.ol-popup.placemark.shield .anchor:after {
border-width: .8em 1em 0;
margin: -.7em -1em;
}
/** Placemark Blazon */
.ol-popup.placemark.blazon {
border-radius: .2em;
}
/** Placemark Needle/Pushpin */
.ol-popup.placemark.pushpin {
margin: 1.5em 0;
border-radius: 0;
border-color: currentColor transparent;
background: transparent!important;
-webkit-box-shadow: inset 2em 0 currentColor;
box-shadow: inset 2em 0 currentColor;
border-width: .3em .5em .5em;
}
.ol-popup.placemark.needle {
margin: 1.5em 0;
}
.ol-popup.placemark.pushpin .anchor,
.ol-popup.placemark.needle .anchor {
margin: -1.5em;
}
.ol-popup.placemark.pushpin .anchor:after,
.ol-popup.placemark.needle .anchor:after {
border-style: solid;
border-width: 2em .15em 0;
margin: -.55em -0.2em;
width: .1em;
}
.ol-popup.placemark.pushpin .anchor:before,
.ol-popup.placemark.needle .anchor:before {
margin: -.75em -.5em;
}
/** Placemark Flag */
.ol-popup.placemark.flagv {
border-radius: 0;
margin: 0 0 1.5em 1em;
border-color: transparent transparent transparent currentColor;
border-width: 1em 0 1em 2em;
width: 0;
height: 0;
background-color: transparent;
-webkit-transform-origin: 0% 150%!important;
transform-origin: 0% 150%!important;
}
.ol-popup.placemark.flagv .anchor {
margin: -2em;
margin-left: -1em !important;
}
.ol-popup.placemark.flag {
margin: 0 0 1.5em 1em;
border-radius: 0;
-webkit-transform-origin: 0% 150%!important;
transform-origin: 0% 150%!important;
}
.ol-popup.placemark.flag .anchor {
margin: -1.5em;
}
.ol-popup.placemark.flagv .anchor:after,
.ol-popup.placemark.flag .anchor:after {
border-style: solid;
border-width: 2em .15em 0;
margin: -.55em -1em;
width: .1em;
}
.ol-popup.placemark.flagv .anchor:before,
.ol-popup.placemark.flag .anchor:before {
margin: -.75em -1.25em;
}
.ol-popup.placemark.flag.finish {
background-image:
linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor),
linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
background-size: 1em 1em;
background-position: .5em 0, 0 .5em;
border-width: .25em;
margin: 0 0 1.7em .8em;
}
/** Black popup */
.ol-popup.black .closeBox
{ background-color: rgba(0,0,0, 0.5);
border-radius: 5px;
color: #f80;
}
.ol-popup.black .closeBox:hover
{ background-color: rgba(0,0,0, 0.7);
color:#da2;
}
.ol-popup.black
{ background-color: rgba(0,0,0,0.6);
border-radius: 5px;
margin:20px 0;
color:#fff;
}
.ol-popup-left.black
{ margin:20px 10px 20px -22px;
}
.ol-popup-right.black
{ margin:20px -22px 20px 10px;
}
.ol-popup-middle.black
{ margin:0 11px;
}
.ol-popup.black .anchor {
margin: -20px 11px;
}
.ol-popup.black .anchor:before
{ content:"";
border-color: rgba(0,0,0,0.6) transparent;
border-style: solid;
border-width: 20px 11px;
}
.ol-popup-top.black .anchor:before
{ border-top:0;
top:0;
}
.ol-popup-bottom.black .anchor:before
{ border-bottom:0;
bottom:0;
}
.ol-popup-middle.black .anchor:before
{ margin: -20px -22px;
border-color: transparent rgba(0,0,0,0.6);
}
.ol-popup-middle.ol-popup-left.black .anchor:before
{ border-left:0;
}
.ol-popup-middle.ol-popup-right.black .anchor:before {
border-right:0;
}
.ol-popup-center.black .anchor:before {
margin: 0 -10px;
}
/** Green tips popup */
.ol-popup.tips .closeBox {
background-color: #f00;
border-radius: 50%;
color: #fff;
width:1.2em;
height:1.2em;
}
.ol-popup.tips .closeBox:hover {
background-color: #f40;
}
.ol-popup.tips {
background-color: #cea;
border: 5px solid #ad7;
border-radius: 5px;
margin:20px 0;
color:#333;
}
.ol-popup-left.tips {
margin:20px 10px 20px -22px;
}
.ol-popup-right.tips {
margin:20px -22px 20px 10px;
}
.ol-popup-middle.tips {
margin:0 20px;
}
.ol-popup.tips .anchor {
margin: -25px 16px;
}
.ol-popup.tips .anchor:before {
content:"";
border-color: #ad7 transparent;
border-style: solid;
border-width: 20px 11px;
}
.ol-popup-top.tips .anchor:before {
border-top:0;
top:0;
}
.ol-popup-bottom.tips .anchor:before {
border-bottom:0;
bottom:0;
}
.ol-popup-center.tips .anchor:before {
border-width: 20px 6px;
margin: 0 -6px;
}
.ol-popup-left.tips .anchor:before {
border-left:0;
margin-left:0;
}
.ol-popup-right.tips .anchor:before {
border-right:0;
margin-right:0;
}
.ol-popup-middle.tips .anchor:before {
margin: -6px -41px;
border-color: transparent #ad7;
border-width:6px 20px;
}
.ol-popup-middle.ol-popup-left.tips .anchor:before {
border-left:0;
}
.ol-popup-middle.ol-popup-right.tips .anchor:before {
border-right:0;
}
/** Warning popup */
.ol-popup.warning .closeBox {
background-color: #f00;
border-radius: 50%;
color: #fff;
font-size: 0.83em;
}
.ol-popup.warning .closeBox:hover {
background-color: #f40;
}
.ol-popup.warning {
background-color: #fd0;
border-radius: 3px;
border:4px dashed #f00;
margin:20px 0;
color:#900;
margin:28px 10px;
}
.ol-popup-left.warning {
margin-left:-22px;
margin-right:10px;
}
.ol-popup-right.warning {
margin-right:-22px;
margin-left:10px;
}
.ol-popup-middle.warning {
margin:0 22px;
}
.ol-popup.warning .anchor {
margin: -33px 7px;
}
.ol-popup.warning .anchor:before {
content:"";
border-color: #f00 transparent;
border-style: solid;
border-width: 30px 11px;
}
.ol-popup-top.warning .anchor:before {
border-top:0;
top:0;
}
.ol-popup-bottom.warning .anchor:before {
border-bottom:0;
bottom:0;
}
.ol-popup-center.warning .anchor:before {
margin: 0 -21px;
}
.ol-popup-middle.warning .anchor:before {
margin: -10px -33px;
border-color: transparent #f00;
border-width:10px 22px;
}
.ol-popup-middle.ol-popup-left.warning .anchor:before {
border-left:0;
}
.ol-popup-middle.ol-popup-right.warning .anchor:before {
border-right:0;
}
.ol-popup .ol-popupfeature table {
width: 100%;
}
.ol-popup .ol-popupfeature table td {
max-width: 25em;
overflow: hidden;
text-overflow: ellipsis;
}
.ol-popup .ol-popupfeature table td img {
max-width: 100px;
max-height: 100px;
}
.ol-popup .ol-popupfeature tr:nth-child(2n+1) {
background-color: #eee;
}
.ol-popup .ol-popupfeature .ol-zoombt {
border: 0;
width: 2em;
height: 2em;
display: inline-block;
color: rgba(0,60,136,.5);
position: relative;
background: transparent;
outline: none;
}
.ol-popup .ol-popupfeature .ol-zoombt:before {
content: "";
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 1em;
height: 1em;
background-color: transparent;
border: .17em solid currentColor;
border-radius: 100%;
top: .3em;
left: .3em;
}
.ol-popup .ol-popupfeature .ol-zoombt:after {
content: "";
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 1.35em;
left: 1.15em;
border-width: .1em .3em;
border-style: solid;
border-radius: .03em;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-box-shadow: -0.2em 0 0 -0.04em;
box-shadow: -0.2em 0 0 -0.04em;
}
.ol-popup .ol-popupfeature .ol-count{
float: right;
margin: .25em 0;
}
.ol-popup .ol-popupfeature .ol-prev,
.ol-popup .ol-popupfeature .ol-next {
border-style: solid;
border-color: transparent rgba(0,60,136,.5);
border-width: .5em 0 .5em .5em;
display: inline-block;
vertical-align: bottom;
margin: 0 .5em;
cursor: pointer;
}
.ol-popup .ol-popupfeature .ol-prev{
border-width: .5em .5em .5em 0;
}
.ol-popup.tooltips.black {
-webkit-transform: scaleY(1.3);
transform: scaleY(1.3);
padding: .2em .5em;
background-color: rgba(0,0,0, 0.5);
}
.ol-popup-middle.tooltips.black .anchor:before {
border-width: 5px 10px;
margin: -5px -21px;
}
\ No newline at end of file
reports/static/reports/css/scldata.css
View file @ 8ec19c3c
...@@ -162,3 +162,58 @@ input[type=range]::-webkit-slider-thumb { ...@@ -162,3 +162,58 @@ input[type=range]::-webkit-slider-thumb {
border-radius: 100%; border-radius: 100%;
cursor: pointer; cursor: pointer;
} */ } */
/* Reset Select */
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
outline: 0;
box-shadow: none;
border: 0 !important;
background: #2c3e50;
background-image: none;
}
/* Custom Select */
.select {
position: relative;
display: block;
width: 9em;
height: 3em;
line-height: 3;
background: #2c3e50;
overflow: hidden;
border-radius: .25em;
}
select {
width: 100%;
height: 100%;
margin: 0;
padding: 0 0 0 .5em;
color: #fff;
cursor: pointer;
}
select::-ms-expand {
display: none;
}
/* Arrow */
.select::after {
content: '\25BC';
position: absolute;
top: 0;
right: 0;
bottom: 0;
padding: 0 1em;
background: #34495e;
pointer-events: none;
}
/* Transition */
.select:hover::after {
color: #f39c12;
}
.select::after {
-webkit-transition: .25s all ease;
-o-transition: .25s all ease;
transition: .25s all ease;
}
reports/static/reports/js/Reports_scripts.js
View file @ 8ec19c3c
...@@ -65,7 +65,6 @@ $(function () { ...@@ -65,7 +65,6 @@ $(function () {
responsive: true responsive: true
}); });
}); });
......
reports/static/reports/js/minimap.js
View file @ 8ec19c3c
MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'; MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
MAX_OPACITY = 1;
FIRST_IMAGE_LAYER_INDEX = 2;
// create wkt polygon // create wkt polygon
const format = new ol.format.WKT(); const wktFormat = new ol.format.WKT();
const feature = format.readFeature(polygon, { const polygonFeature = wktFormat.readFeature(polygon, {
dataProjection: 'EPSG:4326', dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857' featureProjection: 'EPSG:3857'
}); });
// Create layers // Create layers
const mapbox = new ol.layer.Tile({ const mapLayer = new ol.layer.Tile({
name: 'mapbox', name: 'mapbox',
source: new ol.source.XYZ({ source: new ol.source.XYZ({
url:'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token='+MAPBOX_ACCESS_TOKEN url:'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token='+MAPBOX_ACCESS_TOKEN
}) })
}); });
const vector = new ol.layer.Vector({ const polygonLayer = new ol.layer.Vector({
name: 'polygon', name: 'polygon',
source: new ol.source.Vector({ source: new ol.source.Vector({
features: [feature] features: [polygonFeature]
}) })
}); });
const layers = new Map();
// create map // create map
const map = new ol.Map({ const map = new ol.Map({
target: 'minimap', target: 'minimap',
layers: [mapbox, vector], layers: [mapLayer, polygonLayer],
view: new ol.View({ view: new ol.View({
center: ol.proj.fromLonLat([-99.19, 19.61]), center: ol.proj.fromLonLat([-99.19, 19.61]),
zoom: 4, zoom: 4,
...@@ -34,105 +37,216 @@ const map = new ol.Map({ ...@@ -34,105 +37,216 @@ const map = new ol.Map({
}) })
}); });
// fit to polygon // fit (zoom) to polygon
map.getView().fit(feature.getGeometry()); map.getView().fit(polygonFeature.getGeometry());
// show first date and current date
let currentDate;
let currentOpacity = 1;
if (labels && labels.length > 0) { // show first layer date
currentDate = labels[0]; let currentDate = labels[0];
addImageLayer(currentDate) addImageLayer({
} layerDate: currentDate
});
// main function to change layers
// data = { layerDate: to change all layers by date }
// data = { layerName: to add single layer }
function addImageLayer(data) {
if (data.layerDate) {
currentDate = data.layerDate;
}
function addImageLayer(labelDate) {
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
dataType: "json", dataType: "json",
data: {'purchase_id': purchase_id, 'report': zone, 'date': labelDate}, data: {'purchase_id': purchase_id, 'report': zone, 'date': currentDate},
url: '/reports/tiles/tileinfo', url: '/reports/tiles/tileinfo',
success: function (data) { success: response => {
changeLayers(data.layerName);
setOpacity($('#opacitySlide').val());
map.getView().setMinZoom(response.zoom.min);
map.getView().setMaxZoom(response.zoom.max);
}
});
}
currentDate = labelDate; // remove old layers and add layers with new date
removeImageLayers() function changeLayers(especific_layerName) {
const layersToChance = especific_layerName ? especific_layerName.split() : getSelectedLayersName();
// add layer removeLayer(especific_layerName);
getSelectedCheckboxes().forEach(layer_type => {
layersToChance.forEach(layerName => {
const xyz = new ol.layer.Tile({ const xyz = new ol.layer.Tile({
name: layer_type, name: layerName,
opacity: (layer_type == 'TCI') ? 1 : currentOpacity,
source: new ol.source.XYZ({ source: new ol.source.XYZ({
projection: 'EPSG:3857', projection: 'EPSG:3857',
url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layer_type+'/'+labelDate+'/{z}/{x}/{-y}.png', url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layerName+'/'+currentDate+'/{z}/{x}/{-y}.png',
tilePixelRatio: 2, tilePixelRatio: 2
minZoom: data.zoom.min,
maxZoom: data.zoom.max
}) })
}); });
if (layerName === 'TCI') {
map.getLayers().insertAt(FIRST_IMAGE_LAYER_INDEX, xyz);
} else {
map.addLayer(xyz); map.addLayer(xyz);
})
// fit and zoom
map.getView().setMinZoom(data.zoom.min);
map.getView().setMaxZoom(data.zoom.max);
} }
layers.set(layerName, xyz);
}); });
} }
function removeImageLayers() { // remove all if there isn't layername
map.getLayers().getArray().slice().forEach(layer => { function removeLayer(layerName) {
if(layer.get('name') != 'mapbox' && layer.get('name') != 'polygon') { if (!layerName) {
map.removeLayer(layer) layers.forEach(layer => { map.removeLayer(layer); });
layers.clear();
return;
} }
})
map.removeLayer(layers.get(layerName));
layers.delete(layerName);
} }
// set opacity to layers
function setOpacity(value) { function setOpacity(value) {
currentOpacity = value; layers.forEach(layer => {
map.getLayers().getArray().slice().forEach(layer => { if(layer.get('name') != 'TCI') {
if(layer.get('name') != 'mapbox' && layer.get('name') != 'polygon' && layer.get('name') != 'TCI') {
layer.setOpacity(value) layer.setOpacity(value)
} }
}) })
} }
function getSelectedCheckboxes() {
const inputs = $("input[name=layer_type]:checked");
let values = []
Object.keys(inputs).forEach(key => { // *********** Irving ******************
let value = inputs[key].value; // Funciones de comparacion
if (value) {values.push(value)}
}) //vigila cuando se cierra el menu de comparar y cuando se cierra desactiva la comparacion (si la clase de compare incluye menu-open está abierto)
var compareMenu = document.getElementById('compare');
var observer = new MutationObserver( function(mutations) {
mutations.forEach( function(mutation) {
if (mutation.attributeName == 'class') {
if(compareMenu.className.indexOf("open")===-1) { //se cerró el menu de comparacion
exitCompare();
}
}
});
});
observer.observe(compareMenu, { attributes : true, attributeOldValue: true, attributeFilter : ['class'], subtree: true});
//crea el control swipe, que sirve para comparar
var ctrl = new ol.control.Swipe();
//funcion que inicia la comparacion
//recibe la lista de fechas y por default compara la primera y la ultima
function compare(labels) {
var swipeControl = false;
return values; map.getControls().forEach(function (control) { //checa si ya se añadio el control de comparacion (swipe), si no lo tiene, lo agrega
if(control instanceof ol.control.Swipe){ //si ya tiene el control agregado
swipeControl =true;
}
});
if(swipeControl==true) { //si ya tiene el comparador no hace nada, ya esta en modo comparacion
//map.removeControl(swipeControlObj);
} else { //si no tiene el comparador lo agrega
//removeImageLayers();
map.addControl(ctrl);
ctrl.set('position', 0.5);
//console.log(map.controls)
var labelDateLeft = labels[0] //por default compara la primera y ultima fecha
var labelDateRight = labels[labels.length-1]
//pone las fechas por default en los selectores de fechas
document.getElementById("selectLeftCompare").value = labelDateLeft;
document.getElementById("selectRightCompare").value = labelDateRight;
//agrega las capas izquierda/derecha
selectLeft(labelDateLeft);
selectRight(labelDateRight);
//muestra los selectores de fechas y oculta la linea de tiempo
document.getElementById("selectLeft").style.display = "block";
document.getElementById("selectRight").style.display = "block";
document.getElementById("timeLine").style.display = "none";
}
} }
function getChartDataIndex(id) { //sale del modo comparacion
let foundIndex; function exitCompare() {
map.getControls().forEach(function (control) { //checa si ya se añadio el control de comparacion (swipe)
if(control instanceof ol.control.Swipe){ //ya tiene el control agregado lo quita
map.removeControl(control);
}
});
myChart.config.data.datasets.forEach(function (data, index) { //quita las capas de comparacion izquierda/derecha
let label = 'sclcheck-' + data.label.toLowerCase().replace(' ', '-'); var imageLayers = map.getLayers().getArray().slice();
if (label === id) { imageLayers.forEach(layer => {
foundIndex = index; if(layer.get('name') === 'left' || layer.get('name') === 'right') {
map.removeLayer(layer)
} }
}) })
return foundIndex; //oculta los selectores de fechas y muestra la linea de tiempo
document.getElementById("selectLeft").style.display = "none";
document.getElementById("selectRight").style.display = "none";
document.getElementById("timeLine").style.display = "block";
} }
$('input[name=layer_type]').on('click', function(){
const input = $(this);
const index = getChartDataIndex(input.parent().attr('id'));
if (index > -1) { //selecciona el lado izquierdo para comparar
myChart.getDatasetMeta(index).hidden=!input.prop("checked"); function selectLeft(date) {
myChart.update() var labelDateLeft = date;
} var layer_type = 'TCI';
const left = new ol.layer.Tile({
name: 'left',
opacity: 1,
source: new ol.source.XYZ({
projection: 'EPSG:3857',
url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layer_type+'/'+labelDateLeft+'/{z}/{x}/{-y}.png',
tilePixelRatio: 2,
minZoom: 10,
maxZoom: 15
})
});
map.addLayer(left);
ctrl.addLayer(left);
}
addImageLayer(currentDate); //selecciona el lado derecho para comparar
}); function selectRight(date){
var labelDateRight = date;
var layer_type = 'TCI';
const right = new ol.layer.Tile({
name: 'right',
opacity: 1,
source: new ol.source.XYZ({
projection: 'EPSG:3857',
url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layer_type+'/'+labelDateRight+'/{z}/{x}/{-y}.png',
tilePixelRatio: 2,
minZoom: 10,
maxZoom: 15
})
});
map.addLayer(right);
ctrl.addLayer(right, true);
}
//selecciona comparacion vertical u horizontal
function setCompareDirection(direction){
ctrl.set('orientation',direction)
//mueve los selectores de fechas
if(direction === 'horizontal'){
document.getElementById("selectLeft").style.bottom = "70%";
document.getElementById("selectLeft").style.left = "15%";
document.getElementById("selectRight").style.left = "15%";
}
else{
document.getElementById("selectLeft").style.bottom = "50px";
document.getElementById("selectLeft").style.left = "30%";
document.getElementById("selectRight").style.left = "75%";
}
}
// Fin funciones de comparacion
//******************************
reports/static/reports/js/ol-ext.js 0 → 100644
View file @ 8ec19c3c
This source diff could not be displayed because it is too large. You can view the blob instead.
reports/static/reports/js/reportImg.js
View file @ 8ec19c3c
...@@ -25,10 +25,13 @@ document.getElementById("myChart").onclick = function (evt) { ...@@ -25,10 +25,13 @@ document.getElementById("myChart").onclick = function (evt) {
if(activePoint.length>0){ if(activePoint.length>0){
var firstPoint = activePoint[0]; var firstPoint = activePoint[0];
//console.log(firstPoint)
//console.log(firstPoint._datasetIndex) //indice de la clase a la que pertenece (vegetación, agua, etc.)
var label = myChart.data.labels[firstPoint._index]; var label = myChart.data.labels[firstPoint._index];
addImageLayer(label) //console.log(firstPoint._datasetIndex) //indice de la clase a la que pertenece (vegetación, agua, etc.)
addImageLayer({
layerDate: label
});
//console.log(myChart.legend.legendItems[firstPoint._datasetIndex].text) //nombre de la capa a la que pertenece (vegetación, agua, etc.) //console.log(myChart.legend.legendItems[firstPoint._datasetIndex].text) //nombre de la capa a la que pertenece (vegetación, agua, etc.)
//if (!firstPoint) return; //if (!firstPoint) return;
activePoints.forEach(function (value, index) { activePoints.forEach(function (value, index) {
......
reports/templates/Reports.html
View file @ 8ec19c3c
...@@ -130,7 +130,7 @@ ...@@ -130,7 +130,7 @@
<br> <br>
<ul class="sidebar-menu" data-widget="tree"> <ul class="sidebar-menu" data-widget="tree">
<li> <li>
<a class="treeview " href="{{ BASE_URL }}/catalog"> <a class="treeview " href="{% url 'map' %}">
<i class="fa fa-map"></i> <i class="fa fa-map"></i>
<span>Home</span> <span>Home</span>
<span class="pull-right-container"> <span class="pull-right-container">
......
reports/templates/aside.html
View file @ 8ec19c3c
...@@ -35,6 +35,44 @@ ...@@ -35,6 +35,44 @@
<span class="label label-primary pull-right"></span> <span class="label label-primary pull-right"></span>
</span> </span>
</a> </a>
<li class="treeview" id="compare">
<a href="#" onclick="compare(labels)">
<i class="fas fa-columns"></i>
<span>Compare</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
<ul class="treeview-menu sidebar-form" id="compareOptions">
<li>
<a class="treeview submenu" href="#" onclick="setCompareDirection('vertical')" id="compvertical">
<i class="fas fa-arrows-alt-v"></i>
<span>Vertical</span>
</span>
</a>
</li>
<li>
<a class="treeview submenu" href="#" onclick="setCompareDirection('horizontal')" id="comphorizontal">
<i class="fas fa-arrows-alt-h"></i>
<span>Horizontal</span>
</span>
</a>
</li>
</ul>
</li>
<!--
<a class="treeview " href="#" onclick="compare(labels)">
<i class="fas fa-columns"></i></i>
<i class="fa fa-eye-slash hideChart" style="display:none"></i>
<span class="showChart">Compare</span>
<span class="hideChart" style="display:none">Not compare</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
-->
</li> </li>
{% endif %} {% endif %}
<li class="treeview"> <li class="treeview">
...@@ -131,7 +169,7 @@ ...@@ -131,7 +169,7 @@
</a> </a>
</li> </li>
<li> <li>
<a class="treeview submenu" href="#" id="downloadPdf"> <a class="treeview submenu" href="{% url 'PDF' purchaseID %}" target="_blank" download="Report">
<i class="fa fa-file-pdf-o"></i> <i class="fa fa-file-pdf-o"></i>
<span>Export to PDF</span> <span>Export to PDF</span>
<span class="pull-right-container"> <span class="pull-right-container">
...@@ -139,15 +177,6 @@ ...@@ -139,15 +177,6 @@
</span> </span>
</a> </a>
</li> </li>
<li>
<a class="treeview submenu" href="../../static/reports/tmpImages/repsat_test_dev/{{ email }}/{{ purchaseID }}/{{ zone }}.pdf" id="downloadPdf" target="_blank">
<i class="fa fa-file-pdf-o"></i>
<span>Export to PDF v2</span>
<span class="pull-right-container">
<span class="label label-primary pull-right"></span>
</span>
</a>
</li>
</ul> </ul>
</li> </li>
<li class="treeview"> <li class="treeview">
......
reports/templates/sclData.html
View file @ 8ec19c3c
...@@ -5,12 +5,14 @@ ...@@ -5,12 +5,14 @@
<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 'reports/css/scldata.css' %}" type="text/css"> <link rel="stylesheet" href="{% static 'reports/css/scldata.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'reports/css/crossrange.css' %}" type="text/css"> <link rel="stylesheet" href="{% static 'reports/css/crossrange.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'reports/css/ol-ext.css' %}" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<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"
type="text/css"> type="text/css">
<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>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="{% static 'reports/js/ol-ext.js' %}"></script>
{% endblock %} {% endblock %}
{% block messages %} {% block messages %}
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
...@@ -117,7 +119,7 @@ ...@@ -117,7 +119,7 @@
{% block content %} {% block content %}
<!-- Content Wrapper. Contains page content --> <!-- Content Wrapper. Contains page content -->
<!-- Main content --> <!-- Main content -->
<div class="container floating-panel" style="position:absolute; bottom: 40px; left: 12%; width: 500px; z-index: 1000"> <div id="timeLine" class="container floating-panel slidecontainer" style="position:absolute; display:block; bottom: 40px; left: 12%; width: 500px; z-index: 1000">
<div class="range-control" id="rangecontrol"> <div class="range-control" id="rangecontrol">
<span id="tooltiptext">{{ labels|first|slice:"6:8" }}/{{ labels|first|slice:"4:6" }}/{{ labels|first|slice:"0:4" }}</span> <span id="tooltiptext">{{ labels|first|slice:"6:8" }}/{{ labels|first|slice:"4:6" }}/{{ labels|first|slice:"0:4" }}</span>
<input class="cross-range" id="inputRange" type="range" min="0" max="{{ labels|length|add:'-1' }}" step="1" value="0" data-thumbwidth="20" style="background: transparent;"> <input class="cross-range" id="inputRange" type="range" min="0" max="{{ labels|length|add:'-1' }}" step="1" value="0" data-thumbwidth="20" style="background: transparent;">
...@@ -132,6 +134,26 @@ ...@@ -132,6 +134,26 @@
</div> </div>
</div> </div>
<div id="selectLeft" class="container floating-panel" style="position:absolute; display:none; bottom: 50px; left: 30%; width: 300px; z-index: 1000">
<div class="select">
<select onchange="selectLeft(this.value)" id="selectLeftCompare">
{% for label in labels %}
<option value="{{label}}" >{{ label|slice:"6:8" }}/{{ label|slice:"4:6" }}/{{label|slice:"0:4" }}</option>
{% endfor %}
</select>
</div>
</div>
<div id="selectRight" class="container floating-panel" style="position:absolute; display:none; bottom: 50px; left: 75%; width: 300px; z-index: 1000">
<div class="select">
<select onchange="selectRight(this.value)" id="selectRightCompare">
{% for label in labels %}
<option value="{{label}}" >{{ label|slice:"6:8" }}/{{ label|slice:"4:6" }}/{{label|slice:"0:4" }}</option>
{% endfor %}
</select>
</div>
</div>
<div id="reportPage" class="wrapper" style="background-color: #ecf0f5"> <div id="reportPage" class="wrapper" style="background-color: #ecf0f5">
<div id="minimap" class="minimap"></div> <div id="minimap" class="minimap"></div>
...@@ -247,31 +269,28 @@ ...@@ -247,31 +269,28 @@
{% block scripts %} {% block scripts %}
<script id="rendered-js"> <script id="rendered-js">
$('input[id="inputRange"]').on('input', function () { $('input[id="inputRange"]').on('input', function () {
let control = $(this);
let controlMin = control.attr('min');
let controlMax = control.attr('max');
let controlVal = control.val();
let controlThumbWidth = control.data('thumbwidth');
let range = controlMax - controlMin;
let position = (controlVal - controlMin) / range * 100;
let positionOffset = Math.round(controlThumbWidth * position / 100) - controlThumbWidth / 2;
let fecha = $("option:eq(" + controlVal + ")").text();
let valor = $("option:eq(" + controlVal + ")").val();
addImageLayer({
layerDate: valor
});
var control = $(this),
controlMin = control.attr('min'),
controlMax = control.attr('max'),
controlVal = control.val(),
controlThumbWidth = control.data('thumbwidth');
var range = controlMax - controlMin;
var position = (controlVal - controlMin) / range * 100;
var positionOffset = Math.round(controlThumbWidth * position / 100) - controlThumbWidth / 2;
var fecha = $("option:eq(" + controlVal + ")").text();
var valor = $("option:eq(" + controlVal + ")").val();
addImageLayer(valor);
$("#maptitle").empty(); $("#maptitle").empty();
$("#maptitle").append("Map Date: " + fecha); $("#maptitle").append("Map Date: " + fecha);
$("#tooltiptext").empty(); $("#tooltiptext").empty();
$("#tooltiptext").append(fecha); $("#tooltiptext").append(fecha);
}); });
var slider2 = document.getElementById("inputRange"); var slider2 = document.getElementById("inputRange");
var sliderOffsetX = slider2.getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left; var sliderOffsetX = slider2.getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
var sliderOffsetY = slider2.getBoundingClientRect().top - document.documentElement.getBoundingClientRect().top; var sliderOffsetY = slider2.getBoundingClientRect().top - document.documentElement.getBoundingClientRect().top;
var sliderWidth = slider2.offsetWidth - 1; var sliderWidth = slider2.offsetWidth - 1;
...@@ -282,20 +301,19 @@ ...@@ -282,20 +301,19 @@
value = sliderValAtPos - 1; value = sliderValAtPos - 1;
var fecha = $("option:eq(" + value + ")").text(); var fecha = $("option:eq(" + value + ")").text();
var valor = $("option:eq(" + value + ")").val(); var valor = $("option:eq(" + value + ")").val();
$("#tooltiptext").empty(); $("#tooltiptext").empty();
$("#tooltiptext").css({"margin-left": currentMouseXPos + 'px', "margin-top": sliderOffsetY + 'px'}); $("#tooltiptext").css({"margin-left": currentMouseXPos + 'px', "margin-top": sliderOffsetY + 'px'});
$("#tooltiptext").append(fecha); $("#tooltiptext").append(fecha);
}); });
</script> </script>
<!-- page script --> <!-- page script -->
<script> <script>
var legendOnClickHandler = function (e, legendItem) { const legendOnClickHandler = function (e, legendItem) {
var index = legendItem.datasetIndex; const index = legendItem.datasetIndex;
var ch = this.chart; const ch = this.chart;
let checkbox_id = '#sclcheck-'+legendItem.text.toLowerCase().replace(/\s/g, '-'); const checkbox_id = '#sclcheck-'+legendItem.text.toLowerCase().replace(/\s/g, '-');
// isDatasetVisible return the opposite status? // isDatasetVisible return the opposite status?
if (ch.getDatasetMeta(index).hidden === null) { if (ch.getDatasetMeta(index).hidden === null) {
...@@ -303,14 +321,22 @@ ...@@ -303,14 +321,22 @@
} else { } else {
ch.getDatasetMeta(index).hidden = !ch.getDatasetMeta(index).hidden; ch.getDatasetMeta(index).hidden = !ch.getDatasetMeta(index).hidden;
} }
ch.update(); ch.update();
$(checkbox_id+" :input").prop("checked", !ch.getDatasetMeta(index).hidden); const layerInput = $(checkbox_id+" :input");
addImageLayer(currentDate);
layerInput.prop("checked", !ch.getDatasetMeta(index).hidden);
if (layerInput.prop("checked")) {
addImageLayer({
layerName: layerInput.val()
});
} else {
removeLayer(layerInput.val());
}
}; };
var showSCLcheckboxes = function(datasets) { const showSCLcheckboxes = function (datasets) {
if (!datasets || datasets.length < 1) { if (!datasets || datasets.length < 1) {
return; return;
} }
...@@ -322,6 +348,43 @@ ...@@ -322,6 +348,43 @@
}); });
} }
const getSelectedLayersName = function () {
const inputs = $("input[name=layer_type]:checked");
let values = []
Object.keys(inputs).forEach(key => {
let value = inputs[key].value;
if (value) {values.push(value)}
});
return values;
}
const getChartDataIndex = function (id) {
const datasetsLabels = myChart.config.data.datasets.map(data =>
'sclcheck-' + data.label.toLowerCase().replace(' ', '-')
);
return datasetsLabels.indexOf(id);
}
$('input[name=layer_type]').on('click', function() {
const input = $(this);
const index = getChartDataIndex(input.parent().attr('id'));
if (index > -1) {
myChart.getDatasetMeta(index).hidden=!input.prop("checked");
myChart.update();
}
if (input.prop("checked")) {
addImageLayer({
layerName: input.val()
});
} else {
removeLayer(input.val());
}
});
var label; var label;
// Recibimos el JSON con los datos desde el View // Recibimos el JSON con los datos desde el View
{% autoescape off %} {% autoescape off %}
......
reports/urls.py
View file @ 8ec19c3c
...@@ -16,4 +16,5 @@ urlpatterns = [ ...@@ -16,4 +16,5 @@ urlpatterns = [
url(r'^ws/process_progress$', views.wsProcessProgress, name='wsProcessProgress'), url(r'^ws/process_progress$', views.wsProcessProgress, name='wsProcessProgress'),
url(r'^ws/is_public', views.wsIs_Public, name='wsIs_Public'), url(r'^ws/is_public', views.wsIs_Public, name='wsIs_Public'),
url(r'^ws/wsEditTitle', views.wsEditTitle, name='wsEditTitle'), url(r'^ws/wsEditTitle', views.wsEditTitle, name='wsEditTitle'),
url(r'^ws/PDF/(?P<purchase_id>(\d+))$', views.PDFGenerator, name='PDF'),
] ]
reports/views.py
View file @ 8ec19c3c
...@@ -9,7 +9,7 @@ import xml.etree.ElementTree as ET ...@@ -9,7 +9,7 @@ import xml.etree.ElementTree as ET
from collections import OrderedDict from collections import OrderedDict
from datetime import datetime from datetime import datetime
from django.http import HttpResponse, Http404, JsonResponse from django.http import HttpResponse, Http404, JsonResponse, FileResponse
from django.shortcuts import render, redirect from django.shortcuts import render, redirect
from reportlab.lib.pagesizes import letter from reportlab.lib.pagesizes import letter
from reportlab.pdfgen import canvas from reportlab.pdfgen import canvas
...@@ -19,17 +19,17 @@ from GeoInt_SIDT.settings import BASE_URL ...@@ -19,17 +19,17 @@ from GeoInt_SIDT.settings import BASE_URL
from administration.views import best_unit_size from administration.views import best_unit_size
from catalog.models import Purchase from catalog.models import Purchase
from reportlab.pdfgen.canvas import Canvas
from reportlab.lib.pagesizes import letter from reportlab.lib.pagesizes import letter
from reportlab.lib.styles import getSampleStyleSheet from reportlab.lib.styles import getSampleStyleSheet
from reportlab.lib.units import inch from reportlab.lib.units import inch
from reportlab.lib import colors from reportlab.lib import colors
from reportlab.platypus import Paragraph, Frame, Spacer, Image, Table, TableStyle, SimpleDocTemplate, PageBreak from reportlab.platypus import Paragraph, Frame, Spacer, Image, Table, TableStyle, SimpleDocTemplate, PageBreak
from reportlab.graphics.charts.barcharts import VerticalBarChart from reportlab.graphics.charts.barcharts import VerticalBarChart
from reportlab.graphics.shapes import Drawing, String from reportlab.graphics.shapes import Drawing
from reportlab.graphics.charts.textlabels import Label, LabelOffset
from reportlab.graphics.charts.legends import Legend from reportlab.graphics.charts.legends import Legend
# ------------------------------------------------------------------------------- # -------------------------------------------------------------------------------
########### lee archivo de configuración ################ ########### lee archivo de configuración ################
...@@ -48,7 +48,7 @@ def report_L2ASCL(request, purchase_id): ...@@ -48,7 +48,7 @@ def report_L2ASCL(request, purchase_id):
reporteDir = 'mask' reporteDir = 'mask'
folders = "" folders = ""
purchase = Purchase.objects.values('user__email', 'is_public', 'name', 'search__search_name', purchase = Purchase.objects.values('user__email', 'is_public', 'name', 'search__search_name',
'search__process_id__name').get(pk=purchase_id) 'search__process_id__name','description').get(pk=purchase_id)
email = purchase['user__email'] email = purchase['user__email']
path = USERS_PATH + email + '/' + purchase_id + '/' path = USERS_PATH + email + '/' + purchase_id + '/'
scl_data_path = USERS_PATH + email + "/" + purchase_id + "/scl_data.json" scl_data_path = USERS_PATH + email + "/" + purchase_id + "/scl_data.json"
...@@ -77,13 +77,17 @@ def report_L2ASCL(request, purchase_id): ...@@ -77,13 +77,17 @@ def report_L2ASCL(request, purchase_id):
"platform": dataProduct['platform'], "platform": dataProduct['platform'],
"productLevel": dataProduct['productLevel'], "productLevel": dataProduct['productLevel'],
"polygon": dataProduct['wkt'], "polygon": dataProduct['wkt'],
"description": purchase['description'],
"report_name": "SCL Image Classification Data(Km²)" "report_name": "SCL Image Classification Data(Km²)"
} }
if os.path.exists(path + reporteDir + ".pdf"): if os.path.exists(path + reporteDir + ".pdf"):
print ("si existe") print ("si existe")
else: else:
PDFGenerator(request, path, reporteDir, datasets,searchInfo) #PDFGenerator(request, path, reporteDir, datasets,searchInfo)
pass
return render(request, template, {"graphData": json.dumps(graphData), return render(request, template, {"graphData": json.dumps(graphData),
"searchInfo": searchInfo, "IMAGE_PATH": image_path, "searchInfo": searchInfo, "IMAGE_PATH": image_path,
...@@ -158,7 +162,7 @@ def Reports(request): ...@@ -158,7 +162,7 @@ def Reports(request):
# else: # else:
# initial_folder = folders.pop(0) + "_sclData" # initial_folder = folders.pop(0) + "_sclData"
print(initial_folder)
zip_path = USERS_PATH + request.user.email + "/" + str(producto['id']) zip_path = USERS_PATH + request.user.email + "/" + str(producto['id'])
# print(zip_path) # print(zip_path)
...@@ -334,14 +338,21 @@ def dataToTable(name, data): ...@@ -334,14 +338,21 @@ def dataToTable(name, data):
data.insert(0, name) data.insert(0, name)
return data return data
def mergeimages(path,file):
from PIL import Image
layer1 = Image.open(path + file[:8] + "_SCL_60m_0.tif")
for i in range(10):
layer2 = Image.open(path + file[:8] + "_SCL_60m_" + str(i) + ".tif")
nueva = Image.alpha_composite(layer1, layer2)
layer1 = nueva
nueva.save(path + file[:8] + "_SCL_60m_10.tif")
return path+file[:8]+"_SCL_60m_10.tif"
# create the table for our document # create the table for our document
def myTable(path1, path2, basefile): def myTable(path1, path2, basefile):
#image1 = Image(path1, height=300, width=200, mask='auto')
image1 = Image(path1) image1 = Image(path1)
if image1.imageWidth < image1.imageHeight: if image1.imageWidth < image1.imageHeight:
print ("mas alto que ancho")
image2 = Image(path1, height=300, width=200, mask='auto') image2 = Image(path1, height=300, width=200, mask='auto')
else: else:
image2 = Image(path1, height=150, width=400, mask='auto') image2 = Image(path1, height=150, width=400, mask='auto')
...@@ -351,8 +362,10 @@ def myTable(path1, path2, basefile): ...@@ -351,8 +362,10 @@ def myTable(path1, path2, basefile):
if file.startswith(basefile[:8]): if file.startswith(basefile[:8]):
if file.endswith('.tif') and not file.endswith('0.tif'): if file.endswith('.tif') and not file.endswith('0.tif'):
# image2 = Image(path2 + file, height=300, width=200, mask='auto') if image1.imageWidth < image1.imageHeight:
image3 = image2 image3 = Image(mergeimages(path2, file), height=300, width=200, mask='auto')
else:
image3 = Image(mergeimages(path2, file), height=150, width=400, mask='auto')
if image1.imageWidth < image1.imageHeight: if image1.imageWidth < image1.imageHeight:
data = [['TCI', 'SCL'], [image2, image3]] data = [['TCI', 'SCL'], [image2, image3]]
...@@ -449,18 +462,52 @@ def myBarLegend(drawing, labels): ...@@ -449,18 +462,52 @@ def myBarLegend(drawing, labels):
return d return d
@csrf_exempt
#def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo):
def PDFGenerator(request,purchase_id):
purchase = Purchase.objects.values('user__email', 'is_public', 'name', 'search__search_name',
'search__process_id__name', 'description').get(pk=purchase_id)
email = purchase['user__email']
ruta = USERS_PATH + email + '/' + purchase_id + '/'
thumbs = ruta + 'out/mask/TCI/thumbnails/'
SCL = ruta + 'out/mask/SCL/split/'
reporteDir = "mask"
with open(USERS_PATH + email + "/" + purchase_id + "/findProducts.json") as p:
dataProduct = json.load(p)
startDate = str(dataProduct['startDate'])[:4] + '-' + str(dataProduct['startDate'])[4:6] + '-' + str(
dataProduct['startDate'])[6:8]
endDate = str(dataProduct['endDate'])[:4] + '-' + str(dataProduct['endDate'])[4:6] + '-' + str(
dataProduct['endDate'])[6:8]
scl_data_path = USERS_PATH + email + "/" + purchase_id + "/scl_data.json"
graphData, label, defaultLabel, defaultDataset, datasets = ProcessChartData(scl_data_path)
def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo): searchInfo = {
thumbs = ruta + 'out/' + reporteDir + '/TCI/thumbnails/' "title": purchase['name'],
SCL = ruta + 'out/' + reporteDir + '/SCL/split/' # "title": purchase['search__search_name'],
"process": purchase['search__process_id__name'],
"startDate": startDate,
"endDate": endDate,
"clouds": dataProduct['clouds'],
"platform": dataProduct['platform'],
"productLevel": dataProduct['productLevel'],
"polygon": dataProduct['wkt'],
"description": purchase['description'],
"report_name": "SCL Image Classification Data(Km²)"
}
story = [] story = []
story.append(tileinfo("hola"))
# define the style for our paragraph text # define the style for our paragraph text
styles = getSampleStyleSheet() styles = getSampleStyleSheet()
styles2 = getSampleStyleSheet() styles2 = getSampleStyleSheet()
styles3 = getSampleStyleSheet()
styleN = styles['Normal'] styleN = styles['Normal']
styleN.alignment = 1 styleN.alignment = 1
styleN.fontSize=25 styleN.fontSize=25
...@@ -468,6 +515,11 @@ def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo): ...@@ -468,6 +515,11 @@ def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo):
style2 = styles2['Normal'] style2 = styles2['Normal']
style2.alignment = 1 style2.alignment = 1
style2.fontSize = 15 style2.fontSize = 15
style2.leading = 20
style3 = styles3['Normal']
style3.alignment = 1
style3.fontSize = 19
# Header # Header
im = Image(USERS_PATH + 'header.png', width=300, height=70) im = Image(USERS_PATH + 'header.png', width=300, height=70)
...@@ -475,32 +527,31 @@ def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo): ...@@ -475,32 +527,31 @@ def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo):
story.append(im) story.append(im)
story.append(Spacer(1, 1.5 * inch)) story.append(Spacer(1, 1.5 * inch))
# add the title # add the title
story.append(Paragraph("<strong>"+searchInfo['report_name']+"</strong>", styleN,)) story.append(Paragraph("<strong>"+searchInfo['report_name']+"</strong>", styleN,))
story.append(Spacer(1, .60 * inch)) story.append(Spacer(1, .50 * inch))
story.append(Paragraph("<strong>"+searchInfo['title']+"</strong>", styleN,)) story.append(Paragraph("<strong>"+searchInfo['title']+"</strong>", style3,))
story.append(Spacer(1, .40 * inch)) story.append(Spacer(1, .30 * inch))
story.append(Paragraph("<strong>("+searchInfo['startDate']+" - "+searchInfo['endDate']+")</strong>", style2,)) story.append(Paragraph("<strong>("+searchInfo['startDate']+" - "+searchInfo['endDate']+")</strong>", style2,))
story.append(Spacer(1, .60 * inch)) story.append(Spacer(1, .60 * inch))
story.append(Paragraph("<strong>Platform: "+searchInfo['platform']+"</strong>", style2,)) story.append(Paragraph("<strong>Platform: "+searchInfo['platform']+"</strong>", style2,))
story.append(Spacer(1, .40 * inch)) story.append(Spacer(1, .40 * inch))
story.append(Paragraph("<strong>Product level: "+searchInfo['productLevel']+"</strong>", style2,)) story.append(Paragraph("<strong>Product level: "+searchInfo['productLevel']+"</strong>", style2,))
story.append(Spacer(1, .40 * inch)) story.append(Spacer(1, .40 * inch))
story.append(Paragraph("<strong>Process:"+searchInfo['process']+"</strong>", style2,)) story.append(Paragraph("<strong>Process: "+searchInfo['process']+"</strong>", style2,))
story.append(Spacer(1, .40 * inch)) story.append(Spacer(1, .40 * inch))
story.append(Paragraph("<strong>Clouds: "+str(searchInfo['clouds'])+" %</strong>", style2,)) story.append(Paragraph("<strong>Clouds: "+str(searchInfo['clouds'])+" %</strong>", style2,))
story.append(Spacer(1, .70 * inch))
story.append(Paragraph("<strong>Description: </strong>", style2, ))
story.append(Spacer(1, .10 * inch))
story.append(Paragraph(searchInfo['description'], style2,))
story.append(Spacer(1, .40 * inch)) story.append(Spacer(1, .40 * inch))
# convert data to paragraph form and then add paragraphs
#story.append(Paragraph(dataToParagraph(subject1, results1), styleN))
#story.append(Spacer(1, .25 * inch))
#story.append(Paragraph(dataToParagraph(subject2, results2), styleN))
#story.append(Spacer(1, .5 * inch))
story.append(PageBreak()) story.append(PageBreak())
path, dirs, files = next(os.walk(thumbs)) path, dirs, files = next(os.walk(thumbs))
print (len(files))
for index, file in enumerate(files): for index, file in enumerate(files):
values = [] values = []
labels = [] labels = []
...@@ -516,12 +567,10 @@ def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo): ...@@ -516,12 +567,10 @@ def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo):
labels.append(data['label']) labels.append(data['label'])
path1 = thumbs + file path1 = thumbs + file
# Header
# Header
# print (width)
#########################33
im = Image(USERS_PATH + 'header.png', width=300, height=70) im = Image(USERS_PATH + 'header.png', width=300, height=70)
im.hAlign = 'CENTER' im.hAlign = 'CENTER'
...@@ -534,9 +583,8 @@ def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo): ...@@ -534,9 +583,8 @@ def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo):
story.append(Spacer(1, .5 * inch)) story.append(Spacer(1, .5 * inch))
# add barchart and legend # add barchart and legend
# drawing = myBarChart(values[:len(values) - 1], maxi, file)
drawing = myBarChart(values, maxi, file) drawing = myBarChart(values, maxi, file)
# drawing = myBarLegend(drawing, labels[:len(labels) - 1])
drawing = myBarLegend(drawing, labels) drawing = myBarLegend(drawing, labels)
drawing.hAlign = 'CENTER' drawing.hAlign = 'CENTER'
story.append(drawing) story.append(drawing)
...@@ -546,7 +594,10 @@ def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo): ...@@ -546,7 +594,10 @@ def PDFGenerator(request, ruta, reporteDir, datasets,searchInfo):
# build our document with the list of flowables we put together # build our document with the list of flowables we put together
doc = SimpleDocTemplate(ruta + reporteDir + ".pdf", pagesize=letter, topMargin=0) doc = SimpleDocTemplate(ruta + reporteDir + ".pdf", pagesize=letter, topMargin=0)
doc.build(story) doc.build(story)
pass #return HttpResponse (request.POST.get('ruta'))
return FileResponse(open(ruta + reporteDir + ".pdf", 'rb'), content_type='application/pdf')
# ----------------------------------------------------------------------------------------------------------------- # -----------------------------------------------------------------------------------------------------------------
...@@ -617,7 +668,6 @@ def wsEditTitle(request): ...@@ -617,7 +668,6 @@ def wsEditTitle(request):
purchase.name = request.GET.get("zone") purchase.name = request.GET.get("zone")
purchase.description = request.GET.get("description") purchase.description = request.GET.get("description")
purchase.save() purchase.save()
print ("hola")
return HttpResponse("hola") return HttpResponse("hola")
else: else:
raise Http404 raise Http404
users/templates/User_profile.html
View file @ 8ec19c3c
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
User Profile User Profile
</h1> </h1>
<ol class="breadcrumb"> <ol class="breadcrumb">
<li><a href="../"><i class="fa fa-home"></i> Home</a></li> <li><a href="{% url 'map' %}"><i class="fa fa-home"></i> Home</a></li>
<li class="active">User profile</li> <li class="active">User profile</li>
</ol> </ol>
</section> </section>
...@@ -356,7 +356,8 @@ ...@@ -356,7 +356,8 @@
type: 'POST', type: 'POST',
dataType: "json", dataType: "json",
data: {'title': label, "user_id": $('#user_id').val()}, data: {'title': label, "user_id": $('#user_id').val()},
url: '../../users/ws/report_table', //url: '../../users/ws/report_table',
url: '{% url "wsPurchasesPM" %}',
success: function (data) { success: function (data) {
console.log(data); console.log(data);
$('#mostrar').empty(); $('#mostrar').empty();
......
users/templates/users_aside.html
View file @ 8ec19c3c
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<br> <br>
<ul class="sidebar-menu" data-widget="tree"> <ul class="sidebar-menu" data-widget="tree">
<li> <li>
<a class="treeview " href="{{ BASE_URL }}/reports"> <a class="treeview " href="{% url 'reports' %}">
<i class="fa fa-files-o"></i> <i class="fa fa-files-o"></i>
<span>Reports</span> <span>Reports</span>
<span class="pull-right-container"> <span class="pull-right-container">
......
users/views.py
View file @ 8ec19c3c
...@@ -35,14 +35,14 @@ def Users(request): ...@@ -35,14 +35,14 @@ def Users(request):
purchases = Purchase.objects.filter(user_id=user.id) purchases = Purchase.objects.filter(user_id=user.id)
in_process = Purchase.objects.filter(user_id=user.id).exclude(progress=100) in_process = Purchase.objects.filter(user_id=user.id).exclude(progress=100)
bytes_size = 0 #bytes_size = 0
for path, directories, files in os.walk(USERS_PATH + "repsat_test_dev/" + user.email): #for path, directories, files in os.walk(USERS_PATH + "repsat_test_dev/" + user.email):
for filename in files: # for filename in files:
bytes_size += os.lstat(os.path.join(path, filename)).st_size # bytes_size += os.lstat(os.path.join(path, filename)).st_size
for directory in directories: # for directory in directories:
bytes_size += os.lstat(os.path.join(path, directory)).st_size # bytes_size += os.lstat(os.path.join(path, directory)).st_size
bytes_size += os.path.getsize(USERS_PATH + "repsat_test_dev/" + user.email) #bytes_size += os.path.getsize(USERS_PATH + "repsat_test_dev/" + user.email)
size_repsat = best_unit_size(bytes_size) #size_repsat = best_unit_size(bytes_size)
user_data.append({ user_data.append({
"user_id": user.id, "user_id": user.id,
...@@ -50,7 +50,7 @@ def Users(request): ...@@ -50,7 +50,7 @@ def Users(request):
"searches": searches.count(), "searches": searches.count(),
"purchases": purchases.count(), "purchases": purchases.count(),
"in_process": in_process.count(), "in_process": in_process.count(),
"size": size_repsat, #"size": size_repsat,
}) })
for search in Search.objects.values('search_name').filter(user_id=user.id).annotate( for search in Search.objects.values('search_name').filter(user_id=user.id).annotate(
...@@ -155,13 +155,13 @@ def User_id(request, user_id): ...@@ -155,13 +155,13 @@ def User_id(request, user_id):
in_process = Purchase.objects.filter(user_id=user.id).exclude(progress=100) in_process = Purchase.objects.filter(user_id=user.id).exclude(progress=100)
bytes_size = 0 bytes_size = 0
for path, directories, files in os.walk(USERS_PATH + "repsat_test_dev/"+user.email): #for path, directories, files in os.walk(USERS_PATH + "repsat_test_dev/"+user.email):
for filename in files: # for filename in files:
bytes_size += os.lstat(os.path.join(path, filename)).st_size # bytes_size += os.lstat(os.path.join(path, filename)).st_size
for directory in directories: # for directory in directories:
bytes_size += os.lstat(os.path.join(path, directory)).st_size # bytes_size += os.lstat(os.path.join(path, directory)).st_size
bytes_size += os.path.getsize(USERS_PATH + "repsat_test_dev/"+user.email) #bytes_size += os.path.getsize(USERS_PATH + "repsat_test_dev/"+user.email)
size_repsat = best_unit_size(bytes_size) #size_repsat = best_unit_size(bytes_size)
user_data.append({ user_data.append({
"user_id": user.id, "user_id": user.id,
...@@ -169,7 +169,7 @@ def User_id(request, user_id): ...@@ -169,7 +169,7 @@ def User_id(request, user_id):
"searches": searches.count(), "searches": searches.count(),
"purchases": purchases.count(), "purchases": purchases.count(),
"in_process": in_process.count(), "in_process": in_process.count(),
"size": size_repsat, #"size": size_repsat,
}) })
for search in Search.objects.values('search_name').filter(user_id=user.id).annotate( for search in Search.objects.values('search_name').filter(user_id=user.id).annotate(
...@@ -269,13 +269,13 @@ def wsPurchasesPM(request): ...@@ -269,13 +269,13 @@ def wsPurchasesPM(request):
table_data = [] table_data = []
data = Purchase.objects.values('user_id', 'search__endDate', 'search__startDate', 'aggreg_date', data = Purchase.objects.values('user_id', 'search__endDate', 'search__startDate', 'aggreg_date',
'search__process_id__name', 'search__search_name').filter( 'search__process_id__name', 'name').filter(
user_id=request.POST.get('user_id'), purchased=True, user_id=request.POST.get('user_id'), purchased=True,
aggreg_date__month=to_if(request.POST.get('title'))).order_by('aggreg_date') aggreg_date__month=to_if(request.POST.get('title'))).order_by('aggreg_date')
for producto in data: for producto in data:
table_data.append({ table_data.append({
"search_name": producto['search__search_name'], "search_name": producto['name'],
"process": producto['search__process_id__name'], "process": producto['search__process_id__name'],
"purchase_date": str(producto['aggreg_date'])[:10], "purchase_date": str(producto['aggreg_date'])[:10],
"startDate": str(producto['search__startDate'])[:10], "startDate": str(producto['search__startDate'])[:10],
......
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