
## Setup Checkin

- การใช้งาน Function : check in & out
- การใช้งาน Function : Setup Scope

### Tools SDK
+ javascript
+ jQuery
+ Gulp
+ Minify
+ bom.js


## การใช้งาน Function : check in & out
+ File
    1. App_Code /
        - control.main
    2. Mobile / CheckIn /
        - leaflet.css
        - Component /
            - checkin.components.aspx (vb)
        - checkin.data.aspx (vb)
        - scripts.checkin.js
+ Setup Route
    + File : HRM (company.main) BBL (control.main)
    + Class : Main.RouteConfig

    #### Add  (vb)
    ``` html 
     routes.MapPageRoute("res-checkin","checkin/{key}","~/Mobile/CheckIn/checkin.data.aspx", True)`
    ```
+ Render HTML
    #### เพิ่ม Like tag css
    ``` html
    <link rel="stylesheet" href="~/Mobile/CheckIn/leaflet.css" />
     ```

    #### เพิ่ม Like tag Script
    ``` html
    <script type="text/javascript" src='<%= ResolveUrl("~/Mobile/CheckIn/script.checkin.js")%>'></script>`
    ```
    #### เรียกใช้ SDK
    ``` html
    let Checkin = new WPCheckIn({
        event: 'OpenCheckin',
        onSubmit: function (data, element) {
            console.log(data);
            element.modal('hide');
               
        }
    });
    // เรียกใช้ function loading
    Checkin.loading();"
    ```
   ### Event 
    + onSubmit
    ``` html
    {
        address: 
        distance: 21.7084069074514
        lat: 13.857324
        lon: 100.642922
        scopeName: "test"
        scopeNumber: 50
    }
    ``` 

## การใช้งาน Function : Setup Scope
+ File
    1. App_Code / Company /
        - company.main.vb
    2. CheckIn /
        - leaflet.css
        - Component /
            - checkin.components.aspx (vb)
        - checkin.data.aspx (vb)
        - scripts.checkin.js
+ Setup Route
    + File : HRM (company.main) BBL (control.main)
    + Class : Main.RouteConfig

    #### Add  (vb)
    ``` html 
     routes.MapPageRoute("res-checkin","checkin/{key}","~/Mobile/CheckIn/checkin.data.aspx", True)`
    ```
+ Render HTML
    #### เพิ่ม Like tag css
    ``` html
    <link rel="stylesheet" href="~/Mobile/CheckIn/leaflet.css" />
     ```

    #### เพิ่ม Like tag Script
    ``` html
    <script type="text/javascript" src='<%= ResolveUrl("~/Mobile/CheckIn/script.checkin.js")%>'></script>`
    ```
    #### เรียกใช้ SDK
    ``` html
    let Checkin = new WPCheckIn({
        event: 'map',
        onDragend: function (e) {
            $('#<%= txtlatitude.ClientID %>').val(e.lat);
            $('#<%= txtlongitude.ClientID %>').val(e.lon);
        }
    });
    ```
   #### เรียกใช้ Function
   ``` html
    Checkin.render({
        name: 'map',
        scope: $('#<%= DrpRadius.ClientID %>'),
        title: $('#<%= txtLocation.ClientID %>'),
        txttal: $('#<%= txtlatitude.ClientID %>'),
        txtlon: $('#<%= txtlongitude.ClientID %>'),
        btnsetup: $('#<%= btnSetting2.ClientID %>')
    }, function (e) {
        $('#<%= txtlatitude.ClientID %>').val(e.lat);
        $('#<%= txtlongitude.ClientID %>').val(e.lon);
    });
    ```
   ### Event 
    + onDragend
    ``` html
    { 
        title : 'แขวงอนุสาวรีย์, 
                    เขตบางเขน, กรุงเทพมหานคร, 10220, ประเทศไทย', lat :'13.861163831302719',lon:'100.62377929687501' 
    }
    ``` 


