1 | <!DOCTYPE html>
|
2 | <html>
|
3 | <head>
|
4 | <meta charset="utf-8">
|
5 | <title>Cypher Runner for Neo4j Bolt Protocol</title>
|
6 | <style>
|
7 | #main {
|
8 | width: 60%;
|
9 | margin: 0;
|
10 | background-color: #DDD;
|
11 | position: relative;
|
12 | }
|
13 | h1 {
|
14 | margin: 0;
|
15 | padding: .5em;
|
16 | }
|
17 | #console {
|
18 | width: 100%;
|
19 | vertical-align: top;
|
20 | }
|
21 | #runButton {
|
22 | width: 100%;
|
23 | height: 100%;
|
24 | border-width: 0;
|
25 | margin: 0;
|
26 | font: bold 16px "Courier New";
|
27 | cursor: pointer;
|
28 | background-color: #008CC2;
|
29 | color: #FFF;
|
30 | }
|
31 | body {
|
32 | font: 15px "Courier New";
|
33 | background-color: #CCC;
|
34 | margin: 0;
|
35 | overflow-y: scroll;
|
36 | }
|
37 | table {
|
38 | width: 100%;
|
39 | border-collapse: collapse;
|
40 | }
|
41 | td {
|
42 | position: relative;
|
43 | padding: 0;
|
44 | }
|
45 | #results table {
|
46 | width: auto;
|
47 | background-color: #EEE;
|
48 | font-size: 13px;
|
49 | }
|
50 | #results th {
|
51 | border-right: 1px solid #DDD;
|
52 | border-bottom: 1px solid #DDD;
|
53 | padding: 3px 5px;
|
54 | background-color: #999;
|
55 | color: #FFF;
|
56 | }
|
57 | #results td {
|
58 | border-right: 1px solid #BBB;
|
59 | border-bottom: 1px solid #BBB;
|
60 | padding: 3px 5px;
|
61 | vertical-align: top;
|
62 | }
|
63 | form {
|
64 | position: relative;
|
65 | }
|
66 | textarea {
|
67 | border-width: 0;
|
68 | font: 15px "Courier New";
|
69 | margin: 0;
|
70 | width: 100%;
|
71 | resize: vertical;
|
72 | min-height: 36px;
|
73 | height: 72px;
|
74 | padding: 0;
|
75 | background-color: transparent;
|
76 | vertical-align: top;
|
77 | }
|
78 | #parameters {
|
79 | font: 13px "Courier New";
|
80 | }
|
81 | #parameters td {
|
82 | }
|
83 | #parameters input[type=text] {
|
84 | border-width: 0;
|
85 | background-color: transparent;
|
86 | color: #FFF;
|
87 | font: 13px "Courier New";
|
88 | padding: 0;
|
89 | margin: 0;
|
90 | }
|
91 | #parameters input[type=button] {
|
92 | font: 13px "Courier New";
|
93 | padding: 0 2px;
|
94 | }
|
95 | </style>
|
96 | <script src="../lib/browser/neo4j-web.js"></script>
|
97 | </head>
|
98 | <body>
|
99 |
|
100 | <div id="main">
|
101 |
|
102 | <h1>Cypher Runner for New Remoting</h1>
|
103 |
|
104 | <table width="100%" border="0" cellspacing="0" cellpadding="0">
|
105 | <tr>
|
106 | <td id="console">
|
107 |
|
108 | <form>
|
109 | <table>
|
110 | <tr>
|
111 | <td style="width:75%;padding:2px 2px 2px 4px;background-color:#FFF;vertical-align:top" rowspan="2"><textarea id="statement"></textarea></td>
|
112 | <td style="width:25%;vertical-align:top;background-color:#0F5788;color:#FFF">
|
113 | <table id="parameters"><tbody>
|
114 | <tr><td><input type="text" id="key" placeholder="(parameter)"></td><td><input type="text" id="value" placeholder="(value)"></td><td width="20"><input id="addParameter" type="button" value="+"></td></tr>
|
115 | </tbody></table>
|
116 | </td>
|
117 | </tr>
|
118 | <tr>
|
119 | <td style="width:25%;height:40px;vertical-align:bottom;background-color:#0F5788"><input id="runButton" type="button" value="RUN" onfocus="this.blur()"></td>
|
120 | </tr>
|
121 | </table>
|
122 | </form>
|
123 |
|
124 | <div id="results"></div>
|
125 |
|
126 | </td>
|
127 |
|
128 | </tr>
|
129 | </table>
|
130 |
|
131 | </div>
|
132 |
|
133 | <script>
|
134 | var authToken = neo4j.v1.auth.basic("neo4j", "neo4j");
|
135 | console.log(authToken);
|
136 | var driver = neo4j.v1.driver("bolt://localhost", authToken, {
|
137 | encrypted:false
|
138 | });
|
139 | var session = driver.session();
|
140 |
|
141 | function run() {
|
142 | var statement = document.getElementById("statement").value,
|
143 | parameters = getParameters();
|
144 |
|
145 | var table = document.createElement("table");
|
146 | session.run(statement, parameters).subscribe({
|
147 | onNext: function(record) {
|
148 |
|
149 | var tr = document.createElement("tr");
|
150 | record.forEach( function( value ) {
|
151 | var td = document.createElement("td");
|
152 | td.appendChild(document.createTextNode(value));
|
153 | tr.appendChild(td);
|
154 | });
|
155 | table.appendChild(tr);
|
156 | },
|
157 | onCompleted: function(metadata) {
|
158 |
|
159 | }
|
160 | });
|
161 |
|
162 | var results = document.getElementById("results");
|
163 | while(results.childElementCount > 0) {
|
164 | results.removeChild(results.children[0]);
|
165 | }
|
166 | results.appendChild(table);
|
167 |
|
168 | }
|
169 |
|
170 | function addParameter(key, value) {
|
171 | var row = document.getElementById("addParameter").parentNode.parentNode;
|
172 |
|
173 | if (!key) key = document.getElementById("key").value;
|
174 | if (!value) value = document.getElementById("value").value;
|
175 |
|
176 | if (key.length > 0) {
|
177 | var tbody = document.getElementById("parameters").getElementsByTagName("tbody")[0];
|
178 | var tr = document.createElement("tr");
|
179 |
|
180 | var td1 = document.createElement("td");
|
181 | td1.setAttribute("class", "parameter");
|
182 | td1.appendChild(document.createTextNode(key));
|
183 | tr.appendChild(td1);
|
184 |
|
185 | var td2 = document.createElement("td");
|
186 | td2.appendChild(document.createTextNode(value));
|
187 | tr.appendChild(td2);
|
188 |
|
189 | var td3 = document.createElement("td");
|
190 | var button = document.createElement("input");
|
191 | button.setAttribute("type", "button");
|
192 | button.setAttribute("value", "-");
|
193 | button.onclick = function(event) {
|
194 | removeParameter(event.target.parentNode.parentNode);
|
195 | };
|
196 | td3.appendChild(button);
|
197 | tr.appendChild(td3);
|
198 |
|
199 | document.getElementById("key").value = "";
|
200 | document.getElementById("value").value = "";
|
201 |
|
202 | tbody.insertBefore(tr, row);
|
203 | }
|
204 | }
|
205 |
|
206 | function removeParameter(row) {
|
207 | row.parentNode.removeChild(row);
|
208 | }
|
209 |
|
210 | function getParameters() {
|
211 | var map = {},
|
212 | parameters = document.getElementById("parameters").getElementsByClassName("parameter");
|
213 | for(var i = 0; i < parameters.length; i++) {
|
214 | var p = parameters[i],
|
215 | key = p.textContent,
|
216 | value = p.nextSibling.textContent;
|
217 | try {
|
218 | map[key] = JSON.parse(value);
|
219 | } catch(e) {
|
220 | map[key] = value;
|
221 | }
|
222 | }
|
223 | return map;
|
224 | }
|
225 |
|
226 | document.getElementById("addParameter").onclick = function(event) {
|
227 | addParameter();
|
228 | };
|
229 | document.getElementById("runButton").onclick = run;
|
230 |
|
231 | if (document.location.href.indexOf("example") >= 0) {
|
232 |
|
233 | document.getElementById("statement").textContent = "MERGE (alice:Person {name:{name_a},age:{age_a}})\nMERGE (bob:Person {name:{name_b},age:{age_b}})\nCREATE UNIQUE (alice)-[alice_knows_bob:KNOWS]->(bob)\nRETURN alice, bob, alice_knows_bob";
|
234 | addParameter("name_a", "Alice");
|
235 | addParameter("age_a", 33);
|
236 |
|
237 | addParameter("name_b", "Bob");
|
238 | addParameter("age_b", 44);
|
239 |
|
240 | }
|
241 |
|
242 | </script>
|
243 |
|
244 | </body>
|
245 | </html>
|
246 |
|