senaduka/old-web
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

add input box for sliders

Browse Source
This commit is contained in:
Bilal Catic
2019-10-30 10:54:05 +01:00
parent cbbed137e6
commit 9033114545
4 changed files with 144 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/common/enums.js
View File

@@ -5,8 +5,7 @@ const PRICE_SLIDER_OPTIONS = {
max: [300000]
},
step: 1000,
connect: true,
tooltips: true
connect: true
};
//This will be used for Flats, Apartments, Houses
@@ -17,8 +16,7 @@ const HOME_SIZE_SLIDER_OPTIONS = {
max: [400]
},
step: 5,
connect: true,
tooltips: true
connect: true
};
const GARDEN_SIZE_SLIDER_OPTIONS = {
@@ -28,8 +26,7 @@ const GARDEN_SIZE_SLIDER_OPTIONS = {
max: [10000]
},
step: 100,
connect: true,
tooltips: true
connect: true
};
const LAND_SIZE_SLIDER_OPTIONS = {
@@ -39,8 +36,7 @@ const LAND_SIZE_SLIDER_OPTIONS = {
max: [100000]
},
step: 100,
connect: true,
tooltips: true
connect: true
};
const GARAGE_SIZE_SLIDER_OPTIONS = {
start: [10, 20],
@@ -49,8 +45,7 @@ const GARAGE_SIZE_SLIDER_OPTIONS = {
max: [150]
},
step: 2,
connect: true,
tooltips: true
connect: true
};
const GARAGE_PRICE_SLIDER_OPTIONS = {
@@ -60,8 +55,7 @@ const GARAGE_PRICE_SLIDER_OPTIONS = {
max: [100000]
},
step: 500,
connect: true,
tooltips: true
connect: true
};
const AD_TYPE = {

16
app/controllers/realEstateFilters.js
View File

@@ -61,10 +61,10 @@ const postFilters = async (req, res) => {
const nextStepPage = req.query.nextStep || "pregled";
const nextStepUrl = `/${nextStepPage}/${searchRequest.id}`;
const priceMin = parseInt(req.body.priceFilterMin) || 0;
const priceMax = parseInt(req.body.priceFilterMax) || 0;
const sizeMin = parseInt(req.body.sizeFilterMin) || 0;
const sizeMax = parseInt(req.body.sizeFilterMax) || 0;
const priceMin = parseInt(req.body.priceMin) || 0;
const priceMax = parseInt(req.body.priceMax) || 0;
const sizeMin = parseInt(req.body.sizeMin) || 0;
const sizeMax = parseInt(req.body.sizeMax) || 0;
//TODO: Filter validation
@@ -74,11 +74,11 @@ const postFilters = async (req, res) => {
searchRequest.sizeMax = sizeMax;
if (
req.body.gardenSizeFilterMin !== undefined &&
req.body.gardenSizeFilterMax !== undefined
req.body.gardenSizeMin !== undefined &&
req.body.gardenSizeMax !== undefined
) {
const gardenSizeMin = parseInt(req.body.gardenSizeFilterMin);
const gardenSizeMax = parseInt(req.body.gardenSizeFilterMax);
const gardenSizeMin = parseInt(req.body.gardenSizeMin);
const gardenSizeMax = parseInt(req.body.gardenSizeMax);
//TODO: Filter validation

7
app/public/main.css
View File

@@ -95,3 +95,10 @@ h3 {
font-size: 15px;
line-height: 1.5;
}
.sliderInputBox {
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4) !important;
border: 1px solid #02adba !important;
border-radius: 4px !important;
text-align: center;
}

154
app/views/realEstateFilters.ejs
View File

@@ -5,32 +5,57 @@
<h5>Cijena</h5>
<br><br>
<div class="center-align no-ui-slider" id="priceFilter"></div>
<input type="hidden" id="priceFilterMin" name="priceFilterMin">
<input type="hidden" id="priceFilterMax" name="priceFilterMax">
</div>
<br><br>
<br>
<div class="row">
<div class="col s5 m3 l3 push-m1 push-l2">
<input class="sliderInputBox" type="number" id="priceMin" name="priceMin">
</div>
<div class="col s5 m3 l3 push-s1 push-m4 push-l4">
<input class="sliderInputBox" type="number" id="priceMax" name="priceMax">
</div>
</div>
<br>
<div class="row center-align">
<h5>Površina</h5>
<br><br>
<div class="center-align no-ui-slider" id="sizeFilter"></div>
<input type="hidden" id="sizeFilterMin" name="sizeFilterMin">
<input type="hidden" id="sizeFilterMax" name="sizeFilterMax">
</div>
<br><br>
<br>
<div class="row">
<div class="col s5 m3 l3 push-m1 push-l2">
<input class="sliderInputBox" type="number" id="sizeMin" name="sizeMin">
</div>
<div class="col s5 m3 l3 push-s1 push-m4 push-l4">
<input class="sliderInputBox" type="number" id="sizeMax" name="sizeMax">
</div>
</div>
<br>
<% if(hasGardenSize) { %>
<div class="row center-align">
<h5>Površina okućnice</h5>
<br><br>
<div class="center-align no-ui-slider" id="gardenSizeFilter"></div>
<input type="hidden" id="gardenSizeFilterMin" name="gardenSizeFilterMin">
<input type="hidden" id="gardenSizeFilterMax" name="gardenSizeFilterMax">
</div>
<br><br>
<br>
<div class="row">
<div class="col s5 m3 l3 push-m1 push-l2">
<input class="sliderInputBox" type="number" id="gardenSizeMin" name="gardenSizeMin">
</div>
<div class="col s5 m3 l3 push-s1 push-m4 push-l4">
<input class="sliderInputBox" type="number" id="gardenSizeMax" name="gardenSizeMax">
</div>
</div>
<% } %>
<div class="row">
@@ -42,42 +67,109 @@
<script>
$(document).ready(() => {
const priceFormat = wNumb({
thousand: ".",
suffix: " KM"
});
const sizeFormat = wNumb({
thousand: ".",
suffix: " m2"
});
const priceSliderOptions = {...<%- priceSliderOptions %>};
const sizeSliderOptions = {...<%- sizeSliderOptions %>};
const priceStep = priceSliderOptions.step;
const sizeStep = sizeSliderOptions.step;
delete priceSliderOptions.step;
delete sizeSliderOptions.step;
const updatePriceInputs = (values, handle, unencoded) => {
$("#priceMin").val(Math.round(unencoded[0]/priceStep)*priceStep);
$("#priceMax").val(Math.round(unencoded[1]/priceStep)*priceStep);
}
const updateSizeInputs = (values, handle, unencoded) => {
$("#sizeMin").val(Math.round(unencoded[0]/sizeStep)*sizeStep);
$("#sizeMax").val(Math.round(unencoded[1]/sizeStep)*sizeStep);
}
const priceSlider = document.getElementById("priceFilter");
const extendedPriceSliderOptions = {...<%- priceSliderOptions %>, format: priceFormat};
noUiSlider.create(priceSlider, extendedPriceSliderOptions);
const sizeSlider = document.getElementById("sizeFilter");
const extendedSizeSliderOptions = {...<%- sizeSliderOptions %>, format: sizeFormat};
noUiSlider.create(sizeSlider, extendedSizeSliderOptions);
const priceSliderObject = noUiSlider.create(priceSlider, priceSliderOptions);
const sizeSliderObject = noUiSlider.create(sizeSlider, sizeSliderOptions);
priceSliderObject.on('slide', updatePriceInputs);
sizeSliderObject.on('slide', updateSizeInputs);
const priceMinChangeHandler = (element) => {
if (element && element.currentTarget && element.currentTarget.value){
const newValue = element.currentTarget.value;
priceSliderObject.set([newValue, null]);
}
}
const priceMaxChangeHandler = (element) => {
if (element && element.currentTarget && element.currentTarget.value){
const newValue = element.currentTarget.value;
priceSliderObject.set([null, newValue]);
}
}
$("#priceMin").val(priceSliderOptions.start[0]);
$("#priceMax").val(priceSliderOptions.start[1]);
$("#priceMin").change(priceMinChangeHandler);
$("#priceMax").change(priceMaxChangeHandler);
const sizeMinChangeHandler = (element) => {
if (element && element.currentTarget && element.currentTarget.value){
const newValue = element.currentTarget.value;
sizeSliderObject.set([newValue, null]);
}
}
const sizeMaxChangeHandler = (element) => {
if (element && element.currentTarget && element.currentTarget.value){
const newValue = element.currentTarget.value;
sizeSliderObject.set([null, newValue]);
}
}
$("#sizeMin").val(sizeSliderOptions.start[0]);
$("#sizeMax").val(sizeSliderOptions.start[1]);
$("#sizeMin").change(sizeMinChangeHandler);
$("#sizeMax").change(sizeMaxChangeHandler);
<% if(hasGardenSize) { %>
const gardenSizeSlider = document.getElementById("gardenSizeFilter");
const extendedGardenSizeSliderOptions = {...<%- gardenSizeSliderOptions %>, format: sizeFormat};
noUiSlider.create(gardenSizeSlider, extendedGardenSizeSliderOptions);
const gardenSizeSliderOptions = {...<%- gardenSizeSliderOptions %>};
const gardenSizeStep = gardenSizeSliderOptions.step;
delete gardenSizeSliderOptions.step;
const updateGardenSizeInputs = (values, handle, unencoded) => {
$("#gardenSizeMin").val(Math.round(unencoded[0]/gardenSizeStep)*gardenSizeStep);
$("#gardenSizeMax").val(Math.round(unencoded[1]/gardenSizeStep)*gardenSizeStep);
}
const gardenSizeSlider = document.getElementById("gardenSizeFilter");
const gardenSizeSliderObject = noUiSlider.create(gardenSizeSlider, gardenSizeSliderOptions);
gardenSizeSliderObject.on('slide', updateGardenSizeInputs);
const gardenSizeMinChangeHandler = (element) => {
if (element && element.currentTarget && element.currentTarget.value){
const newValue = element.currentTarget.value;
gardenSizeSliderObject.set([newValue, null]);
}
}
const gardenSizeMaxChangeHandler = (element) => {
if (element && element.currentTarget && element.currentTarget.value){
const newValue = element.currentTarget.value;
gardenSizeSliderObject.set([null, newValue]);
}
}
$("#gardenSizeMin").val(gardenSizeSliderOptions.start[0]);
$("#gardenSizeMax").val(gardenSizeSliderOptions.start[1]);
$("#gardenSizeMin").change("step", gardenSizeMinChangeHandler);
$("#gardenSizeMax").change("step", gardenSizeMaxChangeHandler);
<% } %>
$("#submit").click(() => {
const priceFilterValues = priceSlider.noUiSlider.get();
$("#priceFilterMin").val(priceFormat.from(priceFilterValues[0]));
$("#priceFilterMax").val(priceFormat.from(priceFilterValues[1]));
$("#priceFilterMin").val(priceFilterValues[0]);
$("#priceFilterMax").val(priceFilterValues[1]);
const sizeFilterValues = sizeSlider.noUiSlider.get();
$("#sizeFilterMin").val(sizeFormat.from(sizeFilterValues[0]));
$("#sizeFilterMax").val(sizeFormat.from(sizeFilterValues[1]));
$("#sizeFilterMin").val(sizeFilterValues[0]);
$("#sizeFilterMax").val(sizeFilterValues[1]);
<% if (hasGardenSize) { %>
const gardenSizeFilterValues = gardenSizeSlider.noUiSlider.get();
$("#gardenSizeFilterMin").val(sizeFormat.from(gardenSizeFilterValues[0]));
$("#gardenSizeFilterMax").val(sizeFormat.from(gardenSizeFilterValues[1]));
$("#gardenSizeFilterMin").val(gardenSizeFilterValues[0]);
$("#gardenSizeFilterMax").val(gardenSizeFilterValues[1]);
<% } %>
$("#filtersForm").submit();