You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.9 KiB
104 lines
2.9 KiB
// Initialize Firebase
|
|
var config = {
|
|
apiKey: "AIzaSyBfECPzG1IA8g1otya4h5wMeYtK2L1AyEk",
|
|
authDomain: "autocomplete-8edab.firebaseapp.com",
|
|
databaseURL: "https://autocomplete-8edab.firebaseio.com",
|
|
projectId: "autocomplete-8edab",
|
|
storageBucket: "",
|
|
messagingSenderId: "797593136449"
|
|
};
|
|
firebase.initializeApp(config);
|
|
var db = firebase.firestore();
|
|
db.settings({ timestampsInSnapshots: true });
|
|
|
|
var searchTimeout = null;
|
|
var resultsElm = document.getElementById('results');
|
|
|
|
function runQuery (query) {
|
|
var input = document.querySelector('input');
|
|
input.parentElement.classList.add('is-loading');
|
|
results.innerHTML = '<tr><td colspan="3"><div class="loader has-text-centered"></div></td></tr>';
|
|
query
|
|
.get()
|
|
.then(function (docs) {
|
|
if (docs.empty) {
|
|
results.innerHTML = '<tr><td colspan="3" class="notification">No results found for query "' + queryString + '"</td></tr>';
|
|
return;
|
|
}
|
|
|
|
// Collect the data of our documents into an array
|
|
var data = [];
|
|
for (var i = 0; i < docs.size; i += 1) {
|
|
var doc = docs.docs[i];
|
|
data.push(doc.data());
|
|
}
|
|
|
|
// Sort our array by my popular movie first
|
|
data.sort(function (a, b) {
|
|
if (a.imdb_position < b.imdb_position) return -1;
|
|
if (a.imdb_position > b.imdb_position) return 1;
|
|
return 0;
|
|
});
|
|
|
|
// Render our results
|
|
results.innerHTML = '';
|
|
for (var i = 0; i < data.length; i += 1) {
|
|
var doc = data[i];
|
|
tr = document.createElement('tr');
|
|
var td = document.createElement('td');
|
|
td.innerText = doc.imdb_position;
|
|
tr.appendChild(td);
|
|
|
|
td = document.createElement('td');
|
|
td.innerText = doc.title;
|
|
tr.appendChild(td);
|
|
|
|
td = document.createElement('td');
|
|
td.innerText = doc.released;
|
|
tr.appendChild(td);
|
|
|
|
results.appendChild(tr);
|
|
}
|
|
})
|
|
.finally(function () {
|
|
input.parentElement.classList.remove('is-loading');
|
|
});
|
|
}
|
|
|
|
document.querySelector('input').addEventListener('keyup', function (evt) {
|
|
var elm = evt.target;
|
|
var queryString = elm.value.trim();
|
|
if (queryString.length < 2) {
|
|
results.innerHTML = '';
|
|
return;
|
|
}
|
|
queryString = queryString.toLowerCase();
|
|
|
|
var query = db.collection('movies');
|
|
var parts = queryString.split(' ');
|
|
var valid = false;
|
|
for (var i = 0; i < parts.length; i += 1) {
|
|
var part = parts[i].trim();
|
|
if (part.length < 2) {
|
|
continue;
|
|
}
|
|
|
|
valid = true;
|
|
query = query.where('terms.' + part, '==', true);
|
|
}
|
|
|
|
if (!valid) {
|
|
results.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
// Use `setTimeout` to debounce our api calls
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(function () {
|
|
runQuery(query);
|
|
}, 300);
|
|
});
|
|
|
|
// Run initial query to load some data
|
|
var top20 = db.collection('movies').orderBy('imdb_position', 'asc').limit(20);
|
|
runQuery(top20);
|