Added Result view

src/extension.ts

@@ -3,6 +3,7 @@
 // Import the module and reference it with the alias vscode in your code below
 import * as vscode from 'vscode';
 import { ConnectionProvider, ConnectionNode } from './connections'
+import { TextDocumentContentProvider } from './resultsetview'
 
 const { spawn } = require('child_process');
 const table = require('text-table');
@@ -14,6 +15,8 @@ var dbSession = null;
 // this method is called when your extension is activated
 // your extension is activated the very first time the command is executed
 export function activate(context: vscode.ExtensionContext) {
+    let previewUri = vscode.Uri.parse('frog-view://authority/resultset');
+
     const connectionProvider = new ConnectionProvider();
     let myOutputChannel = vscode.window.createOutputChannel('SQL Query Results');
     context.subscriptions.push(myOutputChannel);
@@ -23,13 +26,13 @@ export function activate(context: vscode.ExtensionContext) {
 
     vscode.window.registerTreeDataProvider('connections', connectionProvider);
 
-    // Use the console to output diagnostic information (console.log) and errors (console.error)
+    let provider = new TextDocumentContentProvider();
+	let registration = vscode.workspace.registerTextDocumentContentProvider('frog-view', provider);
+
+        // Use the console to output diagnostic information (console.log) and errors (console.error)
     // This line of code will only be executed once when your extension is activated
     console.log('Congratulations, your extension "frog" is now active!');
 
-    // The command has been defined in the package.json file
-    // Now provide the implementation of the command with  registerCommand
-    // The commandId parameter must match the command field in package.json
     let disposable = vscode.commands.registerCommand('extension.executeSnippet', () => {
         // The code you place here will be executed every time your command is executed
 
@@ -79,14 +82,15 @@ export function activate(context: vscode.ExtensionContext) {
                             diagnosticCollection.set(document.uri, diagnostics);
                         }
                     } else {
-                        const data = []
-                        data.push(json['columnDefinitions'].map((x) => x['name']));
-                        for (let row of json["rows"]) {
-                            data.push(row['columns'].map((x) => x['value']));
-                        }
-                        var t = table(data, { hsep: ' | '});
-                        myOutputChannel.append(t);
-                        myOutputChannel.append("\n");
+                        provider.setData(json);
+                        provider.update(previewUri);
+
+                        vscode.commands.executeCommand('vscode.previewHtml', previewUri, vscode.ViewColumn.Two, 'Result Set View').then((success) => {
+                        }, (reason) => {
+                            vscode.window.showErrorMessage(reason);
+                        });
+                
+                        myOutputChannel.append("Query successful.\n");
                     }
 
                     myOutputChannel.append("-- " + new Date() + " -------------------------------\n");
@@ -117,7 +121,7 @@ export function activate(context: vscode.ExtensionContext) {
         dbSession.stdin.write(text + "\n--- END ---\n");
     });
 
-    context.subscriptions.push(disposable);
+    context.subscriptions.push(disposable, registration);
 }
 
 // this method is called when your extension is deactivated

src/resultsetview.ts

@@ -0,0 +1,58 @@
+import * as vscode from 'vscode';
+
+export class TextDocumentContentProvider implements vscode.TextDocumentContentProvider {
+    private _onDidChange = new vscode.EventEmitter<vscode.Uri>();
+    private _data = null;
+
+    public provideTextDocumentContent(uri: vscode.Uri): string {
+        if (!this._data) return this.errorSnippet();
+        
+        let styles = `<style>
+                    table {
+                        border: solid 1px white;
+                        border-collapse: collapse;
+                    }
+                    table td, table th {
+                        border: solid 1px white;
+                        padding: 3px;
+                    }
+                </style>`
+
+        let text = `<body>${styles}<table><tr>`
+        text += this._data['columnDefinitions'].map((x) => `<th>${x['name']}</th>`).join('')
+        text += '</tr>'
+        text += this._data['rows'].map((r) => 
+            '<tr>' + r['columns'].map((c) => '<td>' + c['value'] + '</td>').join('') + '</tr>'
+        ).join('')
+        text += '</table></body>'
+        return text;
+    }
+
+    get onDidChange(): vscode.Event<vscode.Uri> {
+        return this._onDidChange.event;
+    }
+
+    public update(uri: vscode.Uri) {
+        this._onDidChange.fire(uri);
+    }
+
+    public setData(data) {
+        this._data = data;
+    }
+
+    private errorSnippet(): string {
+        return `
+            <body>
+                <table>
+                    <tr>
+                        <th>ID</th>
+                        <th>Name</th>
+                    </tr>
+                    <tr>
+                        <td>1</td>
+                        <td>Foobar</td>
+                    </tr>
+                </table>
+            </body>`;
+    }
+}