Merge branch 'combine-filters-on-one-page' into 'master'

Combine filters on one page

See merge request saburly/marketalarm/web!40

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 .env
+.idea/

app/common/enums.js

@@ -1,14 +1,70 @@
+const PRICE_SLIDER_OPTIONS = {
+  start: [50000, 85000],
+  range: {
+    min: [0, 1000],
+    "10%": [20000, 1000],
+    "35%": [100000, 1000],
+    "70%": [200000, 10000],
+    max: [1000000]
+  },
+  connect: true,
+  tooltips: true
+};
+
+//This will be used for Flats, Apartments, Houses
+const HOME_SIZE_SLIDER_OPTIONS = {
+  start: [30, 75],
+  range: {
+    min: [0, 5],
+    "50%": [100, 10],
+    max: [400]
+  },
+  connect: true,
+  tooltips: true
+};
+
+const GARDEN_SIZE_SLIDER_OPTIONS = {
+  start: [100, 1000],
+  range: {
+    min: [0, 10],
+    "40%": [1000, 100],
+    "80%": [10000, 100],
+    max: [100000]
+  },
+  connect: true,
+  tooltips: true
+};
+
 const AD_TYPE = {
   AD_TYPE_SALE: "SALE",
   AD_TYPE_RENT: "RENT"
 };
 
 const AD_CATEGORY = {
-  FLAT: { id: "FLAT", title: "Stan", hasGardenSize: false },
+  FLAT: {
-  HOUSE: { id: "HOUSE", title: "Kuća", hasGardenSize: true },
+    id: "FLAT",
+    title: "Stan",
+    hasGardenSize: false,
+    priceSliderOptions: PRICE_SLIDER_OPTIONS,
+    sizeSliderOptions: HOME_SIZE_SLIDER_OPTIONS
+  },
+  HOUSE: {
+    id: "HOUSE",
+    title: "Kuća",
+    hasGardenSize: true,
+    priceSliderOptions: PRICE_SLIDER_OPTIONS,
+    sizeSliderOptions: HOME_SIZE_SLIDER_OPTIONS,
+    gardenSizeSliderOptions: GARDEN_SIZE_SLIDER_OPTIONS
+  },
   //OFFICE: { id: "OFFICE", title: "Kancelarija", hasGardenSize: false },
   //LAND: { id: "LAND", title: "Zemljište", hasGardenSize: true },
-  APARTMENT: { id: "APARTMENT", title: "Apartman", hasGardenSize: false }
+  APARTMENT: {
+    id: "APARTMENT",
+    title: "Apartman",
+    hasGardenSize: false,
+    priceSliderOptions: PRICE_SLIDER_OPTIONS,
+    sizeSliderOptions: HOME_SIZE_SLIDER_OPTIONS
+  }
   //GARAGE: { id: "GARAGE", title: "Garaža", hasGardenSize: false },
   //COTTAGE: { id: "COTTAGE", title: "Vikendica", hasGardenSize: true }
 };

app/controllers/gardenSizes.js

@@ -1,48 +0,0 @@
-const { currentSearchRequest } = require("../helpers/url");
-const { AD_CATEGORY } = require("../common/enums");
-
-const getGardenSize = (req, res) => {
-  const title = "Koliko okućnice tražite ?";
-
-  const unit = " m2";
-  const rangeFrom = {
-    min: 10,
-    max: 3000,
-    value: 0,
-    step: 10
-  };
-
-  const rangeTo = {
-    min: 10,
-    max: 3000,
-    value: 100,
-    step: 10
-  };
-
-  res.render("gardenSize", { rangeFrom, rangeTo, unit, title });
-};
-
-const postGardenSize = async (req, res) => {
-  const searchRequest = await currentSearchRequest(req);
-
-  const nextStepPage = req.query.nextStep || "cijena";
-  const nextStepUrl = `/${nextStepPage}/${searchRequest.id}`;
-
-  const realEstateType = AD_CATEGORY[searchRequest.realEstateType];
-  if (realEstateType && realEstateType.hasGardenSize) {
-    const gardenSizeMin = req.body.from || 0;
-    const gardenSizeMax = req.body.to || 0;
-    //TODO: Validate input
-
-    searchRequest.gardenSizeMin = gardenSizeMin;
-    searchRequest.gardenSizeMax = gardenSizeMax;
-    await searchRequest.save();
-  }
-
-  res.redirect(nextStepUrl);
-};
-
-module.exports = {
-  getGardenSize,
-  postGardenSize
-};

