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] max: [300000]
}, },
step: 1000, step: 1000,
connect: true, connect: true
tooltips: true
}; };
//This will be used for Flats, Apartments, Houses //This will be used for Flats, Apartments, Houses
@@ -17,8 +16,7 @@ const HOME_SIZE_SLIDER_OPTIONS = {
max: [400] max: [400]
}, },
step: 5, step: 5,
connect: true, connect: true
tooltips: true
}; };
const GARDEN_SIZE_SLIDER_OPTIONS = { const GARDEN_SIZE_SLIDER_OPTIONS = {
@@ -28,8 +26,7 @@ const GARDEN_SIZE_SLIDER_OPTIONS = {
max: [10000] max: [10000]
}, },
step: 100, step: 100,
connect: true, connect: true
tooltips: true
}; };
const LAND_SIZE_SLIDER_OPTIONS = { const LAND_SIZE_SLIDER_OPTIONS = {
@@ -39,8 +36,7 @@ const LAND_SIZE_SLIDER_OPTIONS = {
max: [100000] max: [100000]
}, },
step: 100, step: 100,
connect: true, connect: true
tooltips: true
}; };
const GARAGE_SIZE_SLIDER_OPTIONS = { const GARAGE_SIZE_SLIDER_OPTIONS = {
start: [10, 20], start: [10, 20],
@@ -49,8 +45,7 @@ const GARAGE_SIZE_SLIDER_OPTIONS = {
max: [150] max: [150]
}, },
step: 2, step: 2,
connect: true, connect: true
tooltips: true
}; };
const GARAGE_PRICE_SLIDER_OPTIONS = { const GARAGE_PRICE_SLIDER_OPTIONS = {
@@ -60,8 +55,7 @@ const GARAGE_PRICE_SLIDER_OPTIONS = {
max: [100000] max: [100000]
}, },
step: 500, step: 500,
connect: true, connect: true
tooltips: true
}; };
const AD_TYPE = { 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 nextStepPage = req.query.nextStep || "pregled";
const nextStepUrl = `/${nextStepPage}/${searchRequest.id}`; const nextStepUrl = `/${nextStepPage}/${searchRequest.id}`;
const priceMin = parseInt(req.body.priceFilterMin) || 0; const priceMin = parseInt(req.body.priceMin) || 0;
const priceMax = parseInt(req.body.priceFilterMax) || 0; const priceMax = parseInt(req.body.priceMax) || 0;
const sizeMin = parseInt(req.body.sizeFilterMin) || 0; const sizeMin = parseInt(req.body.sizeMin) || 0;
const sizeMax = parseInt(req.body.sizeFilterMax) || 0; const sizeMax = parseInt(req.body.sizeMax) || 0;
//TODO: Filter validation //TODO: Filter validation
@@ -74,11 +74,11 @@ const postFilters = async (req, res) => {
searchRequest.sizeMax = sizeMax; searchRequest.sizeMax = sizeMax;
if ( if (
req.body.gardenSizeFilterMin !== undefined && req.body.gardenSizeMin !== undefined &&
req.body.gardenSizeFilterMax !== undefined req.body.gardenSizeMax !== undefined
) { ) {
const gardenSizeMin = parseInt(req.body.gardenSizeFilterMin); const gardenSizeMin = parseInt(req.body.gardenSizeMin);
const gardenSizeMax = parseInt(req.body.gardenSizeFilterMax); const gardenSizeMax = parseInt(req.body.gardenSizeMax);
//TODO: Filter validation //TODO: Filter validation

7
app/public/main.css
View File

@@ -95,3 +95,10 @@ h3 {
font-size: 15px; font-size: 15px;
line-height: 1.5; 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> <h5>Cijena</h5>
<br><br> <br><br>
<div class="center-align no-ui-slider" id="priceFilter"></div> <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> </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"> <div class="row center-align">
<h5>Površina</h5> <h5>Površina</h5>
<br><br> <br><br>
<div class="center-align no-ui-slider" id="sizeFilter"></div> <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> </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) { %> <% if(hasGardenSize) { %>
<div class="row center-align"> <div class="row center-align">
<h5>Površina okućnice</h5> <h5>Površina okućnice</h5>
<br><br> <br><br>
<div class="center-align no-ui-slider" id="gardenSizeFilter"></div> <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> </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"> <div class="row">
@@ -42,42 +67,109 @@
<script> <script>
$(document).ready(() => { $(document).ready(() => {
const priceFormat = wNumb({ const priceSliderOptions = {...<%- priceSliderOptions %>};
thousand: ".", const sizeSliderOptions = {...<%- sizeSliderOptions %>};
suffix: " KM" const priceStep = priceSliderOptions.step;
}); const sizeStep = sizeSliderOptions.step;
const sizeFormat = wNumb({ delete priceSliderOptions.step;
thousand: ".", delete sizeSliderOptions.step;
suffix: " m2"
}); 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 priceSlider = document.getElementById("priceFilter");
const extendedPriceSliderOptions = {...<%- priceSliderOptions %>, format: priceFormat};
noUiSlider.create(priceSlider, extendedPriceSliderOptions);
const sizeSlider = document.getElementById("sizeFilter"); 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) { %> <% if(hasGardenSize) { %>
const gardenSizeSlider = document.getElementById("gardenSizeFilter"); const gardenSizeSliderOptions = {...<%- gardenSizeSliderOptions %>};
const extendedGardenSizeSliderOptions = {...<%- gardenSizeSliderOptions %>, format: sizeFormat}; const gardenSizeStep = gardenSizeSliderOptions.step;
noUiSlider.create(gardenSizeSlider, extendedGardenSizeSliderOptions); 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(() => { $("#submit").click(() => {
const priceFilterValues = priceSlider.noUiSlider.get(); const priceFilterValues = priceSlider.noUiSlider.get();
$("#priceFilterMin").val(priceFormat.from(priceFilterValues[0])); $("#priceFilterMin").val(priceFilterValues[0]);
$("#priceFilterMax").val(priceFormat.from(priceFilterValues[1])); $("#priceFilterMax").val(priceFilterValues[1]);
const sizeFilterValues = sizeSlider.noUiSlider.get(); const sizeFilterValues = sizeSlider.noUiSlider.get();
$("#sizeFilterMin").val(sizeFormat.from(sizeFilterValues[0])); $("#sizeFilterMin").val(sizeFilterValues[0]);
$("#sizeFilterMax").val(sizeFormat.from(sizeFilterValues[1])); $("#sizeFilterMax").val(sizeFilterValues[1]);
<% if (hasGardenSize) { %> <% if (hasGardenSize) { %>
const gardenSizeFilterValues = gardenSizeSlider.noUiSlider.get(); const gardenSizeFilterValues = gardenSizeSlider.noUiSlider.get();
$("#gardenSizeFilterMin").val(sizeFormat.from(gardenSizeFilterValues[0])); $("#gardenSizeFilterMin").val(gardenSizeFilterValues[0]);
$("#gardenSizeFilterMax").val(sizeFormat.from(gardenSizeFilterValues[1])); $("#gardenSizeFilterMax").val(gardenSizeFilterValues[1]);
<% } %> <% } %>
$("#filtersForm").submit(); $("#filtersForm").submit();