code mirror in SQL console, closes #24

src/public/javascripts/dialogs/sql_console.js

@@ -7,18 +7,38 @@ const sqlConsole = (function() {
     const $resultHead = $('#sql-console-results thead');
     const $resultBody = $('#sql-console-results tbody');
 
+    let codeEditor;
+
     function showDialog() {
         glob.activeDialog = $dialog;
 
         $dialog.dialog({
             modal: true,
             width: $(window).width(),
-            height: $(window).height()
+            height: $(window).height(),
+            open: function() {
+                CodeMirror.keyMap.default["Shift-Tab"] = "indentLess";
+                CodeMirror.keyMap.default["Tab"] = "indentMore";
+
+                CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js';
+
+                codeEditor = CodeMirror($query[0], {
+                    value: "",
+                    viewportMargin: Infinity,
+                    indentUnit: 4,
+                    highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: false }
+                });
+
+                codeEditor.setOption("mode", "text/x-sqlite");
+                CodeMirror.autoLoadMode(codeEditor, "sql");
+
+                codeEditor.focus();
+            }
         });
     }
 
     async function execute() {
-        const sqlQuery = $query.val();
+        const sqlQuery = codeEditor.getValue();
 
         const result = await server.post("sql/execute", {
             query: sqlQuery

src/views/index.ejs

@@ -360,8 +360,11 @@
     </div>
 
     <div id="sql-console-dialog" title="SQL console" style="display: none; padding: 20px;">
-      <textarea style="width: 100%; height: 100px" id="sql-console-query"></textarea>
-      <button class="btn btn-danger" id="sql-console-execute">Execute <kbd>CTRL+ENTER</kbd></button>
+      <div style="height: 150px; width: 100%; border: 1px solid #ccc; margin-bottom: 10px;" id="sql-console-query"></div>
+
+      <div style="text-align: center">
+        <button class="btn btn-danger" id="sql-console-execute">Execute <kbd>CTRL+ENTER</kbd></button>
+      </div>
 
       <table id="sql-console-results" class="table table-striped" style="overflow: scroll; width: 100%;">
         <thead></thead>