|
|
| 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 ~~~~~~~~ --> |
