Difference between revisions of "Results"
m (Protected "Results": HQ page ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))) |
(Put in the real awards table with css/js) |
||
Line 60: | Line 60: | ||
+ | |||
+ | {{2015Top}} | ||
+ | <html> | ||
+ | <style> #igemLogo, #pageTitle, #grayLine_Clear { display: none;} | ||
+ | |||
+ | #image_leftColumn_MainPage | ||
+ | { | ||
+ | margin-left: -15px; | ||
+ | margin-top: -5px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #rightColumn_MainPage { | ||
+ | background-color: #f2f2f2; | ||
+ | width: 180px; | ||
+ | float: left; | ||
+ | height:3200px; | ||
+ | padding-top:5px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /*Class for creating a block 1/4 of the size of the left_Column in the Main page, */ | ||
+ | .small_block_leftColumn_MainPage{ | ||
+ | margin-bottom: 5px; | ||
+ | float: left; | ||
+ | width:180px; | ||
+ | margin-right:10px; | ||
+ | margin-left:5px; | ||
+ | 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; | ||
+ | |||
+ | //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> | ' + //**Be nice to show the track but i have no API access to that | ||
+ | 'Region: <b>' + data.region + | ||
+ | '</b> | ' + | ||
+ | 'Section: <b>' + data.section.capitalize() + | ||
+ | '</b> | ' + | ||
+ | '<a target="_blank" href="https://igem.org/Team.cgi?id=' + data.team_id + '">Official Team Profile</a>' + | ||
+ | '</p>' + | ||
+ | '<p>'+ | ||
+ | 'View this team\'s ' + | ||
+ | '<a target="_blank" href="http://' + currentYear + '.igem.org/Team:' + data.team_name + '">Wiki</a> | ' + | ||
+ | '<a target="_blank" title="Not yet available" style="color: gray; cursor: pointer;">Poster</a> | ' + | ||
+ | '<a target="_blank" title="Not yet available" style="color: gray; cursor: pointer;">Presentation Slides</a> | ' + | ||
+ | '<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="image_leftColumn_MainPage"><img src="https://static.igem.org/mediawiki/2015/9/9f/Promotionalbanner.jpg"></div> | ||
+ | |||
+ | <div class="clear"></div> | ||
+ | |||
+ | <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> | ||
+ | <ul style="list-style: none;"> | ||
+ | <li> | ||
+ | <label><input checked type="radio" name="view-status" id="view-all-statuses"> All Teams</label> | ||
+ | <label><input type="radio" name="view-status" id="view-winners"> Award Winners</label> | ||
+ | </li> | ||
+ | <li> | ||
+ | <label><input checked type="radio" name="view-region" id="view-all-regions"> All Regions</label> | ||
+ | <label><input type="radio" name="view-region" id="view-africa"> Africa</label> | ||
+ | <label><input type="radio" name="view-region" id="view-asia"> Asia</label> | ||
+ | <label><input type="radio" name="view-region" id="view-europe"> Europe</label> | ||
+ | <label><input type="radio" name="view-region" id="view-latin-america"> Latin America</label> | ||
+ | <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:57, 28 September 2015
iGEM 2015 Results
Results will be available soon. |
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. |