| 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: 0.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 | <div id="main">
|
| 100 | <h1>Cypher Runner for New Remoting</h1>
|
| 101 |
|
| 102 | <table width="100%" border="0" cellspacing="0" cellpadding="0">
|
| 103 | <tr>
|
| 104 | <td id="console">
|
| 105 | <form>
|
| 106 | <table>
|
| 107 | <tr>
|
| 108 | <td
|
| 109 | style="width:75%;padding:2px 2px 2px 4px;background-color:#FFF;vertical-align:top"
|
| 110 | rowspan="2"
|
| 111 | >
|
| 112 | <textarea id="statement"></textarea>
|
| 113 | </td>
|
| 114 | <td
|
| 115 | style="width:25%;vertical-align:top;background-color:#0F5788;color:#FFF"
|
| 116 | >
|
| 117 | <table id="parameters">
|
| 118 | <tbody>
|
| 119 | <tr>
|
| 120 | <td>
|
| 121 | <input
|
| 122 | type="text"
|
| 123 | id="key"
|
| 124 | placeholder="(parameter)"
|
| 125 | />
|
| 126 | </td>
|
| 127 | <td>
|
| 128 | <input
|
| 129 | type="text"
|
| 130 | id="value"
|
| 131 | placeholder="(value)"
|
| 132 | />
|
| 133 | </td>
|
| 134 | <td width="20">
|
| 135 | <input id="addParameter" type="button" value="+" />
|
| 136 | </td>
|
| 137 | </tr>
|
| 138 | </tbody>
|
| 139 | </table>
|
| 140 | </td>
|
| 141 | </tr>
|
| 142 | <tr>
|
| 143 | <td
|
| 144 | style="width:25%;height:40px;vertical-align:bottom;background-color:#0F5788"
|
| 145 | >
|
| 146 | <input
|
| 147 | id="runButton"
|
| 148 | type="button"
|
| 149 | value="RUN"
|
| 150 | onfocus="this.blur()"
|
| 151 | />
|
| 152 | </td>
|
| 153 | </tr>
|
| 154 | </table>
|
| 155 | </form>
|
| 156 |
|
| 157 | <div id="results"></div>
|
| 158 | </td>
|
| 159 | </tr>
|
| 160 | </table>
|
| 161 | </div>
|
| 162 |
|
| 163 | <script>
|
| 164 | var authToken = neo4j.v1.auth.basic('neo4j', 'neo4j')
|
| 165 | console.log(authToken)
|
| 166 | var driver = neo4j.v1.driver('bolt://localhost', authToken, {
|
| 167 | encrypted: false
|
| 168 | })
|
| 169 | var session = driver.session()
|
| 170 |
|
| 171 | function run() {
|
| 172 | var statement = document.getElementById('statement').value,
|
| 173 | parameters = getParameters()
|
| 174 |
|
| 175 | var table = document.createElement('table')
|
| 176 | session.run(statement, parameters).subscribe({
|
| 177 | onNext: function(record) {
|
| 178 |
|
| 179 | var tr = document.createElement('tr')
|
| 180 | record.forEach(function(value) {
|
| 181 | var td = document.createElement('td')
|
| 182 | td.appendChild(document.createTextNode(value))
|
| 183 | tr.appendChild(td)
|
| 184 | })
|
| 185 | table.appendChild(tr)
|
| 186 | },
|
| 187 | onCompleted: function(metadata) {}
|
| 188 | })
|
| 189 |
|
| 190 | var results = document.getElementById('results')
|
| 191 | while (results.childElementCount > 0) {
|
| 192 | results.removeChild(results.children[0])
|
| 193 | }
|
| 194 | results.appendChild(table)
|
| 195 | }
|
| 196 |
|
| 197 | function addParameter(key, value) {
|
| 198 | var row = document.getElementById('addParameter').parentNode.parentNode
|
| 199 |
|
| 200 | if (!key) key = document.getElementById('key').value
|
| 201 | if (!value) value = document.getElementById('value').value
|
| 202 |
|
| 203 | if (key.length > 0) {
|
| 204 | var tbody = document
|
| 205 | .getElementById('parameters')
|
| 206 | .getElementsByTagName('tbody')[0]
|
| 207 | var tr = document.createElement('tr')
|
| 208 |
|
| 209 | var td1 = document.createElement('td')
|
| 210 | td1.setAttribute('class', 'parameter')
|
| 211 | td1.appendChild(document.createTextNode(key))
|
| 212 | tr.appendChild(td1)
|
| 213 |
|
| 214 | var td2 = document.createElement('td')
|
| 215 | td2.appendChild(document.createTextNode(value))
|
| 216 | tr.appendChild(td2)
|
| 217 |
|
| 218 | var td3 = document.createElement('td')
|
| 219 | var button = document.createElement('input')
|
| 220 | button.setAttribute('type', 'button')
|
| 221 | button.setAttribute('value', '-')
|
| 222 | button.onclick = function(event) {
|
| 223 | removeParameter(event.target.parentNode.parentNode)
|
| 224 | }
|
| 225 | td3.appendChild(button)
|
| 226 | tr.appendChild(td3)
|
| 227 |
|
| 228 | document.getElementById('key').value = ''
|
| 229 | document.getElementById('value').value = ''
|
| 230 |
|
| 231 | tbody.insertBefore(tr, row)
|
| 232 | }
|
| 233 | }
|
| 234 |
|
| 235 | function removeParameter(row) {
|
| 236 | row.parentNode.removeChild(row)
|
| 237 | }
|
| 238 |
|
| 239 | function getParameters() {
|
| 240 | var map = {},
|
| 241 | parameters = document
|
| 242 | .getElementById('parameters')
|
| 243 | .getElementsByClassName('parameter')
|
| 244 | for (var i = 0; i < parameters.length; i++) {
|
| 245 | var p = parameters[i],
|
| 246 | key = p.textContent,
|
| 247 | value = p.nextSibling.textContent
|
| 248 | try {
|
| 249 | map[key] = JSON.parse(value)
|
| 250 | } catch (e) {
|
| 251 | map[key] = value
|
| 252 | }
|
| 253 | }
|
| 254 | return map
|
| 255 | }
|
| 256 |
|
| 257 | document.getElementById('addParameter').onclick = function(event) {
|
| 258 | addParameter()
|
| 259 | }
|
| 260 | document.getElementById('runButton').onclick = run
|
| 261 |
|
| 262 | if (document.location.href.indexOf('example') >= 0) {
|
| 263 |
|
| 264 | document.getElementById('statement').textContent =
|
| 265 | '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'
|
| 266 | addParameter('name_a', 'Alice')
|
| 267 | addParameter('age_a', 33)
|
| 268 |
|
| 269 | addParameter('name_b', 'Bob')
|
| 270 | addParameter('age_b', 44)
|
| 271 |
|
| 272 | }
|
| 273 | </script>
|
| 274 | </body>
|
| 275 | </html>
|