Basic SQL language option working

Author: Brad Miller

runestone/activecode/activecode.py

@@ -50,6 +50,7 @@ def setup(app):
     app.add_autoversioned_javascript('activecode.js')
     app.add_autoversioned_javascript('clike.js')
     app.add_autoversioned_javascript('timed_activecode.js')
+    app.add_autoversioned_javascript('sql-wasm.js') # todo: only load if we need it
 
 
 
@@ -68,7 +69,7 @@ def setup(app):
 TEMPLATE_END = """
 <textarea data-component="activecode" id=%(divid)s data-lang="%(language)s" %(autorun)s
     %(hidecode)s %(include)s %(timelimit)s %(coach)s %(codelens)s %(enabledownload)s %(chatcodes)s
-    data-audio='%(ctext)s' %(sourcefile)s %(datafile)s %(stdin)s %(tie)s %(nopair)s
+    data-audio='%(ctext)s' %(sourcefile)s %(datafile)s %(stdin)s %(tie)s %(dburl)s %(nopair)s
     %(cargs)s %(largs)s %(rargs)s %(iargs)s %(gradebutton)s %(caption)s %(hidehistory)s>
 %(initialcode)s
 </textarea>
@@ -154,6 +155,7 @@ class ActiveCode(RunestoneIdDirective):
    :available_files: : other additional files (java, python2, python3)
    :enabledownload: -- allow textfield contents to be downloaded as *.py file
    :nopair: -- disable pair programming features
+   :dburl: url to load database for sql mode
 
     If this is a homework problem instead of an example in the text
     then the assignment text should go here.  The assignment text ends with
@@ -201,7 +203,8 @@ class ActiveCode(RunestoneIdDirective):
         'interpreterargs': directives.unchanged,
         'runargs': directives.unchanged,
         'tie': directives.unchanged,
-        'nopair': directives.flag
+        'nopair': directives.flag,
+        'dburl': directives.unchanged
     })
 
 
@@ -330,6 +333,11 @@ def run(self):
         else:
             self.options['tie'] = ""
 
+        if 'dburl' in self.options:
+            self.options['dburl'] = "data-dburl='{}'".format(self.options['dburl'])
+        else:
+            self.options['dburl'] = ""
+
         for opt,tp in [('compileargs','cargs'),('linkargs','largs'),('runargs','rargs'),('interpreterargs','iargs')]:
             if opt in self.options:
                 self.options[tp] = 'data-{}="{}"'.format(opt, escape(self.options[opt]))

runestone/activecode/js/activecode.js

@@ -38,6 +38,7 @@ ActiveCode.prototype.init = function(opts) {
     this.chatcodes = $(orig).data('chatcodes');
     this.hidehistory = $(orig).data('hidehistory');
     this.tie = $(orig).data('tie')
+    this.dburl = $(orig).data('dburl');
     this.runButton = null;
     this.enabledownload = $(orig).data('enabledownload');
     this.downloadButton = null;
@@ -475,7 +476,7 @@ ActiveCode.prototype.createOutput = function () {
     // to hold turtle graphics output.  We use a div in case the turtle changes from
     // using a canvas to using some other element like svg in the future.
     var outDiv = document.createElement("div");
-    $(outDiv).addClass("ac_output col-md-5");
+    $(outDiv).addClass("ac_output col-md-12");
     this.outDiv = outDiv;
     this.output = document.createElement('pre');
     this.output.id = this.divid+'_stdout';
@@ -2358,6 +2359,113 @@ LiveCode.prototype.pushDataFile = function (file, resolve, reject) {
      return classes;
  }
 
+ //
+ // SQL
+ //
+
+ SQLActiveCode.prototype = new ActiveCode();
+
+ function SQLActiveCode(opts) {
+     if (opts) {
+         this.init(opts)
+         }
+     }
+
+SQLActiveCode.prototype.init = function(opts) {
+
+    ActiveCode.prototype.init.apply(this,arguments);
+
+    this.config = {
+        locateFile: filename => `/_static/${filename}`
+    }
+
+    var self = this;
+
+    initSqlJs(this.config).then(function (SQL) {
+    // set up call to load database asynchronously if given
+        if (self.dburl) {
+            var xhr = new XMLHttpRequest();
+            $(self.runButton).attr('disabled','disabled')
+            // For example: https://github.com/lerocha/chinook-database/raw/master/ChinookDatabase/DataSources/Chinook_Sqlite.sqlite
+            xhr.open('GET', self.dburl, true);
+            xhr.responseType = 'arraybuffer';
+
+            xhr.onload = e => {
+                var uInt8Array = new Uint8Array(xhr.response);
+                self.db = new SQL.Database(uInt8Array);
+                $(self.runButton).removeAttr('disabled')
+                // contents is now [{columns:['col1','col2',...], values:[[first row], [second row], ...]}]
+                };
+            xhr.send();
+        } else {
+            self.db = new SQL.Database();
+        }
+    });
+};
+
+
+SQLActiveCode.prototype.runProg = function()  {
+
+      // Run a query without reading the results
+      //this.db.run("CREATE TABLE test (col1, col2);");
+      // Insert two rows: (1,111) and (2,222)
+      //this.db.run("INSERT INTO test VALUES (?,?), (?,?)", [1,111,2,222]);
+
+    let divid = this.divid+'_sql_out';
+    let respDiv = document.getElementById(divid);
+    if (respDiv) {
+        respDiv.parentElement.removeChild(respDiv)
+    }
+    let query = this.buildProg();
+    var res = this.db.exec(query);
+    console.log(res); //res is an array??
+    let table = createTable(res[0]);
+    respDiv = document.createElement('div')
+    respDiv.id = divid;
+    $(respDiv).addClass('table-responsive-md')
+    $(respDiv).css('max-height', '500px')
+    $(respDiv).css('overflow', 'scroll')
+    this.outDiv.appendChild(respDiv)
+    respDiv.appendChild(table)
+    $(this.outDiv).show()
+
+}
+
+function createTable(tableData) {
+    var table = document.createElement('table');
+    var head = document.createElement('thead');
+    var tableBody = document.createElement('tbody');
+    var theads = document.createElement('tr')
+
+    tableData.columns.forEach(function(colData) {
+        let th = document.createElement('th');
+        th.appendChild(document.createTextNode(colData));
+        theads.appendChild(th);
+    });
+    table.appendChild(head);
+    head.appendChild(theads);
+    tableData.values.forEach(function(rowData) {
+      var row = document.createElement('tr');
+
+      rowData.forEach(function(cellData) {
+        var cell = document.createElement('td');
+        cell.appendChild(document.createTextNode(cellData));
+        row.appendChild(cell);
+      });
+
+      tableBody.appendChild(row);
+    });
+
+    table.appendChild(tableBody);
+    $(table).css('background', 'white');
+    $(table).addClass('table-striped table-light thead-dark')
+    return table;
+  }
+
+
+//
+// ActiveCode Factory Class
+//
 
 ACFactory = {};
 
@@ -2372,6 +2480,8 @@ ACFactory.createActiveCode = function (orig, lang, addopts) {
         return new JSActiveCode(opts);
     } else if (lang === 'htmlmixed') {
         return new HTMLActiveCode(opts);
+    } else if (lang === 'sql') {
+        return new SQLActiveCode(opts);
     } else if (['java', 'cpp', 'c', 'python3', 'python2'].indexOf(lang) > -1) {
         return new LiveCode(opts);
     } else {   // default is python
@@ -2380,6 +2490,7 @@ ACFactory.createActiveCode = function (orig, lang, addopts) {
 
 };
 
+
 // used by web2py controller(s)
 ACFactory.addActiveCodeToDiv = function(outerdivid, acdivid, sid, initialcode, language) {
     var  thepre, newac;
@@ -2462,6 +2573,11 @@ ACFactory.toggleScratchActivecode = function () {
 
 };
 
+
+//
+// Page Initialization
+//
+
 $(document).ready(function() {
     ACFactory.createScratchActivecode();
     $('[data-component=activecode]').each( function(index ) {