opendev/irc-meetings
Code Issues Proposed changes

Add a UTC clock and integrate local meeting time

Browse Source 
It's a bit difficult to use the meeting schedule page
if you're not in UTC time.

This patch adds a little clock at the top (in UTC time)
for those in far away time zones who don't want to keep track.
It also adds a tooltip to each time link that displays
the meeting time in the browser's local time.

The clock uses JavaScript, and is set up properly
to display a message on unsupported browsers.

Note: for tooltip functionality, Bootstrap JS
and jQuery are added with this patch (using
a CDN just like Bootstrap CSS on the same page)

To test, clone this change, run `tox`, and serve from the
output/ directory (use `python -m SimpleHTTPServer PORT`).

Change-Id: I8ec40caa425199a2efef2a0bf345dfbb07054482
This commit is contained in:
Ryan Selden 2016-08-09 16:49:46 +00:00 committed by Ryan Selden
parent 35e4f26d01
commit 3ca7f01a32
1 changed files with 60 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
meetingindex.jinja
View File

@ -66,7 +66,11 @@ use in your favorite calendaring app:</p>
{% for schedule in meeting.schedules %}
<div><span class="glyphicon glyphicon-time"></span>&nbsp;
{{ schedule.recurrence }} on {{ schedule.day }} at
<a href="http://www.timeanddate.com/worldclock/fixedtime.html?hour={{ schedule.utc[:2] }}&amp;min={{ schedule.utc[2:] }}&amp;sec=0">{{ schedule.utc }} UTC</a>
<a data-toggle="tooltip" data-placement="top" title="NotFilledInYet" utctime="{{schedule.utc}}" weekday="{{schedule.day}}"
href="http://www.timeanddate.com/worldclock/fixedtime.html?hour={{ schedule.utc[:2] }}&amp;min={{ schedule.utc[2:] }}&amp;sec=0"
class="timelink">
{{ schedule.utc }} UTC
</a>
in <a href="ircs://irc.freenode.net:6697/{{ schedule.irc }}">#{{ schedule.irc }}</a>
(IRC <a href="https://webchat.freenode.net/?randomnick=1&channels=%23{{ schedule.irc }}&prompt=1&uio=d4">webclient</a>)
</div>
@ -92,5 +96,60 @@ Logs from <a href="http://eavesdrop.openstack.org/meetings/{{meeting.extras.meet
{% endfor %}
<small>Page generated on {{ timestamp }} UTC</small>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
function setTimeTooltips() {
var timelinks = [].slice.call(document.getElementsByClassName('timelink'));
for (var i in timelinks) {
var link = timelinks[i];
var local_date = new Date();
var local_zone_name = local_date.toLocaleString('en', {timeZoneName:'short'}).split(' ').pop();
var offset = local_date.getTimezoneOffset() / 60 * 100;
var utc_meeting_time = link.getAttribute('utctime');
var local_meeting_time = parseInt(utc_meeting_time) - offset;
var day_offset = 0;
if (local_meeting_time < 0) {
day_offset = -1;
local_meeting_time += 2400;
} else if (local_meeting_time > 2400) {
day_offset = 1;
local_meeting_time -= 2400;
}
local_meeting_time = checkUTC4DigitString(String(local_meeting_time));
var weekday = link.getAttribute('weekday');
weekday = moveWeekday(weekday, day_offset);
weekday = toTitleCase(weekday);
link.title = weekday + ' at ' + local_meeting_time + ' ' + local_zone_name;
}
}
function toTitleCase(str) {
return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
function checkUTC4DigitString(s) { // turns '100' into '0100'
return repeat('0', 4 - s.length) + s;
}
function repeat(s, n){
var a = [];
while(a.length < n){
a.push(s);
}
return a.join('');
}
function moveWeekday(day, offset) {
var days = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
var i = days.indexOf(day.toLowerCase());
i += offset;
if (i < 0)
i += 7;
else if (i > 6)
i -= 7;
return days[i];
}
$(document).ready(function(){
setTimeTooltips()
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>