app/controllers/location.js

@@ -40,7 +40,7 @@ const postLocation = async (req, res) => {
 
   await searchRequest.save();
 
-  const nextStepPage = req.query.nextStep || "povrsina";
+  const nextStepPage = req.query.nextStep || "filteri";
   const nextStepUrl = `/${nextStepPage}/${searchRequest.id}`;
 
   res.redirect(nextStepUrl);

app/controllers/prices.js

@@ -1,43 +0,0 @@
-const { currentSearchRequest } = require("../helpers/url");
-
-const getPrice = (req, res) => {
-  const title = "Koja Vam okvirna cijena odgovara ?";
-
-  const unit = " KM";
-  const rangeFrom = {
-    min: 1000,
-    max: 250000,
-    value: 0,
-    step: 1000
-  };
-
-  const rangeTo = {
-    min: 1000,
-    max: 250000,
-    value: 50000,
-    step: 1000
-  };
-
-  res.render("price", { rangeFrom, rangeTo, unit, title });
-};
-
-const postPrice = async (req, res) => {
-  const searchRequest = await currentSearchRequest(req);
-
-  const nextStepPage = req.query.nextStep || "pregled";
-  const nextStepUrl = `/${nextStepPage}/${searchRequest.id}`;
-  const priceMin = req.body.from || 0;
-  const priceMax = req.body.to || 0;
-  //TODO: price validation
-
-  searchRequest.priceMin = priceMin;
-  searchRequest.priceMax = priceMax;
-  await searchRequest.save();
-
-  res.redirect(nextStepUrl);
-};
-
-module.exports = {
-  getPrice,
-  postPrice
-};

app/controllers/queryReview.js

@@ -49,17 +49,17 @@ const getQueryReviewData = searchRequest => {
     {
       id: "size",
       title: sizeTitle,
-      url: `/povrsina/${id}?nextStep=pregled`
+      url: `/filteri/${id}?nextStep=pregled`
     },
     {
       id: "gardenSize",
       title: gardenSizeTitle,
-      url: enableGardenSizeEdit ? `/okucnica/${id}?nextStep=pregled` : ""
+      url: enableGardenSizeEdit ? `/filteri/${id}?nextStep=pregled` : ""
     },
     {
       id: "price",
       title: priceTitle,
-      url: `/cijena/${id}?nextStep=pregled`
+      url: `/filteri/${id}?nextStep=pregled`
     }
   ];
 };

app/controllers/realEstateFilters.js

