[Playground] Add download command (#333)

playground/index.html

@@ -121,12 +121,11 @@
         return getFiles();
       }
 
-      console.log("end");
       return [];
     }
 
     var Module = {
-      print: (function () {
+      print: (() => {
         return (...args) => {
           const output = args.join(' ');
           if (zsvAutocompletionsPopulated) {
@@ -136,15 +135,15 @@
           }
         };
       })(),
-      printErr: (function () {
+      printErr: (() => {
         return (...args) => {
           const output = args.join(' ');
           $('body').terminal().error(output);
         };
       })()
     };
 
-    Module['onRuntimeInitialized'] = function () {
+    Module['onRuntimeInitialized'] = () => {
       const root = '/home/zsv';
       FS.mkdir(root);
       FS.chdir(root);
@@ -165,10 +164,10 @@
       const files = event.target.files;
       for (const file of files) {
         const reader = new FileReader();
-        reader.addEventListener('loadend', () => {
+        reader.onloadend = () => {
           const bytes = new Uint8Array(reader.result);
           FS.writeFile(file.name, bytes);
-        });
+        };
         reader.readAsArrayBuffer(file);
         $('body').terminal().echo(`Loaded: ${file.name}`);
       }
@@ -207,14 +206,15 @@
     }
 
     const playgroundCommands = {
-      info: ' : show playground info',
-      help: ' : show help',
-      clear: ': clear screen',
-      load: ' : load CSV file(s) (overwrite mode)',
-      save: ' : save CSV file(s)',
-      ls: '   : list current directory',
-      rm: '   : remove file(s) (force mode)',
-      zsv: '  : run zsv CLI app',
+      info: '    : show playground info',
+      help: '    : show help',
+      clear: '   : clear screen',
+      load: '    : load CSV file(s) from disk (overwrite mode)',
+      save: '    : save file(s) to disk',
+      download: ': download file(s) from URL(s) (overwrite mode)',
+      ls: '      : list current directory (/home/zsv/)',
+      rm: '      : remove file(s) (force mode)',
+      zsv: '     : run zsv CLI app',
     };
 
     function help() {
@@ -251,6 +251,32 @@
       }
     }
 
+    function download(urls) {
+      for (const url of urls) {
+        const filename = url.split('/').pop();
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', url);
+        xhr.responseType = 'blob';
+        xhr.onload = () => {
+          if (xhr.status && xhr.status === 200) {
+            const reader = new FileReader();
+            reader.onload = () => {
+              const bytes = new Uint8Array(reader.result);
+              FS.writeFile(filename, bytes);
+            };
+            reader.readAsArrayBuffer(xhr.response);
+            $('body').terminal().echo(`Downloaded: ${filename}`);
+          } else {
+            $('body').terminal().error(`download: failed with ${xhr.status} [${url}]`);
+          }
+        };
+        xhr.onerror = () => {
+          $('body').terminal().error(`download: failed with ${xhr.status} [${url}]`);
+        };
+        xhr.send();
+      }
+    }
+
     function ls() {
       const files = getFiles().join('  ');
       if (files.length !== 0) {
@@ -294,6 +320,10 @@
           save(args);
           break;
 
+        case 'download':
+          download(args);
+          break;
+
         case 'ls':
           ls();
           break;
@@ -319,7 +349,7 @@
       prompt: "[[;lightgreen;]zsv@playground$ ]",
       completion: function (string, callback) {
         const command = this.get_command().trimLeft();
-        if (command.match(/^(info|help|load|ls) /)) {
+        if (command.match(/^(info|help|load|ls|download) /)) {
           callback([]);
         } else if (command.match(/^save /) || command.match(/^rm /)) {
           callback(getFiles());