Difference between revisions of "Results"

(Trial of results table)
Line 36: Line 36:
 
</style>
 
</style>
  
 +
<!-- Start Kelly's styles & scripts here -->
 +
 +
<script src='https://igem.org/common/DataTables-1.10.7/media/js/jquery.dataTables.js'></script>
 +
<link rel='stylesheet' type='text/css' href='https://igem.org/common/DataTables-1.10.7/media/css/jquery.dataTables.css'>
 +
 +
<style type="text/css">
 +
#table_team th, #table_team td {
 +
font-size: larger;
 +
padding: 7px;
 +
}
 +
td.team-name-column {
 +
text-align: right;
 +
}
 +
td.medal-column {
 +
text-align: center;
 +
}
 +
td.award-column {
 +
text-align: left;
 +
}
 +
#table_team tbody img {
 +
padding: 0px;
 +
}
 +
</style>
 +
 +
<script>
 +
var t;
 +
var currentYear = 2014;
 +
 +
//Helper function
 +
String.prototype.capitalize = function() {
 +
    return this.charAt(0).toUpperCase() + this.slice(1);
 +
}
 +
 +
function canonicalizeMedal(m) {
 +
m = m.toLowerCase();
 +
if (['gold', 'silver', 'bronze', 'no medal'].indexOf(m) == -1) {
 +
return 'missing';
 +
}
 +
return m;
 +
}
 +
 +
//Function to generate the supplementary-info child rows
 +
function childRowFormat(data) {
 +
return '<div border="0" style="padding-left:50px;">'+
 +
'<p>' +
 +
// 'Track: <b>' + data.track +
 +
// '</b>&nbsp;&nbsp;|&nbsp;&nbsp;' + //**Be nice to show the track but i have no API access to that
 +
'Region: <b>' + data.region +
 +
'</b>&nbsp;&nbsp;|&nbsp;&nbsp;' +
 +
'Section: <b>' + data.section.capitalize() +
 +
'</b>&nbsp;&nbsp;|&nbsp;&nbsp;' +
 +
'<a target="_blank" href="https://igem.org/Team.cgi?id=' + data.team_id + '">Official Team Profile</a>' +
 +
'</p>' +
 +
'<p>'+
 +
'View this team\'s &nbsp;&nbsp;' +
 +
'<a target="_blank" href="https://2015.igem.org/Team:' + data.team_name + '">Wiki</a>&nbsp;&nbsp;|&nbsp;&nbsp;' +
 +
'<a target="_blank" title="Not yet available" style="color: gray; cursor: pointer;">Poster</a>&nbsp;&nbsp;|&nbsp;&nbsp;' +
 +
'<a target="_blank" title="Not yet available" style="color: gray; cursor: pointer;">Presentation Slides</a>&nbsp;&nbsp;|&nbsp;&nbsp;' +
 +
'<a target="_blank" title="Not yet available" style="color: gray; cursor: pointer;">Presentation Video</a>' +
 +
'</p>'+
 +
'</div>';
 +
}
 +
 +
//Accepts an array of team objects and reorganizes it into an array of team*awards (incl no-awards)
 +
function parseTeamsToAwards(arrayOfTeams, extraTeamInfo) {
 +
var arrayOfTeamAwards = [];
 +
for (i = 0; i < arrayOfTeams.length; i++) {
 +
var teamObj = jQuery.extend(arrayOfTeams[i], extraTeamInfo[i]);
 +
//Take care of any teams that didn't win any awards
 +
if (teamObj.awards.length == 0) {
 +
teamObj.awards.push(null);
 +
}
 +
teamObj.awards.forEach(function(award) {
 +
var teamAwardObj = jQuery.extend({}, teamObj); //copy the team object
 +
delete teamAwardObj.awards; //delete the array of awards
 +
teamAwardObj.award = award; //add the one award back
 +
teamAwardObj.medal = canonicalizeMedal(teamAwardObj.medal); //canonicalize the medal
 +
arrayOfTeamAwards.push(teamAwardObj); //and put the team*award on the list to return
 +
});
 +
}
 +
return arrayOfTeamAwards;
 +
}
 +
 +
 +
jQuery(document).ready(function() {
 +
$("#title-year").html(currentYear);
 +
$("#table_team tbody").empty().append("<tr><td colspan='3'>Loading...</td></tr>");
 +
 +
//Request team data
 +
var teamsRequest = jQuery.ajax({
 +
url: "https://igem.org/aj/team_list.cgi",
 +
type: "GET",
 +
timeout: 30000,
 +
dataType: "json",
 +
data: {command: "get_team_list", year: currentYear},
 +
error: function(jqxhr, textStatus, errorThrown) {
 +
alert("Failed to get list of teams. look at var teamsRequest");
 +
}
 +
});
 +
//Request the awards data
 +
var awardsRequest = jQuery.ajax({
 +
url: 'https://igem.org/awards/json_dump.cgi',
 +
type: 'GET',
 +
timeout: 30000,
 +
dataType: "json",
 +
data: {year: currentYear},
 +
error: function(jqxhr, textStatus, errorThrown) {
 +
alert("AJAX error; look at var awardsRequest");
 +
}
 +
});
 +
 +
//When both requests finish, parse the data and set up the table.
 +
jQuery.when(teamsRequest, awardsRequest).done(function(teamsReqResult, awardsReqResult) {
 +
$("#table_team tbody").empty();
 +
var teamsData = teamsReqResult[0];
 +
var awardsData = awardsReqResult[0];
 +
var arrayOfTeamAwards = parseTeamsToAwards(awardsData, teamsData);
 +
 +
//Initialize dataTable and set up event bindings.
 +
t = jQuery('#table_team').DataTable( {
 +
'lengthMenu': [[10, 25, 50, 100, -1],[10, 25, 50, 100, 'All']],
 +
'pageLength': -1,
 +
'processing': true, //enable "loading" message
 +
'order': [[0, 'asc']], //I think this sorts by team-name by default
 +
'data': arrayOfTeamAwards,
 +
'columns': [
 +
{ //Team Name Column
 +
'className': 'team-name-column',
 +
'data': function(row, type, val, meta) {
 +
if (type == 'display') {
 +
return "<a class='team-info-control' style='cursor: pointer;'>" + row.team_name + "</a>";
 +
}
 +
else {
 +
return row.team_name;
 +
}
 +
}
 +
},
 +
{ //Medal Column
 +
'className': 'medal-column',
 +
'width': "10%",
 +
'data': function(row, type, val, meta) {
 +
var medals_info = {
 +
'gold': {
 +
sort: 1,
 +
filter: 'gold medal',
 +
html: "<img title='Gold Medal' src='https://igem.org/images/medals/seal_gold.png'>"
 +
},
 +
'silver': {
 +
sort: 2,
 +
filter: 'silver medal',
 +
html: "<img title='Silver Medal' src='https://igem.org/images/medals/seal_silver.png'>"
 +
},
 +
'bronze': {
 +
sort: 3,
 +
filter: 'bronze medal',
 +
html: "<img title='Bronze Medal' src='https://igem.org/images/medals/seal_bronze.png'>"
 +
},
 +
'no medal': {
 +
sort: 4,
 +
filter: 'no medal',
 +
html: "<img title='No Medal' src='http://web.mit.edu/kdrinkwa/Public/Pictures/seal_transparent.png'>"
 +
},
 +
'missing': {
 +
sort: 5,
 +
filter: 'medal data missing medal data not available medal data unavailable',
 +
html: "<img title='Medal Data Not Available' src='https://igem.org/images/medals/seal_blocked.png'>"
 +
}
 +
};
 +
if (type == 'sort') {
 +
return medals_info[row.medal].sort;
 +
}
 +
else if (type == 'filter') {
 +
return medals_info[row.medal].filter;
 +
}
 +
else {
 +
return medals_info[row.medal].html;
 +
}
 +
}
 +
},
 +
{ //Award Column
 +
'className': 'award-column',
 +
'data': function(row, type, val, meta) {
 +
if (type == 'sort') {
 +
return (row.award == null ? 'zzzzz' : row.award); //No Award will sort alphabetically last
 +
//** This is the place to edit if I want to insert a canonical award ordering.
 +
}
 +
else {
 +
return (row.award == null ? '' : row.award);
 +
}
 +
}
 +
}
 +
]
 +
} );
 +
 +
// Add event listener for opening and closing details
 +
$('#table_team tbody').on('click', 'a.team-info-control', function () {
 +
var tr = $(this).closest('tr');
 +
var row = t.row( tr );
 +
 +
if ( row.child.isShown() ) {
 +
// This row is already open - close it
 +
row.child.hide();
 +
tr.removeClass('shown');
 +
}
 +
else {
 +
// Close any others
 +
t.row($("#table_team tbody").children(".shown").removeClass("shown")).child.hide();
 +
// Open this row
 +
row.child( childRowFormat(row.data()) ).show();
 +
tr.addClass('shown');
 +
}
 +
} );
 +
 +
$("#view-all-teams").click(function(event){
 +
console.log("view all teams");
 +
t.column(2).search('').draw();
 +
});
 +
$("#view-award-winners").click(function(event) {
 +
console.log("view award winners");
 +
t.column(2).search('.', true, false).draw();
 +
});
 +
 +
});
 +
 +
});
 +
</script>
 +
 +
<!-- End Kelly's styles and scripts -->
 
 
 
<div id="leftColumn_MainPage">  
 
<div id="leftColumn_MainPage">  
Line 53: Line 281:
 
</tr>
 
</tr>
 
</table>
 
</table>
 +
 +
<h2>Comprehensive Results from iGEM <span id="title-year"></span></h2>
 +
 +
<p>View: <input type="button" id="view-all-teams" value="All Teams"> <input type="button" id="view-award-winners" value="Award Winners"> | [Africa] [Asia] [Europe] [Latin America][other?]</p>
 +
 +
 +
<TABLE id='table_team' width='890' border='0' cellspacing='0' cellpadding='0' style='margin-left:auto; margin-right:auto; border: 1px solid gray;background-color: white; padding-left: 10px;line-height: 150%; padding-right:2px;padding-top:3px;' >
 +
<THEAD>
 +
<TR>
 +
<TH>Team</TH>
 +
<TH>Medal</TH>
 +
<TH>Award</TH>
 +
</TR>
 +
</THEAD>
 +
<TBODY>
 +
<tr>
 +
<td id="javascript-disabled" colspan="3">Please enable JavaScript in your browser to view results.</td>
 +
</tr>
 +
</TBODY>
 +
</TABLE>
  
 
</div>
 
</div>

Revision as of 04:48, 24 September 2015

iGEM 2015 Results

Results will be available soon.

Comprehensive Results from iGEM

View: | [Africa] [Asia] [Europe] [Latin America][other?]

Team Medal Award
Please enable JavaScript in your browser to view results.