From aadab3a0e4240fe9074c370f1efdb6db9ab9cbbf Mon Sep 17 00:00:00 2001 From: hkernbach Date: Thu, 25 Feb 2016 10:33:58 +0100 Subject: [PATCH] new query view --- .../APP/frontend/js/views/queryView2.js | 80 +++++++++++++------ .../APP/frontend/scss/_queryView2.scss | 52 +++++++++--- 2 files changed, 96 insertions(+), 36 deletions(-) diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/views/queryView2.js b/js/apps/system/_admin/aardvark/APP/frontend/js/views/queryView2.js index bbe4461981..4335ecdb02 100644 --- a/js/apps/system/_admin/aardvark/APP/frontend/js/views/queryView2.js +++ b/js/apps/system/_admin/aardvark/APP/frontend/js/views/queryView2.js @@ -17,7 +17,7 @@ currentQuery: {}, - bindParamRegExp: /@(@?)(\w+(\d*))/g, + bindParamRegExp: /@(@?)(\w+(\d*))/, bindParamTableObj: {}, bindParamTableDesc: { @@ -41,7 +41,8 @@ "click #clearQuery": "clearQuery", 'click .outputEditorWrapper #downloadQueryResult': 'downloadQueryResult', 'click .outputEditorWrapper .switchAce': 'switchAce', - "click .outputEditorWrapper .fa-close": "closeResult" + "click .outputEditorWrapper .fa-close": "closeResult", + "change #arangoBindParamTable input": "updateBindParams" }, clearQuery: function() { @@ -107,7 +108,7 @@ return; } - this.$(this.outputDiv).append(this.outputTemplate.render({ + this.$(this.outputDiv).prepend(this.outputTemplate.render({ counter: this.outputCounter, type: "Explain" })); @@ -163,7 +164,6 @@ getCachedQueryAfterRender: function() { //get cached query if available var queryObject = this.getCachedQuery(); - console.log(queryObject); if (queryObject !== null && queryObject !== undefined && queryObject !== "") { this.aqlEditor.setValue(queryObject.query); if (queryObject.parameter !== '' || queryObject !== undefined) { @@ -226,27 +226,47 @@ }, makeResizeable: function() { + var self = this; + var resizeFunction = function() { + self.aqlEditor.resize(); + $('#arangoBindParamTable thead').css('width', $('#bindParamEditor').width()); + $('#arangoBindParamTable thead th').css('width', $('#bindParamEditor').width() / 2); + $('#arangoBindParamTable tr').css('width', $('#bindParamEditor').width()); + $('#arangoBindParamTable tbody').css('height', $('#aqlEditor').height() - 18); + $('#arangoBindParamTable tbody').css('width', $('#bindParamEditor').width()); + $('#arangoBindParamTable tbody tr').css('width', $('#bindParamEditor').width()); + $('#arangoBindParamTable tbody td').css('width', $('#bindParamEditor').width() / 2); + }; + $(".aqlEditorWrapper").resizable({ resize: function() { - self.aqlEditor.resize(); + resizeFunction(); }, handles: "e" }); $(".inputEditorWrapper").resizable({ resize: function() { - self.aqlEditor.resize(); + resizeFunction(); }, handles: "s" }); + + //one manual start + resizeFunction(); }, initBindParamTable: function() { this.$(this.bindParamId).html(this.table.render({content: this.bindParamTableDesc})); }, + updateBindParams: function(e) { + var id = $(e.currentTarget).attr("name"); + this.bindParamTableObj[id] = $(e.currentTarget).val(); + }, + checkForNewBindParams: function() { var self = this, words = (this.aqlEditor.getValue()).split(" "), @@ -265,47 +285,55 @@ words[pos] = word.replace(/(\r\n|\n|\r)/gm,""); pos++; }); - words.sort(); + words1.sort(); + var newObject = {}; _.each(words1, function(word) { //found a valid bind param expression if (self.bindParamRegExp.test(word)) { - //if property is not available - if (!_.has(self.bindParamTableObj, word)) { - self.bindParamTableObj[word] = ''; - } + newObject[word] = ''; } }); - var newObject = {}; - Object.keys(self.bindParamTableObj).forEach(function(key) { - _.each(words1, function(word) { - if (word === key) { - if (self.bindParamTableObj[key] !== '') { - newObject[key] = self.bindParamTableObj[key]; - } - else { - newObject[key] = ''; - } + Object.keys(newObject).forEach(function(keyNew) { + Object.keys(self.bindParamTableObj).forEach(function(keyOld) { + if (keyNew === keyOld) { + newObject[keyNew] = self.bindParamTableObj[keyOld]; } }); }); - self.bindParamTableObj = newObject; }, renderBindParamTable: function() { + var self = this; + $('#arangoBindParamTable tbody').html(''); + + var counter = 0; _.each(this.bindParamTableObj, function(val, key) { $('#arangoBindParamTable tbody').append( "" + "" + key + "" + - "" + val + "" + + '' + "" ); - + counter ++; + _.each($('#arangoBindParamTable input'), function(element) { + if ($(element).attr('name') === key) { + $(element).val(val); + } + }); }); + if (counter === 0) { + $('#arangoBindParamTable tbody').append( + '' + + "No bind parameters defined." + + '' + + "" + ); + } }, initAce: function() { @@ -334,11 +362,11 @@ }, afterRender: function() { - this.makeResizeable(); this.initAce(); this.initBindParamTable(); this.getCachedQueryAfterRender(); this.fillSelectBoxes(); + this.makeResizeable(); //set height of editor wrapper $('.inputEditorWrapper').height($(window).height() / 10 * 3); @@ -389,7 +417,7 @@ bindVars = JSON.parse(bindVars); } catch (err) { - console.log("could not parse bind parameter"); + arangoHelper.arangoError("Query", "Could not parse bind parameter"); } } this.collection.add({ diff --git a/js/apps/system/_admin/aardvark/APP/frontend/scss/_queryView2.scss b/js/apps/system/_admin/aardvark/APP/frontend/scss/_queryView2.scss index 23e1dbe6a7..bc5ac37cc9 100644 --- a/js/apps/system/_admin/aardvark/APP/frontend/scss/_queryView2.scss +++ b/js/apps/system/_admin/aardvark/APP/frontend/scss/_queryView2.scss @@ -20,18 +20,50 @@ .bindParamEditorWrapper { background: #eee; - overflow: hidden; + overflow: hidden; - table { - border-top: none; + table { + border-top: 0; + font: 13px/normal Monaco,Menlo,'Ubuntu Mono',Consolas,source-code-pro,monospace; - th { - font: 13px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; - height: 17px; - padding: 0; - width: 50%; - } - } + tbody { + display: block; + overflow-y: auto; + } + + tr { + &.noBgColor { + background-color: rgba(0, 0, 0, 0) !important; + } + } + + thead { + display: block; + } + + td { + padding: 0 5px; + width: 50%; + + input { + @extend %inputs; + clear: both; + float: right; + font: 13px/normal Monaco,Menlo,'Ubuntu Mono',Consolas,source-code-pro,monospace !important; + height: 17px; + margin-bottom: 3px; + margin-top: 3px; + width: auto !important; + } + } + + th { + font: 13px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; + height: 17px; + padding: 0; + width: 50%; + } + } } .aqlEditorWrapper,