index.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>DimeSheet *</title>
  5. <meta charset='utf-8' />
  6. </head>
  7. <body>
  8. <p>DimeSheet</p>
  9. <!--Add buttons to initiate auth sequence and sign out-->
  10. <button id="authorize-button" style="display: none;">Authorize</button>
  11. <button id="signout-button" style="display: none;">Sign Out</button>
  12. <pre id="content"></pre>
  13. <script type="text/javascript">
  14. // Client ID and API key from the Developer Console
  15. var CLIENT_ID = '72444000263-arb8mvd5ko1i4mb7cel04bbuiipej6lc.apps.googleusercontent.com';
  16. var API_KEY = 'AIzaSyBfM8IAHkv5JRlo3nCxWpp5b3Zw2XnWXZY';
  17. // Array of API discovery doc URLs for APIs used by the quickstart
  18. var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];
  19. // Authorization scopes required by the API; multiple scopes can be
  20. // included, separated by spaces.
  21. var SCOPES = "https://www.googleapis.com/auth/calendar.readonly";
  22. var authorizeButton = document.getElementById('authorize-button');
  23. var signoutButton = document.getElementById('signout-button');
  24. /**
  25. * On load, called to load the auth2 library and API client library.
  26. */
  27. function handleClientLoad() {
  28. gapi.load('client:auth2', initClient);
  29. }
  30. /**
  31. * Initializes the API client library and sets up sign-in state
  32. * listeners.
  33. */
  34. function initClient() {
  35. gapi.client.init({
  36. apiKey: API_KEY,
  37. clientId: CLIENT_ID,
  38. discoveryDocs: DISCOVERY_DOCS,
  39. scope: SCOPES
  40. }).then(function() {
  41. // Listen for sign-in state changes.
  42. gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
  43. // Handle the initial sign-in state.
  44. updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
  45. authorizeButton.onclick = handleAuthClick;
  46. signoutButton.onclick = handleSignoutClick;
  47. });
  48. }
  49. /**
  50. * Called when the signed in status changes, to update the UI
  51. * appropriately. After a sign-in, the API is called.
  52. */
  53. function updateSigninStatus(isSignedIn) {
  54. if (isSignedIn) {
  55. authorizeButton.style.display = 'none';
  56. signoutButton.style.display = 'block';
  57. listUpcomingEvents();
  58. } else {
  59. authorizeButton.style.display = 'block';
  60. signoutButton.style.display = 'none';
  61. }
  62. }
  63. /**
  64. * Sign in the user upon button click.
  65. */
  66. function handleAuthClick(event) {
  67. gapi.auth2.getAuthInstance().signIn();
  68. }
  69. /**
  70. * Sign out the user upon button click.
  71. */
  72. function handleSignoutClick(event) {
  73. gapi.auth2.getAuthInstance().signOut();
  74. }
  75. /**
  76. * Append a pre element to the body containing the given message
  77. * as its text node. Used to display the results of the API call.
  78. *
  79. * @param {string} message Text to be placed in pre element.
  80. */
  81. function appendPre(message) {
  82. var pre = document.getElementById('content');
  83. var textContent = document.createTextNode(message + '\n');
  84. pre.appendChild(textContent);
  85. }
  86. /**
  87. * Print the summary and start datetime/date of the next ten events in
  88. * the authorized user's calendar. If no events are found an
  89. * appropriate message is printed.
  90. */
  91. function listUpcomingEvents() {
  92. gapi.client.calendar.events.list({
  93. 'calendarId': 'primary',
  94. 'timeMin': (new Date()).toISOString(),
  95. 'showDeleted': false,
  96. 'singleEvents': true,
  97. 'maxResults': 10,
  98. 'orderBy': 'startTime'
  99. }).then(function(response) {
  100. var events = response.result.items;
  101. appendPre('Upcoming events:');
  102. if (events.length > 0) {
  103. for (i = 0; i < events.length; i++) {
  104. var event = events[i];
  105. var when = event.start.dateTime;
  106. if (!when) {
  107. when = event.start.date;
  108. }
  109. appendPre(event.summary + ' (' + when + ')')
  110. }
  111. } else {
  112. appendPre('No upcoming events found.');
  113. }
  114. });
  115. }
  116. </script>
  117. <script async defer src="https://apis.google.com/js/api.js" onload="this.onload=function(){};handleClientLoad()" onreadystatechange="if (this.readyState === 'complete') this.onload()">
  118. </script>
  119. </body>
  120. </html>