80 lines
2.3 KiB
JavaScript
80 lines
2.3 KiB
JavaScript
|
// tracks input in 'search' field (id=general)
|
||
|
|
let input_so_far = "";
|
||
|
|
|
||
|
|
// cached song list and cached queries
|
||
|
|
var queries = [];
|
||
|
|
var songs = new Map([]);
|
||
|
|
|
||
|
|
// track async fetch and processing
|
||
|
|
var returned = false;
|
||
|
|
|
||
|
|
$("#general").keyup( function() {
|
||
|
|
|
||
|
|
input_so_far = document.getElementsByName("general")[0].value;
|
||
|
|
|
||
|
|
if (input_so_far.length < 3) {
|
||
|
|
$("#table tr").remove();
|
||
|
|
return
|
||
|
|
};
|
||
|
|
|
||
|
|
if (!queries.includes(input_so_far.toLowerCase() ) ) {
|
||
|
|
queries.push(input_so_far.toLowerCase() );
|
||
|
|
returned = false;
|
||
|
|
|
||
|
|
const sanitized_input = encodeURIComponent( input_so_far );
|
||
|
|
const url = 'https://' + document.domain + ':' + location.port + '/search?name=' + sanitized_input + '&limit=15&offset=0'
|
||
|
|
|
||
|
|
const LoadData = async () => {
|
||
|
|
try {
|
||
|
|
const res = await fetch(url);
|
||
|
|
console.log("Status code 200 or similar: " + res.ok);
|
||
|
|
const data = await res.json();
|
||
|
|
return data;
|
||
|
|
} catch(err) {
|
||
|
|
console.error(err)
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
LoadData().then(newSongsJson => {
|
||
|
|
newSongsJson.forEach( (new_song) => {
|
||
|
|
let already_have = false;
|
||
|
|
songs.forEach( (_v, key) => {
|
||
|
|
if (new_song.id == key) { already_have = true; return; };
|
||
|
|
})
|
||
|
|
if (!already_have) { songs.set(new_song.utube_id, new_song) }
|
||
|
|
})
|
||
|
|
}).then( () => { returned = true } );
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
function renderTable () {
|
||
|
|
|
||
|
|
if (returned) {
|
||
|
|
|
||
|
|
$("#table tr").remove();
|
||
|
|
|
||
|
|
var filtered = new Map(
|
||
|
|
[...songs]
|
||
|
|
.filter(([k, v]) =>
|
||
|
|
( v.title.toLowerCase().includes( input_so_far.toLowerCase() ) ) ||
|
||
|
|
( v.added_by.toLowerCase().includes( input_so_far.toLowerCase() ) ) )
|
||
|
|
);
|
||
|
|
|
||
|
|
filtered.forEach( (song) => {
|
||
|
|
let added = song.added_by;
|
||
|
|
let added_link = '<a href="/library?name=' + added + '" target="_blank" rel="noopener noreferrer">' + added + '</a>';
|
||
|
|
let title = song.title;
|
||
|
|
let id = song.utube_id;
|
||
|
|
let id_link = '<a href="https://www.youtube.com/watch?v=' + id + '" target="_blank" rel="noopener noreferrer">' + id + '</a>';
|
||
|
|
$('#table tbody').append('<tr><td>'+id_link+'</td><td>'+added_link+'</td><td>'+title+'</td></tr>')
|
||
|
|
})
|
||
|
|
|
||
|
|
} else {
|
||
|
|
setTimeout(renderTable, 30); // try again in 30 milliseconds
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
renderTable();
|
||
|
|
|
||
|
|
});
|