Skip to content

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

slider

parent ee0d4969
Hide whitespace changes
Inline Side-by-side
Showing with 185 additions and 79 deletions
reports/static/reports/css/scldata.css
View file @ 4265ae9b
body
{
background-color:White;
body {
background-color: White;
}
.next{
padding: 0px;
padding-top: 50%;
cursor: pointer;
font-size: 20px;
.next {
padding: 0px;
padding-top: 50%;
cursor: pointer;
font-size: 20px;
}
.prev{
padding-left: 20px;
padding-top: 50%;
cursor: pointer;
font-size: 20px;
.prev {
padding-left: 20px;
padding-top: 50%;
cursor: pointer;
font-size: 20px;
}
.submenu{
padding-right: 140px !important;
.submenu {
padding-right: 140px !important;
}
.img-comp-container {
position: relative;
height: 550px; /*should be the same height as the images*/
position: relative;
height: 550px; /*should be the same height as the images*/
}
.listImg{
z-index: 4;
.listImg {
z-index: 4;
}
.listImg ul{
list-style: none;
padding: 0px;
margin: 0px;
cursor: pointer;
.listImg ul {
list-style: none;
padding: 0px;
margin: 0px;
cursor: pointer;
}
.listImg ul li:hover{
background: #87CEFA;
.listImg ul li:hover {
background: #87CEFA;
}
.listImg ul .active{
color:red
.listImg ul .active {
color: red
}
.list {
max-height: 220px;
overflow: auto;
max-height: 220px;
overflow: auto;
}
.img-comp-img {
position: absolute;
width: auto;
height: auto;
overflow:hidden;
z-index: 2;
position: absolute;
width: auto;
height: auto;
overflow: hidden;
z-index: 2;
}
.img-comp-img img {
display: block;
vertical-align: middle;
display: block;
vertical-align: middle;
}
.img-comp-slider {
position: absolute;
z-index:9;
cursor: ew-resize;
/*set the appearance of the slider:*/
width: 40px;
height: 40px;
background-color: #2196F3;
opacity: 0.7;
border-radius: 50%;
position: absolute;
z-index: 9;
cursor: ew-resize;
/*set the appearance of the slider:*/
width: 40px;
height: 40px;
background-color: #2196F3;
opacity: 0.7;
border-radius: 50%;
}
.draggable {
padding: 0px;
position: absolute;
z-index: -1;
text-align: center;
/* border: 1px solid #d3d3d3; */
opacity: .5;
padding: 0px;
position: absolute;
z-index: -1;
text-align: center;
/* border: 1px solid #d3d3d3; */
opacity: .5;
}
.draggable:hover {
opacity: 1;
opacity: 1;
}
.title{
/*position: absolute; */
top: 2%;
left: 6%;
/*width:100%;
height: 100%; */
.title {
/*position: absolute; */
top: 2%;
left: 6%;
/*width:100%;
height: 100%; */
}
.title .info {
opacity: 0.5;
opacity: 0.5;
}
.title .info:hover{
opacity: 1;
.title .info:hover {
opacity: 1;
}
#minimap {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: fixed;
}
#reportPage {
height: 940px !important;
}
#rangecontrol:hover > #slidertitle {
display: block;
}
.range-control {
position: relative;
}
#minimap{
width:100%;
height:100%;
margin:0;
padding:0;
position:fixed;
input[type=range] {
display: block;
width: 100%;
margin: 0;
-webkit-appearance: none;
outline: none;
}
#reportPage{
height: 940px !important;
input[type=range]::-webkit-slider-runnable-track {
position: relative;
height: 12px;
border: 1px solid #b2b2b2;
border-radius: 5px;
background-color: #e2e2e2;
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}
input[type=range]::-webkit-slider-thumb {
position: relative;
top: 0px;
width: 10px;
height: 10px;
border: 1px solid #999;
-webkit-appearance: none;
background-color: green;
box-shadow: inset 0 -1px 2px 0 rgba(0, 0, 0, 0.25);
border-radius: 100%;
cursor: pointer;
}
\ No newline at end of file
reports/templates/sclData.html
View file @ 4265ae9b
......@@ -5,7 +5,8 @@
<link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
<link rel="stylesheet" href="{% static 'reports/css/scldata.css' %}" type="text/css">
<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" type="text/css">
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css"
type="text/css">
<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"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
......@@ -116,7 +117,29 @@
<!-- Content Wrapper. Contains page content -->
<!-- Main content -->
<div id="reportPage" class="wrapper" style="background-color: #ecf0f5">
<div id="minimap"></div>
<div class="container floating-panel"
style="position:absolute;bottom: 40px;width: 500px;z-index: 1000">
<div class="range-control" id="rangecontrol">
<span id="tooltiptext">No Data</span>
<input id="inputRange" type="range" min="0" max="{{ labels|length }}"
step="1" value="0"
data-thumbwidth="20">
<datalist class="range__list" id="number">
<option>No Data</option>
{% for label in labels %}
<option class="range__opt"
value="{{ label }}">{{ label|slice:"6:8" }}/{{ label|slice:"4:6" }}/{{ label|slice:"0:4" }}</option>
{% endfor %}
</datalist>
</div>
</div>
<div id="minimap"></div>
<section class="content">
<div class="row col-lg-11 title">
......@@ -234,6 +257,52 @@
<!-- /.content -->
{% endblock %}
{% block scripts %}
<script id="rendered-js">
$('input[type="range"]').on('input', function () {
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").append("Map Date: " + fecha);
$("#tooltiptext").empty();
$("#tooltiptext").append(fecha);
});
var slider2 = document.getElementById("inputRange");
var sliderOffsetX = slider2.getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
var sliderOffsetY = slider2.getBoundingClientRect().top - document.documentElement.getBoundingClientRect().top;
var sliderWidth = slider2.offsetWidth - 1;
slider2.addEventListener('mousemove', function (event) {
var currentMouseXPos = (event.clientX + window.pageXOffset) - sliderOffsetX;
var sliderValAtPos = Math.round(currentMouseXPos / sliderWidth * {{ labels|length }}+1);
value = sliderValAtPos - 1;
var fecha = $("option:eq(" + value + ")").text();
var valor = $("option:eq(" + value + ")").val();
$("#tooltiptext").empty();
$("#tooltiptext").css({"margin-left": currentMouseXPos + 'px', "margin-top": sliderOffsetY + 'px'});
$("#tooltiptext").append(fecha);
});
</script>
<!-- page script -->
<script>
var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
......@@ -248,7 +317,7 @@
console.log(meta.hidden)
var layer = legendItem.text.toLowerCase();
//layer = layer.replace(" ", "_");
layer = layer.replace(/\s/g,'_'); //reeemplaza los espacios con guion bajo
layer = layer.replace(/\s/g, '_'); //reeemplaza los espacios con guion bajo
console.log(layer)
var activePoint = ch.getElementAtEvent(e);
......@@ -267,10 +336,10 @@
// document.getElementById("scl_"+layer).src = ""
// }
//if (index > 1) {
// Do the original logic
//console.log("wooooo")
//defaultLegendClickHandler(e, legendItem);
defaultLegendClickHandler.call(this, e, legendItem);
// Do the original logic
//console.log("wooooo")
//defaultLegendClickHandler(e, legendItem);
defaultLegendClickHandler.call(this, e, legendItem);
//} else {
// console.log("holaaaa")
//}
......@@ -287,7 +356,7 @@
let productLevel = "{{ productLevel }}";
let startDate = "{{ startDate }}";
let endDate = "{{ endDate }}";
let clouds= "{{ clouds }}";
let clouds = "{{ clouds }}";
let oldLabel = "{{defaultDataSet}}";
let labels = {{labels}};
var config = {{graphData}};
......@@ -297,7 +366,7 @@
maintainAspectRatio: false,
// scales: { xAxes: [{ stacked: true }], yAxes: [{ stacked: true }] },
legend: {
display:true,
display: true,
onClick: newLegendClickHandler,
}
};
......
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