Difference between revisions of "Results"

(Undo revision 406733 by Kdrinkwa (talk) (Oh god, I did it wrong))
(Now putting in the real table.)
Line 1: Line 1:
−
<!-- Declare that you are going to use html code instead of wiki code -->
 
 
{{2015Top}}
 
{{2015Top}}
 
<html>
 
<html>
 
<style> #igemLogo, #pageTitle, #grayLine_Clear { display: none;}  
 
<style> #igemLogo, #pageTitle, #grayLine_Clear { display: none;}  
  
−
#image_leftColumn_MainPage  
+
#image_leftColumn_MainPage  
−
{
+
{
−
margin-left: -15px;
+
margin-left: -15px;
−
margin-top: -5px;
+
margin-top: -5px;
−
}
+
}
  
  
−
#rightColumn_MainPage {
+
#rightColumn_MainPage {
−
background-color: #f2f2f2;  
+
background-color: #f2f2f2;  
−
width: 180px;
+
width: 180px;
−
float: left;
+
float: left;
−
height:3200px;
+
height:3200px;
−
padding-top:5px;
+
padding-top:5px;
−
}
+
}
  
  
  
 
/*Class for creating a block 1/4 of the size of the left_Column in the Main page, */
 
/*Class for creating a block 1/4 of the size of the left_Column in the Main page, */
−
.small_block_leftColumn_MainPage{
+
.small_block_leftColumn_MainPage{
−
    margin-bottom: 5px;
+
margin-bottom: 5px;
−
    float: left;
+
float: left;
−
    width:180px;
+
width:180px;
−
    margin-right:10px;  
+
margin-right:10px;  
−
    margin-left:5px;
+
margin-left:5px;
−
    background-color: #fff;
+
background-color: #fff;
−
}
+
}
 +
</style>
  
 +
<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 td.team-info-control {
 +
background: url('https://igem.org/common/DataTables-1.10.7/examples/resources/details_open.png') no-repeat center center;
 +
cursor: pointer;
 +
}
 +
#table_team tr.shown td.team-info-control {
 +
background: url('https://igem.org/common/DataTables-1.10.7/examples/resources/details_close.png') no-repeat center center;
 +
}
 +
#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 = 2015;
 +
var resultsAreOpen = false;
  
−
</style>
+
//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="http://' + currentYear + '.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) {
 +
function parseTeamsToAwards(arrayOfTeams) {
 +
var arrayOfTeamAwards = [];
 +
for (i = 0; i < arrayOfTeams.length; i++) {
 +
//var teamObj = jQuery.extend(arrayOfTeams[i], extraTeamInfo[i]);
 +
var teamObj = arrayOfTeams[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;
 +
}
 +
 +
//Helper to display a message in the body of the table (eventually overwritten by team data).
 +
function showInTable(text) {
 +
$("#table_team tbody").empty();
 +
if (typeof text == "string") {
 +
$("#table_team tbody").append("<tr><td colspan='4'>" + text + "</td></tr>");
 +
}
 +
}
 +
 +
 +
jQuery(document).ready(function() {
 +
//$("#title-year").html(currentYear);
 +
// $("#table_team tbody").empty().append("<tr><td colspan='3'>Loading...</td></tr>");
 +
showInTable("Loading...");
 
 
 +
//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) {
 +
// console.log("Failed to get list of teams. look at var teamsRequest");
 +
// showInTable("Error loading list of teams. Please check your internet connection and try again. If the problem persists, contact iGEM HQ.");
 +
// }
 +
// });
 +
//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) {
 +
console.log("AJAX error; look at var awardsRequest");
 +
showInTable("Error loading competition results. Please check your internet connection and try again. If the problem persists, contact iGEM HQ.");
 +
}
 +
});
 +
 +
//When both requests finish, parse the data and set up the table.
 +
//jQuery.when(teamsRequest, awardsRequest).done(function(teamsReqResult, awardsReqResult) {
 +
awardsRequest.done(function(data, textStatus, jqxhr) {
 +
//if the awards data isn't in yet, just show a message and quit
 +
if (data.length == 0 || resultsAreOpen == false) {
 +
showInTable(currentYear + " results will be available after the Awards Ceremony. Please be patient!");
 +
return;
 +
}
 +
showInTable();
 +
// var teamsData = teamsReqResult[0];
 +
// var awardsData = awardsReqResult[0];
 +
// var arrayOfTeamAwards = parseTeamsToAwards(awardsData, teamsData);
 +
var arrayOfTeamAwards = parseTeamsToAwards(data);
 +
 +
//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': [[1, 'asc']], //I think this sorts by team-name by default
 +
'data': arrayOfTeamAwards,
 +
'columns': [
 +
{ //Control Element Column
 +
'className': 'team-info-control',
 +
'orderable': false,
 +
'data': null,
 +
'defaultContent': '',
 +
'width': '6%'
 +
},
 +
{ //Team Name Column
 +
'className': 'team-name-column',
 +
'data': function(row, type, val, meta) {
 +
if (type == 'display') {
 +
return "<b>" + row.team_name + "</b>";
 +
//return row.team_name;
 +
}
 +
else {
 +
return row.team_name;
 +
}
 +
}
 +
},
 +
{ //Medal Column
 +
'className': 'medal-column',
 +
'width': "12%",
 +
'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);
 +
}
 +
}
 +
},
 +
{ //Region Column (hidden)
 +
'className': 'region-column',
 +
'data': "region",
 +
'visible': false
 +
}
 +
]
 +
} );
 +
 +
