-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
104 lines (81 loc) · 3.18 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
<head>
<title>ES!</title>
<style>
.es-url {
width: 400px;
}
</style>
</head>
<body>
<header>
<h1>Oh my oh my!</h1>
<input class="es-url"
id="path"
type="url"
placeholder="URL"/>
<pre id="dsl" contenteditable=true>
</pre>
<button class="pretty">Pretty</button>
<div>
<input id="query"
type="text"
placeholder="Query"
autofocus="true"/>
</div>
</header>
<section>
<h3 id="total"></h3>
<div id="results"></div>
<pre id="raw"></pre>
</section>
<script type="text/javascript">
const DSL_KEY = 'elasticsearch_training_dsl_key';
const PATH_KEY = 'elasticsearch_training_path_key';
const initialDSL = {query: { bool: { filter: { term: { title: '$q'}}}}};
const getPathEl = () => document.getElementById('path');
const getDSLEl = () => document.getElementById('dsl');
const dslLocal = window.localStorage.getItem(DSL_KEY);
getPathEl().value = window.localStorage.getItem(PATH_KEY) || "http://localhost:9200/movies/_search?q=$q&size=20";
getDSLEl().textContent = dslLocal || JSON.stringify(initialDSL, null, ' ');
const title = ({ title, director, year }, score) =>
`<h4><small>${score} - ${year}</small> - ${title} <small>${director}</small></h4>`;
const score = (score) => `<small>${score}</small>`;
const result = ({ _score, _source }) => `<div>${title(_source, _score)}</div>`;
function display() {
const { hits } = JSON.parse(this.responseText);
document.getElementById('total').textContent = hits.total;
document.getElementById('results').innerHTML = hits.hits.map(result).join('');
document.getElementById('raw').textContent = JSON.stringify(JSON.parse(this.responseText), null, ' ');
};
const qEl = document.getElementById('query');
qEl.addEventListener('input', (e) => {
const esUrl = document.getElementById('path').value;
const xhr = new XMLHttpRequest();
xhr.addEventListener('load', display);
xhr.onreadystatechange = (e) => {
if (xhr.readyState === 4) {
if (xhr.status === 400 || xhr.status === 500) {
document.getElementById('results').innerHTML = '';
document.getElementById('raw').textContent = JSON.stringify(JSON.parse(xhr.responseText), null, ' ');
}
}
};
xhr.open('POST', `${esUrl}`, true);
xhr.setRequestHeader("Content-type", 'application/json');
window.localStorage.setItem(DSL_KEY, getDSLEl().textContent);
console.log(e.target.value);
xhr.send(getDSLEl().textContent.replace('$q', e.target.value));
});
const prettyButtonEl = document.getElementsByClassName('pretty')[0];
prettyButtonEl.addEventListener('click', (e) => {
const dsl = getDSLEl();
dsl.textContent = JSON.stringify(JSON.parse(dsl.textContent), null, ' ');
});
getPathEl().addEventListener('change', (e) => {
window.localStorage.setItem(PATH_KEY, e.target.value);
});
</script>
</body>
</html>