From 494ae85467b8d47c7fde155ff92c11838ee81d93 Mon Sep 17 00:00:00 2001
From: Korina Cordero <cordero.korina@gmail.com>
Date: Mon, 16 Dec 2019 08:56:00 +0000
Subject: [PATCH] Add OpenStreet implementation to resq form. #270

---
 templates/job-order/cmb.form.html.twig |   8 ++
 templates/job-order/form.html.twig     | 111 +++++++++++++++++++++++--
 2 files changed, 114 insertions(+), 5 deletions(-)

diff --git a/templates/job-order/cmb.form.html.twig b/templates/job-order/cmb.form.html.twig
index 2ee5aa5b..3bbcf718 100644
--- a/templates/job-order/cmb.form.html.twig
+++ b/templates/job-order/cmb.form.html.twig
@@ -996,13 +996,17 @@ $(function() {
 	        callback: function(results, status) {
                     markerLayerGroup.clearLayers();
 	            if (status == 'OK') {
+                        // google code
 	                // selectPoint(map, results[0].geometry.location);
+                        // OSM code
                         console.log(results);
                         var lat = results[0].geometry.location.lat();
                         var lng = results[0].geometry.location.lng();
                         selectPoint(lat, lng);
 	            }
 	        },
+                // TODO: change this to get what's in the translation file
+                // but for some strange reason, this worked.
 	        region: 'ph'
 	    });
 	}
