sync graph-checkbox

reports/static/reports/js/minimap.js

@@ -78,7 +78,7 @@ function addImageLayer(labelDate) {
 
       let currentZoom = map.getView().getZoom();
       // fit and zoom
-      map.getView().fit(ol.proj.transformExtent(data.boundingBox, 'EPSG:4326', 'EPSG:3857'))
+      // map.getView().fit(ol.proj.transformExtent(data.boundingBox, 'EPSG:4326', 'EPSG:3857'))
       map.getView().setZoom(currentZoom);
       map.getView().setMinZoom(data.zoom.min);
       map.getView().setMaxZoom(data.zoom.max);
@@ -101,7 +101,6 @@ function setOpacity(value) {
   currentOpacity = value;
   imageLayers.forEach(layer => {
     if(layer.get('name') != 'mapbox' && layer.get('name') != 'polygon' && layer.get('name') != 'TCI') {
-      console.log(layer.get('name'), layer);
       layer.setOpacity(value)
     }
   })
@@ -119,6 +118,28 @@ function getSelectedCheckbox() {
   return values;
 }
 
-$("input[name=layer_type]").on( "click", () => {
+function getDataIndexByCheckboxId(dataset, id) {
+  let foundIndex;
+
+  dataset.forEach(function (data, index) {
+    let label = 'sclcheck-' + data.label.toLowerCase().replace(' ', '-');
+    if (label === id) {
+      foundIndex = index;
+    }
+  })
+
+  return foundIndex;
+}
+
+$('input[name=layer_type]').on('click', function(){
+  const input = $(this);
+  const dataset = myChart.config.data.datasets;
+  const index = getDataIndexByCheckboxId(dataset, input.parent().attr('id'));
+
+  if (index > -1) {
+    myChart.getDatasetMeta(index).hidden=!input.prop("checked");
+    myChart.update()
+  }
+
   addImageLayer(currentDate);
 });

reports/static/reports/js/reportImg.js

@@ -3,6 +3,7 @@ var ctx = document.getElementById('myChart').getContext('2d');
 //ctx.canvas.width = 256;
 //ctx.canvas.height = 512;
 var myChart = new Chart(ctx, config);
+
 //var activePoints = [];
 var activePoints = config.data.labels;
 var imageNumber = 0;
@@ -18,15 +19,9 @@ config.data.datasets.forEach(function (layer) {
 // mostrar imagen al dar click en los puntos
 document.getElementById("myChart").onclick = function (evt) {
     stop();
-    console.log("on click")
-
-    console.log("evento: ")
-    console.log(evt)
     // activePoints = myChart.getElementsAtEvent(evt);
     var activePoint = myChart.getElementAtEvent(evt);
-    console.log("activePoint: ")
-    console.log(activePoint)
-    console.log(activePoint.length)
+
     if(activePoint.length>0){
 
         var firstPoint = activePoint[0];

reports/templates/aside.html

@@ -175,13 +175,13 @@
                       TCI
                     </label>
                   </div>
-                  <!-- <div class="form-check submenu" style="display:none" id="sclcheck-no-data">
+                  <div class="form-check submenu" style="display:none" id="sclcheck-no-data">
                     <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_0">
                     <label class="form-check-label">
                     <i class="fa fa-circle" aria-hidden="true" style="color: #383838"></i>
                     &nbspSCL No Data
                     </label>
-                  </div> -->
+                  </div>
                   <div class="form-check submenu" style="display:none" id="sclcheck-saturated">
                     <input class="form-check-input" type="checkbox" name="layer_type" value="SCL_1">
                     <label class="form-check-label">

reports/templates/sclData.html

@@ -325,20 +325,25 @@
     <script>
         var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
 
+
         var newLegendClickHandler = function (e, legendItem) {
             var index = legendItem.datasetIndex;
-            //console.log(e)
-            console.log(legendItem.datasetIndex)
-            console.log(legendItem.text)
             var ch = this.chart;
             var meta = ch.getDatasetMeta(index);
-            console.log(meta.hidden)
-            var layer = legendItem.text.toLowerCase();
-            //layer = layer.replace(" ", "_");
-            layer = layer.replace(/\s/g, '_');  //reeemplaza los espacios con guion bajo
-            console.log(layer)
-
+            var layer = legendItem.text.toLowerCase().replace(/\s/g, '-');
+            let checkbox_id = '#sclcheck-'+layer;
             var activePoint = ch.getElementAtEvent(e);
+
+
+            // isDatasetVisible return the opposite status?
+            // change checkbox in imagelayer
+
+            $(checkbox_id+" :input").prop("checked", !ch.isDatasetVisible(index));
+            addImageLayer(currentDate);
+            
+            // myChart.config.data.datasets
+            // myChart.getDatasetMeta(4).hidden=true
+
             //console.log(document.getElementById("titleMap").textContent)
             // var label = document.getElementById("titleMap").textContent;  //obtiene la fecha que se está viendo
             // label = label.replace(/\//g,'');   // reemplaza los diagonales por nada
@@ -370,7 +375,8 @@
 
           datasets.forEach(function(data) {
             let checkbox_id = '#sclcheck-'+data.label.toLowerCase().replace(' ','-');
-            $(checkbox_id).css("display",'');
+            $(checkbox_id).show();
+            $(checkbox_id+" :input").prop("checked", false);
           });
         }
 

reports/views.py

@@ -423,7 +423,7 @@ def ProcessChartData(path):
             item['label'] = labelNames[int(l)]
 
             # item['fill'] = "false"
-            if l == "0":
+            # if l == "0":
             item['hidden'] = "true"
             item['data'] = [v[l] * 60 * 60 / 1000000. if (l in v) else 0 for k, v in sorted(json_data.items())]
             item['backgroundColor'] = colors[int(l)]