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

fix: filter on homepage user

parent e14b9a8e
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/home/index.php
+ 25
− 14
View file @ 9cfed493
......@@ -13,9 +13,9 @@ 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' => true],
'alphabet-desc' => ['label' => 'Z-A', 'attribute' => 'name', 'desc' => false],
'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,
......@@ -56,6 +56,12 @@ $gymsFiltered = GymService::getInstance()->getFiltered(
]
);
$rows = [
['none'],
['alphabet-asc', 'alphabet-desc'],
['price-asc', 'price-desc']
];
?>
<!DOCTYPE html>
......@@ -88,7 +94,6 @@ $gymsFiltered = GymService::getInstance()->getFiltered(
City
<div class="space3"></div>
<select class="drop-down-city" id="filter-city" name="city">
<option <?= !isset($selectedCity) ? "selected" : "" ?> value="0">
......@@ -123,18 +128,24 @@ $gymsFiltered = GymService::getInstance()->getFiltered(
<?php endforeach; ?>
</select>
<div class="space2"></div>
Sort
<div class="space3"></div>
<?php foreach ($sortingOption as $key => $value): ?>
<input name="sorting" type="radio" class="toggle-sort" value=<?= $key ?> id="filter-<?= $key ?>"
<?= $selectedSorting == $key ? "checked=\"checked\"" : "" ?> value="<?= $key ?>">
<label for="filter-<?= $key ?>">
<?= $value['label'] ?>
</label>
<?php endforeach; ?>
<div class="space2"></div>
<div class="space2"></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 ?? "" ?>" />
......
src/public/css/style.css
+ 18
− 27
View file @ 9cfed493
......@@ -6,9 +6,10 @@
--dekstop-height: 1024px;
--font-size-standard: 16px;
--font-size-mobile: 12px;
--font-size-medium: 14px;
background-color: #def7ff;
--background-color-standard: #fff;
--font-standard: Open Sans Condensed;
--font-standard: 'Inter';
--text-standard: #003459;
--text-light: #fff;
--button-standard: #f0f9ff;
......@@ -48,9 +49,7 @@ body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
/* align items is for horizontal and justify content is for vertical */
align-items: center;
/* justify-content: center; */
height: 100vh;
margin: 0;
}
......@@ -113,9 +112,21 @@ input.input-search:hover {
margin-top: 8px;
}
.first-line-button {
.flex {
display: flex;
}
.gap {
gap: 10px;
}
.center-text {
text-align: center;
}
.med-text {
font-size: var(--font-size-medium);
}
.first-line-button {
display: flex;
gap: 14px;
justify-content: center;
flex-shrink: 0;
}
......@@ -144,9 +155,6 @@ input.input-search:hover {
.button-filter-admin {
justify-content: center;
align-items: center;
/* gap: 6px; */
/* height: 34px; */
/* width: 25.3%; */
height: 8.3%;
padding: 4px;
box-shadow: 0px 4px 4px 0px var(--button-shadow-standard);
......@@ -172,15 +180,10 @@ input.input-search:hover {
.form-search {
justify-content: center;
align-items: center;
/* justify-content: space-between; */
/* width: 230px;
height: 31px; */
/* gap: 8px; */
gap: 12%;
width: 63.8%;
height: 31px;
box-shadow: var(--form-search-box-shadow);
/* padding: 5px; */
}
.form-search:focus,
.form-search:hover {
......@@ -191,8 +194,6 @@ input.input-search {
margin-left: 4px;
border-radius: 10px;
border: 0px;
/* height: 30px;
width: 180px; */
height: 100%;
width: 85%;
font-size: var(--font-size-standard);
......@@ -207,10 +208,8 @@ input.input-search {
align-items: center;
justify-content: center;
border: 0px;
/* height: 31px; */
width: 34px;
height: 100%;
/* width: 15%; */
}
.button-search:hover,
.button-search:focus {
......@@ -231,7 +230,6 @@ input.input-search {
.navbar {
display: flex;
width: 100%;
/* height: 6.25%; */
height: 40px;
justify-content: center;
align-items: center;
......@@ -275,7 +273,6 @@ input.input-search {
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
gap: 1%;
flex-shrink: 0;
width: 100%;
......@@ -289,8 +286,6 @@ input.input-search {
.gym-card {
display: flex;
align-items: center;
/* width: 334px;
height: 73px; */
width: 100%;
height: 73px;
flex-shrink: 0;
......@@ -393,7 +388,7 @@ width: 334px; */
.popup-title {
color: #cb0000;
text-align: center;
font-family: Open Sans Condensed;
font-family: var(--font-standard);
font-size: 19px;
font-style: normal;
font-weight: 700;
......@@ -414,7 +409,7 @@ width: 334px; */
flex-direction: column;
color: var(--text-standard);
text-align: left;
font-family: Open Sans Condensed;
font-family: var(--font-standard);
font-size: var(--font-size-standard);
font-style: normal;
font-weight: 600;
......@@ -462,8 +457,6 @@ input.form-price {
}
.form-sort-line {
display: flex;
/* justify-content: space-between; */
/* align-items: center; */
gap: 10px;
}
.toggle-sort {
......@@ -490,8 +483,6 @@ input.form-price {
}
.search-filter,
.cancel-filter {
/* width: 328px;
height: 31px; */
width: 100%;
height: 8.2%;
flex-shrink: 0;
......@@ -519,7 +510,7 @@ input.form-price {
.first-line-title {
display: flex;
justify-content: center;
font-family: "Roboto Condensed";
font-family: var(--font-standard);
font-weight: bold;
font-size: 36px;
}
......
src/services/GymService.php
+ 5
− 3
View file @ 9cfed493
......@@ -124,9 +124,11 @@ class GymService extends BaseService
// Build order clause
$orderClause = "";
if ($sorting != null) {
$attribute = $sortingOption[$sorting]['attribute'];
$descending = $sortingOption[$sorting]['desc'] ? "DESC" : "ASC";
$orderClause = "ORDER BY {$attribute} {$descending}";
if (isset($sortingOption[$sorting]['desc'])) {
$attribute = $sortingOption[$sorting]['attribute'];
$descending = $sortingOption[$sorting]['desc'] ? "DESC" : "ASC";
$orderClause = "ORDER BY {$attribute} {$descending}";
}
}
// Build limit clause
......
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