Show thumbnails and their titles.

1 files changed, 18 insertions, 4 deletions

diff --git a/app/assets/javascripts/blob/balsamiq/index.js b/app/assets/javascripts/blob/balsamiq/index.js
index 04201366897..61f4631b423 100644
--- a/app/assets/javascripts/blob/balsamiq/index.js
+++ b/app/assets/javascripts/blob/balsamiq/index.js
@@ -8,19 +8,33 @@ export default class BalsamiqViewer {
   }
   
   
-
   loadSqlFile() {
     var xhr = new XMLHttpRequest();
-    console.log(this.el)
+    var self = this;
     xhr.open('GET', this.el.dataset.endpoint, true);
     xhr.responseType = 'arraybuffer';
 
     xhr.onload = function(e) {
+      var list = document.createElement('ul');
       var uInt8Array = new Uint8Array(this.response);
       var db = new SQL.Database(uInt8Array);
       var contents = db.exec("SELECT * FROM thumbnails");
-      console.log(contents)
-      // contents is now [{columns:['col1','col2',...], values:[[first row], [second row], ...]}]
+      var previews = contents[0].values.map((i)=>{return JSON.parse(i[1])});
+      previews.forEach((prev) => {
+        var li = document.createElement('li');
+        var title = db.exec(`select * from resources where id = '${prev.resourceID}'`)
+        var template = 
+        `<div class="panel panel-default">
+            <div class="panel-heading">${JSON.parse(title[0].values[0][2]).name}</div>
+            <div class="panel-body">
+              <img class="img-thumbnail" src="data:image/png;base64,${prev.image}"/>
+            </div>
+          </div>`;
+        li.innerHTML = template;
+        list.appendChild(li);
+      });
+      list.classList += 'list-inline';
+      self.el.appendChild(list);
     };
     xhr.send();
   }