@@ -1022,8 +1026,10 @@ $(function() {
 
     {% if ftags.set_map_coordinate %}
 		// check if we need to set map
+            // google code
 	    //var latlng = new google.maps.LatLng({{ obj.getCoordinates.getLatitude }}, {{ obj.getCoordinates.getLongitude }});
 	    //selectPoint(map, latlng);
+            // OSM code
             var lat = {{ obj.getCoordinates.getLatitude }};
             var lng = {{ obj.getCoordinates.getLongitude }};
             selectPoint(lat, lng);
@@ -1034,6 +1040,7 @@ $(function() {
 
     {% if mode in ['update-processing', 'update-reassign-hub'] %}
         // display hub map
+        // OSM code
 
         var hub_lat = {{ obj.getCoordinates.getLatitude }};
         var hub_lng = {{ obj.getCoordinates.getLongitude }};
@@ -1064,6 +1071,7 @@ $(function() {
             hubLayerGroup.addLayer(hub_marker);
         {% endfor %}
 
+        // google code
         /*
         var hmap = new GMaps({
             div: '#hub_map',
diff --git a/templates/job-order/form.html.twig b/templates/job-order/form.html.twig
index 9f986a4b..b637953c 100644
--- a/templates/job-order/form.html.twig
+++ b/templates/job-order/form.html.twig
@@ -893,15 +893,67 @@
 {% endblock %}
 
 {% block scripts %}
+{{ include('map/' ~ map_js_file) }}
 <!-- <script src="//maps.google.com/maps/api/js?key={{ gmaps_api_key }}" type="text/javascript"></script> -->
-<script src="//maps.googleapis.com/maps/api/js?key={{ gmaps_api_key }}" type="text/javascript"></script>
+<script src="//maps.googleapis.com/maps/api/js?key={{ gmaps_api_key }}&libraries=places" type="text/javascript"></script>
 <script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>
 
 <script>
+
+// location search autocomplete
+var input = document.getElementById('m_gmap_address');
+
+var autocomplete = new google.maps.places.Autocomplete(input);
+autocomplete.setComponentRestrictions({'country': ['{% trans %}default_region{% endtrans %}']});
+autocomplete.addListener('place_changed', function() {
+    var place = autocomplete.getPlace();
+
+    if (!place.geometry) {
+        return;
+    }
+
+    var message = {
+        'action': 'map.search',
+        'params': {
+            'lat': place.geometry.location.lat(),
+            'lng': place.geometry.location.lng()
+        }
+    };
+    console.log(message);
+});
+
 $(function() {
     var form_in_process = false;
 
+    // openstreet maps stuff
+    // TODO: move this to a service
+    var default_lat = {% trans %}default_lat{% endtrans %};
+    var default_lng = {% trans %}default_long{% endtrans %};
+
+    var map = mapCreate('m_gmap', default_lat, default_lng, 'road', 13);
+
+    var markerLayerGroup = L.layerGroup().addTo(map);
+
+    function selectPoint(lat, lng)
+    {
+        // clear markers
+        markerLayerGroup.clearLayers();
+
+        var marker = L.marker([lat, lng]);
+
+        // add marker to layer group
+        markerLayerGroup.addLayer(marker);
+
+        map.setView(new L.LatLng(lat, lng), 13);
+    }
+
+    map.on('click', function(e) {
+        selectPoint(e.latlng.lat, e.latlng.lng);
+    });
+
+
 	// BEGIN google maps stuff
+        /*
 	function selectPoint(map, latlng) {
 	    var lat = latlng.lat();
 	    var lng = latlng.lng();
@@ -930,6 +982,8 @@ $(function() {
 	        e.stop();
 	    }
 	});
+        */
+   
 	var handleAction = function() {
 	    var text = $.trim($('#m_gmap_address').val());
 	    GMaps.geocode({
@@ -937,9 +991,17 @@ $(function() {
 	        callback: function(results, status) {
 	            map.removeMarkers();
 	            if (status == 'OK') {
-	                selectPoint(map, results[0].geometry.location);
+                        // google code
+                        // selectPoint(map, results[0].geometry.location);
+                        // OSM code
+                        console.log(results);
+                        var lat = results[0].geometry.location.lat();
+                        var lng = results[0].geometry.location.lng();
+                        selectPoint(lat, lng);
 	            }
 	        },
+                // TODO: change this to get what's in the translation file
+                // but for some strange reason, this worked.
 	        region: 'ph'
 	    });
 	}
@@ -958,9 +1020,14 @@ $(function() {
 	});
 
     {% if ftags.set_map_coordinate %}
-		// check if we need to set map
-	    var latlng = new google.maps.LatLng({{ obj.getCoordinates.getLatitude }}, {{ obj.getCoordinates.getLongitude }});
-	    selectPoint(map, latlng);
+            // check if we need to set map
+            // google code
+            //var latlng = new google.maps.LatLng({{ obj.getCoordinates.getLatitude }}, {{ obj.getCoordinates.getLongitude }});
+            //selectPoint(map, latlng);
+            // OSM code
+            var lat = {{ obj.getCoordinates.getLatitude }};
+            var lng = {{ obj.getCoordinates.getLongitude }};
+            selectPoint(lat, lng);
 
 	    // remove placeholder text
 	    $("[data-vehicle-field='1']").prop('placeholder', '');
@@ -968,6 +1035,39 @@ $(function() {
 
     {% if mode in ['update-processing', 'update-reassign-hub'] %}
         // display hub map
+        // OSM code
+
+        var hub_lat = {{ obj.getCoordinates.getLatitude }};
+        var hub_lng = {{ obj.getCoordinates.getLongitude }};
+
+        var hmap = mapCreate('hub_map', hub_lat, hub_lng, 'road', 13);
+
+        var destLayerGroup = L.layerGroup().addTo(hmap);
+        var hubLayerGroup = L.layerGroup().addTo(hmap);
+
+        var dest_icon = L.icon({
+            iconUrl: '/assets/images/icon-destination.png',
+            shadowSize: [0,0]
+        });
+
+        var hub_icon = L.icon({
+            iconUrl: '/assets/images/icon-outlet.png',
+            shadowSize: [0,0]
+        });
+
+        var dest_marker = new L.Marker([hub_lat, hub_lng], {icon: dest_icon}).bindPopup("Destination");
+
+        destLayerGroup.addLayer(dest_marker);
+
+        {% for hub in hubs %}
+            var hub_marker = new L.Marker([{{ hub.hub.getCoordinates.getLatitude }},
+                {{ hub.hub.getCoordinates.getLongitude }}], {icon: hub_icon}).bindPopup("{{ hub.hub.getName }}");
+
+            hubLayerGroup.addLayer(hub_marker);
+        {% endfor %}
+
+        // google code
+        /*
         var hmap = new GMaps({
             div: '#hub_map',
             lat: {{ obj.getCoordinates.getLatitude }},
@@ -991,6 +1091,7 @@ $(function() {
 	        	icon: '/assets/images/icon-outlet.png'
             });
         {% endfor %}
+        */
 
     {% endif %}