From 1521fc83eef44ee321fe4b210ea144df4339a422 Mon Sep 17 00:00:00 2001 From: rainbow napkin Date: Fri, 16 Oct 2026 03:25:41 -0400 Subject: [PATCH] Finished implementing basic search bar functionality --- www/css/panel/queue.css | 8 ++- .../channel/panels/queuePanel/queuePanel.js | 49 ++++++++++++++----- 2 files changed, 45 insertions(+), 12 deletions(-) diff --git a/www/css/panel/queue.css b/www/css/panel/queue.css index 07b7af8..d0e1597 100644 --- a/www/css/panel/queue.css +++ b/www/css/panel/queue.css @@ -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{ diff --git a/www/js/channel/panels/queuePanel/queuePanel.js b/www/js/channel/panels/queuePanel/queuePanel.js index 05b1c21..8068fae 100644 --- a/www/js/channel/panels/queuePanel/queuePanel.js +++ b/www/js/channel/panels/queuePanel/queuePanel.js @@ -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'); }