UNPKG

7.58 kBHTMLView Raw
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 // On receipt of RECORD
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// document.getElementById("statement").textContent = "MERGE (alice:Person {name:{name_a},age:{age_a},married:{married_a}})\nMERGE (bob:Person {name:{name_b},age:{age_b},married:{married_b}})\nCREATE UNIQUE (alice)-[alice_knows_bob:KNOWS]->(bob)\nRETURN alice, bob, alice_knows_bob";
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 //addParameter("married_a", "true");
237 addParameter("name_b", "Bob");
238 addParameter("age_b", 44);
239 //addParameter("married_b", "false");
240 }
241
242 </script>
243
244 </body>
245</html>
246