From 9033114545a5304bf60ee6db6db07e3e1002f254 Mon Sep 17 00:00:00 2001
From: Bilal Catic <bilal.catic@hotmail.com>
Date: Wed, 30 Oct 2019 10:54:05 +0100
Subject: [PATCH] add input box for sliders

---
 app/common/enums.js                  |  18 ++--
 app/controllers/realEstateFilters.js |  16 +--
 app/public/main.css                  |   7 ++
 app/views/realEstateFilters.ejs      | 154 +++++++++++++++++++++------
 4 files changed, 144 insertions(+), 51 deletions(-)

diff --git a/app/common/enums.js b/app/common/enums.js
index 93545a6..9742f21 100644
--- a/app/common/enums.js
+++ b/app/common/enums.js
@@ -5,8 +5,7 @@ const PRICE_SLIDER_OPTIONS = {
     max: [300000]
   },
   step: 1000,
-  connect: true,
-  tooltips: true
+  connect: true
 };
 
 //This will be used for Flats, Apartments, Houses
@@ -17,8 +16,7 @@ const HOME_SIZE_SLIDER_OPTIONS = {
     max: [400]
   },
   step: 5,
-  connect: true,
-  tooltips: true
+  connect: true
 };
 
 const GARDEN_SIZE_SLIDER_OPTIONS = {
@@ -28,8 +26,7 @@ const GARDEN_SIZE_SLIDER_OPTIONS = {
     max: [10000]
   },
   step: 100,
-  connect: true,
-  tooltips: true
+  connect: true
 };
 
 const LAND_SIZE_SLIDER_OPTIONS = {
@@ -39,8 +36,7 @@ const LAND_SIZE_SLIDER_OPTIONS = {
     max: [100000]
   },
   step: 100,
-  connect: true,
-  tooltips: true
+  connect: true
 };
 const GARAGE_SIZE_SLIDER_OPTIONS = {
   start: [10, 20],
@@ -49,8 +45,7 @@ const GARAGE_SIZE_SLIDER_OPTIONS = {
     max: [150]
   },
   step: 2,
-  connect: true,
-  tooltips: true
+  connect: true
 };
 
 const GARAGE_PRICE_SLIDER_OPTIONS = {
@@ -60,8 +55,7 @@ const GARAGE_PRICE_SLIDER_OPTIONS = {
     max: [100000]
   },
   step: 500,
-  connect: true,
-  tooltips: true
+  connect: true
 };
 
 const AD_TYPE = {
diff --git a/app/controllers/realEstateFilters.js b/app/controllers/realEstateFilters.js
index c29b2c4..9e23f91 100644
--- a/app/controllers/realEstateFilters.js
+++ b/app/controllers/realEstateFilters.js
@@ -61,10 +61,10 @@ const postFilters = async (req, res) => {
   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;
+  const priceMin = parseInt(req.body.priceMin) || 0;
+  const priceMax = parseInt(req.body.priceMax) || 0;
+  const sizeMin = parseInt(req.body.sizeMin) || 0;
+  const sizeMax = parseInt(req.body.sizeMax) || 0;
 
   //TODO: Filter validation
 
@@ -74,11 +74,11 @@ const postFilters = async (req, res) => {
   searchRequest.sizeMax = sizeMax;
 
   if (
-    req.body.gardenSizeFilterMin !== undefined &&
-    req.body.gardenSizeFilterMax !== undefined
+    req.body.gardenSizeMin !== undefined &&
+    req.body.gardenSizeMax !== undefined
   ) {
-    const gardenSizeMin = parseInt(req.body.gardenSizeFilterMin);
-    const gardenSizeMax = parseInt(req.body.gardenSizeFilterMax);
+    const gardenSizeMin = parseInt(req.body.gardenSizeMin);
+    const gardenSizeMax = parseInt(req.body.gardenSizeMax);
 
     //TODO: Filter validation
 
diff --git a/app/public/main.css b/app/public/main.css
index 55e0f8b..7b688a6 100644
--- a/app/public/main.css
+++ b/app/public/main.css
@@ -95,3 +95,10 @@ h3 {
   font-size: 15px;
   line-height: 1.5;
 }
+
+.sliderInputBox {
+  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4) !important;
+  border: 1px solid #02adba !important;
+  border-radius: 4px !important;
+  text-align: center;
+}
diff --git a/app/views/realEstateFilters.ejs b/app/views/realEstateFilters.ejs
index ad12b7e..5d27162 100644
--- a/app/views/realEstateFilters.ejs
+++ b/app/views/realEstateFilters.ejs
@@ -5,32 +5,57 @@
     <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>
+  <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="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>
+  <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>
-      <input type="hidden" id="gardenSizeFilterMin" name="gardenSizeFilterMin">
-      <input type="hidden" id="gardenSizeFilterMax" name="gardenSizeFilterMax">
     </div>
 
-    <br><br>
+    <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">
@@ -42,42 +67,109 @@
 
 <script>
   $(document).ready(() => {
-    const priceFormat = wNumb({
-      thousand: ".",
-      suffix: " KM"
-    });
-    const sizeFormat = wNumb({
-      thousand: ".",
-      suffix: " m2"
-    });
+    const priceSliderOptions = {...<%- priceSliderOptions %>};
+    const sizeSliderOptions = {...<%- sizeSliderOptions %>};
+    const priceStep = priceSliderOptions.step;
+    const sizeStep = sizeSliderOptions.step;
+    delete priceSliderOptions.step;
+    delete sizeSliderOptions.step;
+
+    const updatePriceInputs = (values, handle, unencoded) => {
+      $("#priceMin").val(Math.round(unencoded[0]/priceStep)*priceStep);
+      $("#priceMax").val(Math.round(unencoded[1]/priceStep)*priceStep);
+    }
+    const 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 extendedPriceSliderOptions = {...<%- priceSliderOptions %>, format: priceFormat};
-    noUiSlider.create(priceSlider, extendedPriceSliderOptions);
-
     const sizeSlider = document.getElementById("sizeFilter");
-    const extendedSizeSliderOptions = {...<%- sizeSliderOptions %>, format: sizeFormat};
-    noUiSlider.create(sizeSlider, extendedSizeSliderOptions);
+
+    const priceSliderObject = noUiSlider.create(priceSlider, priceSliderOptions);
+    const sizeSliderObject = noUiSlider.create(sizeSlider, sizeSliderOptions);
+
+    priceSliderObject.on('slide', updatePriceInputs);
+    sizeSliderObject.on('slide', updateSizeInputs);
+
+    const priceMinChangeHandler = (element) => {
+      if (element && element.currentTarget && element.currentTarget.value){
+        const newValue = element.currentTarget.value;
+        priceSliderObject.set([newValue, null]);
+      }
+    }
+    const priceMaxChangeHandler = (element) => {
+      if (element && element.currentTarget && element.currentTarget.value){
+        const newValue = element.currentTarget.value;
+        priceSliderObject.set([null, newValue]);
+      }
+    }
+    $("#priceMin").val(priceSliderOptions.start[0]);
+    $("#priceMax").val(priceSliderOptions.start[1]);
+    $("#priceMin").change(priceMinChangeHandler);
+    $("#priceMax").change(priceMaxChangeHandler);
+
+    const sizeMinChangeHandler = (element) => {
+      if (element && element.currentTarget && element.currentTarget.value){
+        const newValue = element.currentTarget.value;
+        sizeSliderObject.set([newValue, null]);
+      }
+    }
+    const sizeMaxChangeHandler = (element) => {
+      if (element && element.currentTarget && element.currentTarget.value){
+        const newValue = element.currentTarget.value;
+        sizeSliderObject.set([null, newValue]);
+      }
+    }
+    $("#sizeMin").val(sizeSliderOptions.start[0]);
+    $("#sizeMax").val(sizeSliderOptions.start[1]);
+    $("#sizeMin").change(sizeMinChangeHandler);
+    $("#sizeMax").change(sizeMaxChangeHandler);
 
     <% if(hasGardenSize) { %>
-      const gardenSizeSlider = document.getElementById("gardenSizeFilter");
-      const extendedGardenSizeSliderOptions = {...<%- gardenSizeSliderOptions %>, format: sizeFormat};
-      noUiSlider.create(gardenSizeSlider, extendedGardenSizeSliderOptions);
+    const gardenSizeSliderOptions = {...<%- gardenSizeSliderOptions %>};
+    const gardenSizeStep = gardenSizeSliderOptions.step;
+    delete gardenSizeSliderOptions.step;
+
+    const 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);
+    const gardenSizeMinChangeHandler = (element) => {
+      if (element && element.currentTarget && element.currentTarget.value){
+        const newValue = element.currentTarget.value;
+        gardenSizeSliderObject.set([newValue, null]);
+      }
+    }
+    const gardenSizeMaxChangeHandler = (element) => {
+      if (element && element.currentTarget && element.currentTarget.value){
+        const newValue = element.currentTarget.value;
+        gardenSizeSliderObject.set([null, newValue]);
+      }
+    }
+    $("#gardenSizeMin").val(gardenSizeSliderOptions.start[0]);
+    $("#gardenSizeMax").val(gardenSizeSliderOptions.start[1]);
+    $("#gardenSizeMin").change("step", gardenSizeMinChangeHandler);
+    $("#gardenSizeMax").change("step", gardenSizeMaxChangeHandler);
     <% } %>
 
     $("#submit").click(() => {
       const priceFilterValues = priceSlider.noUiSlider.get();
-      $("#priceFilterMin").val(priceFormat.from(priceFilterValues[0]));
-      $("#priceFilterMax").val(priceFormat.from(priceFilterValues[1]));
+      $("#priceFilterMin").val(priceFilterValues[0]);
+      $("#priceFilterMax").val(priceFilterValues[1]);
 
       const sizeFilterValues = sizeSlider.noUiSlider.get();
-      $("#sizeFilterMin").val(sizeFormat.from(sizeFilterValues[0]));
-      $("#sizeFilterMax").val(sizeFormat.from(sizeFilterValues[1]));
+      $("#sizeFilterMin").val(sizeFilterValues[0]);
+      $("#sizeFilterMax").val(sizeFilterValues[1]);
 
       <% if (hasGardenSize) { %>
         const gardenSizeFilterValues = gardenSizeSlider.noUiSlider.get();
-        $("#gardenSizeFilterMin").val(sizeFormat.from(gardenSizeFilterValues[0]));
-        $("#gardenSizeFilterMax").val(sizeFormat.from(gardenSizeFilterValues[1]));
+        $("#gardenSizeFilterMin").val(gardenSizeFilterValues[0]);
+        $("#gardenSizeFilterMax").val(gardenSizeFilterValues[1]);
       <% } %>
 
       $("#filtersForm").submit();