87 lines
2.8 KiB
Plaintext
87 lines
2.8 KiB
Plaintext
<form id="filtersForm" method="POST">
|
|
<br>
|
|
|
|
<div class="row center-align">
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<% 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>
|
|
<% } %>
|
|
|
|
<div class="row">
|
|
<div class="col s6 push-s3">
|
|
<a id="submit" href="#" class="welcome-center-button waves-effect waves-light btn">Dalje</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
$(document).ready(() => {
|
|
const priceFormat = wNumb({
|
|
thousand: ".",
|
|
suffix: " KM"
|
|
});
|
|
const sizeFormat = wNumb({
|
|
thousand: ".",
|
|
suffix: " m2"
|
|
});
|
|
|
|
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);
|
|
|
|
<% if(hasGardenSize) { %>
|
|
const gardenSizeSlider = document.getElementById("gardenSizeFilter");
|
|
const extendedGardenSizeSliderOptions = {...<%- gardenSizeSliderOptions %>, format: sizeFormat};
|
|
noUiSlider.create(gardenSizeSlider, extendedGardenSizeSliderOptions);
|
|
<% } %>
|
|
|
|
$("#submit").click(() => {
|
|
const priceFilterValues = priceSlider.noUiSlider.get();
|
|
$("#priceFilterMin").val(priceFormat.from(priceFilterValues[0]));
|
|
$("#priceFilterMax").val(priceFormat.from(priceFilterValues[1]));
|
|
|
|
const sizeFilterValues = sizeSlider.noUiSlider.get();
|
|
$("#sizeFilterMin").val(sizeFormat.from(sizeFilterValues[0]));
|
|
$("#sizeFilterMax").val(sizeFormat.from(sizeFilterValues[1]));
|
|
|
|
<% if (hasGardenSize) { %>
|
|
const gardenSizeFilterValues = gardenSizeSlider.noUiSlider.get();
|
|
$("#gardenSizeFilterMin").val(sizeFormat.from(gardenSizeFilterValues[0]));
|
|
$("#gardenSizeFilterMax").val(sizeFormat.from(gardenSizeFilterValues[1]));
|
|
<% } %>
|
|
|
|
$("#filtersForm").submit();
|
|
});
|
|
});
|
|
</script>
|