@@ -0,0 +1,83 @@
+const { currentSearchRequest } = require("../helpers/url");
+const { AD_CATEGORY } = require("../common/enums");
+
+const getFilters = async (req, res) => {
+  const searchRequest = await currentSearchRequest(req);
+  const title = "Filteri za pretraživanje";
+
+  const {
+    realEstateType,
+    priceMin,
+    priceMax,
+    sizeMin,
+    sizeMax,
+    gardenSizeMin,
+    gardenSizeMax
+  } = searchRequest;
+  const category = AD_CATEGORY[realEstateType] || AD_CATEGORY.FLAT;
+
+  const {
+    hasGardenSize,
+    priceSliderOptions,
+    sizeSliderOptions,
+    gardenSizeSliderOptions
+  } = category;
+
+  if (priceMin && priceMax) {
+    priceSliderOptions.start = [priceMin, priceMax];
+  }
+
+  if (sizeMin && sizeMax) {
+    sizeSliderOptions.start = [sizeMin, sizeMax];
+  }
+
+  if (gardenSizeSliderOptions && gardenSizeMin && gardenSizeMax) {
+    gardenSizeSliderOptions.start = [gardenSizeMin, gardenSizeMax];
+  }
+
+  res.render("realEstateFilters", {
+    title,
+    hasGardenSize,
+    priceSliderOptions: JSON.stringify(priceSliderOptions),
+    sizeSliderOptions: JSON.stringify(sizeSliderOptions),
+    gardenSizeSliderOptions: JSON.stringify(gardenSizeSliderOptions)
+  });
+};
+
+const postFilters = async (req, res) => {
+  const searchRequest = await currentSearchRequest(req);
+
+  const nextStepPage = req.query.nextStep || "pregled";
+  const nextStepUrl = `/${nextStepPage}/${searchRequest.id}`;
+
+  const priceMin = parseInt(req.body.priceFilterMin) || 0;
+  const priceMax = parseInt(req.body.priceFilterMax) || 0;
+  const sizeMin = parseInt(req.body.sizeFilterMin) || 0;
+  const sizeMax = parseInt(req.body.sizeFilterMax) || 0;
+
+  //TODO: Filter validation
+
+  searchRequest.priceMin = priceMin;
+  searchRequest.priceMax = priceMax;
+  searchRequest.sizeMin = sizeMin;
+  searchRequest.sizeMax = sizeMax;
+
+  if (req.body.gardenSizeFilterMin && req.body.gardenSizeFilterMax) {
+    const gardenSizeMin = parseInt(req.body.gardenSizeFilterMin);
+    const gardenSizeMax = parseInt(req.body.gardenSizeFilterMax);
+
+    //TODO: Filter validation
+
+    searchRequest.gardenSizeMin = gardenSizeMin;
+    searchRequest.gardenSizeMax = gardenSizeMax;
+  }
+
+  await searchRequest.save();
+
+  res.redirect(nextStepUrl);
+};
+
+module.exports = {
+  getFilters,
+  postFilters
+};

app/controllers/sizes.js

@@ -1,47 +0,0 @@
-const { currentSearchRequest } = require("../helpers/url");
-const { AD_CATEGORY } = require("../common/enums");
-
-const getSize = (req, res) => {
-  const title = "Od koliko kvadrata tražite nekretninu ?";
-  const unit = " m2";
-  const rangeFrom = {
-    min: 10,
-    max: 250,
-    value: 0,
-    step: 10
-  };
-
-  const rangeTo = {
-    min: 10,
-    max: 250,
-    value: 50,
-    step: 10
-  };
-
-  res.render("size", { rangeFrom, rangeTo, unit, title });
-};
-
-const postSize = async (req, res) => {
-  const searchRequest = await currentSearchRequest(req);
-
-  const realEstateType = AD_CATEGORY[searchRequest.realEstateType];
-  const sizeMin = req.body.from || 0;
-  const sizeMax = req.body.to || 0;
-  //TODO: Validation, check if real estate type is valid, ...
-  const nextStep =
-    realEstateType && realEstateType.hasGardenSize ? "okucnica" : "cijena";
-
-  const nextStepPage = req.query.nextStep || nextStep;
-  const nextStepUrl = `/${nextStepPage}/${searchRequest.id}`;
-
-  searchRequest.sizeMin = sizeMin;
-  searchRequest.sizeMax = sizeMax;
-  await searchRequest.save();
-
-  res.redirect(nextStepUrl);
-};
-
-module.exports = {
-  getSize,
-  postSize
-};

app/routes/index.js

@@ -7,9 +7,6 @@ const {
   getRealEstateTypes,
   postRealEstateTypes
 } = require("../controllers/realEstateTypes");
