- Added web widget for Google Calendar integration

- UX improvements on the dashboard
This commit is contained in:
Fabio Manganiello 2018-05-05 00:57:41 +02:00
parent f6306c6015
commit e1e4d824ad
6 changed files with 123 additions and 4 deletions

View file

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

View 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;
}

View file

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

View 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();
});

View 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>

View file

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