|
|
| 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> | ' + //**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="https://2015.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) {
| |
| − | 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 281: |
Line 53: |
| | </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='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>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> |
