rainbownapkin/canopy
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

Finished implementing basic search bar functionality

Browse source
This commit is contained in:
rainbow napkin 2026-10-16 03:25:41 -04:00
parent 0f735c08ed
commit 1521fc83ee
2 changed files with 45 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

8
www/css/panel/queue.css
View file

@ -145,6 +145,12 @@ div.dragging-queue-entry{
}
/* Search Results */
#queue-search-prompts-result-div:not(:empty){
resize: vertical;
overflow: scroll;
height: 5em;
}
.queue-search-prompts-result-entry-div{
display: flex;
flex-direction: row;
@ -152,7 +158,7 @@ div.dragging-queue-entry{
text-wrap: nowrap;
margin: 0 0.15em;
padding: 0 0.15em;
font-size: 0.8em
font-size: 0.8em;
}
.queue-search-prompts-result-entry-div p{

49
www/js/channel/panels/queuePanel/queuePanel.js
View file

@ -154,6 +154,7 @@ class queuePanel extends panelObj{
this.client.socket.on("end", this.handleEnd.bind(this));
this.client.socket.on("lock", this.handleScheduleLock.bind(this));
this.client.socket.on("error", this.handleQueueError.bind(this));
this.client.socket.on("archiveSearch", this.handleArchiveResults.bind(this));
}
/**
@ -183,6 +184,9 @@ class queuePanel extends panelObj{
//Go Live
this.goLiveOverwriteButton.addEventListener('click', this.goLive.bind(this));
this.goLivePushbackButton.addEventListener('click', this.goLive.bind(this));
//search
this.searchButton.addEventListener('click', this.search.bind(this));
this.searchPrompt.addEventListener("keydown", this.search.bind(this));
//Queue Date
this.queueDateDecrement.addEventListener('click', this.decrementDate.bind(this));
this.queueDateIncrement.addEventListener('click', this.incrementDate.bind(this));
@ -304,26 +308,49 @@ class queuePanel extends panelObj{
//Grab query
const query = this.searchPrompt.value;
//If we're searching by URL
if(utils.isURL(query)){
//Render local items matching provided URL
this.renderResults(client.searchQueue(undefined, query));
}else{
//Render local items matching title
this.renderResults(client.searchQueue(query));
//If we don't have an event, or if we do it isn't a keeb event, or if it is we hit enter and we got a query
if((!event || !event.key || event.key == "Enter") && query){
//Clear out search result div
this.searchResultDiv.innerHTML = '';
//If we're searching by URL
if(utils.isURL(query)){
//Render local items matching provided URL
this.renderResults(client.searchQueue(undefined, query));
//Ask server to search archive by URL
client.socket.emit("getArchive", {url: query, search: true});
}else{
//Render local items matching title
this.renderResults(client.searchQueue(query));
//Ask server to search archive by title
client.socket.emit("getArchive", {title: query, search: true});
}
}
}
renderResults(results){
//Keep track of whether or not we're on the first entry
let notFirst = false;
handleArchiveResults(data){
//Reverse archive order to show newest first, and render as an array of raw entries
this.renderResults(data.archive.reverse(), true);
}
renderResults(results, rawEntry = false){
//Keep track of whether or not we're on the first entry
let notFirst = this.searchResultDiv.hasChildNodes();
for(let entry of results){
//If we where handed an entry raw from a map
if(rawEntry){
//Yoink the actual media object
entry = entry[1];
}
for(const entry of results){
//Create entry div
const entryDiv = document.createElement('div');
entryDiv.classList.add('queue-search-prompts-result-entry-div');
//if this shit aint da first one
if(notFirst){
//MAKE IT SO, PILOT -ronin from tf|2 or something
entryDiv.classList.add('not-first');
}