descripcion reportes

reports/templates/sclData.html

@@ -121,7 +121,8 @@
     <!-- Main content -->
     <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">
-            <span id="tooltiptext">{{ labels|first|slice:"6:8" }}/{{ labels|first|slice:"4:6" }}/{{ labels|first|slice:"0:4" }}</span>
+        <div id="rangecontrol2"></div>
+
             <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;">
 
 
@@ -308,6 +309,13 @@
             let fecha = $("option:eq(" + controlVal + ")").text();
             let valor = $("option:eq(" + controlVal + ")").val();
 
+            var slider3 = $("#inputRange")[0];
+            var sliderPos = slider3.value / slider3.max;
+
+            var pixelPostion = slider3.clientWidth * sliderPos;
+            //this is your pixel value
+            console.log(pixelPostion);
+
             addImageLayer({
               layerDate: valor
             });
@@ -316,12 +324,18 @@
             $("#maptitle").append("Map Date: " + fecha);
             $("#tooltiptext").empty();
             $("#tooltiptext").append(fecha);
-        });
+            console.log(position);
+            $("#rangecontrol2").empty();
+            $("#rangecontrol2").append('<span class="arrow_box" id="tooltiptext">'+fecha+'</span>');
+            $('.arrow_box').css({'left':Math.round(pixelPostion-35) + 'px'})
+
 
+        });
+/*
         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;
+        var sliderOffsetX = slider2.getBoundingClientRect().left ;//- document.documentElement.getBoundingClientRect().left;
+        var sliderOffsetY = slider2.getBoundingClientRect().top ;//- document.documentElement.getBoundingClientRect().top;
+        var sliderWidth = slider2.offsetWidth ;
 
         slider2.addEventListener('mousemove', function (event) {
             var currentMouseXPos = (event.clientX + window.pageXOffset) - sliderOffsetX;
@@ -330,10 +344,10 @@
             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);
-        });
+            //$("#tooltiptext").empty();
+            //$("#tooltiptext").css({"margin-left": currentMouseXPos + 'px', "margin-top": sliderOffsetY + 'px'});
+            //$("#tooltiptext").append(fecha);
+        });*/
     </script>
 
     <!-- page script -->