Added google maps step

app/controllers/municipalities.js

@@ -1,7 +1,7 @@
 const { currentRERequest } = require('../helpers/url');
 const { getMunicipalitiesForRegion } = require('../helpers/codes');
 
-const getMunicipality = async (req,res) => {
+const getMunicipality = async (req, res) => {
   let request = await currentRERequest(req);
   const municipalities = getMunicipalitiesForRegion(request.region);
 
@@ -11,8 +11,8 @@ const getMunicipality = async (req,res) => {
 const postMunicipality = async (req, res) => {
   const request = await currentRERequest(req);
 
-  const nextStepPage = req.query.nextStep || 'povrsina';
-  const nextStepUrl = `/${nextStepPage}/${request.uniqueId}`;
+  const nextStepPage = req.query.nextStep || 'naselje';
+  const nextStepUrl = `/${nextStepPage}/${request.uniqueId}/${req.body.municipalityname}`;
 
   request.municipality = req.body.municipality;
   await request.save();

app/controllers/neighborhoodMap.js

@@ -0,0 +1,36 @@
+const { currentRERequest } = require('../helpers/url');
+
+const getNeighborhood = async (req, res) => {
+    const municipality = req.params.municipality
+    const nextStep = req.query.nextStep || '/';
+    console.log(municipality);
+
+    res.render('neighborhoodMap', {
+        nextStep,
+        municipality
+    });
+
+};
+
+const postNeighborhood = async (req, res) => {
+    let request = await currentRERequest(req);
+    const northWest = [req.body.north, req.body.west];
+    const northEast = [req.body.north, req.body.east];
+    const southEast = [req.body.south, req.body.east];
+    const southWest = [req.body.south, req.body.west];
+
+    request.bounding_box = {
+        type: 'Polygon', coordinates: [
+            [northWest, northEast, southEast,
+                southWest, northWest]
+        ]
+    };
+    await request.save();
+    const nextStep = req.query.nextStep || `/povrsina/${request.uniqueId}`;
+    res.redirect(nextStep);
+};
+
+module.exports = {
+    getNeighborhood,
+    postNeighborhood
+};

app/migrations/20190523144812-activate-postgis.js

@@ -0,0 +1,15 @@
+'use strict';
+
+module.exports = {
+  up: (queryInterface, Sequelize) => {
+    return queryInterface.sequelize.query("CREATE EXTENSION postgis").then(([results, metadata]) => {
+       /// No result
+      })
+  },
+
+  down: (queryInterface, Sequelize) => {
+    return queryInterface.sequelize.query("DROP EXTENSION IF EXISTS postgis").then(([results, metadata]) => {
+        /// No result
+       })
+  }
+};

app/migrations/20190523151420-add-bounding-box-column.js

@@ -0,0 +1,17 @@
+'use strict';
+
+module.exports = {
+
+  up: (queryInterface, Sequelize) => {
+
+    return queryInterface.sequelize.query("ALTER TABLE \"RealEstateRequests\" ADD COLUMN bounding_box geometry(Polygon);").then(([results, metadata]) => {
+      /// No result
+    })
+  },
+
+  down: (queryInterface, Sequelize) => {
+    return queryInterface.sequelize.query("ALTER TABLE \"RealEstateRequests\" DROP COLUMN bounding_box").then(([results, metadata]) => {
+      /// No result
+    })
+  }
+};

app/models/realestaterequest.js

@@ -15,6 +15,7 @@ module.exports = (sequelize, DataTypes) => {
     size: DataTypes.STRING,
     gardenSize: DataTypes.STRING,
     price: DataTypes.STRING,
+    bounding_box: DataTypes.GEOMETRY('POINT', 4326)
   }, {});
   RealEstateRequest.associate = function(models) {
     // associations can be defined here

app/public/main.css

@@ -9,3 +9,28 @@
   background-repeat: no-repeat;
   color: rgba(0, 0, 0, 0);
 }
+
+
+#map {
+  height: 50%;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+  
+#floating-panel {
+  top: 10px;
+  left: 25%;
+  z-index: 5;
+  background-color: #fff;
+  padding: 5px;
+  border: 1px solid #999;
+  text-align: center;
+  font-family: 'Roboto', 'sans-serif';
+  line-height: 30px;
+  padding-left: 10px;
+}

app/views/municipality.ejs

@@ -8,7 +8,7 @@
   <ul class="collection with-header">
     <% for(const municipality of municipalities) { %>
     <li class="collection-item">
-      <div id="<%= municipality.id %>" onclick="saveAndSubmit(this.id)"><%= municipality.name %>
+      <div val="<%= municipality.name %>" id="<%= municipality.id %>" onclick="saveAndSubmit(this.id, municipality.name)"><%= municipality.name %>
         <a href="#" class="secondary-content">
           <i class="material-icons">send</i>
         </a>
@@ -17,12 +17,14 @@
     <% } %>
   </ul>
   <input type="hidden" name="municipality" id="municipality" />
+  <input type="hidden" name="municipalityname" id="municipalityname" />
 </div>
 </form>
 
 <script>
-   function saveAndSubmit(id) {
+   function saveAndSubmit(id, name) {
      $("#municipality").val(id);
+     $("#municipalityname").val(name);
      $("#form-municipality").submit();
    }
 </script>

app/views/neighborhoodMap.ejs

@@ -0,0 +1,90 @@
+<div class="row center-align">
+  <h2>U kojem naselju tražite nekretninu?</h2>
+</div>
+
+<div class="row center-align" >
+  <div id="floating-panel">
+    <input id="address" type="textbox" value="">
+    <input id="submit" type="button" value="Trazi">
+  </div>
+  <div id="map"></div>
+</div>
+  <form method="POST" id="form-map-output">
+    <div class="row center-align">
+      <div class="col s6 push-s3">
+        <a id="btnsubmit" href="#" class="welcome-center-button waves-effect waves-light btn">
+          Dalje
+        </a>
+      </div>
+    </div>
+    <input type="hidden" name="north" id=north />
+    <input type="hidden" name="south" id=south />
+    <input type="hidden" name="east" id=east />
+    <input type="hidden" name="west" id=west />
+  </form>
+  <script>
+
+
+    var map;
+    var municipality = "<%= municipality%>";
+    var defaultAddress = document.getElementById('address');
+
+    var BOSNIA_BOUNDS = {
+      north: 45.70,
+      south: 41.69,
+      west: 15.55,
+      east: 20.77,
+    };
+
+    function initMap() {
+      map = new google.maps.Map(document.getElementById('map'), {
+        center: { lat: -34.397, lng: 150.644 },
+        zoom: 11,
+        restriction: {
+          latLngBounds: BOSNIA_BOUNDS,
+          strictBounds: false,
+        },
+      });
+      var geocoder = new google.maps.Geocoder();
+
+      document.getElementById('submit').addEventListener('click', function () {
+        geocodeAddress(geocoder, map);
+      });
+
+      function geocodeAddress(geocoder, resultsMap) {
+        var address = document.getElementById('address').value;
+        geocoder.geocode({ 'address': address }, function (results, status) {
+          if (status === 'OK') {
+            resultsMap.setCenter(results[0].geometry.location);
+            var marker = new google.maps.Marker({
+              map: resultsMap,
+              position: results[0].geometry.location
+            });
+          } else {
+            alert('Geocode was not successful for the following reason: ' + status);
+          }
+        });
+      }
+
+      defaultAddress.value = municipality;
+      geocodeAddress(geocoder, map);
+
+      $(document).ready(() => {
+        $("#btnsubmit").click(() => {
+          var bounds = map.getBounds();
+
+          $("#north").val(bounds.na.l);
+          $("#south").val(bounds.na.j);
+          $("#east").val(bounds.ia.l);
+          $("#west").val(bounds.ia.j);
+
+          $("#form-map-output").submit();
+        });
+      });
+
+
+    }
+  </script>
+  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAna8ohfV2HBMcxGk_29vqxU5Z_bDickqg&callback=initMap"
+    async defer></script>
+</div>