View source for Dev/Results

{{2015Top}}
<html>

<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 tbody img {
	padding: 0px;
	margin-left: auto;
	margin-right: auto; /* **I can't get them to center, for some reason*/
}
</style>

<script>
var currentYear = 2014;

//Helper function
String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

//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>' +
		'</p>' +
		'<p>'+
			'View this team\'s: &nbsp;&nbsp;&nbsp;' +
			'<a target="_blank" href="https://igem.org/Team.cgi?id=' + data.team_id + '">Team Profile</a>&nbsp;&nbsp;|&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
			arrayOfTeamAwards.push(teamAwardObj); //and put the team*award on the list to return
		});
	}
	return arrayOfTeamAwards;
}


jQuery(document).ready(function() {
	$("#title-year").html(currentYear);
	
	//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) {
		var teamsData = teamsReqResult[0];
		var awardsData = awardsReqResult[0];
		var arrayOfTeamAwards = parseTeamsToAwards(awardsData, teamsData);
		
		//Initialize dataTable and set up event bindings.
		var t = jQuery('#table_team').DataTable( {
				'lengthMenu': [[10, 25, 50, 100, -1],[10, 25, 50, 100, 'All']],
				'pageLength': -1,
				//'deferRender': true, //improves performance
				'data': arrayOfTeamAwards,
				'columns': [
					{
						'data': function(row, type, val, meta) {
							if (row.medal.toUpperCase() == "GOLD") {
								return "<img title='Gold Medal' src='https://igem.org/images/medals/seal_gold.png'>";
							}
							else if (row.medal.toUpperCase() == "SILVER") {
								return "<img title='Silver Medal' src='https://igem.org/images/medals/seal_silver.png'>";
							}
							else if (row.medal.toUpperCase() == "BRONZE") {
								return "<img title='Bronze Medal' src='https://igem.org/images/medals/seal_bronze.png'>";
							}
							else if (row.medal.toUpperCase() == "NO MEDAL") {
								return "<img title='No Medal' src='http://web.mit.edu/kdrinkwa/Public/Pictures/seal_transparent.png'>";
							}
							else {
								return "<img title='Medal Data Not Available' src='https://igem.org/images/medals/seal_blocked.png'>";
							}
						}
					},
					{
						'data': function(row, type, val, meta) {
							return "<a class='team-info-control' style='cursor: pointer;'>" + row.team_name + "</a>";
						}
					},
					{'data': 'award', 'defaultContent': ' '}
				],
				'order': [[1, 'asc']] //I think this sorts by team-name by default
		} );
		
		// 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');
			}
		} );

		jQuery('#table_team').addClass('hover'); //What's this?
	});

});
</script>



<div id="fullWidth">


	<!-- start of content ----------------------------------------> 


<h2>Comprehensive Results from iGEM <span id="title-year"></span></h2>

<p>View: <a href="#" id="view-all-teams">[All Teams]</a> <a href="#" id="view-award-winners">[Award Winners]</a> | [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></TH>
		<TH>Team</TH>
		<TH>Award</TH>
	</TR>
</THEAD>
<TBODY>
</TBODY>
</TABLE>



	<!-- end of content ---------------------------------------->


</div>
<div class="clear"></div>
</html> {{2015Bottom}}<html>
</div>
</html>