new view in images of reports

reports/static/reports/css/scldata.css

@@ -26,11 +26,36 @@ body
 	height: 550px; /*should be the same height as the images*/
 }
 
+.listImg{
+	z-index: 4;
+}
+
+.listImg ul{
+	list-style: none;
+	padding: 0px;
+	margin: 0px;
+	cursor: pointer;
+}
+
+.listImg ul li:hover{
+	background: #87CEFA;
+}
+
+.listImg ul .active{
+	color:red
+}
+
+.list {
+	max-height: 220px;
+	overflow: auto;
+}
+
 .img-comp-img {
 	position: absolute;
 	width: auto;
 	height: auto;
 	overflow:hidden;
+	z-index: 2;
 }
 
 .img-comp-img img {

reports/static/reports/js/reportImg.js

@@ -13,9 +13,6 @@ var reportImg = activePoints[0];
 
 // mostrar imagen al dar click en los puntos
 document.getElementById("myChart").onclick = function (evt) {
-    if (slider != false) {
-        deleteComparisons()
-    }
     stop();
     console.log("on click")
     
@@ -44,8 +41,6 @@ document.getElementById("myChart").onclick = function (evt) {
         });
 
         var imagePoint = activePoints[imageNumber];
-        oldLabel = label.slice(0, 4) + "/" + label.slice(4, 6) + "/" + label.slice(6);
-        document.getElementById("satImageSecond").src = "../../static/reports/tmpImages/repsat_test_dev/" + image_path + label + "_TCI_60m.jpg"
         updateImage(imagePoint);
         //updateImage(firstPoint);
         //alert("{{ IMAGE_PATH }}"+label+"_TCI_60m.jpg");
@@ -62,10 +57,6 @@ function play() {
     // $(".next").hide();
     // $(".prev").hide();
     // $("#showImage").addClass('col-lg-offset-1');    
-    if (slider == false) {
-        document.getElementById("titleMap").innerHTML = oldLabel + " vs " + oldLabel;
-        initComparisons()
-    }
     playImages = setInterval(function () { next(); }, 4000);
 }
 
@@ -128,11 +119,8 @@ function updateImage(imagePoint) {
     label = imagePoint;
     reportImg = imagePoint;
     titleLabel = label.slice(0, 4) + "/" + label.slice(4, 6) + "/" + label.slice(6);
-    if (slider != false) {
-        document.getElementById("titleMap").innerHTML = oldLabel + " vs " + titleLabel;
-    }else{
     document.getElementById("titleMap").innerHTML = titleLabel;
-    }
+    document.getElementById("titleSCL").innerHTML = titleLabel
     
     document.getElementById("satImage").src = "../../static/reports/tmpImages/repsat_test_dev/" + image_path + label + "_TCI_60m.jpg"
     
@@ -174,11 +162,11 @@ function change(newType) {
 
 let  img, imgWidth=0, slider=false, clicked=0;
 function initComparisons() {
-    $("#showSecondImage").show()
-    setTimeout(function() {
+    // $("#showSecondImage").show()
+    // setTimeout(function() {
         img = document.getElementsByClassName("img-comp-overlay")[0];
         compareImages(img);
-    });
+    //});
     // setTimeout(function(){
     //     img = document.getElementsByClassName("img-comp-overlay")[0];
     //     compareImages(img);
@@ -194,7 +182,7 @@ function compareImages(img) {
     img.style.width = ((imgWidth / 2)) + 15 + "px";
     /*create slider:*/
     slider = document.createElement("DIV");
-    slider.setAttribute("class", "img-comp-slider col-lg-offset-1 col-md-offset-1 col-xs-offset-2");
+    slider.setAttribute("class", "img-comp-slider col-lg-offset-2 col-md-offset-2 col-xs-offset-2");
     /*insert slider*/
     img.parentElement.insertBefore(slider, img);
     /*position the slider in the middle:*/
@@ -265,9 +253,44 @@ function deleteComparisons(){
     window.removeEventListener("mousemove", slideMove);
     window.removeEventListener("touchmove", slideMove);
     $(".img-comp-slider").remove();
-    $("#showSecondImage").hide()
     slider= false;
 }
 
 //deleteComparisons();
 //initComparisons();
+
+function selectImage1(date, element) {
+    $("#imageListFirst li").removeClass("active");
+    element.classList.add("active");
+    let label = date.toString();
+    label = label.slice(0, 4) + "/" + label.slice(4, 6) + "/" + label.slice(6);
+    document.getElementById("titleImageFirst").innerHTML = label;
+    document.getElementById("satImageFirst").src = "../../static/reports/tmpImages/repsat_test_dev/" + image_path + date + "_TCI_60m.jpg"
+}
+
+function selectImage2(date,element) {
+    $("#imageListSecond li").removeClass("active");
+    element.classList.add("active");
+    let label = date.toString();
+    label = label.slice(0, 4) + "/" + label.slice(4, 6) + "/" + label.slice(6);
+    document.getElementById("titleImageSecond").innerHTML = label;
+    document.getElementById("satImageSecond").src = "../../static/reports/tmpImages/repsat_test_dev/" + image_path + date + "_TCI_60m.jpg"
+}
+
+$('.nav-tabs a').on('shown.bs.tab', function (evt) {
+    let tab = $(evt.target).text();
+    if(tab == "Comparison"){
+        initComparisons()
+    }
+});
+
+$('.nav-tabs a').on('hide.bs.tab', function (evt) {
+    let tab = $(evt.target).text();
+    if (tab == "Comparison") {
+        deleteComparisons();
+    }
+    if (tab == "Images") {
+        stop();
+    }
+});
+

reports/views.py

@@ -123,7 +123,7 @@ def report_L2ASCL(request, report, purchase_id):
                                                 "productLevel": dataProduct['productLevel'], "IMAGE_PATH": image_path,
                                                 "SCL_PATH": SCL_path, 'dafaultLabel': defaultLabel,
                                                 'defaultDataSet': defaultDataset, "folders": folders,
-                                                "zone": reporteDir, "purchaseID": purchase_id})
+                                                "zone": reporteDir, "purchaseID": purchase_id, "labels": graphData['data']['labels']})
 
 
     # -------------------------------------------------------------------------------def Reports(request):