From 31579735523c7a5e4aa8baf9d51e0e7ac481f7a1 Mon Sep 17 00:00:00 2001
From: Bilal Catic <bilal.catic@hotmail.com>
Date: Mon, 18 Nov 2019 06:42:22 +0100
Subject: [PATCH] add more filters to different tab on filters page; update css

---
 app/public/main.css             |  20 ++++
 app/views/advancedFilters.ejs   |  30 +++++
 app/views/realEstateFilters.ejs | 203 ++------------------------------
 app/views/standardFilters.ejs   | 188 +++++++++++++++++++++++++++++
 4 files changed, 251 insertions(+), 190 deletions(-)
 create mode 100644 app/views/advancedFilters.ejs
 create mode 100644 app/views/standardFilters.ejs

diff --git a/app/public/main.css b/app/public/main.css
index 2454e3a..dcbc0d7 100644
--- a/app/public/main.css
+++ b/app/public/main.css
@@ -127,3 +127,23 @@ h3 {
 .tabs .indicator {
   background-color: #02adba;
 }
+
+[type="checkbox"].filled-in:checked + span:not(.lever):after {
+  border: 2px solid #02adba;
+  background-color: #02adba;
+}
+[type="checkbox"].filled-in:not(:checked) + span:not(.lever):after {
+  background-color: transparent;
+  border: 2px solid #02adba;
+}
+
+.distinguished {
+  border: 2px solid #02adba;
+  border-radius: 4px;
+  padding: 5px 5px 3px 5px;
+  margin-left: -5px;
+}
+
+p > label {
+  color: black;
+}
diff --git a/app/views/advancedFilters.ejs b/app/views/advancedFilters.ejs
new file mode 100644
index 0000000..22b019c
--- /dev/null
+++ b/app/views/advancedFilters.ejs
@@ -0,0 +1,30 @@
+<br>
+
+<p>
+  <label>
+    <input type="checkbox" class="filled-in" />
+    <span>Balkon</span>
+  </label>
+</p>
+
+<p>
+  <label>
+    <input type="checkbox" class="filled-in" />
+    <span>Novogradnja</span>
+  </label>
+</p>
+
+<p>
+  <label>
+    <input type="checkbox" class="filled-in" />
+    <span>Lift</span>
+  </label>
+</p>
+
+<br>
+<p class="distinguished">
+  <label>
+    <input type="checkbox" class="filled-in" />
+    <span>Uključi oglase koji nemaju potpune informacije</span>
+  </label>
+</p>
diff --git a/app/views/realEstateFilters.ejs b/app/views/realEstateFilters.ejs
index 3aaac2e..caf3c23 100644
--- a/app/views/realEstateFilters.ejs
+++ b/app/views/realEstateFilters.ejs
@@ -1,76 +1,17 @@
+<br>
 <form id="filtersForm" method="POST">
-  <br>
-
-  <div class="row center-align">
-    <h5>Cijena</h5>
-    <br><br>
-    <div class="col s12">
-      <div class="center-align no-ui-slider" id="priceFilter"></div>
-    </div>
-  </div>
-
-  <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="col s12">
-      <div class="center-align no-ui-slider" id="sizeFilter"></div>
-    </div>
-  </div>
-
-  <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="col s12">
-        <div class="center-align no-ui-slider" id="gardenSizeFilter"></div>
-      </div>
-    </div>
-
-    <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">
     <div class="col s12">
-      <div class="accordion">
-        <label for="tm" class="accordionitem valign-wrapper">Dodatni filteri &raquo;</label>
-        <input type="checkbox" id="tm"/>
-        <p class="hiddentext"> Filteri</p>
-      </div>
+      <ul class="tabs">
+        <li class="tab col s6"><a href="#standardFilters">Filteri</a></li>
+        <li class="tab col s6"><a href="#advancedFilters">Napredni filteri</a></li>
+      </ul>
+    </div>
+    <div id="standardFilters" class="col s12">
+      <%- include("./standardFilters.ejs") %>
+    </div>
+    <div id="advancedFilters" class="col s12">
+      <%- include("./advancedFilters.ejs") %>
     </div>
   </div>
 
@@ -82,125 +23,7 @@
 </form>
 
 <script>
-  $(document).ready(function() {
-    const priceSliderOptions = <%- priceSliderOptions %>;
-    const sizeSliderOptions = <%- sizeSliderOptions %>;
-    const priceStep = priceSliderOptions.step;
-    const sizeStep = sizeSliderOptions.step;
-    delete priceSliderOptions.step;
-    delete sizeSliderOptions.step;
-
-    function updatePriceInputs(values, handle, unencoded) {
-      $("#priceMin").val(Math.round(unencoded[0]/priceStep)*priceStep);
-      $("#priceMax").val(Math.round(unencoded[1]/priceStep)*priceStep);
-    }
-    function 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 sizeSlider = document.getElementById("sizeFilter");
-
-    const priceSliderObject = noUiSlider.create(priceSlider, priceSliderOptions);
-    const sizeSliderObject = noUiSlider.create(sizeSlider, sizeSliderOptions);
-
-    priceSliderObject.on('slide', updatePriceInputs);
-    sizeSliderObject.on('slide', updateSizeInputs);
-
-    function priceMinChangeHandler(element) {
-      if (element && element.currentTarget && element.currentTarget.value){
-        const currentValues = priceSliderObject.get();
-        const newValue = element.currentTarget.value;
-        const fixedNewValue = newValue > currentValues[1] ? currentValues[1] : newValue;
-        priceSliderObject.set([fixedNewValue, null]);
-        $("#priceMin").val(Math.round(priceSliderObject.get()[0]));
-      }
-    }
-    function priceMaxChangeHandler(element) {
-      if (element && element.currentTarget && element.currentTarget.value){
-        const newValue = element.currentTarget.value;
-        priceSliderObject.set([null, newValue]);
-        $("#priceMax").val(Math.round(priceSliderObject.get()[1]));
-      }
-    }
-    $("#priceMin").val(priceSliderOptions.start[0]);
-    $("#priceMax").val(priceSliderOptions.start[1]);
-    $("#priceMin").change(priceMinChangeHandler);
-    $("#priceMax").change(priceMaxChangeHandler);
-
-    function sizeMinChangeHandler(element) {
-      if (element && element.currentTarget && element.currentTarget.value){
-        const currentValues = sizeSliderObject.get();
-        const newValue = element.currentTarget.value;
-        const fixedNewValue = newValue > currentValues[1] ? currentValues[1] : newValue;
-        sizeSliderObject.set([fixedNewValue, null]);
-        $("#sizeMin").val(Math.round(sizeSliderObject.get()[0]));
-      }
-    }
-    function sizeMaxChangeHandler(element) {
-      if (element && element.currentTarget && element.currentTarget.value){
-        const newValue = element.currentTarget.value;
-        sizeSliderObject.set([null, newValue]);
-        $("#sizeMax").val(Math.round(sizeSliderObject.get()[1]));
-      }
-    }
-    $("#sizeMin").val(sizeSliderOptions.start[0]);
-    $("#sizeMax").val(sizeSliderOptions.start[1]);
-    $("#sizeMin").change(sizeMinChangeHandler);
-    $("#sizeMax").change(sizeMaxChangeHandler);
-
-    <% if(hasGardenSize) { %>
-    const gardenSizeSliderOptions = <%- gardenSizeSliderOptions %>;
-    const gardenSizeStep = gardenSizeSliderOptions.step;
-    delete gardenSizeSliderOptions.step;
-
-    function 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);
-    function gardenSizeMinChangeHandler(element) {
-      if (element && element.currentTarget && element.currentTarget.value){
-        const currentValues = gardenSizeSliderObject.get();
-        const newValue = element.currentTarget.value;
-        const fixedNewValue = newValue > currentValues[1] ? currentValues[1] : newValue;
-        gardenSizeSliderObject.set([fixedNewValue, null]);
-        $("#gardenSizeMin").val(Math.round(gardenSizeSliderObject.get()[0]));
-      }
-    }
-    function gardenSizeMaxChangeHandler(element) {
-      if (element && element.currentTarget && element.currentTarget.value){
-        const newValue = element.currentTarget.value;
-        gardenSizeSliderObject.set([null, newValue]);
-        $("#gardenSizeMin").val(Math.round(gardenSizeSliderObject.get()[0]));
-      }
-    }
-    $("#gardenSizeMin").val(gardenSizeSliderOptions.start[0]);
-    $("#gardenSizeMax").val(gardenSizeSliderOptions.start[1]);
-    $("#gardenSizeMin").change("step", gardenSizeMinChangeHandler);
-    $("#gardenSizeMax").change("step", gardenSizeMaxChangeHandler);
-    <% } %>
-
-    $("#submit").click(function() {
-      const priceFilterValues = priceSlider.noUiSlider.get();
-      $("#priceFilterMin").val(priceFilterValues[0]);
-      $("#priceFilterMax").val(priceFilterValues[1]);
-
-      const sizeFilterValues = sizeSlider.noUiSlider.get();
-      $("#sizeFilterMin").val(sizeFilterValues[0]);
-      $("#sizeFilterMax").val(sizeFilterValues[1]);
-
-      <% if (hasGardenSize) { %>
-        const gardenSizeFilterValues = gardenSizeSlider.noUiSlider.get();
-        $("#gardenSizeFilterMin").val(gardenSizeFilterValues[0]);
-        $("#gardenSizeFilterMax").val(gardenSizeFilterValues[1]);
-      <% } %>
-
-      $("#filtersForm").submit();
-    });
+  $(document).ready(function(){
+    $('.tabs').tabs();
   });
 </script>
diff --git a/app/views/standardFilters.ejs b/app/views/standardFilters.ejs
new file mode 100644
index 0000000..423d694
--- /dev/null
+++ b/app/views/standardFilters.ejs
@@ -0,0 +1,188 @@
+<br>
+
+<div class="row center-align">
+  <h5>Cijena</h5>
+  <br><br>
+  <div class="col s12">
+    <div class="center-align no-ui-slider" id="priceFilter"></div>
+  </div>
+</div>
+
+<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="col s12">
+    <div class="center-align no-ui-slider" id="sizeFilter"></div>
+  </div>
+</div>
+
+<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="col s12">
+      <div class="center-align no-ui-slider" id="gardenSizeFilter"></div>
+    </div>
+  </div>
+
+  <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>
+<% } %>
+
+<script>
+  $(document).ready(function() {
+    const priceSliderOptions = <%- priceSliderOptions %>;
+    const sizeSliderOptions = <%- sizeSliderOptions %>;
+    const priceStep = priceSliderOptions.step;
+    const sizeStep = sizeSliderOptions.step;
+    delete priceSliderOptions.step;
+    delete sizeSliderOptions.step;
+
+    function updatePriceInputs(values, handle, unencoded) {
+      $("#priceMin").val(Math.round(unencoded[0]/priceStep)*priceStep);
+      $("#priceMax").val(Math.round(unencoded[1]/priceStep)*priceStep);
+    }
+    function 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 sizeSlider = document.getElementById("sizeFilter");
+
+    const priceSliderObject = noUiSlider.create(priceSlider, priceSliderOptions);
+    const sizeSliderObject = noUiSlider.create(sizeSlider, sizeSliderOptions);
+
+    priceSliderObject.on('slide', updatePriceInputs);
+    sizeSliderObject.on('slide', updateSizeInputs);
+
+    function priceMinChangeHandler(element) {
+      if (element && element.currentTarget && element.currentTarget.value){
+        const currentValues = priceSliderObject.get();
+        const newValue = element.currentTarget.value;
+        const fixedNewValue = newValue > currentValues[1] ? currentValues[1] : newValue;
+        priceSliderObject.set([fixedNewValue, null]);
+        $("#priceMin").val(Math.round(priceSliderObject.get()[0]));
+      }
+    }
+    function priceMaxChangeHandler(element) {
+      if (element && element.currentTarget && element.currentTarget.value){
+        const newValue = element.currentTarget.value;
+        priceSliderObject.set([null, newValue]);
+        $("#priceMax").val(Math.round(priceSliderObject.get()[1]));
+      }
+    }
+    $("#priceMin").val(priceSliderOptions.start[0]);
+    $("#priceMax").val(priceSliderOptions.start[1]);
+    $("#priceMin").change(priceMinChangeHandler);
+    $("#priceMax").change(priceMaxChangeHandler);
+
+    function sizeMinChangeHandler(element) {
+      if (element && element.currentTarget && element.currentTarget.value){
+        const currentValues = sizeSliderObject.get();
+        const newValue = element.currentTarget.value;
+        const fixedNewValue = newValue > currentValues[1] ? currentValues[1] : newValue;
+        sizeSliderObject.set([fixedNewValue, null]);
+        $("#sizeMin").val(Math.round(sizeSliderObject.get()[0]));
+      }
+    }
+    function sizeMaxChangeHandler(element) {
+      if (element && element.currentTarget && element.currentTarget.value){
+        const newValue = element.currentTarget.value;
+        sizeSliderObject.set([null, newValue]);
+        $("#sizeMax").val(Math.round(sizeSliderObject.get()[1]));
+      }
+    }
+    $("#sizeMin").val(sizeSliderOptions.start[0]);
+    $("#sizeMax").val(sizeSliderOptions.start[1]);
+    $("#sizeMin").change(sizeMinChangeHandler);
+    $("#sizeMax").change(sizeMaxChangeHandler);
+
+    <% if(hasGardenSize) { %>
+    const gardenSizeSliderOptions = <%- gardenSizeSliderOptions %>;
+    const gardenSizeStep = gardenSizeSliderOptions.step;
+    delete gardenSizeSliderOptions.step;
+
+    function 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);
+    function gardenSizeMinChangeHandler(element) {
+      if (element && element.currentTarget && element.currentTarget.value){
+        const currentValues = gardenSizeSliderObject.get();
+        const newValue = element.currentTarget.value;
+        const fixedNewValue = newValue > currentValues[1] ? currentValues[1] : newValue;
+        gardenSizeSliderObject.set([fixedNewValue, null]);
+        $("#gardenSizeMin").val(Math.round(gardenSizeSliderObject.get()[0]));
+      }
+    }
+    function gardenSizeMaxChangeHandler(element) {
+      if (element && element.currentTarget && element.currentTarget.value){
+        const newValue = element.currentTarget.value;
+        gardenSizeSliderObject.set([null, newValue]);
+        $("#gardenSizeMin").val(Math.round(gardenSizeSliderObject.get()[0]));
+      }
+    }
+    $("#gardenSizeMin").val(gardenSizeSliderOptions.start[0]);
+    $("#gardenSizeMax").val(gardenSizeSliderOptions.start[1]);
+    $("#gardenSizeMin").change("step", gardenSizeMinChangeHandler);
+    $("#gardenSizeMax").change("step", gardenSizeMaxChangeHandler);
+    <% } %>
+
+    $("#submit").click(function() {
+      const priceFilterValues = priceSlider.noUiSlider.get();
+      $("#priceFilterMin").val(priceFilterValues[0]);
+      $("#priceFilterMax").val(priceFilterValues[1]);
+
+      const sizeFilterValues = sizeSlider.noUiSlider.get();
+      $("#sizeFilterMin").val(sizeFilterValues[0]);
+      $("#sizeFilterMax").val(sizeFilterValues[1]);
+
+      <% if (hasGardenSize) { %>
+        const gardenSizeFilterValues = gardenSizeSlider.noUiSlider.get();
+        $("#gardenSizeFilterMin").val(gardenSizeFilterValues[0]);
+        $("#gardenSizeFilterMax").val(gardenSizeFilterValues[1]);
+      <% } %>
+
+      $("#filtersForm").submit();
+    });
+  });
+</script>