From e113e486f4ae54c20e2785f4290b470f0f342eb1 Mon Sep 17 00:00:00 2001
From: Junior <junior@jaj.com>
Date: Mon, 3 Aug 2026 19:35:44 -0400
Subject: [PATCH] Add search filter feature to management page

---
 ajax/getimages.php | 10 +++++++++-
 class_image.php    | 11 +++++++++--
 css/main.css       | 20 ++++++++++++++++++++
 js/manage.js       | 12 +++++++++++-
 manage.php         |  4 ++++
 5 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/ajax/getimages.php b/ajax/getimages.php
index 71bae2e..b8ac3ac 100644
--- a/ajax/getimages.php
+++ b/ajax/getimages.php
@@ -2,10 +2,18 @@
 
 require "../header.php";
 
+$filter = "";
+if ( isset($_REQUEST["filter"]) ) $filter = $_REQUEST["filter"];
+if ( $filter === "" ) {
+   $filter = null;
+} else {
+   $filter = "%" . str_replace("%", "", $filter) . "%";
+}
+
 $data = array();
 $data["error"] = false;
 $data["message"] = "";
-$data["images"] = MTGImage::getList();
+$data["images"] = MTGImage::getList($filter);
 $data["validated"] = $_SESSION["validated"];
 
 header('Content-Type: application/json');
diff --git a/class_image.php b/class_image.php
index 028798c..7e891a7 100644
--- a/class_image.php
+++ b/class_image.php
@@ -202,11 +202,18 @@ class MTGImage implements JsonSerializable {
       }
    }
 
-   public static function getList() {
+   public static function getList($filter = null) {
       global $globaldbh;
 
-      $query = "SELECT id FROM images ORDER BY LOWER(filename)";
+      $query = "SELECT id FROM images ";
+      if ( !is_null($filter) ) {
+         $query .= "WHERE filename LIKE :filter ";
+      }
+      $query .= "ORDER BY LOWER(filename)";
       $sth = $globaldbh->prepare($query);
+      if ( !is_null($filter) ) {
+         $sth->bindValue(":filter", $filter, PDO::PARAM_STR);
+      }
       $sth->execute();
       $thelist = array();
       while ( $row = $sth->fetch(PDO::FETCH_ASSOC) ) {
diff --git a/css/main.css b/css/main.css
index 2b2c0c5..85b216d 100644
--- a/css/main.css
+++ b/css/main.css
@@ -182,5 +182,25 @@ button {
    border-color: rgb(255,23,54);
    border-width: 3px;
 }
+.header {
+   width: 80%;
+   font-family: MatrixBold;
+   font-weight: bold;
+   font-size: 45pt;
+   color: limegreen;
+   margin-top: 0;
+   margin-bottom: 0;
+   text-align: center;
+   margin-left: auto;
+   margin-right: auto;
+}
+.searchfilter {
+   font-family: MatrixBold;
+   font-weight: bold;
+   font-size: 30pt;
+   color: limegreen;
+   border-radius: 10px;
+   background-color: #555555;
+}
 
 /* vim:ts=3 sw=3 et:
diff --git a/js/manage.js b/js/manage.js
index ee62abd..197d3b0 100644
--- a/js/manage.js
+++ b/js/manage.js
@@ -1,4 +1,5 @@
 var validated = false;
+var typingTimer;
 
 $(document).ready(function() {
   $("#dialog-login").dialog({
@@ -30,12 +31,21 @@ $(document).ready(function() {
       "Save": saveCardProperties
     }
   });
+  $("#searchfilter").on("keyup", function(event) {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(performSearch, 750);
+  });
   showGallery();
 });
 
-function showGallery() {
+function performSearch() {
+  showGallery($("#searchfilter").val());
+}
+
+function showGallery(filter = "") {
   $.ajax({
     url: 'ajax/getimages.php',
+    data: {filter: filter},
     dataType: 'json',
     success: function(data, stat, jqo) {
       validated = data.validated;
diff --git a/manage.php b/manage.php
index 5d8c460..f3a1fc7 100644
--- a/manage.php
+++ b/manage.php
@@ -45,6 +45,10 @@ $files = MTGImage::getList();
     </p>
   </div>
 </div>
+<div class="header">
+  <span class="header-label">Manage Cards: </span>
+  <input size='20' id="searchfilter" placeholder="Enter Search Filter" class="searchfilter" />
+</div>
 <div id="gallery" class="imagegallery"></div>
 <?php