Skip to content
Snippets Groups Projects
Commit b9bafb26 authored by Nigel Sahl's avatar Nigel Sahl
Browse files

Fix: filter and search done (homepage user)

parent 01c2dcc1
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/home/index.php
+ 35
− 31
View file @ b9bafb26
...@@ -24,18 +24,18 @@ $selectedCity = $_GET["city"] ?? null; ...@@ -24,18 +24,18 @@ $selectedCity = $_GET["city"] ?? null;
$selectedPriceRange = $_GET["price-range"] ?? null; $selectedPriceRange = $_GET["price-range"] ?? null;
$selectedSorting = $_GET["sorting"] ?? null; $selectedSorting = $_GET["sorting"] ?? null;
$gymsFiltered = GymService::getInstance()->getFiltered( // $gymsFiltered = GymService::getInstance()->getFiltered(
[ // [
'page' => $currentPage, // 'page' => $currentPage,
'cityId' => $selectedCity, // 'cityId' => $selectedCity,
'sorting' => $selectedSorting, // 'sorting' => $selectedSorting,
'priceRange' => $selectedPriceRange, // 'priceRange' => $selectedPriceRange,
'sortingOption' => $sortingOption, // 'sortingOption' => $sortingOption,
'priceRangeOption' => $priceRangeOption, // 'priceRangeOption' => $priceRangeOption,
'gymCountInPage' => $itemInPage, // 'gymCountInPage' => $itemInPage,
'searching' => $searching // 'searching' => $searching
] // ]
); // );
?> ?>
...@@ -51,8 +51,20 @@ $gymsFiltered = GymService::getInstance()->getFiltered( ...@@ -51,8 +51,20 @@ $gymsFiltered = GymService::getInstance()->getFiltered(
<body> <body>
<div class="app"> <div class="app">
<script>
const gym_name = <?php echo json_encode($_GET["gym_name"] ?? null) ?>;
const page = <?php echo json_encode($currentPage) ?>;
const selectedCity = <?php echo json_encode($selectedCity) ?>;
const selectedSorting = <?php echo json_encode($selectedSorting) ?>;
const selectedPriceRange = <?php echo json_encode($selectedPriceRange) ?>;
const sortingOption = <?php echo json_encode($sortingOption) ?>;
const priceRangeOption = <?php echo json_encode($priceRangeOption) ?>;
const itemInPage = <?php echo json_encode($itemInPage) ?>;
const searching = <?php echo json_encode($searching) ?>;
console.log(gym_name);
</script>
<?php <?php
echo Navbar(); echo Navbar();
?> ?>
<div class="space"></div> <div class="space"></div>
<div class="first-line-button"> <div class="first-line-button">
...@@ -63,32 +75,24 @@ $gymsFiltered = GymService::getInstance()->getFiltered( ...@@ -63,32 +75,24 @@ $gymsFiltered = GymService::getInstance()->getFiltered(
<?php <?php
echo FilterForm($selectedCity, $selectedPriceRange, $selectedSorting); echo FilterForm($selectedCity, $selectedPriceRange, $selectedSorting);
?> ?>
<div class="form-search"> <form class="form-search">
<input id="input-search" class="input-search" type="text" name="name" onChange={handleChange} <input id="input-search" class="input-search" type="text" name="gym_name" placeholder="Search Gym">
placeholder="Search a gym" /> <button class="button-search" id="button-search">
<button class="button-search" id="button-search" onclick="callSearchGym()">
<img src="/public/icon/vector_search.svg" alt="Search Icon"> <img src="/public/icon/vector_search.svg" alt="Search Icon">
</button> </button>
</div> </form>
</div> </div>
<div class="gym-card-container"> <div class="gym-card-container" id="gym-card-container">
<?php <div class="space"></div>
if (sizeof($gymsFiltered['gyms']) == 0) { Loading...
?>
<?= "No Gym Found" ?>
<?php
}
foreach ($gymsFiltered['gyms'] as $gym) {
echo GymCard($gym);
}
?>
</div> </div>
<div class="pagination-container" id="pagination-container">
<div class="pagination-container">
<?php echo generatePagination($gymsFiltered['itemCount'], $itemInPage, $currentPage, $maxPages); ?>
</div> </div>
</div> </div>
<script src="/public/javascript/gym/gym_card.js"></script>
<script src="/public/javascript/pagination.js"></script>
<script src="/public/javascript/gym/filter.js"></script> <script src="/public/javascript/gym/filter.js"></script>
<script src="/public/javascript/gym/search.js"></script> <script src="/public/javascript/gym/search.js"></script>
</body> </body>
......
src/public/javascript/gym/filter.js
+ 58
− 15
View file @ b9bafb26
...@@ -2,14 +2,64 @@ const filter = document.getElementById("filter-gym"); ...@@ -2,14 +2,64 @@ const filter = document.getElementById("filter-gym");
const filterButton = document.getElementById("button-filter"); const filterButton = document.getElementById("button-filter");
const searchFilter = document.getElementById("button-search-filter"); const searchFilter = document.getElementById("button-search-filter");
const cancelFilter = document.getElementById("button-cancel-filter"); const cancelFilter = document.getElementById("button-cancel-filter");
const searchButton = document.getElementById("button-search"); const queryParams = new URLSearchParams(window.location.search);
const inputSearch = document.getElementById("input-search");
const inputPriceMin = document.getElementById("filter-min-price"); function getFilteredGyms(){
const inputPriceMax = document.getElementById("filter-max-price"); const params = {
const toggleAlphAsc = document.getElementById("filter-alph-asc"); page: page,
const toggleAlphDesc = document.getElementById("filter-alph-desc"); cityId: selectedCity,
const togglePriceAsc = document.getElementById("filter-price-asc"); sorting: selectedSorting,
const togglePriceDesc = document.getElementById("filter-price-desc"); priceRange: selectedPriceRange,
sortingOption: sortingOption,
priceRangeOption: priceRangeOption,
gymCountInPage: itemInPage,
searching: searching
};
const jsonParams = JSON.stringify(params);
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(this.readyState === 4) {
if(this.status === 200) {
FilteredGyms(JSON.parse(this.responseText), page, itemInPage);
} else {
const json = JSON.parse(this.responseText);
alert(json["error"]);
}
}
};
xhr.open("PUT", `/api/gym/filter`, true);
xhr.send(jsonParams);
}
// check if the params has a gym_name
if ((queryParams.has("gym_name")==false) || queryParams.get("gym_name") == "") {
// if (queryParams.get("gym_name") == "") {
// queryParams.delete("gym_name");
// window.location.search = queryParams.toString();
// }
getFilteredGyms();
}
function FilteredGyms(data, page, itemInPage) {
let gyms = data["gyms"];
let data_length = data["itemCount"];
let gym_card_container = document.getElementById("gym-card-container");
let paginationContainer = document.getElementById("pagination-container");
gym_card_container.innerHTML = "";
if (gyms.length == 0) {
gym_card_container.innerHTML = "No gyms found";
}
for (let i = 0; i < gyms.length; i++) {
gym_card_container.innerHTML += GymCard(gyms[i]);
}
// alert(page)
let pg = generatePagination(data_length, itemInPage, page);
paginationContainer.innerHTML = pg;
}
filter.style.display = "none"; filter.style.display = "none";
filter.addEventListener("click", function (event) { filter.addEventListener("click", function (event) {
// stop propagation but if clicks outside of the filter, it will close the filter // stop propagation but if clicks outside of the filter, it will close the filter
...@@ -30,10 +80,3 @@ searchFilter.addEventListener("click", function () { ...@@ -30,10 +80,3 @@ searchFilter.addEventListener("click", function () {
cancelFilter.addEventListener("click", function () { cancelFilter.addEventListener("click", function () {
filter.style.display = "none"; filter.style.display = "none";
}); });
// change price min and max input from document
// inputPriceMin.addEventListener("change", function () {
// filteredGymData.price_min = inputPriceMin.value;
// });
// inputPriceMax.addEventListener("change", function () {
// filteredGymData.price_max = inputPriceMax.value;
// });
src/public/javascript/gym/gym_card.js 0 → 100644
+ 44
− 0
View file @ b9bafb26
function truncateText(text, length)
{
if (text.length <= length) {
return text;
} else {
text = text.substring(0, length-3);
text = text + "...";
return text;
}
}
function formatPrice(price)
{
if (price == 0) {
return "Free";
}
price = price.toLocaleString('id-ID');
return 'Rp' + price;
}
function GymCard(gym){
let truncated_name = truncateText(gym.name, 16);
let formatted_price = formatPrice(gym.monthly_price);
let gym_card = `
<a class="gym-card" id="gym-card-${gym.gym_id}" href="./gym?gym_id=${gym.gym_id}">
<div class="content-gym-card">
<img class="gym-card-picture" src="../public/image/gym/${gym.picture_id}.png" alt="Gym Image-${gym.picture_id}">
<div class="gym-card-text">
<div class="gym-card-name">${truncated_name}</div>
<div class="gym-card-text-bottom">
<div class="gym-card-text-bottom-left">
${gym.average_rating}
<img src="../public/icon/star.svg" alt="Star Icon">
</div>
<div class="gym-card-text-bottom-right">
${formatted_price}
</div>
</div>
</div>
</div>
</a>
`;
return gym_card;
}
\ No newline at end of file
src/public/javascript/gym/search.js
+ 28
− 27
View file @ b9bafb26
function callSearchGym() { if (gym_name != null && gym_name != "") {
callSearchGym(gym_name);
}
function callSearchGym(gym_name) {
// alert(JSON.stringify(gyms));
// searchGym(gyms, document.getElementById("input-search").value);
const xhr = new XMLHttpRequest(); const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() { xhr.onreadystatechange = function() {
if(this.readyState === 4) { if(this.readyState === 4) {
if(this.status === 200) { if(this.status === 200) {
searchGym(JSON.parse(this.responseText), document.getElementById("input-search").value); // searchGym(JSON.parse(this.responseText), document.getElementById("input-search").value);
searchGym(JSON.parse(this.responseText), gym_name);
} else { } else {
const json = JSON.parse(this.responseText); const json = JSON.parse(this.responseText);
alert(json["error"]); alert(json["error"]);
...@@ -15,31 +22,25 @@ function callSearchGym() { ...@@ -15,31 +22,25 @@ function callSearchGym() {
xhr.send(); xhr.send();
} }
function searchGym(allGyms, searchString) { function searchGym(allGyms, searchString) {
const searchedGyms = []; const paginationContainer = document.getElementById("pagination-container");
for(let i = 0; i < allGyms.length; i++) { const searchedGyms = allGyms.filter((gym) => {
if(allGyms[i]["name"].toUpperCase().includes(searchString.toUpperCase())) { return gym["name"].toUpperCase().includes(searchString.toUpperCase());
searchedGyms.push(allGyms[i]); });
} data_length = searchedGyms.length;
} let gymCardContainer = document.getElementById("gym-card-container");
gymCardContainer.innerHTML = "";
if(searchedGyms.length == 0) {
gymCardContainer.innerHTML = "No gyms found";
} else {
// Slice the array to display
let startIndex = (page - 1) * itemInPage;
let slicedGyms = searchedGyms.slice(startIndex, startIndex + itemInPage);
const xhr = new XMLHttpRequest(); for(let i = 0; i < slicedGyms.length; i++) {
gymCardContainer.innerHTML += GymCard(slicedGyms[i]);
xhr.onreadystatechange = function() {
if(this.readyState === 4) {
if(this.status === 200) {
window.location.reload(true);
} else {
const json = JSON.parse(this.responseText);
alert(json["error"]);
}
} }
}; let pg = generatePagination(data_length, itemInPage, page);
paginationContainer.innerHTML = pg;
xhr.open("POST", `/home/`, true); }
xhr.setRequestHeader('Content-Type', 'application/json'); }
xhr.send(JSON.stringify(searchedGyms));
}
\ No newline at end of file
src/public/javascript/pagination.js 0 → 100644
+ 45
− 0
View file @ b9bafb26
function generatePagination(totalItems, itemsPerPage, currentPage, maxPages = 6) {
const totalPages = Math.ceil(totalItems / itemsPerPage);
let pagination = '<div class="pagination">';
const queryParams = new URLSearchParams(window.location.search);
queryParams.delete('page');
const queryString = queryParams.toString() ? `&${queryParams.toString()}` : '';
// Previous page
if (currentPage > 1) {
pagination += `<a href="?page=${currentPage - 1}${queryString}">&laquo;</a>`;
}
// Individual pages
if (totalPages > maxPages) {
let start = Math.max(1, currentPage - Math.floor(maxPages / 2));
let end = Math.min(totalPages, start + maxPages - 1);
start = Math.max(1, end - maxPages + 1);
if (start > 1) {
pagination += '<span>...</span>';
}
for (let i = start; i <= end; i++) {
pagination += `<a href="?page=${i}${queryString}" ${i == currentPage ? 'class="active"' : ''}>${i}</a>`;
}
if (end < totalPages) {
pagination += '<span>...</span>';
}
} else {
for (let i = 1; i <= totalPages; i++) {
pagination += `<a href="?page=${i}${queryString}" ${i === currentPage ? 'class="active"' : ''}>${i}</a>`;
}
}
// Next page
if (currentPage < totalPages) {
pagination += `<a href="?page=${currentPage + 1}${queryString}">&raquo;</a>`;
}
pagination += '</div>';
return pagination;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment