diff options
| -rw-r--r-- | index.html | 4 | ||||
| -rw-r--r-- | main.js | 64 | ||||
| -rw-r--r-- | query-executor-wrapper.html | 7 | ||||
| -rw-r--r-- | query-executor.js | 27 | ||||
| -rw-r--r-- | renderer.js | 61 | ||||
| -rw-r--r-- | style.css | 4 |
6 files changed, 124 insertions, 43 deletions
@@ -20,7 +20,7 @@ <div id="editor" class="editor-row split-row"></div> <div class="results-row split-row"> - <table id="result-table" class="table stripe compact order-column" width="100%"></table> + <table id="result-table" class="table stripe compact order-column cell-border" width="100%"></table> <div id="result-error"></div> </div> </div> @@ -32,7 +32,7 @@ </div> </div> <script> - require("./renderer.js"); + require("./renderer.js"); </script> </body> </html>
\ No newline at end of file @@ -1,35 +1,61 @@ -const electron = require("electron") -const app = electron.app -const BrowserWindow = electron.BrowserWindow +const { app, BrowserWindow, ipcMain } = require('electron'); -const path = require("path") -const url = require("url") +const path = require("path"); +const url = require("url"); -let mainWindow +let uiWindow; +let queryExecutorProcess; -function createWindow () { - mainWindow = new BrowserWindow({width: 800, height: 600}) - mainWindow.loadURL(url.format({ +function createMainWindow () { + uiWindow = new BrowserWindow({ + width: 800, + height: 600 + }); + uiWindow.loadURL(url.format({ pathname: path.join(__dirname, "index.html"), protocol: "file:", slashes: true - })) + })); - mainWindow.on("closed", function () { - mainWindow = null - }) + uiWindow.on("closed", function () { + uiWindow = null; + app.quit(); + }); } -app.on("ready", createWindow) +function createQueryExecutorProcess() { + queryExecutorProcess = new BrowserWindow({ + show: false + }); + + queryExecutorProcess.loadURL(url.format({ + pathname: path.join(__dirname, "./query-executor-wrapper.html"), + protocol: "file:", + slashes: true + })); + + queryExecutorProcess.on("closed", function () { + queryExecutorProcess = null; + }); + +} + +app.on("ready", function() { + createMainWindow(); + createQueryExecutorProcess(); +}); app.on("window-all-closed", function () { if (process.platform !== "darwin") { - app.quit() + app.quit(); } -}) +}); app.on("activate", function () { - if (mainWindow === null) { - createWindow() + if (uiWindow === null) { + createWindow(); } -}) +}); + +ipcMain.on("queryExecutor.runQueryComplete", (event, payload) => uiWindow.webContents.send("queryExecutor.runQueryComplete", payload)); +ipcMain.on("queryExecutor.runQuery", (event, payload) => queryExecutorProcess.webContents.send("queryExecutor.runQuery", payload));
\ No newline at end of file diff --git a/query-executor-wrapper.html b/query-executor-wrapper.html new file mode 100644 index 0000000..68c0356 --- /dev/null +++ b/query-executor-wrapper.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <head> + <script>require("./query-executor.js");</script> + </head> + <body/> +</html>
\ No newline at end of file diff --git a/query-executor.js b/query-executor.js new file mode 100644 index 0000000..58189b5 --- /dev/null +++ b/query-executor.js @@ -0,0 +1,27 @@ +"use strict"; + +const { ipcRenderer } = require("electron"); +const { Pool } = require("pg"); + +const connectionPool = new Pool({ + user: "postgres", + host: "localhost", + database: "postgres", + password: "", + port: 5432 +}); + +ipcRenderer.on("queryExecutor.runQuery", (event, payload) => { + + connectionPool.query(payload, (err, res) => { + + console.log(err, res) + + ipcRenderer.send("queryExecutor.runQueryComplete", { + "error": err, + "result": res + }); + + }); + +}); diff --git a/renderer.js b/renderer.js index 4392daa..a7da9da 100644 --- a/renderer.js +++ b/renderer.js @@ -1,8 +1,8 @@ "use strict"; +const { ipcRenderer } = require('electron'); const $ = require("jquery"); const cm = require("codemirror"); -const { Pool } = require("pg"); require("datatables")(window, $); require("codemirror/mode/sql/sql"); const Split = require("split.js"); @@ -14,43 +14,61 @@ const editorContext = cm(document.getElementById("editor"), { lineNumbers: true }); -const connectionPool = new Pool({ - user: "postgres", - host: "localhost", - database: "postgres", - password: "", - port: 5432 -}); - let dataTable; +let execStartTime; +let execTimerInterval; +let execElapsedTime; function runQuery() { _setExecutionStatusIndicator("RUNNING"); - + _startExecTimer(); + var query = editorContext.getValue(); console.log(query); - connectionPool.query(query, (err, res) => { - console.log(err, res) - - if(err === undefined) { - handleResult(res); - } - else { - handleError(err); - } - - }); + _destroyDataTable(); + + ipcRenderer.send("queryExecutor.runQuery", query); +} + +ipcRenderer.on("queryExecutor.runQueryComplete", (event, response) => { + _stopExecTimer(); + if(response.error === undefined) { + handleResult(response.result); + } + else { + handleError(response.error); + } + + + +}); + +function _startExecTimer() { + execStartTime = new Date; + execElapsedTime = 0; + execTimerInterval = setInterval(function () { + execElapsedTime = Date.now() - execStartTime; + $("#execution-time").text("exec time: " + execElapsedTime + "ms"); + }, 10); +} + +function _stopExecTimer() { + clearInterval(execTimerInterval); + execStartTime = null; } function handleError(err) { + _stopExecTimer(); _destroyDataTable(); $("#result-error").text("Error (" + err.code + ") - " + err.message); _setExecutionStatusIndicator("ERROR"); + $("#execution-time").text("failed after " + execElapsedTime + " ms"); } function handleResult(results) { + _stopExecTimer(); $("#result-error").empty(); _destroyDataTable(); @@ -63,6 +81,7 @@ function handleResult(results) { }); _setExecutionStatusIndicator("OK"); + $("#execution-time").text("returned " + results.rowCount + " rows in " + execElapsedTime + " ms"); } function _mapColumnProperties(results) { @@ -50,6 +50,7 @@ body { display: flex; flex-direction: row; font-family: monospace; + align-items: center; } .flex-wrapper .row .split-row { @@ -94,8 +95,9 @@ body { } #execution-time { - background-color: green; + /* background-color: green; */ flex-basis: auto; + padding: 2px 10px; } #row-count { |