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
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;
$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
]
);
// $gymsFiltered = GymService::getInstance()->getFiltered(
// [
// 'page' => $currentPage,
// 'cityId' => $selectedCity,
// 'sorting' => $selectedSorting,
// 'priceRange' => $selectedPriceRange,
// 'sortingOption' => $sortingOption,
// 'priceRangeOption' => $priceRangeOption,
// 'gymCountInPage' => $itemInPage,
// 'searching' => $searching
// ]
// );
?>
......@@ -51,8 +51,20 @@ $gymsFiltered = GymService::getInstance()->getFiltered(
<body>
<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
echo Navbar();
echo Navbar();
?>
<div class="space"></div>
<div class="first-line-button">
......@@ -63,32 +75,24 @@ $gymsFiltered = GymService::getInstance()->getFiltered(
<?php
echo FilterForm($selectedCity, $selectedPriceRange, $selectedSorting);
?>
<div class="form-search">
<input id="input-search" class="input-search" type="text" name="name" onChange={handleChange}
placeholder="Search a gym" />
<button class="button-search" id="button-search" onclick="callSearchGym()">
<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">
<img src="/public/icon/vector_search.svg" alt="Search Icon">
</button>
</div>
</form>
</div>
<div class="gym-card-container">
<?php
if (sizeof($gymsFiltered['gyms']) == 0) {
?>
<?= "No Gym Found" ?>
<?php
}
foreach ($gymsFiltered['gyms'] as $gym) {
echo GymCard($gym);
}
?>
<div class="gym-card-container" id="gym-card-container">
<div class="space"></div>
Loading...
</div>
<div class="pagination-container" id="pagination-container">
<div class="pagination-container">
<?php echo generatePagination($gymsFiltered['itemCount'], $itemInPage, $currentPage, $maxPages); ?>
</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/search.js"></script>
</body>
......
src/public/javascript/gym/filter.js
+ 58
− 15
View file @ b9bafb26
......@@ -2,14 +2,64 @@ const filter = document.getElementById("filter-gym");
const filterButton = document.getElementById("button-filter");
const searchFilter = document.getElementById("button-search-filter");
const cancelFilter = document.getElementById("button-cancel-filter");
const searchButton = document.getElementById("button-search");
const inputSearch = document.getElementById("input-search");
const inputPriceMin = document.getElementById("filter-min-price");
const inputPriceMax = document.getElementById("filter-max-price");
const toggleAlphAsc = document.getElementById("filter-alph-asc");
const toggleAlphDesc = document.getElementById("filter-alph-desc");
const togglePriceAsc = document.getElementById("filter-price-asc");
const togglePriceDesc = document.getElementById("filter-price-desc");
const queryParams = new URLSearchParams(window.location.search);
function getFilteredGyms(){
const params = {
page: page,
cityId: selectedCity,
sorting: selectedSorting,
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.addEventListener("click", function (event) {
// stop propagation but if clicks outside of the filter, it will close the filter
......@@ -30,10 +80,3 @@ searchFilter.addEventListener("click", function () {
cancelFilter.addEventListener("click", function () {
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();
xhr.onreadystatechange = function() {
if(this.readyState === 4) {
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 {
const json = JSON.parse(this.responseText);
alert(json["error"]);
......@@ -15,31 +22,25 @@ function callSearchGym() {
xhr.send();
}
function searchGym(allGyms, searchString) {
const searchedGyms = [];
for(let i = 0; i < allGyms.length; i++) {
if(allGyms[i]["name"].toUpperCase().includes(searchString.toUpperCase())) {
searchedGyms.push(allGyms[i]);
}
}
const paginationContainer = document.getElementById("pagination-container");
const searchedGyms = allGyms.filter((gym) => {
return gym["name"].toUpperCase().includes(searchString.toUpperCase());
});
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();
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"]);
}
for(let i = 0; i < slicedGyms.length; i++) {
gymCardContainer.innerHTML += GymCard(slicedGyms[i]);
}
};
xhr.open("POST", `/home/`, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(searchedGyms));
}
\ No newline at end of file
let pg = generatePagination(data_length, itemInPage, page);
paginationContainer.innerHTML = pg;
}
}
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