Added range slider to gardensize and price

app/controllers/gardenSizes.js

@@ -1,8 +1,21 @@
 const { currentRERequest } = require('../helpers/url');
-const { gardenSizes, getRealEstateTypeEnum } = require('../helpers/enums');
+const { getRealEstateTypeEnum } = require('../helpers/enums');
 
 const getGardenSize = (req,res) => {
-  res.render('gardenSize', { gardenSizes });
+  const rangeFrom = {
+    min : 0,
+    max : 3000,
+    value : 0,
+    step : 100
+  }
+
+  const rangeTo = {
+    min : 0,
+    max : 3000,
+    value : 100,
+    step : 100
+  }
+  res.render('gardenSize', { rangeFrom, rangeTo });
 };
 
 const postGardenSize = async (req, res) => {
@@ -13,7 +26,8 @@ const postGardenSize = async (req, res) => {
 
   const realEstateType = getRealEstateTypeEnum(request.realEstateType);
   if (realEstateType && realEstateType.hasGardenSize) {
-    request.gardenSize = req.body.gardensize;
+    request.gardenSize = req.body.from;
+    request.gardenSizeRange = req.body.to;
     await request.save();
   }
 

app/controllers/prices.js

@@ -1,8 +1,22 @@
 const { currentRERequest } = require('../helpers/url');
-const { prices } = require('../helpers/enums');
 
 const getPrice = (req,res) => {
-  res.render('price', { prices });
+  const rangeFrom = {
+    min : 0,
+    max : 250000,
+    value : 0,
+    step : 1000
+  }
+
+  const rangeTo = {
+    min : 0,
+    max : 250000,
+    value : 50000,
+    step : 1000
+  }
+
+
+  res.render('price', {rangeFrom, rangeTo  });
 };
 
 const postPrice = async (req, res) => {
@@ -11,7 +25,8 @@ const postPrice = async (req, res) => {
   const nextStepPage = req.query.nextStep || 'pregled';
   const nextStepUrl = `/${nextStepPage}/${request.uniqueId}`;
 
-  request.price = req.body.price;
+  request.price = req.body.from;
+  request.priceRange = req.body.to;
   await request.save();
 
   res.redirect(nextStepUrl);

app/controllers/queryReview.js

@@ -10,7 +10,16 @@ const getQueryReview = async (req,res) => {
     return null;
   }
 
-  const { realEstateType, region, municipality, size, gardenSize, price } = request.dataValues;
+  const { 
+    realEstateType, 
+    region, 
+    municipality, 
+    size, 
+    sizeRange, 
+    gardenSize, 
+    gardenSizeRange, 
+    price, 
+    priceRange } = request.dataValues;
 
   const realEstateTypeObject = getRealEstateTypeEnum(realEstateType);
   const enableGardenSizeEdit = realEstateTypeObject ? realEstateTypeObject.hasGardenSize : false;
@@ -18,9 +27,9 @@ 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 ? size + "m2" : null;
+  const sizeTitle = size ? size + "-" + sizeRange + " m2" : null;
-  const gardenSizeTitle = gardenSize ? getEnumTypeTitle(gardenSizes, gardenSize) : null;
+  const gardenSizeTitle =  gardenSize ? gardenSize + "-" + gardenSizeRange + " m2" : null;
-  const priceTitle = price ? getEnumTypeTitle(prices, price) : null;
+  const priceTitle =  price ? price + "-" + priceRange + " KM" : null;
 
   const uniqueId = request.dataValues.uniqueId ? request.dataValues.uniqueId : '';
 

app/controllers/sizes.js

@@ -2,7 +2,21 @@ const { currentRERequest } = require('../helpers/url');
 const { sizes, getRealEstateTypeEnum } = require('../helpers/enums');
 
 const getSize = (req,res) => {
-  res.render('size', { sizes });
+  const rangeFrom = {
+    min : 0,
+    max : 250,
+    value : 0,
+    step : 10
+  }
+
+  const rangeTo = {
+    min : 0,
+    max : 250,
+    value : 50,
+    step : 10
+  }
+
+  res.render('size', { rangeFrom, rangeTo });
 };
 
 const postSize = async (req, res) => {
@@ -13,7 +27,8 @@ 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.from + "-" + req.body.to ;
+  request.size = req.body.from;
+  request.sizeRange = req.body.to;
   await request.save();
 
   res.redirect(nextStepUrl);

app/migrations/20190529093410-slider-fields.js

@@ -0,0 +1,27 @@
+module.exports = {
+    up: (queryInterface, Sequelize) => {
+        return queryInterface.sequelize.transaction((t) => {
+            return Promise.all([
+                queryInterface.addColumn('RealEstateRequests', 'sizeRange', {
+                    type: Sequelize.STRING
+                }, { transaction: t }),
+                queryInterface.addColumn('RealEstateRequests', 'gardenSizeRange', {
+                    type: Sequelize.STRING,
+                }, { transaction: t }),
+                queryInterface.addColumn('RealEstateRequests', 'priceRange', {
+                    type: Sequelize.STRING,
+                }, { transaction: t })
+            ])
+        })
+    },
+
+    down: (queryInterface, Sequelize) => {
+        return queryInterface.sequelize.transaction((t) => {
+            return Promise.all([
+                queryInterface.removeColumn('RealEstateRequests', 'sizeRange', { transaction: t }),
+                queryInterface.removeColumn('RealEstateRequests', 'gardenSizeRange', { transaction: t }),
+                queryInterface.removeColumn('RealEstateRequests', 'priceRange', { transaction: t })
+            ])
+        })
+    }
+};

app/models/realestaterequest.js

@@ -13,8 +13,11 @@ module.exports = (sequelize, DataTypes) => {
     region: DataTypes.STRING,
     municipality: DataTypes.STRING,
     size: DataTypes.STRING,
+    sizeRange: DataTypes.STRING,
     gardenSize: DataTypes.STRING,
+    gardenSizeRange: DataTypes.STRING,
     price: DataTypes.STRING,
+    priceRange: DataTypes.STRING,
     bounding_box: DataTypes.GEOMETRY('POINT', 4326)
   }, {});
   RealEstateRequest.associate = function(models) {

app/views/gardenSize.ejs

@@ -3,27 +3,4 @@
   <h2>Koliko okućnice tražite ?</h2>
 </div>
 
-<form method="POST" id="form-gardensize">
+<% include partials/range %> 
-<div class="row center-align">
-  <ul class="collection with-header">
-    <% for(const gardenSize of gardenSizes) { %>
-    <li class="collection-item" >
-      <div id="<%= gardenSize.id %>" onclick="saveAndSubmit(this.id)"><%= gardenSize.title %>
-        <a href="#" class="secondary-content">
-          <i class="material-icons">send</i>
-        </a>
-      </div>
-    </li>
-    <% } %>
-  </ul>
-  <input type="hidden" name="gardensize" id="gardensize" />
-</div>
-</form>
-
-<script>
- function saveAndSubmit(id) {
-   $("#gardensize").val(id);
-   $("#form-gardensize").submit();
- }
-</script>
-

app/views/partials/range.ejs

@@ -0,0 +1,56 @@
+<form method="POST" id="form-range">
+
+    <div>
+      <div class="row center-align">
+        <h6>Od</h6>
+      </div>
+      <p class="range-field">
+        <input 
+        name="from" 
+        id="from" 
+        type="range"
+         value="<%= rangeFrom.value %>" 
+         min="<%= rangeFrom.min %>"
+         max="<%= rangeFrom.max %>"  
+         step="<%= rangeFrom.step %>"/>
+      </p>
+      <div class="row center-align">
+        <h6>Do</h6>
+      </div>
+      <p class="range-field">
+        <input 
+        name="to" 
+        id="to" 
+        type="range" 
+        value="<%= rangeTo.value %>"  
+        min="<%= rangeTo.min %>" 
+        max="<%= rangeTo.max %>" 
+        step="<%= rangeTo.step %>"/>
+      </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>
+  
+    $(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-range").submit();
+      });
+    });
+  </script>
+  

app/views/price.ejs

@@ -3,27 +3,4 @@
   <h2>Koja Vam okvirna cijena odgovara ?</h2>
 </div>
 
-<form method="POST" id="form-price">
+<% include partials/range %> 
-<div class="row center-align">
-  <ul class="collection with-header">
-    <% for(const price of prices) { %>
-    <li class="collection-item" >
-      <div id="<%= price.id %>" onclick="saveAndSubmit(this.id)"><%= price.title %>
-        <a href="#" class="secondary-content">
-          <i class="material-icons">send</i>
-        </a>
-      </div>
-    </li>
-    <% } %>
-  </ul>
-  <input type="hidden" name="price" id="price" />
-</div>
-</form>
-
-<script>
- function saveAndSubmit(id) {
-   $("#price").val(id);
-   $("#form-price").submit();
- }
-</script>
-

app/views/size.ejs

@@ -3,47 +3,4 @@
   <h2>Od koliko kvadrata tražite nekretninu ?</h2>
 </div>
 
-<form method="POST" id="form-size">
+<% include partials/range %> 
-
-  <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>
-
-  $(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>