Real Estate Slider

app/controllers/queryReview.js

@@ -18,7 +18,7 @@ const getQueryReview = async (req,res) => {
   const realEstateTypeTitle = realEstateType ? getEnumTypeTitle(realEstateTypes, realEstateType) : null;
   const regionName = region ? getRegionName(region) : null;
   const municipalityName = (region && municipality) ? getMunicipalityName(region, municipality) : null;
-  const sizeTitle = size ? getEnumTypeTitle(sizes, size) : null;
+  const sizeTitle = size ? size + "m2" : null;
   const gardenSizeTitle = gardenSize ? getEnumTypeTitle(gardenSizes, gardenSize) : null;
   const priceTitle = price ? getEnumTypeTitle(prices, price) : null;
 

app/controllers/sizes.js

@@ -13,8 +13,7 @@ const postSize = async (req, res) => {
   const nextStep = realEstateType && realEstateType.hasGardenSize ? 'okucnica' : 'cijena';
   const nextStepPage = req.query.nextStep || nextStep;
   const nextStepUrl = `/${nextStepPage}/${request.uniqueId}`;
-
-  request.size = req.body.size;
+  request.size = req.body.from + "-" + req.body.to ;
   await request.save();
 
   res.redirect(nextStepUrl);

app/views/size.ejs

@@ -1,29 +1,49 @@
 <!--suppress HtmlUnknownAnchorTarget -->
 <div class="row center-align">
-  <h2>Do koliko kvadrata tražite nekretninu ?</h2>
+  <h2>Od koliko kvadrata tražite nekretninu ?</h2>
 </div>
 
 <form method="POST" id="form-size">
-<div class="row center-align">
-  <ul class="collection with-header">
-    <% for(const size of sizes) { %>
-    <li class="collection-item">
-      <div id="<%= size.id %>" onclick="saveAndSubmit(this.id)"><%= size.title %>
-        <a href="#" class="secondary-content">
-          <i class="material-icons">send</i>
-        </a>
-      </div>
-    </li>
-    <% } %>
-  </ul>
-  <input type="hidden" name="size" id="size" />
-</div>
+
+  <div>
+    <div class="row center-align">
+      <h6>Od</h6>
+    </div>
+    <p class="range-field">
+      <input name="from" id="from" type="range" value="0" min="0" max="250" />
+    </p>
+    <div class="row center-align">
+      <h6>Do</h6>
+    </div>
+    <p class="range-field">
+      <input name="to" id="to" type="range" value="50" min="0" max="250" />
+    </p>
+  </div>
+  <div class="col s6 push-s3">
+    <a id="btnsubmit" href="#" class="welcome-center-button waves-effect waves-light btn">
+      Dalje
+    </a>
+  </div>
 </form>
 
 <script>
- function saveAndSubmit(id) {
-   $("#size").val(id);
-   $("#form-size").submit();
- }
-</script>
 
+  $(document).ready(() => {
+
+    $("#btnsubmit").click(() => {
+      var from = $("#from").val();
+      var to = $("#to").val();
+      console.log("From " + from + " " + to);
+
+      if (parseInt(from, 10) >= parseInt(to, 10)) {
+        alert("\"Od\" vrijednost ne smije biti veca od \"Do\" vrijednosti ")
+        return;
+      }
+
+      $("#form-size").submit();
+    });
+  });
+  // function saveAndSubmit(id) {
+
+  // }
+</script>