gadget.xml

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs>
      <Require feature="views" />
  </ModulePrefs>

  <Content type="html">
  <![CDATA[

<h3>Hubspot Calendar Syncer</h3>
<!--Add buttons to initiate auth sequence and sign out-->
<button id="authorize-button" style="display: none;">Authorize</button>
<button id="signout-button" style="display: none;">Sign Out</button>
<button id="syncCal-button" style="display: none;">Sync Cal</button>

<div id="content" style="margin: 10px 10px 10px 0px;" ></div>

<script type="text/javascript">
/* Client ID and API key from the Developer Console */
var CLIENT_ID = '545280731600-g6em9h05nalpu6rsirvqakavvgvceja0.apps.googleusercontent.com';
/* Array of API discovery doc URLs for APIs used by the quickstart */
var DISCOVERY_DOCS = ["https://script.googleapis.com/$discovery/rest?version=v1"];
/* Authorization scopes required by the API; multiple scopes can be included, separated by spaces */
var SCOPES = 'https://www.googleapis.com/auth/drive https://www.google.com/calendar/feeds https://www.googleapis.com/auth/script.external_request';

/* Html Buttons */
var authorizeButton = document.getElementById('authorize-button');
var signoutButton = document.getElementById('signout-button');
var syncButton = document.getElementById('syncCal-button');


/*******************************************************************************
* On load, called to load the auth2 library and API client library.
* 
* @return {} 
******************************************************************************/
function handleClientLoad() {
    gapi.load('client:auth2', initClient);
}


/*******************************************************************************
* Initializes the API client library and sets up sign-in state listeners.
* 
* @return {} 
*******************************************************************************/
function initClient() {
    gapi.client.init({
        discoveryDocs: DISCOVERY_DOCS,
        clientId: CLIENT_ID,
        scope: SCOPES
    }).then(function () {
        /* Listen for sign-in state changes. */
        gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
        
        /* Handle the initial sign-in state. */
        updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
        authorizeButton.onclick = handleAuthClick;
        signoutButton.onclick = handleSignoutClick;
        syncButton.onclick = callScriptFunction;
    });
}


/*******************************************************************************
* Called when the signed in status changes, to update the UI, appropriately.
* After a sign-in, the API is called.
* 
* @return {} 
*******************************************************************************/
function updateSigninStatus(isSignedIn) {
    if (isSignedIn) {
        authorizeButton.style.display = 'none';
        signoutButton.style.display = 'block';
        syncButton.style.display = 'block';
    } else {
        authorizeButton.style.display = 'block';
        signoutButton.style.display = 'none';
        syncButton.style.display = 'none';
    }
}


/*******************************************************************************
* Sign in the user upon button click.
* 
* @return {} 
*******************************************************************************/
function handleAuthClick(event) {
    gapi.auth2.getAuthInstance().signIn();
}


/*******************************************************************************
* Sign out the user upon button click.
* 
* @return {} 
*******************************************************************************/
function handleSignoutClick(event) {
    gapi.auth2.getAuthInstance().signOut();
}


/*******************************************************************************
* Append a pre element to the body containing the given message
* as its text node. Used to display the results of the API call.
* 
* @param {string} message Text to be placed in pre element.
* @return {} 
*******************************************************************************/
function appendPre(message) {
    var contentDiv = document.getElementById('content');
    
    /* Creates a new div element */
    var newDiv = document.createElement("div"); 
    /* Content for the new div */
    var textContent = document.createTextNode(message);
    /* Adds text to the new div */
    newDiv.appendChild(textContent);

    contentDiv.appendChild(newDiv);
}

/*******************************************************************************
* Load the API and make an API call.  Display the results on the screen.
*
* @return {} 
*******************************************************************************/
function callScriptFunction() {
    var scriptId = "19ugvAtiKZo9MdAmJ0iCAHLCnLxdAnHooM8k-QeuoE5Brey-6gNukeGkI";
    
    /* Call the Execution API run method
       - 'scriptId' is the URL parameter that states what script to run
       - 'resource' describes the run request body (with the function name
                  to execute)*/
    gapi.client.script.scripts.run({
        'scriptId': scriptId,
        'resource': {
            'function': 'main'
        }
    }).then(function(resp) {
        var result = resp.result;
        if (result.error && result.error.status) {
            // The API encountered a problem before the script
            // started executing.
            appendPre('Error calling API:');
            appendPre(JSON.stringify(result, null, 2));
        } else if (result.error) {
            // The API executed, but the script returned an error.
            
            // Extract the first (and only) set of error details.
            // The values of this object are the script's 'errorMessage' and
            // 'errorType', and an array of stack trace elements.
            var error = result.error.details[0];
            appendPre('Script error message: ' + error.errorMessage);
            
            if (error.scriptStackTraceElements) {
                // There may not be a stacktrace if the script didn't start
                // executing.
                appendPre('Script error stacktrace:');
                for (var i = 0; i < error.scriptStackTraceElements.length; i++) {
                    var trace = error.scriptStackTraceElements[i];
                    appendPre('\t' + trace.function + ':' + trace.lineNumber);
                }
            }
        } else {
            // The structure of the result will depend upon what the Apps
            // Script function returns. Here, the function returns an Apps
            // Script Object with String keys and values, and so the result
            // is treated as a JavaScript object (folderSet).
            
            console.log(result);
            
            /* The returned object */
            var r = result.response.result;
            if (Object.keys(r).length == 0) {
                appendPre('No events created');
            } else {
                appendPre('Number of events created: ' + r.events);
            }
        }
    });
}

</script>

<script async defer src="https://apis.google.com/js/api.js"
    onload="this.onload=function(){};handleClientLoad()"
    onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
  ]]>
  </Content>
</Module>