← Back to team overview

dhis2-devs team mailing list archive

[Branch ~dhis2-devs-core/dhis2/trunk] Rev 18486: event|tracker-capture: capturing coordinate through google map is now complete

 

------------------------------------------------------------
revno: 18486
committer: Abyot Asalefew Gizaw <abyota@xxxxxxxxx>
branch nick: dhis2
timestamp: Thu 2015-03-05 16:48:50 +0100
message:
  event|tracker-capture: capturing coordinate through google map is now complete
added:
  dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.map.contextmenu.js
modified:
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/index.html
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/styles/style.css
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/index.html
  dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css
  dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/coordinatecapture/map.html
  dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.angular.directives.js


--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk

Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/index.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/index.html	2015-03-04 12:38:52 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/index.html	2015-03-05 15:48:50 +0000
@@ -13,6 +13,7 @@
 
         <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false";></script>
         <script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.map.textoverlay.js"></script>
+        <script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.map.contextmenu.js"></script>
        
         <script type="text/javascript" src="../dhis-web-commons/javascripts/jQuery/jquery.min.js"></script>
         <script type="text/javascript" src="../dhis-web-commons/javascripts/jQuery/ui/jquery-ui.min.js"></script>

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/styles/style.css'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/styles/style.css	2015-03-04 11:34:55 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-event-capture/styles/style.css	2015-03-05 15:48:50 +0000
@@ -907,6 +907,15 @@
     pointer-events: none;
 }
 
+.disabled-context-menu-item {    
+    pointer-events: none;
+    color: #dddddd;
+    cursor: none;
+}
+.enable-context-menu-item {    
+    cursor:pointer; 
+}
+
 @media print {
     #header, #leftBar, .not-printable {
         display: none;

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties	2015-02-12 10:51:40 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties	2015-03-05 15:48:50 +0000
@@ -275,4 +275,9 @@
 value_must_be_between=Value must be between
 locate_organisation_unit_by_name=Locate organisation unit by name
 dashboard_layout_not_saved=Dashboard layout not saved
-ou_search_scope=Orgunit scope to use
\ No newline at end of file
+ou_search_scope=Orgunit scope to use
+zoom_map=Zoom map
+zoom_in=Zoom in
+zoom_out=Zoom out
+center_map=Center map
+capture_coordinate=Capture coordinate
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/index.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/index.html	2015-03-04 11:34:55 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/index.html	2015-03-05 15:48:50 +0000
@@ -14,6 +14,7 @@
 
         <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false";></script>
         <script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.map.textoverlay.js"></script>
+        <script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.map.contextmenu.js"></script>
     
         <script type="text/javascript" src="../dhis-web-commons/javascripts/jQuery/jquery.min.js"></script>
         <script type="text/javascript" src="../dhis-web-commons/javascripts/jQuery/ui/jquery-ui.min.js"></script>
@@ -94,7 +95,7 @@
         <script type="text/javascript" src="scripts/app.js"></script>
         <script type="text/javascript" src="scripts/services.js"></script>
         <script type="text/javascript" src="scripts/filters.js"></script>
-        <script type="text/javascript" src="scripts/directives.js"></script>
+        <script type="text/javascript" src="scripts/directives.js"></script>        
         <script type="text/javascript" src="scripts/controllers.js"></script>
         <script type="text/javascript" src="scripts/leftbar-menu-controller.js"></script>
         <script type="text/javascript" src="scripts/report-types-controller.js"></script>        

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css	2015-03-03 16:55:58 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css	2015-03-05 15:48:50 +0000
@@ -859,7 +859,6 @@
     }
 }
 
-
 .org-unit-tree {
     margin-left: -5px;
     color: #000;
@@ -947,4 +946,31 @@
     padding: 5px;
     font-size: 15px;
     position: absolute;
+}
+
+.map_context_menu{
+	background-color:white;
+	border:1px solid gray;
+    z-index: 1000;
+}
+.map_context_menu_item{
+	padding:3px 6px;
+}
+.map_context_menu_item:hover{
+	background-color:#CCCCCC;
+}
+.map_context_menu_separator{
+	background-color:gray;
+	height:1px;
+	margin:0;
+	padding:0;
+}
+
+.disabled-context-menu-item {    
+    pointer-events: none;
+    color: #dddddd;
+    cursor: none;
+}
+.enable-context-menu-item {    
+    cursor:pointer; 
 }
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/coordinatecapture/map.html'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/coordinatecapture/map.html	2015-03-04 11:34:55 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/coordinatecapture/map.html	2015-03-05 15:48:50 +0000
@@ -11,5 +11,5 @@
 </div>
 <div class="modal-footer remove-default-padding">
     <button class="btn btn-primary" data-ng-click="captureCoordinate()">{{'capture'| translate}}</button>
