Add images to visualization

OA.html

@@ -122,10 +122,10 @@
 											<button type="button" class="nav-link active" data-toggle="tab" onClick="show_OA()">Opera</button>
 										</li>
 										<li class="nav-item infoChoice">
-											<button type="button" class="nav-link" data-toggle="tab" onClick="show_INV()">Scheda Storica</button>
+											<button id="btn_schedastorica" type="button" class="nav-link" data-toggle="tab" onClick="show_INV()">Scheda Storica</button>
 										</li>
 										<li class="nav-item infoChoice">
-											<button type="button" class="nav-link" data-toggle="tab" onClick="show_CAT()">Catalogo Marchini</button>
+											<button id="btn_catalogo" type="button" class="nav-link" data-toggle="tab" onClick="show_CAT()">Catalogo Marchini</button>
 										</li>
 									</ul>
 					
@@ -251,7 +251,7 @@
 													<div class="col-sm-4">
 														<span class="label">Identificatore:</span>
 													</div>
-													<div class="col" id="catalog_id"></div>
+													<div class="col" id="catalog_id">BIB00031</div>
 												</div>
 												<div class="row mb-2" id="CAT_CIT">
 													<div class="col-sm-4">
@@ -300,19 +300,16 @@
 											<h2 id="OA_images_titolo">Immagine <span id="img_title">Opera</span></h2>
 										</div>
 
-										<div class="row border-grey center">
+										<div id="images_container" class="row border-grey center">
 											<div class="col-3" id="image_min">
-												<div class="row" id="image_artwork_min">
-													<div class="col">
-														<img class="viewImage" src="img/mpp_img/00000170e848f4658f120b2100c1002b006a007b.jpeg" onclick="expandImg(this);" />
+												<div class="row">
+													<div id="image_artwork_min" class="col">
+
 													</div>
 												</div>
-												<div class="row center" id="image_scheda_min" style="display:none;">
-													<div class="col">
-														<img class="viewImage" src="img/mpp_img/00000171bb65f52199367c7600c1002b006a007b-1.jpg" onclick="expandImg(this);" />
-													</div>
-													<div class="col">
-														<img class="viewImage" src="img/mpp_img/0000017351b4ae0d11b0ff5100c1002b006a007b-1.jpg" onclick="expandImg(this);" />
+												<div class="row center" style="display:none;">
+													<div id="image_scheda_min" class="col">
+
 													</div>
 												</div>
 												<div class="row center" id="image_catalog_min" style="display:none;">
@@ -322,7 +319,7 @@
 											<div class="col" id="image_body">
 
 												<div id="image_artwork">
-													<img id="expandedImg" class="viewImage" src="img/mpp_img/00000170e848f4658f120b2100c1002b006a007b.jpeg" />
+													<img id="expandedImg" class="viewImage" />
 												</div>
 												
 											</div>

css/OA.css

@@ -16,4 +16,14 @@
 .border-grey {
     border: 1px solid #dee2e6;
     padding: 16px 20px;
+}
+
+#images_container {
+    max-height: 900px;
+    overflow: hidden;
+}
+
+#image_min {
+    max-height: 900px;
+    overflow: auto;
 }

js/OA.js

@@ -17,6 +17,9 @@ doJsonQuery(queryPic).done(function(data) { handle_Picture(data); });
 querySc = prefixes + (queryManager['querySchedaOpera']['querySchedeStoriche']).replace('{URI}', link);
 doJsonQuery(querySc).done(function(data) { handle_SchedeStoriche(data); });
 
