Secuencia de Imagenes en reportes

reports/static/reports/css/scldata.css

@@ -2,3 +2,17 @@ body
 {
 	background-color:White;
 }
+
+.next{
+	padding: 0px;
+	padding-top: 50%;
+	cursor: pointer;
+	font-size: 20px;
+}
+
+.prev{
+	padding-left: 20px;
+	padding-top: 50%;
+	cursor: pointer;
+	font-size: 20px;
+}

reports/templates/L2ASCL_data.html

@@ -5,6 +5,7 @@
     <link rel="stylesheet" href="{% static 'catalog/css/map.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'catalog/css/body.css' %}" type="text/css">
     <link rel="stylesheet" href="{% static 'catalog/css/modal1.css' %}" type="text/css">
+    <link rel="stylesheet" href="{% static 'reports/css/scldata.css' %}" type="text/css">
     <!--  <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/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">
 
@@ -275,7 +276,7 @@
                     <!-- DONUT CHART -->
                     <div class="box box-danger">
                         <div class="box-header with-border">
-                            <h3 class="box-title" id="titleMap">{{dafaultLabel}}</h3>
+                            <h3 class="box-title" id="titleMap">{{dafaultLabel}} - {{defaultDataSet}}</h3>
 
                             <div class="box-tools pull-right">
                                 <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
@@ -286,10 +287,20 @@
                             </div>
                         </div>
                         <div class="box-body">
+                            <div class="row">
+                                <div class="col-lg-1 prev" style="display: none">
+                                    <i class="glyphicon glyphicon-chevron-left" onclick="prev()"></i>
+                                </div>
+                                <div class="col-lg-10 col-lg-offset-1" id="showImage">
                                     <img onclick="window.open(this.src)" class="img-responsive" id="satImage" width="400"
                                         height="400px" src = "../../static/reports/tmpImages/repsat_test_dev/{{IMAGE_PATH}}/{{dafaultLabel}}_TCI_60m.jpg"
                                         style="margin-left: auto; margin-right: auto; display: block;">
                                 </div>
+                                <div class="col-lg-1 next" style="display: none">
+                                    <i class="glyphicon glyphicon-chevron-right" onclick="next()"></i>
+                                </div>
+                            </div>
+                        </div>
                         <!-- /.box-body -->
                     </div>
                     <!-- /.box -->
@@ -366,23 +377,63 @@
         //ctx.canvas.width = 256;
         //ctx.canvas.height = 512;
         var myChart = new Chart(ctx, config);
+        var activePoints = [];
+        var imageNumber = 0;
         //var myChart;
 
         // mostrar imagen al dar click en los puntos
         document.getElementById("myChart").onclick = function (evt) {
-            var activePoints = myChart.getElementsAtEvent(evt);
-            var firstPoint = activePoints[0];
+            $("#showImage").removeClass('col-lg-offset-1');
+            $(".next").show()
+            $(".prev").show()
+            activePoints = myChart.getElementsAtEvent(evt);
+            var activePoint  = myChart.getElementAtEvent(evt);
+            var firstPoint = activePoint[0];
 
             if (!firstPoint) return;
+            activePoints.forEach(function(value,index){
+                if(value==firstPoint){
+                    imageNumber=index;
+                }
+            });
 
-            label = myChart.data.labels[firstPoint._index];
+            updateImage(firstPoint);
             //alert("{{ IMAGE_PATH }}"+label+"_TCI_60m.jpg");
             //document.getElementById("satImage").src = "{{ IMAGE_PATH }}"+label+"_TCI_60m.jpg";
-            document.getElementById("titleMap").innerHTML = label;
-            document.getElementById("satImage").src = "../../static/reports/tmpImages/repsat_test_dev/{{IMAGE_PATH}}/" + label + "_TCI_60m.jpg"
         };
 
         // cambiar el tipo de gráfica
+        function next(){
+            if(imageNumber==(activePoints.length-1)){
+                imageNumber=0;
+            }else {
+                imageNumber++;
+            }
+            var imagePoint = activePoints[imageNumber];
+
+            if (!imagePoint) return;
+            updateImage(imagePoint);
+        }
+
+        function prev() {
+            if (imageNumber == 0) {
+                imageNumber = activePoints.length - 1;
+            } else {
+                imageNumber--;
+            }
+
+            var imagePoint = activePoints[imageNumber];
+
+            if (!imagePoint) return;
+            updateImage(imagePoint);
+        }
+
+        function updateImage(imagePoint){
+            label = myChart.data.labels[imagePoint._index];
+            datasets = myChart.data.datasets[imagePoint._datasetIndex].label;
+            document.getElementById("titleMap").innerHTML = label + " - " + datasets;
+            document.getElementById("satImage").src = "../../static/reports/tmpImages/repsat_test_dev/{{IMAGE_PATH}}/" + label + "_TCI_60m.jpg"
+        }
 
         function change(newType) {
             var ctx = document.getElementById("myChart").getContext("2d");

reports/views.py

@@ -68,12 +68,13 @@ def report_L2ASCL(request, report,purchase_id):
 
         graphData['data'] = data
         defaultLabel = graphData['data']['labels'][0]
+        defaultDataset = graphData['data']['datasets'][0]['label']
         # print(settings.BASE_URL)
         #		graphData['options']['responsive']=True
         #		graphData['options']['maintainAspectRatio']=False
         # print(json.dumps(graphData).encode("utf-8"))
 
-    return render(request, 'L2ASCL_data.html', {"graphData": json.dumps(graphData), "report_name": report, "IMAGE_PATH": image_path, 'dafaultLabel': defaultLabel})
+    return render(request, 'L2ASCL_data.html', {"graphData": json.dumps(graphData), "report_name": report, "IMAGE_PATH": image_path, 'dafaultLabel': defaultLabel, 'defaultDataSet': defaultDataset})
 
     # -------------------------------------------------------------------------------def Reports(request):