-    <button class="btn btn-default" data-ng-click="close()">{{'cancel'| translate}}</button>        
+    <button class="btn btn-default" data-ng-click="close()">{{'close'| translate}}</button>        
 </div>
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.angular.directives.js'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.angular.directives.js	2015-03-04 11:34:55 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.angular.directives.js	2015-03-05 15:48:50 +0000
@@ -253,21 +253,6 @@
     };
 })
 
-/*.directive('d2Sortable', function() {        
-
-    return {        
-        restrict: 'A',        
-        link: function(scope, element, attrs){
-            element.sortable({
-                connectWith: ".connectedSortable",
-                placeholder: "ui-state-highlight",
-                tolerance: "pointer",
-                handle: '.handle'
-            });
-        }  
-    };
-})*/
-
 .directive('d2Sortable', function($timeout) {        
 
     return {        
@@ -340,7 +325,7 @@
     };  
 })
 
-.directive('d2GoogleMap', function ($parse, $http, CurrentSelection) {
+.directive('d2GoogleMap', function ($parse, $http, $translate, CurrentSelection) {
     return {
         restrict: 'E',
         replace: true,
@@ -350,7 +335,7 @@
             var ouLevels = CurrentSelection.getOuLevels();
             
             //remove angular bootstrap ui modal draggable
-            $(".modal-content").draggable({ disabled: true });
+            $(".modal-content").draggable({ disabled: true });            
             
             //get a default center
             var latCenter = 12.31, lngCenter = 51.48;            
@@ -365,7 +350,7 @@
             
             //default map configurations 
             var mapOptions = {
-                zoom: 3,
+                zoom: 4,
                 center: new google.maps.LatLng(latCenter, lngCenter),
                 mapTypeId: google.maps.MapTypeId.ROADMAP
             },
@@ -388,20 +373,40 @@
                 }                
             }
             
-            var currentLayer, currentGeojson, currentGeojsonFeatures;
-            
-            function getGeoJsonByOuLevel(initialize, event){
-                
+            var currentLayer = 0, currentGeojson, currentGeojsonFeatures;
+            
+            var contextMenuOptions={};
+            contextMenuOptions.classNames={menu:'map_context_menu', menuSeparator:'map_context_menu_separator'};
+
+            //create an array of MapContextMenuItem objects            
+            var menuItems=[];            
+            menuItems.push({className: 'map_context_menu_item', eventName: 'zoom_in', id: 'zoomIn', label: '<i class="fa fa-search-plus"></i>   ' + $translate('zoom_in')});
+            menuItems.push({className: 'map_context_menu_item', eventName: 'zoom_out', id: 'zoomOut', label: '<i class="fa fa-search-minus"></i>   ' + $translate('zoom_out')});
+            menuItems.push({}); 
+            menuItems.push({className: 'map_context_menu_item', eventName: 'centerMap', label: '<i class="fa fa-crosshairs"></i>   ' + $translate('center_map')});
+            menuItems.push({});
+            menuItems.push({className: 'map_context_menu_item', eventName: 'captureCoordinate', label: '<i class="fa fa-map-marker"></i>   ' + $translate('capture_coordinate')});
+            contextMenuOptions.menuItems=menuItems;
+            var mapContextMenu = new MapContextMenu(map, contextMenuOptions);   
+            
+            function getGeoJsonByOuLevel(initialize, event, mode){
                 var url = '';
-                if(currentLayer >= ouLevels.length-1 || initialize){                        
+                if(initialize){                        
                     currentLayer = 0;
                     url = '../api/organisationUnits.geojson?level=' + ouLevels[currentLayer].level;
                 }
                 else{
-                    currentLayer++;                        
-                    url = '../api/organisationUnits.geojson?level=' + ouLevels[currentLayer].level + '&parent=' + event.feature.D;
+                    if(mode === 'IN'){
+                        currentLayer++;
+                        url = '../api/organisationUnits.geojson?level=' + ouLevels[currentLayer].level + '&parent=' + event.feature.D;
+                    }
+                    if(mode === 'OUT'){
+                        currentLayer--;
+                        var parents = event.feature.k.parentGraph.substring(1,event.feature.k.parentGraph.length-1).split('/');                        
+                        url = '../api/organisationUnits.geojson?level=' + ouLevels[currentLayer].level + '&parent=' + parents[parents.length-2];
+                    }                    
                 }
-
+                
                 $http.get( url ).then(function(response){                            
                     currentGeojson = response.data;
                     currentGeojsonFeatures = map.data.addGeoJson(currentGeojson);
@@ -434,11 +439,11 @@
                 });
             }
             
-            function centerMap(){
+            function centerMap(){                
                 if(currentGeojson && currentGeojson.features){
                     var latLngBounds = getMapCenter(currentGeojson);
                     map.fitBounds(latLngBounds);
-                    map.panToBounds(latLngBounds);
+                    map.panToBounds(latLngBounds);                    
                 }              
             }
 
@@ -476,6 +481,41 @@
                 getGeoJsonByOuLevel(true, null);
             }
             
+            function zoomMap(event, mode){
+                
+                for(var i = 0; i < currentGeojsonFeatures.length; i++){
+                    map.data.remove(currentGeojsonFeatures[i]);
+                }
+                
+                for(var i=0; i<overLays.length; i++){
+                    overLays[i].setMap(null);
+                }
+                
+                getGeoJsonByOuLevel(false, event, mode);
+            }
+            
+            function enableDisableZoom(){
+                if(currentLayer >= ouLevels.length-1){                    
+                    $("#zoomIn").addClass('disabled-context-menu-item');
+                    $("#zoomIn").removeClass('enable-context-menu-item');
+                    $('#zoomIn').attr('disabled', "disabled");
+                }else{
+                    $("#zoomIn").removeClass('disabled-context-menu-item');
+                    $("#zoomIn").addClass('enable-context-menu-item');
+                    $('#zoomIn').attr('disabled', "");
+                }
+                if(currentLayer === 0){
+                    $("#zoomOut").addClass('disabled-context-menu-item');
+                    $("#zoomOut").removeClass('enable-context-menu-item');
+                    $('#zoomOut').attr('disabled', "disabled");
+                }
+                else{
+                    $("#zoomOut").removeClass('disabled-context-menu-item');
+                    $("#zoomOut").addClass('enable-context-menu-item');
+                    $('#zoomIn').attr('disabled', "");
+                }
+            }
+            
             //get lable for current polygon
             map.data.addListener('mouseover', function(e) {
                 $("#polygon-label").text( e.feature.k.name );
@@ -490,28 +530,61 @@
             });
             
             //drill-down based on polygons assigned to orgunits
-            map.data.addListener('rightclick', function(e){                
-                for(var i = 0; i < currentGeojsonFeatures.length; i++){
-                    map.data.remove(currentGeojsonFeatures[i]);
-                }
-                
-                for(var i=0; i<overLays.length; i++){
-                    overLays[i].setMap(null);
-                }
-                getGeoJsonByOuLevel(false, e);
-                        
+            map.data.addListener('rightclick', function(e){
+                mapContextMenu.show(e);
+                enableDisableZoom();
+            });
+            
+            //drill-down based on points assigned to orgunits
+            google.maps.event.addListener(marker, 'rightclick', function(e){
+                mapContextMenu.show(e);
+                enableDisableZoom();
+            });
+            
+            //capturing coordinate from anywhere in the map - incase no polygons are defined
+            google.maps.event.addListener(map, 'rightclick', function(e){                
+                mapContextMenu.show(e);
             });            
             
-            //capturing coordinate from defined polygons
+            //remove context menu onclick
             map.data.addListener('click', function(e) {                
-                applyMarker(e);               
+                mapContextMenu.hide();
             });
             
-            //capturing coordinate from anywhere in the map - incase no polygons are defined
             google.maps.event.addListener(map, 'click', function(e){                
-                applyMarker(e);                
+                mapContextMenu.hide();
+            }); 
+            
+            //listen for the clicks on mapContextMenu
+            google.maps.event.addListener(mapContextMenu, 'menu_item_selected', function(e, latLng, eventName){              
+                switch(eventName){                    
+                    case 'zoom_in':
+                        if(e.feature){
+                            zoomMap(e, 'IN');
+                        }
+                        else{
+                            map.setZoom(map.getZoom()+1);
+                        }
+                        
+                        break;                    
+                    case 'zoom_out':
+                        if(e.feature){
+                            zoomMap(e, 'OUT');
+                        }
+                        else{
+                            map.setZoom(map.getZoom()-1);
+                        }
+                        
+                        break;
+                    case 'centerMap':
+                        map.panTo(latLng);
+                        break;
+                    case 'captureCoordinate':
+                        applyMarker(e);
+                        break;
+                }
             });
-            
+    
             initializeMap();
         }
     };

=== added file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.map.contextmenu.js'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.map.contextmenu.js	1970-01-01 00:00:00 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/dhis2/dhis2.map.contextmenu.js	2015-03-05 15:48:50 +0000
@@ -0,0 +1,138 @@
+/*
+	MapContextMenu v1.0
+	
+	A context menu for Google Maps API v3
+	http://code.martinpearman.co.uk/googlemapsapi/contextmenu/
+	
+	Copyright Martin Pearman
+	Last updated 21st November 2011
+	
+	developer@xxxxxxxxxxxxxxxxxxx
+	
+	This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+	This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+	You should have received a copy of the GNU General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+function MapContextMenu(map, options){
+	options=options || {};
+	
+	this.setMap(map);
+	
+	this.classNames_=options.classNames || {};
+	this.map_=map;
+	this.mapDiv_=map.getDiv();
+	this.menuItems_=options.menuItems || [];
+	this.pixelOffset=options.pixelOffset || new google.maps.Point(10, -5);
+}
+
+MapContextMenu.prototype=new google.maps.OverlayView();
+
+MapContextMenu.prototype.draw=function(){
+	if(this.isVisible_){
+		var mapSize=new google.maps.Size(this.mapDiv_.offsetWidth, this.mapDiv_.offsetHeight);
+		var menuSize=new google.maps.Size(this.menu_.offsetWidth, this.menu_.offsetHeight);
+		var mousePosition=this.getProjection().fromLatLngToDivPixel(this.position_);
+		
+		var left=mousePosition.x;
+		var top=mousePosition.y;
+		
+		if(mousePosition.x>mapSize.width-menuSize.width-this.pixelOffset.x){
+			left=left-menuSize.width-this.pixelOffset.x;
+		} else {
+			left+=this.pixelOffset.x;
+		}
+		
+		if(mousePosition.y>mapSize.height-menuSize.height-this.pixelOffset.y){
+			top=top-menuSize.height-this.pixelOffset.y;
+		} else {
+			top+=this.pixelOffset.y;
+		}
+		
+		this.menu_.style.left=left+'px';
+		this.menu_.style.top=top+'px';
+	}
+};
+
+MapContextMenu.prototype.getVisible=function(){
+	return this.isVisible_;
+};
+
+MapContextMenu.prototype.hide=function(){
+	if(this.isVisible_){
+		this.menu_.style.display='none';
+		this.isVisible_=false;
+	}
+};
+
+MapContextMenu.prototype.onAdd=function(){
+	function createMenuItem(values){        
+		var menuItem=document.createElement('div');
+		menuItem.innerHTML=values.label;
+		if(values.className){
+			menuItem.className=values.className;
+		}
+		if(values.id){
+			menuItem.id=values.id;
+		}
+		menuItem.style.cssText='white-space:nowrap; font-size: 12pt;';
+		menuItem.onclick=function(){
+			google.maps.event.trigger($this, 'menu_item_selected', $this.event_, $this.position_, values.eventName);
+		};
+		return menuItem;
+	}
+	function createMenuSeparator(){
+		var menuSeparator=document.createElement('div');
+		if($this.classNames_.menuSeparator){
+			menuSeparator.className=$this.classNames_.menuSeparator;
+		}
+		return menuSeparator;
+	}
+	var $this=this;	//	used for closures
+	
+	var menu=document.createElement('div');
+	if(this.classNames_.menu){
+		menu.className=this.classNames_.menu;
+	}
+	menu.style.cssText='display:none; position:absolute';
+	
+	for(var i=0, j=this.menuItems_.length; i<j; i++){
+		if(this.menuItems_[i].label && this.menuItems_[i].eventName){
+			menu.appendChild(createMenuItem(this.menuItems_[i]));
+		} else {
+			menu.appendChild(createMenuSeparator());
+		}
+	}
+	
+	delete this.classNames_;
+	delete this.menuItems_;
+	
+	this.isVisible_=false;
+	this.menu_=menu;
+	this.position_=new google.maps.LatLng(0, 0);
+	
+	google.maps.event.addListener(this.map_, 'click', function(mouseEvent){
+		$this.hide();
+	});
+	
+	this.getPanes().floatPane.appendChild(menu);
+};
+
+MapContextMenu.prototype.onRemove=function(){
+	this.menu_.parentNode.removeChild(this.menu_);
+	delete this.mapDiv_;
+	delete this.menu_;
+	delete this.position_;
+};
+
+MapContextMenu.prototype.show=function(e){
+	if(!this.isVisible_){
+		this.menu_.style.display='block';
+		this.isVisible_=true;
+	}
+	this.position_=e.latLng;
+    this.event_=e;
+	this.draw();
+};
\ No newline at end of file