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

update: filter form

parent cef963ee
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/home/index.php
+ 4
− 105
View file @ 4d287db1
...@@ -7,29 +7,11 @@ require_once PROJECT_ROOT_PATH . '/services/CityService.php'; ...@@ -7,29 +7,11 @@ require_once PROJECT_ROOT_PATH . '/services/CityService.php';
require_once PROJECT_ROOT_PATH . '/components/GymCard.php'; require_once PROJECT_ROOT_PATH . '/components/GymCard.php';
require_once PROJECT_ROOT_PATH . '/components/Navbar.php'; require_once PROJECT_ROOT_PATH . '/components/Navbar.php';
require_once PROJECT_ROOT_PATH . '/components/Pagination.php'; require_once PROJECT_ROOT_PATH . '/components/Pagination.php';
require_once PROJECT_ROOT_PATH . '/components/FilterOption.php';
require_once PROJECT_ROOT_PATH . '/middleware/AuthMiddleware.php'; require_once PROJECT_ROOT_PATH . '/middleware/AuthMiddleware.php';
AuthMiddleware::getInstance()->secureRoute(); AuthMiddleware::getInstance()->secureRoute();
$priceRangeOption = [1 => ['label' => "< 50000", 'upperBound' => 50000], 2 => ['label' => "50000 - 200000", 'lowerBound' => 50000, 'upperBound' => 200000], 3 => ['label' => "500000 - 1000000", 'lowerBound' => 500000, 'upperBound' => 1000000], 4 => ['label' => "> 1000000", 'lowerBound' => 1000000]];
$sortingOption = [
'none' => ['label' => 'No Sort'],
'alphabet-asc' => ['label' => 'A-Z', 'attribute' => 'name', 'desc' => false],
'alphabet-desc' => ['label' => 'Z-A', 'attribute' => 'name', 'desc' => true],
'price-asc' => [
'attribute' => 'monthly_price',
'desc' => false,
'label' => '<img src="/public/icon/tag-price.svg" alt="Price Icon">
<img src="/public/icon/arrow-up.svg" alt="Arrow Up Icon">'
],
'price-desc' => [
'attribute' => 'monthly_price',
'desc' => true,
'label' => '<img src="/public/icon/tag-price.svg" alt="Price Icon">
<img src="/public/icon/arrow-down.svg" alt="Arrow Down Icon">'
]
];
$searching = [ $searching = [
// 'name' => $_GET["name"] ?? null, // 'name' => $_GET["name"] ?? null,
// 'description' => $_GET["description"] ?? null // 'description' => $_GET["description"] ?? null
...@@ -56,12 +38,6 @@ $gymsFiltered = GymService::getInstance()->getFiltered( ...@@ -56,12 +38,6 @@ $gymsFiltered = GymService::getInstance()->getFiltered(
] ]
); );
$rows = [
['none'],
['alphabet-asc', 'alphabet-desc'],
['price-asc', 'price-desc']
];
?> ?>
<!DOCTYPE html> <!DOCTYPE html>
...@@ -85,86 +61,9 @@ $rows = [ ...@@ -85,86 +61,9 @@ $rows = [
<img src="/public/icon/filter.svg" alt="Filter Gym Icon"> <img src="/public/icon/filter.svg" alt="Filter Gym Icon">
Filter Filter
</button> </button>
<form class="filter" id="filter-gym"> <?php
<div class="filter-content"> echo FilterForm($selectedCity, $selectedPriceRange, $selectedSorting);
<div class="filter-title"> ?>
Gym Filter
</div>
<div class="space2"></div>
City
<div class="space3"></div>
<select class="drop-down-city" id="filter-city" name="city">
<option <?= !isset($selectedCity) ? "selected" : "" ?> value="0">
No Selection
</option>
<?php
foreach (CityService::getInstance()->getAll() as $city) {
?>
<option <?= $selectedCity == $city->city_id ? "selected" : "" ?> value=<?= $city->city_id ?>>
<?= $city->name ?></option>
<?php
}
?>
</select>
<div class="space2"></div>
Price Range
<div class="space3"></div>
<select class="drop-down-price" id="drop-down-price" name="price-range">
<?php if (!isset($selectedPriceRange)) {
?>
<option <?= !isset($selectedPriceRange) ? "selected" : "" ?> selected disabled value="0">Select a
price range</option>
<?php
}
?>
<?php foreach ($priceRangeOption as $key => $value): ?>
<option <?= $selectedPriceRange == $key ? "selected" : "" ?> value="<?= $key ?>">
<?= $value['label'] ?>
</option>
<?php endforeach; ?>
</select>
<div class="space2"></div>
Sort
<div class="space3"></div>
<?php
foreach ($rows as $row) {
echo '<div class="space3"></div>';
echo '<div class="flex gap">';
foreach ($row as $key) {
$option = $sortingOption[$key];
echo '<div class="center-text med-text">';
echo '<label class="sort-label" for="filter-' . $key . '">' . $option['label'] . '</label>';
echo '<input name="sorting" type="radio" class="toggle-sort" value="' . $key . '" id="filter-' . $key . '" ' . ($selectedSorting == $key ? 'checked="checked"' : '') . '>';
echo '</div>';
}
echo '</div>';
}
?>
<div class="space"></div>
<!-- <div class="form-search">
<input id="input-search" class="input-search" type="text" name="name" onChange={handleChange}
placeholder="Search a gym based on name" value="<?= $searchedName ?? "" ?>" />
</div>
<div class="form-search">
<input id="input-search" class="input-search" type="text" name="description"
onChange={handleChange} placeholder="Search a gym based on description"
value="<?= $searchedDescription ?? "" ?>" />
</div> -->
<!-- <button class="button-search" type="submit" id="button-search">
<img src="../public/icon/vector_search.svg" alt="Search Icon">
</button> -->
<button class="search-filter" type="submit" id="button-search-filter">Search</button>
<div class="space3"></div>
<button class="cancel-filter" id="button-cancel-filter">Cancel</button>
</div>
</form>
<div class="form-search"> <div 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="name" onChange={handleChange}
placeholder="Search a gym" /> placeholder="Search a gym" />
......
src/public/javascript/gym/filter.js
+ 6
− 8
View file @ 4d287db1
...@@ -26,17 +26,15 @@ filterButton.addEventListener("click", function () { ...@@ -26,17 +26,15 @@ filterButton.addEventListener("click", function () {
}); });
// Functions to handle button clicks // Functions to handle button clicks
searchFilter.addEventListener("click", function () { searchFilter.addEventListener("click", function () {
// document.querySelector('p').textContent = 'Text changed successfully!';
filter.style.display = "none"; filter.style.display = "none";
// alertFilterGymData();
}); });
cancelFilter.addEventListener("click", function () { cancelFilter.addEventListener("click", function () {
filter.style.display = "none"; filter.style.display = "none";
}); });
// change price min and max input from document // change price min and max input from document
inputPriceMin.addEventListener("change", function () { // inputPriceMin.addEventListener("change", function () {
filteredGymData.price_min = inputPriceMin.value; // filteredGymData.price_min = inputPriceMin.value;
}); // });
inputPriceMax.addEventListener("change", function () { // inputPriceMax.addEventListener("change", function () {
filteredGymData.price_max = inputPriceMax.value; // filteredGymData.price_max = inputPriceMax.value;
}); // });
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