Add search filter feature to management page

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');

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) ) {

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:

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;

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