forked from platypush/platypush
- Added web widget for Google Calendar integration
- UX improvements on the dashboard
This commit is contained in:
parent
f6306c6015
commit
e1e4d824ad
6 changed files with 123 additions and 4 deletions
|
@ -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);
|
||||
}
|
||||
|
|
30
platypush/backend/http/static/css/widgets/calendar.css
Normal file
30
platypush/backend/http/static/css/widgets/calendar.css
Normal file
|
@ -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;
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
h1.temperature {
|
||||
font-size: 45px;
|
||||
margin: 4rem;
|
||||
margin: 8rem;
|
||||
}
|
||||
|
||||
.widget.date-time-weather * > .time {
|
||||
|
|
76
platypush/backend/http/static/js/widgets/calendar.js
Normal file
76
platypush/backend/http/static/js/widgets/calendar.js
Normal file
|
@ -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();
|
||||
});
|
||||
|
13
platypush/backend/http/templates/widgets/calendar.html
Normal file
13
platypush/backend/http/templates/widgets/calendar.html
Normal file
|
@ -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>
|
||||
|
|
@ -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', [])
|
||||
|
|
Loading…
Reference in a new issue