-const { getSize, postSize } = require("../controllers/sizes");
-const { getGardenSize, postGardenSize } = require("../controllers/gardenSizes");
-const { getPrice, postPrice } = require("../controllers/prices");
 const {
   getQueryReview,
   postQueryReview
@@ -19,6 +16,7 @@ const { getLocation, postLocation } = require("../controllers/location");
 const { getUnsubscribe } = require("../controllers/unsubscribe");
 const { getRealEstates } = require("../controllers/realEstates");
 const { getRedirect } = require("../controllers/redirect");
+const { getFilters, postFilters } = require("../controllers/realEstateFilters");
 
 const router = express.Router();
 
@@ -32,14 +30,8 @@ router.post("/vrstanekretnine", postRealEstateTypes);
 router.get("/lokacija/:searchRequestId", getLocation);
 router.post("/lokacija/:searchRequestId", postLocation);
 
-router.get("/povrsina/:searchRequestId", getSize);
+router.get("/filteri/:searchRequestId", getFilters);
-router.post("/povrsina/:searchRequestId", postSize);
+router.post("/filteri/:searchRequestId", postFilters);
-
-router.get("/okucnica/:searchRequestId", getGardenSize);
-router.post("/okucnica/:searchRequestId", postGardenSize);
-
-router.get("/cijena/:searchRequestId", getPrice);
-router.post("/cijena/:searchRequestId", postPrice);
 
 router.get("/pregled/:searchRequestId", getQueryReview);
 router.post("/pregled/:searchRequestId", postQueryReview);

app/views/gardenSize.ejs

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

app/views/layout.ejs

@@ -2,12 +2,12 @@
 <html>
 <head>
   <!-- Global site tag (gtag.js) - Google Analytics -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-149713678-1"></script>
+  <script async src="https://www.googletagmanager.com/gtag/js?id=<%= process.env.GA_ID %>"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
-    gtag('config', 'UA-149713678-1');
+    gtag('config', '<%= process.env.GA_ID %>');
   </script>
 
   <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

app/views/location.ejs

@@ -2,6 +2,7 @@
   Područje na mapi će biti uključeno u pretragu. Namjestite mapu na ulice
   koje želite da budu vidljive.
 </div>
+
 <div class="row center-align">
   <div class="col s9 m10 l11 xl11">
     <input id="autocompleteInput" placeholder="Lokacija..." type="text" />
@@ -10,13 +11,15 @@
     <a id="locateMe" class="btn-floating waves-effect waves-light"><i class="material-icons right">gps_fixed</i></a>
   </div>
 </div>
+
 <div class="row center-align">
   <div class="col s12">
     <div id="map"></div>
   </div>
 </div>
-<br/>
+
-</div>
+<br>
+
 <form method="POST" id="form-map-output">
   <div class="row center-align">
     <div class="col s6 push-s3">
@@ -30,6 +33,7 @@
   <input type="hidden" name="locationInput" id="locationInput" />
   <input type="hidden" name="locationInputData" id="locationInputData" />
 </form>
+
 <script>
   let autocomplete;
   let map;
@@ -124,4 +128,3 @@
 </script>
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAna8ohfV2HBMcxGk_29vqxU5Z_bDickqg&language=bs&libraries=places&callback=initMap" async
   defer></script>
-</div>

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 %>

app/views/welcome.ejs

@@ -7,10 +7,8 @@
   <div> Na vaš email. </div>
   <div> BESPLATNO </div>
 </div>
-<div class="row">
+<div class="row center-align">
-<div class="col s6 push-s3">
+    <div class="col s6 push-s3">
-<a href="<%= nextStep %>" class="welcome-center-button waves-effect waves-light btn">
+        <a href="<%= nextStep %>" class="welcome-center-button waves-effect waves-light btn">Javi mi</a>
-  Javi mi
+    </div>
-</a>
-</div>
 </div>

development.env

@@ -11,17 +11,18 @@ APP_BASE_URL=base url for the app
 MAX_REAL_ESTATES_IN_EMAIL=Max number of real estates that will be shown in email, others will be truncated and URL with full list will be shwon
 MAX_REAL_ESTATES_IN_FIRST_EMAIL=Max number of real estates that will be shown in first (welcome) email
 
+#=============== GOOGLE ANALYTICS =============#
+GA_ID=Google Analytics ID
+
+#=============== AWS SDK EMAIL SETTINGS =======#
 AWS_KEY_ID=(your-key-here)
 AWS_SECRET_ACCESS_KEY=(your-key-here)
 AWS_REGION=eu-west-1
-
-APP_URL=http://localhost:3001
 SOURCE_EMAIL=info@saburly.com
 
+#=============== CRAWLER SETTINGS===============#
 CRAWLER_INTERVAL=Interval to run cralwer(s), in seconds
 STOP_CRAWLER=Non-zero value will skip crawler execution
-
-#=============== CRAWLER SETTINGS===============#
 #==OLX==
 OLX_MAX_PAGES=Restrict crawler to this number of pages
 OLX_MAX_RESULTS_PER_PAGE=Only this number or less results from one page will be scraped and saved