neo4j-driver
Version:
The official Neo4j driver for Javascript
279 lines (259 loc) • 8.09 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>example</title>
<style>
#main {
width: 60%;
margin: 0;
background-color: #ddd;
position: relative;
}
h1 {
margin: 0;
padding: 0.5em;
}
#console {
width: 100%;
vertical-align: top;
}
#runButton {
width: 100%;
height: 100%;
border-width: 0;
margin: 0;
font: bold 16px 'Courier New';
cursor: pointer;
background-color: #008cc2;
color: #fff;
}
body {
font: 15px 'Courier New';
background-color: #ccc;
margin: 0;
overflow-y: scroll;
}
table {
width: 100%;
border-collapse: collapse;
}
td {
position: relative;
padding: 0;
}
#results table {
width: auto;
background-color: #eee;
font-size: 13px;
}
#results th {
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 3px 5px;
background-color: #999;
color: #fff;
}
#results td {
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 3px 5px;
vertical-align: top;
}
form {
position: relative;
}
textarea {
border-width: 0;
font: 15px 'Courier New';
margin: 0;
width: 100%;
resize: vertical;
min-height: 36px;
height: 72px;
padding: 0;
background-color: transparent;
vertical-align: top;
}
#parameters {
font: 13px 'Courier New';
}
#parameters td {
}
#parameters input[type='text'] {
border-width: 0;
background-color: transparent;
color: #fff;
font: 13px 'Courier New';
padding: 0;
margin: 0;
}
#parameters input[type='button'] {
font: 13px 'Courier New';
padding: 0 2px;
}
</style>
<script src="../lib/browser/neo4j-web.js"></script>
</head>
<body>
<div id="main">
<h1>
<a href="https://github.com/neo4j/neo4j-javascript-driver"
>neo4j-javascript-driver</a
>
example
</h1>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="console">
<form>
<table>
<tr>
<td
style="width:75%;padding:2px 2px 2px 4px;background-color:#FFF;vertical-align:top"
rowspan="2"
>
<textarea id="statement"></textarea>
</td>
<td
style="width:25%;vertical-align:top;background-color:#0F5788;color:#FFF"
>
<table id="parameters">
<tbody>
<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>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="width:25%;height:40px;vertical-align:bottom;background-color:#0F5788"
>
<input
id="runButton"
type="button"
value="RUN"
onfocus="this.blur()"
/>
</td>
</tr>
</table>
</form>
<div id="results"></div>
</td>
</tr>
</table>
</div>
<script>
var authToken = neo4j.auth.basic('neo4j', 'password')
console.log(authToken)
var driver = neo4j.driver('bolt://localhost', authToken, {
encrypted: false
})
var session = driver.session()
function run() {
var statement = document.getElementById('statement').value,
parameters = getParameters()
var table = document.createElement('table')
session.run(statement, parameters).subscribe({
onNext: function(record) {
// On receipt of RECORD
var tr = document.createElement('tr')
record.forEach(function(value) {
var td = document.createElement('td')
td.appendChild(document.createTextNode(value))
tr.appendChild(td)
})
table.appendChild(tr)
},
onCompleted: function(metadata) {}
})
var results = document.getElementById('results')
while (results.childElementCount > 0) {
results.removeChild(results.children[0])
}
results.appendChild(table)
}
function addParameter(key, value) {
var row = document.getElementById('addParameter').parentNode.parentNode
if (!key) key = document.getElementById('key').value
if (!value) value = document.getElementById('value').value
if (key.length > 0) {
var tbody = document
.getElementById('parameters')
.getElementsByTagName('tbody')[0]
var tr = document.createElement('tr')
var td1 = document.createElement('td')
td1.setAttribute('class', 'parameter')
td1.appendChild(document.createTextNode(key))
tr.appendChild(td1)
var td2 = document.createElement('td')
td2.appendChild(document.createTextNode(value))
tr.appendChild(td2)
var td3 = document.createElement('td')
var button = document.createElement('input')
button.setAttribute('type', 'button')
button.setAttribute('value', '-')
button.onclick = function(event) {
removeParameter(event.target.parentNode.parentNode)
}
td3.appendChild(button)
tr.appendChild(td3)
document.getElementById('key').value = ''
document.getElementById('value').value = ''
tbody.insertBefore(tr, row)
}
}
function removeParameter(row) {
row.parentNode.removeChild(row)
}
function getParameters() {
var map = {},
parameters = document
.getElementById('parameters')
.getElementsByClassName('parameter')
for (var i = 0; i < parameters.length; i++) {
var p = parameters[i],
key = p.textContent,
value = p.nextSibling.textContent
try {
map[key] = JSON.parse(value)
} catch (e) {
map[key] = value
}
}
return map
}
document.getElementById('addParameter').onclick = function(event) {
addParameter()
}
document.getElementById('runButton').onclick = run
if (document.location.href.indexOf('example') >= 0) {
document.getElementById('statement').textContent =
'MERGE (alice:Person {name: $name_a) ON CREATE SET alice.age = $age_a\nMERGE (bob:Person {name: $name_b}) ON CREATE SET bob.age = $age_b\nMERGE (alice)-[alice_knows_bob:KNOWS]->(bob)\nRETURN alice, bob, alice_knows_bob'
addParameter('name_a', 'Alice')
addParameter('age_a', 33)
addParameter('name_b', 'Bob')
addParameter('age_b', 44)
}
</script>
</body>
</html>