Geolocation based Employee Attendance check-in system

Frappe Framework Customization
, , ,
1

Can someone explain how can I make a Geolocation based Attendance Employee check-in system?

  1. As the Employee goes to the Employee check-in its current location should be fetched and when he saves it, it should store the current location.
  2. The Employee does not have the permission to change the location, no even draw tools provided by geolocation.

I tried to make some changes in geolocation.js file frappe.
I was able to hide all the control options, but it was not storing the current location.

Thanks in advance!
Continuing the discussion from Geolocation field:

7 Likes
2

location
location1920×798 128 KB

geodoctype
geodoctype1168×915 37.2 KB

And finally the Custom script:

frappe.ui.form.on('Employee Checkin', {
	onload(frm) {
	    
	    function onPositionRecieved(position){
	        var longitude= position.coords.longitude;
	        var latitude= position.coords.latitude;
	        frm.set_value('longitude',longitude);
	        frm.set_value('latitude',latitude);
	        console.log(longitude);
	        console.log(latitude);
	        fetch('https://api.opencagedata.com/geocode/v1/json?q='+latitude+'+'+longitude+'&key=de1bf3be66b546b89645e500ec3a3a28')
	         .then(response => response.json())
            .then(data => {
                var city=data['results'][0].components.city;
                var state=data['results'][0].components.state;
                var area=data['results'][0].components.residential;
                frm.set_value('city',city);
                frm.set_value('state',state);
                frm.set_value('area',area);
                console.log(data);
            })
            .catch(err => console.log(err));
	        frm.set_df_property('my_location','options','<div class="mapouter"><div class="gmap_canvas"><iframe width=100% height="300" id="gmap_canvas" src="https://maps.google.com/maps?q='+latitude+','+longitude+'&t=&z=17&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://yt2.org/youtube-to-mp3-ALeKk00qEW0sxByTDSpzaRvl8WxdMAeMytQ1611842368056QMMlSYKLwAsWUsAfLipqwCA2ahUKEwiikKDe5L7uAhVFCuwKHUuFBoYQ8tMDegUAQCSAQCYAQCqAQdnd3Mtd2l6"></a><br><style>.mapouter{position:relative;text-align:right;height:300px;width:100%;}</style><style>.gmap_canvas {overflow:hidden;background:none!important;height:300px;width:100%;}</style></div></div>');
            frm.refresh_field('my_location');
	    }
	    
	    function locationNotRecieved(positionError){
	        console.log(positionError);
	    }
	    
	    if(frm.doc.longitude && frm.doc.latitude){
	        frm.set_df_property('my_location','options','<div class="mapouter"><div class="gmap_canvas"><iframe width=100% height="300" id="gmap_canvas" src="https://maps.google.com/maps?q='+frm.doc.latitude+','+frm.doc.longitude+'&t=&z=17&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://yt2.org/youtube-to-mp3-ALeKk00qEW0sxByTDSpzaRvl8WxdMAeMytQ1611842368056QMMlSYKLwAsWUsAfLipqwCA2ahUKEwiikKDe5L7uAhVFCuwKHUuFBoYQ8tMDegUAQCSAQCYAQCqAQdnd3Mtd2l6"></a><br><style>.mapouter{position:relative;text-align:right;height:300px;width:100%;}</style><style>.gmap_canvas {overflow:hidden;background:none!important;height:300px;width:100%;}</style></div></div>');
            frm.refresh_field('my_location');
	    } else {
	        if(navigator.geolocation){
	            navigator.geolocation.getCurrentPosition(onPositionRecieved,locationNotRecieved,{ enableHighAccuracy: true});
	        }
	    }
    }
})

Hope It helps someone!

17 Likes
3

Great!!! Where do you place the custom script?

4

@usmanalikhan You can add it in custom script doctype in your instant:

https://docs.erpnext.com/docs/user/manual/en/customize-erpnext/custom-scripts

or in JS folder inside your custom App

5

I tried, its not displaying the map. and also I need to save in DB

6

@sameer55chauhan- Many thanks for sharing.

This has helped very much.

7

works fine but area flied not fulfilled

8

area field depends on location to location, it works fine for me and sometimes not; well you can try another API to fetch

9

@alsathish
First, let’s understand what the script is doing:

  1. it fetches your coordinates i.e longitude and latitude(works best in mobile with GPS)
  2. it stores them in a hidden field named longitude and latitude
  3. then it fetch the basic info of your location(city, state, area) using API and generates a basic google map using iframe
  4. (Imp) if you open a previously saved form then it fetches long&lat from fields and generate a map; means they are stored in DB; why save a whole map when you can generate the map with just coordinates; hope u got my point.

Can u tell exactly what is the error from the console?

10

No errors at all its working well as i mentioned before
But it might be as you describe thats area is variable from location to another one
But the iframe gets detailed address yo review from the manager and approve the transaction so no problems
Thank you for share

12

Great job , thank you

13

Great - Thanks! it works perfectly!!!

14

Dear Sameer,

I have some things that I need to have a word with you, can you please help with your contact no., you can share the same on vibhalodha88@gmail.com

Vibha Manchekar

15

Hi,

I enabled the custom script, however, I am not able to see the iframe for google maps or any other fields such as City, State or Area.

Any help would be much appreciated.

Thank You.

16

Please attach the screenshot of console, doctype and custom script

17

Hello,

Doctype = Attendance

Custom Script:

image
image1208×870 57.1 KB

New Attendance Creation:

image
image1180×622 16.1 KB

Hope this helps.

18

Hii bro,

The script is not working bcz your doctype name is “Attendance” and in the very first line of your custom script you have written “Employee Check-in”.
The doctype the script starting should be same i.e.: frappe.ui.form.on(‘Attendance’

20

Hi, @sameer55chauhan, Its working! However I cannot see the Google maps iframe.

image
image1177×564 22.4 KB

Does this iframe requires another field to be created?

Thank you and much appreciated sir.

21

@Rahul_Singh_Yadav
Yes, A HTML field, kindly see my doctype again.
Field NO. 4

1 Like
22

Noted. Thank You once again and much appreciated sir.