$('#table_team .team-info-control').attr('title', 'Details about this team');
 +
 +
// Add event listener for opening and closing details
 +
$('#table_team tbody').on('click', '.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-statuses").click(function(event){
 +
t.column(3).search('').draw();
 +
});
 +
$("#view-winners").click(function(event) {
 +
t.column(3).search('.', true, false).draw();
 +
});
 +
 +
//Generalize this region bullshit eventually
 +
$("#view-all-regions").click(function(event) {
 +
t.column(4).search('').draw();
 +
});
 +
$("#view-africa").click(function(event) {
 +
t.column(4).search('africa').draw();
 +
});
 +
$("#view-asia").click(function(event) {
 +
t.column(4).search('asia').draw();
 +
});
 +
$("#view-europe").click(function(event) {
 +
t.column(4).search('europe').draw();
 +
});
 +
$("#view-latin-america").click(function(event) {
 +
t.column(4).search('latin america').draw();
 +
});
 +
$("#view-north-america").click(function(event) {
 +
t.column(4).search('north america').draw();
 +
});
 +
});
 +
 +
});
 +
</script>
 +
 +
 +
 
<div id="leftColumn_MainPage">  
 
<div id="leftColumn_MainPage">  
  
Line 45: Line 326:
 
<center><h1>iGEM 2015 Results </h1></center>
 
<center><h1>iGEM 2015 Results </h1></center>
  
 +
<p>Congratulations to all participants in the 2015 International Genetically Engineered Machine competition! Your hard work and achievements are truly worthy of celebration!</p>
  
−
 
+
<h5>View:</h5>
−
<table width= "760" align="center">
+
<ul style="list-style: none;">
−
 
+
<li>
−
<tr>
+
<label><input checked type="radio" name="view-status" id="view-all-statuses"> All Teams</label> &nbsp;&nbsp;&nbsp;
−
<td> Results will be available soon. </td>
+
<label><input type="radio" name="view-status" id="view-winners"> Award Winners</label>
−
</tr>
+
</li>
−
</table>
+
<li>
−
 
+
<label><input checked type="radio" name="view-region" id="view-all-regions"> All Regions</label> &nbsp;&nbsp;&nbsp;
−
</div>
+
<label><input type="radio" name="view-region" id="view-africa"> Africa</label> &nbsp;&nbsp;&nbsp;
−
 
+
<label><input type="radio" name="view-region" id="view-asia"> Asia</label> &nbsp;&nbsp;&nbsp;
 +
<label><input type="radio" name="view-region" id="view-europe"> Europe</label> &nbsp;&nbsp;&nbsp;
 +
<label><input type="radio" name="view-region" id="view-latin-america"> Latin America</label> &nbsp;&nbsp;&nbsp;
 +
<label><input type="radio" name="view-region" id="view-north-america"> North America</label>
 +
</li>
 +
</ul>
 +
<br />
  
  
 +
<TABLE id='table_team' width='760' 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>Medal</TH>
 +
<TH>Award</TH>
 +
</TR>
 +
</THEAD>
 +
<TBODY>
 +
<tr>
 +
<td id="javascript-disabled" colspan="4">Please enable JavaScript in your browser to view results.</td>
 +
</tr>
 +
</TBODY>
 +
</TABLE>
  
  
 +
</div>
  
 
<!-- ~~~~~~~~ MENU ~~~~~~~~ -->
 
<!-- ~~~~~~~~ MENU ~~~~~~~~ -->

Revision as of 03:58, 28 September 2015

iGEM 2015 Results

Congratulations to all participants in the 2015 International Genetically Engineered Machine competition! Your hard work and achievements are truly worthy of celebration!

View:
  •    
  •                    

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