- Added web widget for Google Calendar integration

- UX improvements on the dashboard

platypush/backend/http/static/css/dashboard.css

@@ -4,13 +4,13 @@ body {
 }
 
 #widgets-container {
-    padding: 1em;
+    padding: 2em;
 }
 
 .widget {
     background: white;
     border-radius: 5px;
-    height: 18em;
+    height: 25em;
     overflow: hidden;
     box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
 }

platypush/backend/http/static/css/widgets/calendar.css

@@ -0,0 +1,30 @@
+.calendar-container {
+    padding: 2rem;
+    overflow: hidden;
+}
+
+    .calendar-container * > .date,
+    .calendar-container * > .time {
+        font-size: 0.9em;
+    }
+
+.calendar-next-event-container {
+    width: 50%;
+    margin: auto;
+    text-align: center;
+}
+
+    .calendar-next-event-container > .summary {
+        font-size: 1.5em;
+        text-transform: uppercase;
+    }
+
+.calendar-events-list-container {
+    margin-top: 2.5rem;
+}
+
+    .calendar-event > .date,
+    .calendar-event > .time {
+        padding-top: .15rem;
+    }
+

platypush/backend/http/static/css/widgets/date-time-weather.css

@@ -8,7 +8,7 @@
 
 h1.temperature {
     font-size: 45px;
-    margin: 4rem;
+    margin: 8rem;
 }
 
     .widget.date-time-weather * > .time {

platypush/backend/http/static/js/widgets/calendar.js

@@ -0,0 +1,76 @@
+$(document).ready(function() {
+    var $widget = $('.widget.calendar'),
+        $nextEventContainer = $widget.find('.calendar-next-event-container'),
+        $eventsListContainer = $widget.find('.calendar-events-list-container');
+
+    var formatDateString = function(date) {
+        return date.toDateString().substring(0, 10);
+    };
+
+    var formatTimeString = function(date) {
+        return date.toTimeString().substring(0, 5);
+    };
+
+    var refreshStatus = function(status) {
+        setState(state=status.state);
+        if ('elapsed' in status) {
+            setTrackElapsed(status.elapsed);
+        }
+    };
+
+    var refreshCalendar = function() {
+        execute(
+            {
+                type: 'request',
+                action: 'google.calendar.get_upcoming_events',
+                args: {
+                    max_results: 10,
+                }
+            },
+
+            onSuccess = function(response) {
+                var events = response.response.output;
+                for (var i=0; i < events.length; i++) {
+                    var event = events[i];
+                    var start = new Date('dateTime' in event.start ? event.start.dateTime : event.start.date);
+                    var end = new Date('dateTime' in event.end ? event.end.dateTime : event.end.date);
+                    var summary = event.summary;
+
+                    if (i == 0) {
+                        $nextEventContainer.find('.summary').text(summary);
+                        $nextEventContainer.find('.date').text(formatDateString(start));
+                        $nextEventContainer.find('.time').text(
+                            formatTimeString(start) + ' - ' + formatTimeString(end));
+                    } else {
+                        var $event = $('<div></div>').addClass('calendar-event').addClass('row');
+                        var $eventDate = $('<div></div>').addClass('date')
+                            .addClass('three columns').text(formatDateString(start));
+
+                        var $eventTime = $('<div></div>').addClass('time').addClass('one column')
+                            .text('dateTime' in event.start ? formatTimeString(start) : '-');
+
+                        var $eventSummary = $('<div></div>').addClass('summary')
+                            .addClass('eight columns').text(summary);
+
+                        $eventDate.appendTo($event);
+                        $eventTime.appendTo($event);
+                        $eventSummary.appendTo($event);
+                        $event.appendTo($eventsListContainer);
+                    }
+                }
+            }
+        );
+    };
+
+    var initWidget = function() {
+        refreshCalendar();
+        setInterval(refreshCalendar, 36000000);
+    };
+
+    var init = function() {
+        initWidget();
+    };
+
+    init();
+});
+

platypush/backend/http/templates/widgets/calendar.html

@@ -0,0 +1,13 @@
+<script type="text/javascript" src="{{ url_for('static', filename='js/widgets/calendar.js') }}"></script>
+<link rel="stylesheet" href="{{ url_for('static', filename='css/widgets/calendar.css') }}"></script>
+
+<div class="calendar-container">
+    <div class="calendar-next-event-container">
+        <div class="date"></div>
+        <div class="summary"></div>
+        <div class="time"></div>
+    </div>
+
+    <div class="calendar-events-list-container"></div>
+</div>
+

platypush/plugins/google/calendar.py

@@ -20,7 +20,7 @@ class GoogleCalendarPlugin(GooglePlugin):
         now = datetime.datetime.utcnow().isoformat() + 'Z'
         service = self._get_service()
         result = service.events().list(calendarId='primary', timeMin=now,
-                                       maxResults=10, singleEvents=True,
+                                       maxResults=max_results, singleEvents=True,
                                        orderBy='startTime').execute()
 
         events = result.get('items', [])