+var img_pic = "";
+var img_cat = "";
+var img_sc = "";
 
 function handle_OAdata(json) {
 
@@ -152,6 +155,7 @@ function handle_Picture(json) {
   console.log(json['results']['bindings']);
 
   var picture = "";
+  const tavole = [];
 
   $.each(
       json['results']['bindings'],
@@ -159,14 +163,37 @@ function handle_Picture(json) {
         var src_picture = value['picture']['value'];
         var tipo = "";  
 
+        if (value.hasOwnProperty('type')) {
+          tipo = value['type']['value'];
+        }
+
+        let tv = [src_picture, tipo];
+        tavole.push(tv);
+
         src_picture = value['picture']['value'];
-        picture += '<div class="col"> \
+        picture += '<div class="row"> \
                            <img class="viewImage" src="img/mpp_img/' + src_picture + '" onclick="expandImg(this);" /> \
                     </div>';
+
         
       });
 
+      var front_pic = "";
+
+      if (tavole.length > 1) {
+        for (i in tavole) {
+            if (tavole[i][1] == "Tavola d'insieme") {
+              front_pic = tavole[i][0];
+            }
+        }
+      } else {
+        front_pic = tavole[0][0];
+      }
+
+      img_pic = "img/mpp_img/" + front_pic;
+
       document.getElementById("image_artwork_min").innerHTML = picture;
+      document.getElementById("expandedImg").src = "img/mpp_img/" + front_pic;
 
 }
 
@@ -287,8 +314,8 @@ function handle_Bibliography(json) {
             cat = cc.split(", ");
             for (i in cat) {
                 var marchini = cat[i].replace(".jpg", " (1).jpg");
-                document.getElementById("expandedImg").src = "img/MPP_marchini_stampa/" + marchini;
-                catImg += '<div class="col"> \
+                img_cat = "img/MPP_marchini_stampa/" + marchini;
+                catImg += '<div class="row"> \
                               <img class="viewImage" src="img/MPP_marchini_stampa/' + marchini + '" onclick="expandImg(this);" /> \
                           </div>';
             }
@@ -311,7 +338,37 @@ function handle_Bibliography(json) {
 
       document.getElementById("bibliography").innerHTML = Biblio;
       document.getElementById("catalog_description").innerHTML = bibCit;
-      document.getElementById("image_catalog_min").innerHTML = catImg;
+      if (catImg == "") {
+        $("#btn_catalogo").css("display", "none");
+      } else {
+        document.getElementById("image_catalog_min").innerHTML = catImg;
+      }
+  
+}
+
+function handle_SchedeStoriche(json) {
+
+  console.log(json['results']['bindings']);
+
+  var schede = "";
+
+  $.each(
+      json['results']['bindings'],
+      function (index, value) {
+        var scheda = value['scheda']['value'];
+
+        img_sc = "img/mpp_img/" + scheda;
+        schede += '<div class="row"> \
+                      <img class="viewImage" src="img/mpp_img/' + scheda + '" onclick="expandImg(this);" /> \
+                    </div>';
+        
+      });
+
+  if (schede == "") {
+    $("#btn_schedastorica").css("display", "none");
+  } else {
+    document.getElementById("image_scheda_min").innerHTML = schede;
+  }
   
 }
 
@@ -323,7 +380,7 @@ function show_OA(){
   document.getElementById("image_catalog_min").style.display = "none";
   document.getElementById("image_scheda_min").style.display = "none";
   document.getElementById("img_title").innerHTML = "Opera";
-  document.getElementById("expandedImg").src = "img/mpp_img/00000170e848f4658f120b2100c1002b006a007b.jpeg";
+  document.getElementById("expandedImg").src = img_pic;
 }
 
 function show_CAT(){
@@ -334,16 +391,16 @@ function show_CAT(){
   document.getElementById("image_catalog_min").style.display = "block";
   document.getElementById("image_scheda_min").style.display = "none";
   document.getElementById("img_title").innerHTML = "Catalogo";
+  document.getElementById("expandedImg").src = img_cat;
 }
 
 function show_INV(){
   document.getElementById("OA_info").style.display = "none";
   document.getElementById("catalogo_info").style.display = "none";
   document.getElementById("scheda_info").style.display = "block";
-	
   document.getElementById("image_artwork_min").style.display = "none";
   document.getElementById("image_catalog_min").style.display = "none";
   document.getElementById("image_scheda_min").style.display = "block";
   document.getElementById("img_title").innerHTML = "Scheda Storica";
-  document.getElementById("expandedImg").src = "img/mpp_img/00000171bb65f52199367c7600c1002b006a007b-1.jpg";
+  document.getElementById("expandedImg").src = img_sc;
 }