From 9ca7f458d035954bbc7d110c88ebdec0bab0f413 Mon Sep 17 00:00:00 2001
From: unknown <13521043@std.stei.itb.ac.id>
Date: Tue, 24 Oct 2023 13:56:41 +0700
Subject: [PATCH] feat: debounce for search button
---
src/home/index.php | 17 +----------------
src/public/javascript/gym/search.js | 29 ++++++++++++++++++++++++++++-
2 files changed, 29 insertions(+), 17 deletions(-)
diff --git a/src/home/index.php b/src/home/index.php
index ed2dca5..1d6d816 100644
--- a/src/home/index.php
+++ b/src/home/index.php
@@ -13,8 +13,6 @@ require_once PROJECT_ROOT_PATH . '/middleware/AuthMiddleware.php';
AuthMiddleware::getInstance()->secureRoute();
$searching = [
- // 'name' => $_GET["name"] ?? null,
- // 'description' => $_GET["description"] ?? null
];
$itemInPage = 6;
@@ -24,19 +22,6 @@ $selectedCity = $_GET["city"] ?? null;
$selectedPriceRange = $_GET["price-range"] ?? null;
$selectedSorting = $_GET["sorting"] ?? null;
-// $gymsFiltered = GymService::getInstance()->getFiltered(
-// [
-// 'page' => $currentPage,
-// 'cityId' => $selectedCity,
-// 'sorting' => $selectedSorting,
-// 'priceRange' => $selectedPriceRange,
-// 'sortingOption' => $sortingOption,
-// 'priceRangeOption' => $priceRangeOption,
-// 'gymCountInPage' => $itemInPage,
-// 'searching' => $searching
-// ]
-// );
-
?>
<!DOCTYPE html>
@@ -77,7 +62,7 @@ $selectedSorting = $_GET["sorting"] ?? null;
?>
<form class="form-search">
<input id="input-search" class="input-search" type="text" name="gym_name" placeholder="Search Gym">
- <button class="button-search" id="button-search">
+ <button type="button" class="button-search" id="button-search" onclick="buttonSearch(event)">
<img src="/public/icon/vector_search.svg" alt="Search Icon">
</button>
</form>
diff --git a/src/public/javascript/gym/search.js b/src/public/javascript/gym/search.js
index c0047ce..cdcf1af 100644
--- a/src/public/javascript/gym/search.js
+++ b/src/public/javascript/gym/search.js
@@ -2,6 +2,30 @@ if (gym_name != null && gym_name != "") {
callSearchGym(gym_name);
}
+function debounce(func, delay) {
+ let dTimer;
+ return function() {
+ const context = this;
+ const args = arguments;
+ clearTimeout(dTimer);
+ dTimer = setTimeout(() => func.apply(context, args), delay);
+ }
+}
+
+function searchPage(){
+ let queryParam = new URLSearchParams(window.location.search);
+ queryParam.set("gym_name", document.getElementById("input-search").value);
+ window.location.search = queryParam.toString();
+}
+
+const debounceSearch = debounce(searchPage, 500);
+
+function buttonSearch(event) {
+ event.preventDefault();
+ debounceSearch();
+}
+
+
function callSearchGym(gym_name) {
// alert(JSON.stringify(gyms));
// searchGym(gyms, document.getElementById("input-search").value);
@@ -31,7 +55,10 @@ function searchGym(allGyms, searchString) {
let gymCardContainer = document.getElementById("gym-card-container");
gymCardContainer.innerHTML = "";
if(searchedGyms.length == 0) {
- gymCardContainer.innerHTML = "No gyms found";
+ gymCardContainer.innerHTML = `
+ <div class="space"></div>
+ No gyms found
+ `;
} else {
// Slice the array to display
let startIndex = (page - 1) * itemInPage;
--
GitLab