Skip to content
This repository
Browse code

adding ACE editor

  • Loading branch information...
commit 0ede4eb83e1c064a805d2983781968788da06b6a 1 parent 6c8e27d
Peter Neubauer peterneubauer authored
17 src/main/webapp/index.html
@@ -4,7 +4,14 @@
4 4 <title>Neo4j Console</title>
5 5 <script type="text/javascript" src="javascripts/jquery-1.6.4.min.js"></script>
6 6 <script type="text/javascript" src="javascripts/d3.min.js"></script>
7   - <script type="text/javascript" src="javascripts/visualization.js"></script>
  7 +
  8 + <!--ace editor-->
  9 + <script src="http://akollegger.github.com/ace/build/src/ace.js" type="text/javascript" charset="utf-8"></script>
  10 + <script src="http://akollegger.github.com/ace/build/src/theme-twilight.js" type="text/javascript" charset="utf-8"></script>
  11 + <script src="http://akollegger.github.com/ace/build/src/mode-cypher.js" type="text/javascript" charset="utf-8"></script>
  12 +
  13 +
  14 + <script type="text/javascript" src="javascripts/visualization.js"></script>
8 15 <script type="text/javascript" src="javascripts/console.js"></script>
9 16 <style type="text/css">
10 17 @import url("stylesheets/main.css");
@@ -19,10 +26,12 @@
19 26 <img title="Toggle Vizualization" onclick="toggleGraph();" class="graph button" src="img/graph.png"/>
20 27 <pre id="output" class="console">
21 28 </pre>
22   - <form id="form" action="#">
  29 + <button id="submitQuery">Execute Cypher (Ctrl-E)</button>
  30 + <!--form id="form" action="#">
23 31 <input class="console" type="text" name="text" size="180" value="start n=node(*) return n"/>
24   - </form>
25   - <div id="graph">
  32 + </form-->
  33 + <div id="editor"></div>
  34 + <div id="graph">
26 35 </div>
27 36 <div id="info">
28 37 This is an interactive console (REPL) for graphs with integrated visualization.
29 src/main/webapp/javascripts/console.js
@@ -20,6 +20,7 @@ function post(uri, data, done) {
20 20 }
21 21 });
22 22 }
  23 +
23 24 function getParameters() {
24 25 var pairs = window.location.search.substr(1).split('&');
25 26 if (!pairs) return {};
@@ -69,12 +70,31 @@ function toggleGraph() {
69 70
70 71 $(document).ready(function () {
71 72 console.log("parameters"+window.location.search);
  73 +
  74 + //initialize the editor
  75 + var editor = ace.edit("editor");
  76 + //editor.setTheme("ace/theme/twilight");
  77 + var CypherMode = require("ace/mode/cypher").Mode;
  78 + editor.getSession().setMode(new CypherMode());
  79 +
72 80 $.ajax("/console/init"+window.location.search, {type:"GET", success: function(json) {
73 81 var data=$.parseJSON(json);
74 82 append($("#output"), data.init);
75 83 append($("#output"), data.geoff);
76 84 append($("#output"), data.result);
77   - $("#form input").val(data.query);
  85 + console.log(data.query);
  86 + editor.getSession().setValue(data.query);
  87 + editor.commands.addCommand({
  88 + name: 'execute',
  89 + bindKey: {
  90 + win: 'Ctrl-E',
  91 + mac: 'Ctrl-E'
  92 + },
  93 + exec: function(editor) {
  94 + $("#submitQuery").click();
  95 + }
  96 + });
  97 + editor.focus();
78 98 viz(data.vizualization);
79 99 }});
80 100 /*
@@ -91,13 +111,10 @@ $(document).ready(function () {
91 111 );
92 112 });
93 113 */
94   - $("#form").submit(function () {
95   - var query = $("#form input").val();
96   - var url = isCypher(query) ? "/console/cypher" : "/console/geoff";
97   - post(url, query, function () {
  114 + $("#submitQuery").click(function (){
  115 + post(isCypher(editor.getSession().getValue()) ? "/console/cypher" : "/console/geoff", editor.getSession().getValue(), function () {
98 116 viz();
99 117 });
100 118 return false;
101 119 });
102   - $("#form input").focus();
103 120 });
7 src/main/webapp/stylesheets/main.css
@@ -58,6 +58,13 @@ a:link, a:visited {
58 58 padding: 20px;
59 59 }
60 60
  61 +#editor {
  62 + width: 100%;
  63 + height: 10%;
  64 + margin: 0;
  65 + border: none;
  66 +}
  67 +
61 68 .button {
62 69 z-index: 100;
63 70 position: absolute;

0 comments on commit 0ede4eb

Please sign in to comment.
Something went wrong with that request. Please try again.