Skip to content

Instantly share code, notes, and snippets.

@sushain97

sushain97/bridgeProjectLeaderboard.html

Last active August 29, 2015 14:21
Show Gist options
  • Save sushain97/4113e02b18042a4e6059 to your computer and use it in GitHub Desktop.
Save sushain97/4113e02b18042a4e6059 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bridgeProjectLeaderboard.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="author" content="Sushain K. Cherivirala (www.skc.name)">
<title>Bridge Project Leaderboard</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.3.5/tabletop.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}
</style>
</head>
<body>
<div class="container">
<h1>
Bridge Project Leaderboard
<div class="badge">Updated <span id="updateTime"></span></div>
</h1>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="spreadsheetKey">Spreadsheet Key</label>
<div class="col-sm-3">
<input type="text" id="spreadsheetKey" class="form-control" value="18u5E1Fc2f7vKbKIuxY92hXDgVr56MOmJxGVGUdd2X5M">
</div>
<label class="col-sm-2 control-label" for="refreshFrequency">Refresh Frequency (sec.)</label>
<div class="col-sm-2">
<input type="number" id="refreshFrequency" class="form-control" value="30">
</div>
<button type="button" id="forceRefresh" class="btn btn-primary pull-right">Refresh&nbsp;&nbsp;<i class="fa fa-refresh"></i></button>
</div>
</form>
<hr>
<div class="row">
<div class="col-md-6">
<h2>Overall highest weight</h2>
<div class="table-responsive">
<table id="highestWeight" class="table table-hover table-striped">
<thead>
<tr>
<th>Group</th>
<th>Weight (lbs)</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="col-md-6">
<h2>Highest efficiency</h2>
<div class="table-responsive">
<table id="highestEfficiency" class="table table-hover table-striped">
<thead>
<tr>
<th>Group</th>
<th>Efficiency</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<div class="pull-right" style="margin-bottom: 1em;"><a href="https://skc.name" target="_blank">www.skc.name</a></div>
</div>
<script type="text/javascript">
var tabletop = Tabletop.init({
key: $('input#spreadsheetKey').val(),
callback: createTables,
simpleSheet: true
});
var intervalId = setInterval(function () {
tabletop.fetch(createTables);
}, 1000 * parseInt($('input#refreshFrequency').val()));
$('input#spreadsheetKey').change(function () {
tabletop = Tabletop.init({
key: $('input#spreadsheetKey').val(),
callback: createTables,
simpleSheet: true
});
})
$('input#refreshFrequency').change(function () {
clearInterval(intervalId);
intervalId = setInterval(function () {
tabletop.fetch(createTables);
}, 1000 * parseInt($('input#refreshFrequency').val()));
})
$('button#forceRefresh').click(function () {
tabletop.fetch(createTables);
});
function createTables(rows) {
var requiredFields = ['groupmembers', 'pd', 'school', 'teacher'];
var filteredData = [];
for(var i = 0; i < rows.length; i++) {
var add = true;
for(var j = 0; j < requiredFields.length; j++) {
var field = rows[i][requiredFields[j]];
add = add && field && new String(field).length;
}
if(add)
filteredData.push(rows[i])
}
var sortedWeight = filteredData.sort(function (b, a) {
var aWeight = parseFloat(a['totalweightheldlbs']),
bWeight = parseFloat(b['totalweightheldlbs']);
if(aWeight && bWeight)
return aWeight - bWeight;
else if(aWeight)
return 1;
else if(bWeight)
return -1;
else
return a['groupmembers'] > b['groupmembers'] ? 1 : -1;
}).slice(),
sortedEffiency = filteredData.sort(function (b, a) {
var aEfficiency = parseFloat(a['efficiency']),
bEfficiency = parseFloat(b['efficiency']);
if(aEfficiency && bEfficiency)
return aEfficiency - bEfficiency;
else if(aEfficiency)
return 1;
else if(bEfficiency)
return -1;
else
return a['groupmembers'] > b['groupmembers'] ? 1 : -1;
});
$('table#highestWeight tbody tr').remove();
for(var i = 0; i < sortedWeight.length; i++)
$('table#highestWeight tbody').append(createRow(sortedWeight[i], 'totalweightheldlbs'));
$('table#highestEfficiency tbody tr').remove();
for(var i = 0; i < sortedEffiency.length; i++)
$('table#highestEfficiency tbody').append(createRow(sortedEffiency[i], 'efficiency'));
$('span#updateTime').text((new Date()).toLocaleTimeString());
}
function createRow(data, value) {
var row = $('<tr>');
var groupCell = $('<td>');
groupCell.append($('<div>').text(data['groupmembers']).css('font-weight', 'bold'));
if(data['nameofbridge'])
groupCell.append($('<div>').text(data['nameofbridge']));
groupCell.append($('<div>').text(data['teacher'] + ' (P' + data['pd'] + ') - ' + data['school']).css('font-size', '80%'));
row.append(groupCell);
row.append($('<td>').text(parseFloat(data[value]) ? parseFloat(data[value]).toFixed(1) : ''));
return row;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment