WiP Added location input.

app/controllers/publishRealEstate.js

@@ -234,6 +234,9 @@ const postPublishInputs = async (req, res) => {
   const streetName = req.body.streetName || "";
   const longDescription = req.body.longDescription || "";
 
+  const locationLat = req.body.lat || null;
+  const locationLong = req.body.lng || null;
+
   realEstate.balcony = balcony;
   realEstate.elevator = elevator;
   realEstate.newBuilding = newBuilding;
@@ -278,6 +281,9 @@ const postPublishInputs = async (req, res) => {
 
   realEstate.longDescription = longDescription;
 
+  realEstate.locationLat = locationLat;
+  realEstate.locationLong = locationLong;
+
   await realEstate.save();
 
   res.redirect(nextStepUrl);

app/views/publishLocation.ejs

@@ -0,0 +1,192 @@
+<div class="row center-align">
+    <h3>
+        Izaberite lokaciju nekretnine na mapi. 
+    </h3>
+  </div>
+  
+  <div class="row center-align">
+    <div class="col s12 m12 l12 xl12">
+      <input
+        id="autocompleteInput"
+        placeholder="Unesite grad, naselje ili ulicu..."
+        type="text"
+      />
+    </div>
+  </div>
+  
+  <div class="row center-align">
+    <div class="col s12">
+      <div id="map"></div>
+    </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="lat" id="lat" />
+    <input type="hidden" name="lng" id="lng" />
+
+    <input type="hidden" name="locationInput" id="locationInput" />
+    <input type="hidden" name="locationInputData" id="locationInputData" />
+  
+  <script>
+    let autocomplete;
+    let map;
+    let places;
+    let geocoder;
+    let marker =false; //Initialy no marker on map
+  
+    function locateMe() {
+      if (navigator.geolocation) {
+        function onLocationSuccess(position) {
+          const coordinates =
+            position && position.coords ? position.coords : null;
+          if (coordinates) {
+            const longitude = coordinates.longitude || null;
+            const latitude = coordinates.latitude || null;
+  
+            if (longitude && latitude && map) {
+              map.setCenter({ lat: latitude, lng: longitude });
+              map.setZoom(16);
+            }
+          }
+        }
+  
+        navigator.geolocation.getCurrentPosition(onLocationSuccess);
+      }
+    }
+  
+    function initMap() {
+      const BOSNIA_BOUNDS = {
+        north: 45.7,
+        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: true,
+        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);
+      pacSelectFirst(inputElement);
+      addLocateMeButton(map);
+      //Add event listener to position marker on map
+      google.maps.event.addListener(map, 'click', positionMarker);
+      
+    }
+
+    function positionMarker(event) {
+        let clickedLocation = event.latLng;
+        if(marker === false){
+            marker = new google.maps.Marker({
+                position: clickedLocation,
+                map: map,
+                draggable: true 
+            });
+            google.maps.event.addListener(marker, 'dragend', function(event){
+                markerLocation();
+            });
+        } else{
+            marker.setPosition(clickedLocation);
+        }
+    }
+
+    function addLocateMeButton(map) {
+      var parent = document.createElement("div");
+      parent.className = "locate-me-container";
+  
+      var a = document.createElement("a");
+      a.id = "locateMe";
+      a.className = "btn-floating";
+  
+      var i = document.createElement("i");
+      i.innerText = "gps_fixed";
+      i.className = "material-icons right";
+  
+      a.appendChild(i);
+      a.addEventListener("click", locateMe);
+      parent.appendChild(a);
+  
+      map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(parent);
+    }
+  
+    function onPlaceChanged() {
+      const place = autocomplete.getPlace();
+      if (place.geometry) {
+        map.fitBounds(place.geometry.viewport);
+        map.setZoom(map.getZoom() + 1);
+        $("#locationInputData").val(JSON.stringify(place));
+      }
+    }
+  
+    function pacSelectFirst(input) {
+      // store the original event binding function
+      const _addEventListener = input.addEventListener
+        ? input.addEventListener
+        : input.attachEvent;
+  
+      function addEventListenerWrapper(type, listener) {
+        // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
+        // and then trigger the original listener.
+        if (type == "keydown") {
+          const originalListener = listener;
+          listener = function(event) {
+            const suggestionSelected = $(".pac-item-selected").length > 0;
+            if (event.key == "Enter" && !suggestionSelected) {
+              const simulatedDownArrow = $.Event("keydown", {
+                keyCode: 40,
+                which: 40
+              });
+              originalListener.apply(input, [simulatedDownArrow]);
+            }
+  
+            originalListener.apply(input, [event]);
+          };
+        }
+  
+        _addEventListener.apply(input, [type, listener]);
+      }
+  
+      input.addEventListener = addEventListenerWrapper;
+      input.attachEvent = addEventListenerWrapper;
+    }
+      
+  
+  </script>
+  <script
+    src="https://maps.googleapis.com/maps/api/js?key=<%= process.env.API_MAP_KEY %>&language=bs&libraries=places&callback=initMap"
+    async
+    defer
+  ></script>
+  

app/views/publishPrice.ejs

@@ -1 +0,0 @@
-Publish Price

app/views/publishRealEstate.ejs

@@ -5,7 +5,7 @@
       <ul class="tabs">
         <li class="tab col s3"><a href="#publishBasicData">Osnovni podaci</a></li>
         <li class="tab col s3"><a href="#publishAdditionalData">Dodatni podaci</a></li>
-        <li class="tab col s3"><a href="#publishPrice">Cijena i slike</a></li>
+        <li class="tab col s3"><a href="#publishLocation">Lokacija</a></li>
         <li class="tab col s3"><a href="#publishEnd">Kraj</a></li>
 
     </ul>
@@ -16,8 +16,8 @@
     <div id="publishAdditionalData" class="col s12">
       <%- include("./publishAdditionalData.ejs") %>
     </div>
-    <div id="publishPrice" class="col s12">
+    <div id="publishLocation" class="col s12">
-     <%- include("./publishPrice.ejs") %>
+     <%- include("./publishLocation.ejs") %>
     </div>
     <div id="publishEnd" class="col s12">
      <%- include("./publishEnd.ejs") %>
@@ -30,10 +30,26 @@
 <script>
   $(document).ready(function(){
     $('.tabs').tabs();
+
     $("#submit").click( function () {
+      const mapBounds = map.getBounds();
+      const currentLocation = marker.getPosition();
+
+        $("#north").val(mapBounds.getNorthEast().lat());
+        $("#south").val(mapBounds.getSouthWest().lat());
+        $("#east").val(mapBounds.getNorthEast().lng());
+        $("#west").val(mapBounds.getSouthWest().lng());
+
+        $("#lat").val(currentLocation.lat());
+        $("#lng").val(currentLocation.lng());
+
+        $("#locationInput").val(
+          document.getElementById("autocompleteInput").value
+        );
+
+
     $("#publishForm").submit();
-    })
+    });
   });
  
-
 </script>