move all filters to one page

app/views/gardenSize.ejs

@@ -1 +0,0 @@
-<% include partials/range %>

app/views/price.ejs

@@ -1 +0,0 @@
-<% include partials/range %>

app/views/realEstateFilters.ejs

@@ -0,0 +1,86 @@
+<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>

app/views/size.ejs

@@ -1 +0,0 @@
-<% include partials/range %>