MeiliSearch/http-ui/public/script.js

149 lines
4.4 KiB
JavaScript

var request = null;
var timeoutID = null;
var display_facets = false;
$('#query, #filters').on('input', function () {
var query = $('#query').val();
var filters = $('#filters').val();
var timeoutMs = 100;
if (timeoutID !== null) {
window.clearTimeout(timeoutID);
}
timeoutID = window.setTimeout(function () {
request = $.ajax({
type: "POST",
url: "query",
contentType: 'application/json',
data: JSON.stringify({
'query': query,
'filters': filters,
"facetDistribution": display_facets,
}),
contentType: 'application/json',
success: function (data, textStatus, request) {
results.innerHTML = '';
facets.innerHTML = '';
let timeSpent = request.getResponseHeader('Time-Ms');
let numberOfDocuments = data.documents.length;
count.innerHTML = data.numberOfCandidates.toLocaleString();
time.innerHTML = `${timeSpent}ms`;
time.classList.remove('fade-in-out');
for (facet_name in data.facets) {
for (value in data.facets[facet_name]) {
const elem = document.createElement('span');
const count = data.facets[facet_name][value];
elem.classList.add("tag");
elem.setAttribute('data-name', facet_name);
elem.setAttribute('data-value', value);
elem.innerHTML = `${facet_name}:${value} (${count})`;
facets.appendChild(elem);
}
}
for (element of data.documents) {
const elem = document.createElement('li');
elem.classList.add("document");
const ol = document.createElement('ol');
for (const prop in element) {
const field = document.createElement('li');
field.classList.add("field");
const attribute = document.createElement('div');
attribute.classList.add("attribute");
attribute.innerHTML = prop;
const content = document.createElement('div');
content.classList.add("content");
content.innerHTML = element[prop];
field.appendChild(attribute);
field.appendChild(content);
ol.appendChild(field);
}
elem.appendChild(ol);
results.appendChild(elem);
}
// When we click on a tag we append the facet value
// at the end of the facet query.
$('#facets .tag').on('click', function () {
let name = $(this).attr("data-name");
let value = $(this).attr("data-value");
let facet_query = $('#filters').val().trim();
if (facet_query === "") {
$('#filters').val(`${name} = "${value}"`).trigger('input');
} else {
$('#filters').val(`${facet_query} AND ${name} = "${value}"`).trigger('input');
}
});
},
beforeSend: function () {
if (request !== null) {
request.abort();
time.classList.add('fade-in-out');
}
},
});
}, timeoutMs);
});
function diffArray(arr1, arr2) {
return arr1.concat(arr2).filter(function (val) {
if (!(arr1.includes(val) && arr2.includes(val)))
return val;
});
}
function selectedFacetsToArray(facets_obj) {
var array = [];
for (const facet_name in facets_obj) {
var subarray = [];
for (const facet_value of facets_obj[facet_name]) {
subarray.push(`${facet_name}:${facet_value}`);
}
array.push(subarray);
}
return array;
}
$('#display_facets').click(function() {
if (display_facets) {
display_facets = false;
$('#display_facets').html("Display facets")
$('#display_facets').removeClass("is-danger");
$('#display_facets').addClass("is-success");
$('#facets').hide();
} else {
display_facets = true;
$('#display_facets').html("Hide facets")
$('#display_facets').addClass("is-danger");
$('#display_facets').removeClass("is-success");
$('#facets').show();
}
});
// Make the number of document a little bit prettier
$('#docs-count').text(function(index, text) {
return parseInt(text).toLocaleString()
});
// Make the database a little bit easier to read
$('#db-size').text(function(index, text) {
return filesize(parseInt(text))
});
// We trigger the input when we load the script.
$(window).on('load', function () {
// We execute a placeholder search when the input is empty.
$('#query').trigger('input');
});