Get initial sql values back from file which is database

2 files changed, 32 insertions, 0 deletions

diff --git a/app/assets/javascripts/blob/balsamiq/index.js b/app/assets/javascripts/blob/balsamiq/index.js
new file mode 100644
index 00000000000..04201366897
--- /dev/null
+++ b/app/assets/javascripts/blob/balsamiq/index.js
@@ -0,0 +1,27 @@
+import Vue from 'vue';
+import sqljs from 'sql.js';
+
+export default class BalsamiqViewer {
+  constructor(el) {
+    this.el = el;
+    this.loadSqlFile();
+  }
+  
+  
+
+  loadSqlFile() {
+    var xhr = new XMLHttpRequest();
+    console.log(this.el)
+    xhr.open('GET', this.el.dataset.endpoint, true);
+    xhr.responseType = 'arraybuffer';
+
+    xhr.onload = function(e) {
+      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], ...]}]
+    };
+    xhr.send();
+  }
+}
\ No newline at end of file
diff --git a/app/assets/javascripts/blob/balsamiq_viewer.js b/app/assets/javascripts/blob/balsamiq_viewer.js
new file mode 100644
index 00000000000..b1493398099
--- /dev/null
+++ b/app/assets/javascripts/blob/balsamiq_viewer.js
@@ -0,0 +1,5 @@
+import BalsamiqViewer from './balsamiq';
+
+document.addEventListener('DOMContentLoaded', () => {
+  new BalsamiqViewer(document.getElementById('js-balsamiq-viewer'));
+});
\ No newline at end of file