Geolocation based Employee Attendance check-in system

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


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

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

@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

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

@sameer55chauhan- Many thanks for sharing.

This has helped very much.

works fine but area flied not fulfilled

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

@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?

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

Great job , thank you

Great - Thanks! it works perfectly!!!

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

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.

Please attach the screenshot of console, doctype and custom script

Hello,

Doctype = Attendance

Custom Script:

New Attendance Creation:

Hope this helps.

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’

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

Does this iframe requires another field to be created?

Thank you and much appreciated sir.

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

1 Like

Noted. Thank You once again and much appreciated sir.