fix timeline undefined and variables in minimap

reports/static/reports/js/minimap.js

@@ -55,16 +55,15 @@ function addImageLayer(labelDate) {
     data: {'purchase_id': purchase_id, 'report': zone, 'date': labelDate},
     url: '/reports/tiles/tileinfo',
     success: function (data) {
-      const layer_types = getSelectedCheckbox();
 
       currentDate = labelDate;
       removeImageLayers()
 
       // add layer
-      layer_types.forEach(layer_type => {
+      getSelectedCheckboxes().forEach(layer_type => {
         const xyz = new ol.layer.Tile({
           name: layer_type,
-          opacity: currentOpacity,
+          opacity: (layer_type == 'TCI') ? 1 : currentOpacity,
           source: new ol.source.XYZ({
             projection: 'EPSG:3857',
             url: '/reports/tiles/'+purchase_id+'/'+zone+'/'+layer_type+'/'+labelDate+'/{z}/{x}/{-y}.png',
@@ -74,10 +73,6 @@ function addImageLayer(labelDate) {
           })
         });
 
-        if (layer_type == 'TCI') {
-          xyz.setOpacity(1)
-        }
-
         map.addLayer(xyz);
       })
 
@@ -89,8 +84,7 @@ function addImageLayer(labelDate) {
 }
 
 function removeImageLayers() {
-  var imageLayers = map.getLayers().getArray().slice();
-  imageLayers.forEach(layer => {
+  map.getLayers().getArray().slice().forEach(layer => {
     if(layer.get('name') != 'mapbox' && layer.get('name') != 'polygon') {
       map.removeLayer(layer)
     }
@@ -98,17 +92,15 @@ function removeImageLayers() {
 }
 
 function setOpacity(value) {
-  var imageLayers = map.getLayers().getArray().slice();
-
   currentOpacity = value;
-  imageLayers.forEach(layer => {
+  map.getLayers().getArray().slice().forEach(layer => {
     if(layer.get('name') != 'mapbox' && layer.get('name') != 'polygon' && layer.get('name') != 'TCI') {
       layer.setOpacity(value)
     }
   })
 }
 
-function getSelectedCheckbox() {
+function getSelectedCheckboxes() {
   const inputs = $("input[name=layer_type]:checked");
   let values = []
 
@@ -120,10 +112,10 @@ function getSelectedCheckbox() {
   return values;
 }
 
-function getDataIndexByCheckboxId(dataset, id) {
+function getChartDataIndex(id) {
   let foundIndex;
 
-  dataset.forEach(function (data, index) {
+  myChart.config.data.datasets.forEach(function (data, index) {
     let label = 'sclcheck-' + data.label.toLowerCase().replace(' ', '-');
     if (label === id) {
       foundIndex = index;
@@ -135,8 +127,7 @@ function getDataIndexByCheckboxId(dataset, id) {
 
 $('input[name=layer_type]').on('click', function(){
   const input = $(this);
-  const dataset = myChart.config.data.datasets;
-  const index = getDataIndexByCheckboxId(dataset, input.parent().attr('id'));
+  const index = getChartDataIndex(input.parent().attr('id'));
 
   if (index > -1) {
     myChart.getDatasetMeta(index).hidden=!input.prop("checked");

reports/templates/sclData.html

@@ -120,7 +120,7 @@
     <div class="container floating-panel" style="position:absolute; 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>
-            <input class="cross-range" id="inputRange" type="range" min="1" max="{{ labels|length }}" step="1" value="1" 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;">
 
 
             <datalist class="range__list" id="number">