"Taking over work in progress."
This commit is contained in:
Naida Vatric
69
app/views/advancedFilters.ejs
Normal file
69
app/views/advancedFilters.ejs
Normal file
@@ -0,0 +1,69 @@
|
||||
<br>
|
||||
|
||||
<% for (const filter of advancedBooleanFilterObjects){ %>
|
||||
<p>
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" class="filled-in" name="<%= filter.dbField %>"
|
||||
<% if (advancedBooleanFilterValues[filter.dbField]) { %>
|
||||
checked
|
||||
<% } %>>
|
||||
<span><%= filter.title %></span>
|
||||
</label>
|
||||
</p>
|
||||
<% } %>
|
||||
|
||||
<br>
|
||||
<% for (const filter of advancedRangeFilterObjects){ %>
|
||||
<div class="row">
|
||||
<p class="column-label col s5 m3 l2">
|
||||
<%= filter.title %>
|
||||
</p>
|
||||
<div class="input-field col s3 m4 l5">
|
||||
<input
|
||||
id="<%= filter.dbFieldMin %>"
|
||||
name="<%= filter.dbFieldMin %>"
|
||||
type="number"
|
||||
value="<%= advancedRangeFilterValues[filter.dbFieldMin] !== undefined ? advancedRangeFilterValues[filter.dbFieldMin] : ""%>"
|
||||
>
|
||||
<label for="<%= filter.dbFieldMin %>">Od</label>
|
||||
</div>
|
||||
<div class="input-field col s3 m4 l5">
|
||||
<input
|
||||
id="<%= filter.dbFieldMax %>"
|
||||
name="<%= filter.dbFieldMax %>"
|
||||
type="number"
|
||||
value="<%= advancedRangeFilterValues[filter.dbFieldMax] !== undefined ? advancedRangeFilterValues[filter.dbFieldMax] : ""%>"
|
||||
>
|
||||
<label for="<%= filter.dbFieldMax %>">Do</label>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<br>
|
||||
<% for (const filter of advancedSegmentSelectFilterObjects){ %>
|
||||
<div>
|
||||
<label class="checkbox-label"><%= filter.title %>: </label><br><br>
|
||||
<span class="segmented small">
|
||||
<% for (const segmentObject of filter.values) { %>
|
||||
<label>
|
||||
<input type="radio" name="<%= filter.dbField %>" value="<%= segmentObject.id %>"
|
||||
<% if (advancedSegmentSelectFilterValues[filter.dbField] === segmentObject.id) { %>
|
||||
checked
|
||||
<% } %>>
|
||||
<span class="label"><%= segmentObject.title %></span>
|
||||
</label>
|
||||
<% } %>
|
||||
</span>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<br>
|
||||
<p class="distinguished">
|
||||
<label class="checkbox-label">
|
||||
<input type="checkbox" class="filled-in" name="includeIncompleteAds"
|
||||
<% if (includeIncompleteAds) { %>
|
||||
checked
|
||||
<% } %>>
|
||||
<span>Uključi i oglase bez potpunih informacija</span>
|
||||
</label>
|
||||
</p>
|
||||
@@ -1,63 +1,20 @@
|
||||
<br>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col s5 m3 l3 push-m1 push-l2">
|
||||
<input class="sliderInputBox" type="number" id="priceMin" name="priceMin">
|
||||
|
||||
<div class="col s12">
|
||||
<ul class="tabs">
|
||||
<li class="tab col s6"><a href="#standardFilters">Filteri</a></li>
|
||||
<li class="tab col s6"><a href="#advancedFilters">Napredni filteri</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col s5 m3 l3 push-s1 push-m4 push-l4">
|
||||
<input class="sliderInputBox" type="number" id="priceMax" name="priceMax">
|
||||
<div id="standardFilters" class="col s12">
|
||||
<%- include("./standardFilters.ejs") %>
|
||||
</div>
|
||||
<div id="advancedFilters" class="col s12">
|
||||
<%- include("./advancedFilters.ejs") %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="row center-align">
|
||||
<h5>Površina</h5>
|
||||
<br><br>
|
||||
<div class="center-align no-ui-slider" id="sizeFilter"></div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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="col s6 push-s3">
|
||||
<a id="submit" href="#" class="welcome-center-button waves-effect waves-light btn">Dalje</a>
|
||||
@@ -66,125 +23,7 @@
|
||||
</form>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
const priceSliderOptions = <%- priceSliderOptions %>;
|
||||
const sizeSliderOptions = <%- sizeSliderOptions %>;
|
||||
const priceStep = priceSliderOptions.step;
|
||||
const sizeStep = sizeSliderOptions.step;
|
||||
delete priceSliderOptions.step;
|
||||
delete sizeSliderOptions.step;
|
||||
|
||||
function updatePriceInputs(values, handle, unencoded) {
|
||||
$("#priceMin").val(Math.round(unencoded[0]/priceStep)*priceStep);
|
||||
$("#priceMax").val(Math.round(unencoded[1]/priceStep)*priceStep);
|
||||
}
|
||||
function 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 sizeSlider = document.getElementById("sizeFilter");
|
||||
|
||||
const priceSliderObject = noUiSlider.create(priceSlider, priceSliderOptions);
|
||||
const sizeSliderObject = noUiSlider.create(sizeSlider, sizeSliderOptions);
|
||||
|
||||
priceSliderObject.on('slide', updatePriceInputs);
|
||||
sizeSliderObject.on('slide', updateSizeInputs);
|
||||
|
||||
function priceMinChangeHandler(element) {
|
||||
if (element && element.currentTarget && element.currentTarget.value){
|
||||
const currentValues = priceSliderObject.get();
|
||||
const newValue = element.currentTarget.value;
|
||||
const fixedNewValue = newValue > currentValues[1] ? currentValues[1] : newValue;
|
||||
priceSliderObject.set([fixedNewValue, null]);
|
||||
$("#priceMin").val(Math.round(priceSliderObject.get()[0]));
|
||||
}
|
||||
}
|
||||
function priceMaxChangeHandler(element) {
|
||||
if (element && element.currentTarget && element.currentTarget.value){
|
||||
const newValue = element.currentTarget.value;
|
||||
priceSliderObject.set([null, newValue]);
|
||||
$("#priceMax").val(Math.round(priceSliderObject.get()[1]));
|
||||
}
|
||||
}
|
||||
$("#priceMin").val(priceSliderOptions.start[0]);
|
||||
$("#priceMax").val(priceSliderOptions.start[1]);
|
||||
$("#priceMin").change(priceMinChangeHandler);
|
||||
$("#priceMax").change(priceMaxChangeHandler);
|
||||
|
||||
function sizeMinChangeHandler(element) {
|
||||
if (element && element.currentTarget && element.currentTarget.value){
|
||||
const currentValues = sizeSliderObject.get();
|
||||
const newValue = element.currentTarget.value;
|
||||
const fixedNewValue = newValue > currentValues[1] ? currentValues[1] : newValue;
|
||||
sizeSliderObject.set([fixedNewValue, null]);
|
||||
$("#sizeMin").val(Math.round(sizeSliderObject.get()[0]));
|
||||
}
|
||||
}
|
||||
function sizeMaxChangeHandler(element) {
|
||||
if (element && element.currentTarget && element.currentTarget.value){
|
||||
const newValue = element.currentTarget.value;
|
||||
sizeSliderObject.set([null, newValue]);
|
||||
$("#sizeMax").val(Math.round(sizeSliderObject.get()[1]));
|
||||
}
|
||||
}
|
||||
$("#sizeMin").val(sizeSliderOptions.start[0]);
|
||||
$("#sizeMax").val(sizeSliderOptions.start[1]);
|
||||
$("#sizeMin").change(sizeMinChangeHandler);
|
||||
$("#sizeMax").change(sizeMaxChangeHandler);
|
||||
|
||||
<% if(hasGardenSize) { %>
|
||||
const gardenSizeSliderOptions = <%- gardenSizeSliderOptions %>;
|
||||
const gardenSizeStep = gardenSizeSliderOptions.step;
|
||||
delete gardenSizeSliderOptions.step;
|
||||
|
||||
function 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);
|
||||
function gardenSizeMinChangeHandler(element) {
|
||||
if (element && element.currentTarget && element.currentTarget.value){
|
||||
const currentValues = gardenSizeSliderObject.get();
|
||||
const newValue = element.currentTarget.value;
|
||||
const fixedNewValue = newValue > currentValues[1] ? currentValues[1] : newValue;
|
||||
gardenSizeSliderObject.set([fixedNewValue, null]);
|
||||
$("#gardenSizeMin").val(Math.round(gardenSizeSliderObject.get()[0]));
|
||||
}
|
||||
}
|
||||
function gardenSizeMaxChangeHandler(element) {
|
||||
if (element && element.currentTarget && element.currentTarget.value){
|
||||
const newValue = element.currentTarget.value;
|
||||
gardenSizeSliderObject.set([null, newValue]);
|
||||
$("#gardenSizeMin").val(Math.round(gardenSizeSliderObject.get()[0]));
|
||||
}
|
||||
}
|
||||
$("#gardenSizeMin").val(gardenSizeSliderOptions.start[0]);
|
||||
$("#gardenSizeMax").val(gardenSizeSliderOptions.start[1]);
|
||||
$("#gardenSizeMin").change("step", gardenSizeMinChangeHandler);
|
||||
$("#gardenSizeMax").change("step", gardenSizeMaxChangeHandler);
|
||||
<% } %>
|
||||
|
||||
$("#submit").click(function() {
|
||||
const priceFilterValues = priceSlider.noUiSlider.get();
|
||||
$("#priceFilterMin").val(priceFilterValues[0]);
|
||||
$("#priceFilterMax").val(priceFilterValues[1]);
|
||||
|
||||
const sizeFilterValues = sizeSlider.noUiSlider.get();
|
||||
$("#sizeFilterMin").val(sizeFilterValues[0]);
|
||||
$("#sizeFilterMax").val(sizeFilterValues[1]);
|
||||
|
||||
<% if (hasGardenSize) { %>
|
||||
const gardenSizeFilterValues = gardenSizeSlider.noUiSlider.get();
|
||||
$("#gardenSizeFilterMin").val(gardenSizeFilterValues[0]);
|
||||
$("#gardenSizeFilterMax").val(gardenSizeFilterValues[1]);
|
||||
<% } %>
|
||||
|
||||
$("#filtersForm").submit();
|
||||
});
|
||||
$(document).ready(function(){
|
||||
$('.tabs').tabs();
|
||||
});
|
||||
</script>
|
||||
|
||||
188
app/views/standardFilters.ejs
Normal file
188
app/views/standardFilters.ejs
Normal file
@@ -0,0 +1,188 @@
|
||||
<br>
|
||||
|
||||
<div class="row center-align">
|
||||
<h5>Cijena</h5>
|
||||
<br><br>
|
||||
<div class="col s12">
|
||||
<div class="center-align no-ui-slider" id="priceFilter"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="col s12">
|
||||
<div class="center-align no-ui-slider" id="sizeFilter"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="col s12">
|
||||
<div class="center-align no-ui-slider" id="gardenSizeFilter"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<% } %>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
const priceSliderOptions = <%- priceSliderOptions %>;
|
||||
const sizeSliderOptions = <%- sizeSliderOptions %>;
|
||||
const priceStep = priceSliderOptions.step;
|
||||
const sizeStep = sizeSliderOptions.step;
|
||||
delete priceSliderOptions.step;
|
||||
delete sizeSliderOptions.step;
|
||||
|
||||
function updatePriceInputs(values, handle, unencoded) {
|
||||
$("#priceMin").val(Math.round(unencoded[0]/priceStep)*priceStep);
|
||||
$("#priceMax").val(Math.round(unencoded[1]/priceStep)*priceStep);
|
||||
}
|
||||
function 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 sizeSlider = document.getElementById("sizeFilter");
|
||||
|
||||
const priceSliderObject = noUiSlider.create(priceSlider, priceSliderOptions);
|
||||
const sizeSliderObject = noUiSlider.create(sizeSlider, sizeSliderOptions);
|
||||
|
||||
priceSliderObject.on('slide', updatePriceInputs);
|
||||
sizeSliderObject.on('slide', updateSizeInputs);
|
||||
|
||||
function priceMinChangeHandler(element) {
|
||||
if (element && element.currentTarget && element.currentTarget.value){
|
||||
const currentValues = priceSliderObject.get();
|
||||
const newValue = element.currentTarget.value;
|
||||
const fixedNewValue = newValue > currentValues[1] ? currentValues[1] : newValue;
|
||||
priceSliderObject.set([fixedNewValue, null]);
|
||||
$("#priceMin").val(Math.round(priceSliderObject.get()[0]));
|
||||
}
|
||||
}
|
||||
function priceMaxChangeHandler(element) {
|
||||
if (element && element.currentTarget && element.currentTarget.value){
|
||||
const newValue = element.currentTarget.value;
|
||||
priceSliderObject.set([null, newValue]);
|
||||
$("#priceMax").val(Math.round(priceSliderObject.get()[1]));
|
||||
}
|
||||
}
|
||||
$("#priceMin").val(priceSliderOptions.start[0]);
|
||||
$("#priceMax").val(priceSliderOptions.start[1]);
|
||||
$("#priceMin").change(priceMinChangeHandler);
|
||||
$("#priceMax").change(priceMaxChangeHandler);
|
||||
|
||||
function sizeMinChangeHandler(element) {
|
||||
if (element && element.currentTarget && element.currentTarget.value){
|
||||
const currentValues = sizeSliderObject.get();
|
||||
const newValue = element.currentTarget.value;
|
||||
const fixedNewValue = newValue > currentValues[1] ? currentValues[1] : newValue;
|
||||
sizeSliderObject.set([fixedNewValue, null]);
|
||||
$("#sizeMin").val(Math.round(sizeSliderObject.get()[0]));
|
||||
}
|
||||
}
|
||||
function sizeMaxChangeHandler(element) {
|
||||
if (element && element.currentTarget && element.currentTarget.value){
|
||||
const newValue = element.currentTarget.value;
|
||||
sizeSliderObject.set([null, newValue]);
|
||||
$("#sizeMax").val(Math.round(sizeSliderObject.get()[1]));
|
||||
}
|
||||
}
|
||||
$("#sizeMin").val(sizeSliderOptions.start[0]);
|
||||
$("#sizeMax").val(sizeSliderOptions.start[1]);
|
||||
$("#sizeMin").change(sizeMinChangeHandler);
|
||||
$("#sizeMax").change(sizeMaxChangeHandler);
|
||||
|
||||
<% if(hasGardenSize) { %>
|
||||
const gardenSizeSliderOptions = <%- gardenSizeSliderOptions %>;
|
||||
const gardenSizeStep = gardenSizeSliderOptions.step;
|
||||
delete gardenSizeSliderOptions.step;
|
||||
|
||||
function 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);
|
||||
function gardenSizeMinChangeHandler(element) {
|
||||
if (element && element.currentTarget && element.currentTarget.value){
|
||||
const currentValues = gardenSizeSliderObject.get();
|
||||
const newValue = element.currentTarget.value;
|
||||
const fixedNewValue = newValue > currentValues[1] ? currentValues[1] : newValue;
|
||||
gardenSizeSliderObject.set([fixedNewValue, null]);
|
||||
$("#gardenSizeMin").val(Math.round(gardenSizeSliderObject.get()[0]));
|
||||
}
|
||||
}
|
||||
function gardenSizeMaxChangeHandler(element) {
|
||||
if (element && element.currentTarget && element.currentTarget.value){
|
||||
const newValue = element.currentTarget.value;
|
||||
gardenSizeSliderObject.set([null, newValue]);
|
||||
$("#gardenSizeMin").val(Math.round(gardenSizeSliderObject.get()[0]));
|
||||
}
|
||||
}
|
||||
$("#gardenSizeMin").val(gardenSizeSliderOptions.start[0]);
|
||||
$("#gardenSizeMax").val(gardenSizeSliderOptions.start[1]);
|
||||
$("#gardenSizeMin").change("step", gardenSizeMinChangeHandler);
|
||||
$("#gardenSizeMax").change("step", gardenSizeMaxChangeHandler);
|
||||
<% } %>
|
||||
|
||||
$("#submit").click(function() {
|
||||
const priceFilterValues = priceSlider.noUiSlider.get();
|
||||
$("#priceFilterMin").val(priceFilterValues[0]);
|
||||
$("#priceFilterMax").val(priceFilterValues[1]);
|
||||
|
||||
const sizeFilterValues = sizeSlider.noUiSlider.get();
|
||||
$("#sizeFilterMin").val(sizeFilterValues[0]);
|
||||
$("#sizeFilterMax").val(sizeFilterValues[1]);
|
||||
|
||||
<% if (hasGardenSize) { %>
|
||||
const gardenSizeFilterValues = gardenSizeSlider.noUiSlider.get();
|
||||
$("#gardenSizeFilterMin").val(gardenSizeFilterValues[0]);
|
||||
$("#gardenSizeFilterMax").val(gardenSizeFilterValues[1]);
|
||||
<% } %>
|
||||
|
||||
$("#filtersForm").submit();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user