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();
+