google-calendar.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../google-signin/google-signin.html">
<link rel="import" href="../google-apis/google-client-api.html">


<!--
Element providing a list of Google Calendars for a signed in user.
Needs a google-signin element included somewhere on the same page
that handles authentication.

##### Example

    <google-calendar-list title="What I'm up to"></google-calendar-list>

@element google-calendar-list
@blurb Element providing a list of Google Calendars for a signed in user.
@status alpha
@url http://googlewebcomponents.github.io/google-calendar
-->
<polymer-element name="google-calendar-list">
<template>
  <style>
    :host, span {
      display: inline-block;
    }

    ul {
      list-style: none;
      padding: 0;
    }

    li {
      font-family: Arial, sans-serif;
      display: block;
      list-style: none;
      width: 300px;
      border-radius: .2em;
      padding: .2em;
      margin: .2em;
      overflow: hidden;
    }

    li a {
      color: inherit;
      display: block;
      text-decoration: none;
    }
  </style>

  <google-api-loader id="calendar" name="calendar" version="v3"
    on-google-api-load="{{displayCalendars}}">
  </google-api-loader>
  <google-signin-aware
    scopes="https://www.googleapis.com/auth/calendar.readonly"
    on-google-signin-aware-success="{{signIn}}"></google-signin-aware>

  <ul id="calendars">
    <li>
      {{title || 'My calendars'}}
    </li>
    <template repeat="{{c in calendars}}">
      <li style="background-color: {{c.backgroundColor}}">
        <a href="https://www.google.com/calendar/embed?src={{c.id}}&ctz={{c.timeZone}}" target="_blank">
          {{c.summary}}
        </a>
      </li>
    </template>
  </ul>
</template>
<script>
  Polymer('google-calendar-list', {
    signedIn: false,
    /**
     * A title to be displayed on top of the calendar list.
     * @attribute title
     * @type string
     */
    title: 'My calendars',

    signIn: function() {
      this.signedIn = true;
      this.displayCalendars();
    },

    /**
     * Displays the calendar list if the user is signed in to Google.
     *
     * @method displayCalendars
     */
    displayCalendars: function() {
      if (this.signedIn && this.$.calendar.api) {
        var request = this.$.calendar.api.calendarList.list({"key": ""});
        request.execute(function(resp) {
          this.calendars = resp.items;
        }.bind(this));
      }
    }
  });
  </script>
</polymer-element>


<!--
A badge showing the free/busy status based on the events in a given calendar.

##### Example

    <google-calendar-busy-now
        calendarId="YOUR_CAL_ID"
        apiKey="YOUR_API_KEY"
        busyLabel="Do not disturb"
        freeLabel="I'm free, talk to me!">
    </google-calendar-busy-now>

@element google-calendar-busy-now
@blurb A badge showing the free/busy status based on the events in a given calendar.
@status alpha
@url http://googlewebcomponents.github.io/google-calendar
-->
<polymer-element name="google-calendar-busy-now"
                 attributes="calendarId busyLabel freeLabel apiKey">
  <template>
    <style no-shim>
      span {
        font-family: Arial, sans-serif;
        display: inline-block;
        border-radius: .2em;
        padding: .2em;
        margin: .2em;
        overflow: hidden;
      }

      .busy {
        background-color: #FA573C;
      }

      .free {
        background-color: #7BD148;
      }

      .na {
        background-color: #999;
      }
    </style>
      <google-api-loader id="calendar" name="calendar" version="v3"
        on-google-api-load="{{displayBusy}}">
      </google-api-loader>
    <span class="{{className}}">{{label}}</span>
  </template>
  <script>
    (function() {
      var MS_PER_MINUTE = 60000;
      var TIME_SPAN = 30;

      Polymer('google-calendar-busy-now', {
        /**
         * Event from this calendar decide whether the status is free/busy.
         * @attribute calendarId
         * @type string
         */
        calendarId: null,
        /**
         * API key to use with Calendar API requests.
         * @attribute apiKey
         * @type string
         */
        apiKey: null,
        /**
         * Label to be displayed if the status is busy.
         * @attribute busyLabel
         * @type string
         */
        busyLabel: 'I\'m busy',
        /**
         * Label to be displayed if the status is free.
         * @attribute freeLabel
         * @type string
         */
        freeLabel: 'I\'m free',
        className: '',
        label: '',
        calendarIdChanged: function() {
          this.displayBusy();
        },
        /**
          * Displays the busy/free status.
          * @method displayBusy
          */
        displayBusy: function() {
          if (!this.calendarId) {
            console.log('CalendarId is required for this component');
            return;
          }
          if (this.$.calendar.api) {
            if (this.apiKey) {
              gapi.client.setApiKey(this.apiKey);
            }
            var now = new Date();
            var query = {
              timeMin: now.toISOString(),
              timeMax: new Date(now.valueOf() +
                  TIME_SPAN * MS_PER_MINUTE).toISOString(),
              items: [
                {
                  id: this.calendarId
                }
              ]
            }
            var request = this.$.calendar.api.freebusy.query(query);
            request.execute(function(resp) {
              if (!resp.calendars) {
                this.label = this.freeLabel;
                this.className = 'free';
                return;
              }
              if (resp.calendars[this.calendarId].errors) {
                this.label = 'n/a';
                this.className = 'na'
                return;
              }
              var now = new Date();
              var busyTimes = resp.calendars[this.calendarId];
              for (var i = 0, busyTime; busyTime = busyTimes.busy[i]; i++) {
                var start = new Date(busyTime.start);
                var end = new Date(busyTime.end);
                var busy = start < now && now < end;
                this.label = busy ? this.busyLabel : this.freeLabel;
                this.className = busy ? 'busy' : 'free';
                if (busy) {
                  break;
                }
              }
            }.bind(this));
          }
        }
      });
    })();
  </script>
</polymer-element>