diff --git a/src/home/index.php b/src/home/index.php
index ed2dca51f503ccb1234ce6dc27bab6f2e0e3600f..1d6d8165e0b93711d4ae4b22fad4b05885ddddcf 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 c0047ceb62bc48d1fb8cd79fbdd324281f1676af..cdcf1af999a0dc5b64a366824a7af0891cf76aea 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;