From e1e4d824ade094c6d5dd53d234155ad4ca4fae35 Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Sat, 5 May 2018 00:57:41 +0200 Subject: [PATCH] - Added web widget for Google Calendar integration - UX improvements on the dashboard --- .../backend/http/static/css/dashboard.css | 4 +- .../http/static/css/widgets/calendar.css | 30 ++++++++ .../static/css/widgets/date-time-weather.css | 2 +- .../http/static/js/widgets/calendar.js | 76 +++++++++++++++++++ .../http/templates/widgets/calendar.html | 13 ++++ platypush/plugins/google/calendar.py | 2 +- 6 files changed, 123 insertions(+), 4 deletions(-) create mode 100644 platypush/backend/http/static/css/widgets/calendar.css create mode 100644 platypush/backend/http/static/js/widgets/calendar.js create mode 100644 platypush/backend/http/templates/widgets/calendar.html diff --git a/platypush/backend/http/static/css/dashboard.css b/platypush/backend/http/static/css/dashboard.css index 7c7b03992..2fa596f7d 100644 --- a/platypush/backend/http/static/css/dashboard.css +++ b/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); } diff --git a/platypush/backend/http/static/css/widgets/calendar.css b/platypush/backend/http/static/css/widgets/calendar.css new file mode 100644 index 000000000..64660fbcd --- /dev/null +++ b/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; + } + diff --git a/platypush/backend/http/static/css/widgets/date-time-weather.css b/platypush/backend/http/static/css/widgets/date-time-weather.css index 6790ba2f9..9853396dc 100644 --- a/platypush/backend/http/static/css/widgets/date-time-weather.css +++ b/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 { diff --git a/platypush/backend/http/static/js/widgets/calendar.js b/platypush/backend/http/static/js/widgets/calendar.js new file mode 100644 index 000000000..e4bfba1c9 --- /dev/null +++ b/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 = $('
').addClass('calendar-event').addClass('row'); + var $eventDate = $('
').addClass('date') + .addClass('three columns').text(formatDateString(start)); + + var $eventTime = $('
').addClass('time').addClass('one column') + .text('dateTime' in event.start ? formatTimeString(start) : '-'); + + var $eventSummary = $('
').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(); +}); + diff --git a/platypush/backend/http/templates/widgets/calendar.html b/platypush/backend/http/templates/widgets/calendar.html new file mode 100644 index 000000000..1f2bdf3db --- /dev/null +++ b/platypush/backend/http/templates/widgets/calendar.html @@ -0,0 +1,13 @@ + + + +
+
+
+
+
+
+ +
+
+ diff --git a/platypush/plugins/google/calendar.py b/platypush/plugins/google/calendar.py index fa38bae76..d66f244d7 100644 --- a/platypush/plugins/google/calendar.py +++ b/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', [])