add new view and controller for location

app/controllers/location.js

@@ -1,28 +1,42 @@
 const { currentRERequest } = require("../helpers/url");
 
-const getNeighborhood = async (req, res) => {
+const getLocation = async (req, res) => {
   const title = "U kojem naselju tražite nekretninu?";
-  const municipality = req.params.municipality;
   const nextStep = req.query.nextStep || "/";
 
-  res.render("neighborhoodMap", {
+  res.render("location", {
     nextStep,
-    municipality,
     title
   });
 };
 
-const postNeighborhood = async (req, res) => {
+const postLocation = async (req, res) => {
   let request = await currentRERequest(req);
+
   const northWest = [req.body.west, req.body.north];
   const northEast = [req.body.east, req.body.north];
   const southEast = [req.body.east, req.body.south];
   const southWest = [req.body.west, req.body.south];
 
-  request.bounding_box = {
+  request.locationInput =
+    req.body.locationInput && req.body.locationInput.length > 0
+      ? req.body.locationInput
+      : null;
+
+  request.boundingBox = {
     type: "Polygon",
     coordinates: [[northWest, northEast, southEast, southWest, northWest]]
   };
+
+  let locationInputData;
+  if (req.body.locationInputData) {
+    try {
+      locationInputData = JSON.parse(req.body.locationInputData);
+    } catch (e) {
+      locationInputData = null;
+    }
+  }
+
   await request.save();
 
   const nextStepPage = req.query.nextStep || "povrsina";
@@ -32,6 +46,6 @@ const postNeighborhood = async (req, res) => {
 };
 
 module.exports = {
-  getNeighborhood,
+  getLocation,
-  postNeighborhood
+  postLocation
 };

app/views/location.ejs

@@ -0,0 +1,96 @@
+<% include partials/navBar %>
+
+<div class="row center-align">
+  <div id="floating-panel">
+    <div id="locationField">
+      <input id="autocompleteInput" type="text" />
+    </div>
+  </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="submit" 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" />
+  <input type="hidden" name="locationInput" id="locationInput" />
+  <input type="hidden" name="locationInputData" id="locationInputData" />
+</form>
+<script>
+  let autocomplete;
+  let map;
+  let places;
+
+  function initMap() {
+    const BOSNIA_BOUNDS = {
+      north: 45.70,
+      south: 41.69,
+      west: 15.55,
+      east: 20.77,
+    };
+    const SARAJEVO_COORDINATES = {
+      lat: 43.85,
+      lng: 18.41,
+    };
+
+    const mapElement = document.getElementById('map');
+    const restrictMapPanningToBosniaOnly = {
+      latLngBounds: BOSNIA_BOUNDS,
+      strictBounds: true,
+    };
+    const initialMapParams = {
+      center: SARAJEVO_COORDINATES,
+      zoom: 12,
+      restriction: restrictMapPanningToBosniaOnly,
+      mapTypeControl: false,
+      panControl: false,
+      zoomControl: false,
+      streetViewControl: false
+    };
+    map = new google.maps.Map(mapElement, initialMapParams);
+
+    const inputElement = document.getElementById('autocompleteInput');
+    const restrictAutocompleteResultsToBosniaOnly = {'country': 'ba'};
+    const initialAutocompleteParams = {
+      types: ['geocode'],
+      componentRestrictions: restrictAutocompleteResultsToBosniaOnly,
+      fields: ['geometry', 'types', 'address_components']
+    };
+
+    autocomplete = new google.maps.places.Autocomplete(inputElement, initialAutocompleteParams);
+    autocomplete.bindTo('bounds', map);
+    autocomplete.addListener('place_changed', onPlaceChanged);
+  }
+
+  function onPlaceChanged() {
+    const place = autocomplete.getPlace();
+    if (place.geometry) {
+      map.panTo(place.geometry.location);
+      map.setZoom(15);
+      $("#locationInputData").val(JSON.stringify(place));
+    }
+  }
+
+  $(document).ready(() => {
+    $("#submit").click(() => {
+      const mapBounds = map.getBounds();
+
+      $("#north").val(mapBounds.getNorthEast().lat());
+      $("#south").val(mapBounds.getSouthWest().lat());
+      $("#east").val(mapBounds.getNorthEast().lng());
+      $("#west").val(mapBounds.getSouthWest().lng());
+
+      $("#locationInput").val(document.getElementById('autocompleteInput').value);
+
+      $("#form-map-output").submit();
+    });
+  });
+</script>
+<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAna8ohfV2HBMcxGk_29vqxU5Z_bDickqg&libraries=places&callback=initMap" async
+  defer></script>
+</div>