Merge pull request #33474 from dimagi/mk/gps-capture-pick-map-location

Assign location on GPS Capture page using map
dimagi · Sep 15, 2023 · 51c35d7 · 51c35d7
2 parents 3df54ce + 7756cb3
commit 51c35d7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 10 deletions.
diff --git a/corehq/apps/geospatial/static/geospatial/js/gps_capture.js b/corehq/apps/geospatial/static/geospatial/js/gps_capture.js
@@ -33,8 +33,10 @@ hqDefine("geospatial/js/gps_capture",[
         self.isLatValid = ko.observable(true);
         self.isLonValid = ko.observable(true);
 
-        self.onMapCaptureStart = function () {
-            // TODO: Implement this function
+        self.setCoordinates = function (lat, lng) {
+            self.lat(lat.toString());
+            self.lon(lng.toString());
+            self.onValueChanged();
         };
 
         self.onValueChanged = function () {
@@ -75,6 +77,7 @@ hqDefine("geospatial/js/gps_capture",[
 
         self.itemsPerPage = ko.observable(5);
         self.totalItems = ko.observable(0);
+        self.itemLocationBeingCapturedOnMap = ko.observable();
         self.query = ko.observable('');
 
         self.dataType = initialPageData.get('data_type');
@@ -88,6 +91,13 @@ hqDefine("geospatial/js/gps_capture",[
             return !self.showLoadingSpinner() && !self.hasError();
         });
 
+        self.captureLocationForItem = function (item) {
+            self.itemLocationBeingCapturedOnMap(item);
+        };
+        self.setCoordinates = function (lat, lng) {
+            self.itemLocationBeingCapturedOnMap().setCoordinates(lat, lng);
+        };
+
         self.goToPage = function (pageNumber) {
             self.dataItems.removeAll();
             self.hasError(false);
@@ -149,14 +159,12 @@ hqDefine("geospatial/js/gps_capture",[
         return self;
     };
 
-    var initMap = function (centerCoordinates) {
+    var initMap = function (dataItemList) {
         'use strict';
 
         mapboxgl.accessToken = initialPageData.get('mapbox_access_token');  // eslint-disable-line no-undef
 
-        if (!centerCoordinates) {
-            centerCoordinates = [2.43333330, 9.750]; // should be domain specific
-        }
+        let centerCoordinates = [2.43333330, 9.750]; // should be domain specific
 
         const map = new mapboxgl.Map({  // eslint-disable-line no-undef
             container: 'geospatial-map', // container ID
@@ -168,13 +176,14 @@ hqDefine("geospatial/js/gps_capture",[
         });
 
         map.on('click', (event) => {
-            console.log(`A click event has occurred at ${event.lngLat}`);
+            dataItemList.setCoordinates(event.lngLat.lat, event.lngLat.lng);
         });
         return map;
     };
 
     $(function () {
-        $("#no-gps-list").koApplyBindings(dataItemListModel());
-        initMap();
+        let dataItemList = dataItemListModel();
+        $("#no-gps-list").koApplyBindings(dataItemList);
+        initMap(dataItemList);
     });
 });
diff --git a/corehq/apps/geospatial/templates/gps_capture.html b/corehq/apps/geospatial/templates/gps_capture.html
@@ -125,7 +125,7 @@ <h3 class="panel-title">
                             </div>
                         </td>
                         <td>
-                            <button type="button" class="btn btn-default" data-bind="event: {click: onMapCaptureStart}">
+                            <button type="button" class="btn btn-default" data-bind="event: {click: $root.captureLocationForItem.bind($data)}">
                                 {% trans "Capture on Map" %}
                             </button>
                             <button type="button" class="btn btn-primary" data-bind="enable: canSaveRow, event: {click: $root.saveDataRow.bind($data)}">
@@ -171,6 +171,12 @@ <h3 class="panel-title">
                                 showSpinner: showPaginationSpinner"></pagination>
         </div>
     </div>
+    <h3 data-bind="visible: itemLocationBeingCapturedOnMap">
+      <div data-bind="with: itemLocationBeingCapturedOnMap">
+          {% trans "Capturing location for:" %}
+          <span data-bind="text: name"></span>
+      </div>
+    </h3>
 </div>
 <div id="geospatial-map" style="height: 500px"></div>
 {% endblock %}