|
|
| Line 818: |
Line 818: |
| | | | |
| | </div> | | </div> |
| | + | </html> |
| | | | |
| − | | + | {{HQ_jquery}} |
| − | <script>
| + | |
| − | | + | |
| − | | + | |
| − | // PLACE JSON DATA
| + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // Place team's general information
| + | |
| − | | + | |
| − | jQuery.getJSON("http://dev.igem.org/cgi/aj/team_json.cgi?team_name=ETH_Zurich&year=2015" , function( data ) {
| + | |
| − | | + | |
| − | | + | |
| − | //Places all the info in it's respective data-json-name
| + | |
| − | Object.keys(data).forEach(function(key) {
| + | |
| − | | + | |
| − | | + | |
| − | switch( data[key]) {
| + | |
| − | | + | |
| − | case 1:
| + | |
| − | case 0:
| + | |
| − | case "1":
| + | |
| − | case "0":
| + | |
| − | case "Pending":
| + | |
| − | case "Not Submitted":
| + | |
| − | case "NotSubmitted":
| + | |
| − | switch_checkmarks ($('[data-json-name="'+key+'"]'), data[key] );
| + | |
| − | break;
| + | |
| − |
| + | |
| − | default:
| + | |
| − | $('[data-json-name="'+key+'"]').removeClass('loading_info').text(data[key] );
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | | + | |
| − | // handle special cases
| + | |
| − | special_cases (data );
| + | |
| − | | + | |
| − | });
| + | |
| − |
| + | |
| − | finish_setup();
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // in case the information needs to be treated a special way -
| + | |
| − | | + | |
| − | function special_cases (data) {
| + | |
| − | | + | |
| − | // team status
| + | |
| − | switch ( data.status) {
| + | |
| − | | + | |
| − | case "Accepted":
| + | |
| − | switch_checkmarks ( "#registration_completed > .check_list_mark" , 1 );
| + | |
| − | break;
| + | |
| − | | + | |
| − | case "Pending" :
| + | |
| − | switch_checkmarks ( "#registration_completed > .check_list_mark" , 0 );
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | // track preferences
| + | |
| − | | + | |
| − | $('[data-json-name="track_preferences_1"]').removeClass( "loading_info" ).text(data.track_preferences[0]);
| + | |
| − | $('[data-json-name="track_preferences_2"]').removeClass( "loading_info" ).text(data.track_preferences[1]);
| + | |
| − | $('[data-json-name="track_preferences_3"]').removeClass( "loading_info" ).text(data.track_preferences[2]);
| + | |
| − | | + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // If a checkmark is used to display info, assign correct value
| + | |
| − | | + | |
| − | function switch_checkmarks (id_to_switch, value) {
| + | |
| − |
| + | |
| − | switch (value) {
| + | |
| − | case 1:
| + | |
| − | case "1":
| + | |
| − | $( id_to_switch ).html('').removeClass("mark_gray").addClass("mark_green").append(" ✔ ");
| + | |
| − | break;
| + | |
| − | | + | |
| − | case "Pending" :
| + | |
| − | $( id_to_switch ).html('').removeClass("mark_gray").addClass("mark_yellow").append(" ▲ ");
| + | |
| − | break;
| + | |
| − |
| + | |
| − | case 0:
| + | |
| − | case "0":
| + | |
| − | case "Not Submitted":
| + | |
| − | $( id_to_switch ).html('').removeClass("mark_gray").addClass("mark_red").append(" ✘ ");
| + | |
| − | break;
| + | |
| − | | + | |
| − | | + | |
| − | case "Rejected":
| + | |
| − | $( id_to_switch ).html('').removeClass("mark_gray").addClass("mark_rejected").append("ⓧ ");
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // Clean up and make sure information that is missing is not left in loading state
| + | |
| − | | + | |
| − | function finish_setup ( ) {
| + | |
| − | | + | |
| − | //once the information is placed, create borders for the content
| + | |
| − | $('.section_collapse_wrapper').css('border', 'solid 2px #d3d3d3');
| + | |
| − | | + | |
| − | //if any items are missing, remove the "loading..." state
| + | |
| − | if ( $('.loading_info:visible').length =! 0) {
| + | |
| − | $(".loading_info").empty();
| + | |
| − | }
| + | |
| − | | + | |
| − | // any leftover checkmark boxes in gray make "x"
| + | |
| − | $( ".mark_gray" ).each(function() {
| + | |
| − | $(this).removeClass("mark_gray").addClass("mark_red").append(" ✘ ");
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | var str = $('[data-json-name="acceptance_date"]').text();
| + | |
| − | $('[data-json-name="acceptance_date"]').text( str.substring(0, 10) );
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // Team's roster
| + | |
| − | jQuery.getJSON("http://dev.igem.org/aj/roster_json.cgi?team_name=ETH_Zurich&year=2014", function( data ) {
| + | |
| − | | + | |
| − | data.roster.forEach(function(member) {
| + | |
| − | memberRow = "<div class='roster_user_wrap'>";
| + | |
| − | memberRow += "<div class='roster_user_s_account'> <a href=''>" + member.username + "</a></div>";
| + | |
| − | memberRow += "<div class='roster_user_s_name'>" + member.full_name + "</div>";
| + | |
| − | memberRow += "<div class='roster_user_s_mail private_info'>" + member.email + "</div>";
| + | |
| − | memberRow += "<div class='roster_user_s_age private_info'>" + member.age + "</div>";
| + | |
| − | memberRow += "</div>";
| + | |
| − | | + | |
| − | | + | |
| − | switch ( member.role) {
| + | |
| − | case 'Advisor':
| + | |
| − | $('#advisors').append(memberRow);
| + | |
| − | break;
| + | |
| − | | + | |
| − | case 'Student':
| + | |
| − | $('#students').append(memberRow);
| + | |
| − | break;
| + | |
| − | | + | |
| − | case 'Primary Contact':
| + | |
| − | case 'Instructor':
| + | |
| − | $('#instructors').append(memberRow);
| + | |
| − | break;
| + | |
| − | }
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // Team's awards
| + | |
| − | | + | |
| − | jQuery.getJSON("https://igem.org/awards/json_dump.cgi", function( data ) {
| + | |
| − | | + | |
| − | //$('[data-json-name="'medal'"]').removeClass('loading_info').text(data[key] );
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | // COLLAPSE - EXPAND
| + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | | + | |
| − | | + | |
| − | //Collapse - expand individually functionality
| + | |
| − | | + | |
| − | $(".section_title").click(function() {
| + | |
| − | | + | |
| − | if ( $(this).next(' .section_collapse_wrapper:visible').length == 0 ) {
| + | |
| − | $(this).next(".section_collapse_wrapper").show();
| + | |
| − | $(this).find(".section_title_icon").html("▼  "); //▼
| + | |
| − | }
| + | |
| − | else {
| + | |
| − | $(this).next(".section_collapse_wrapper").hide();
| + | |
| − | $(this).find(".section_title_icon").html("▶  "); //▶
| + | |
| − | }
| + | |
| − | | + | |
| − | //switch the main controller to reflect current status
| + | |
| − | if ( $('.section_collapse_wrapper:visible').length == 0) {
| + | |
| − | $(".ti_banner_collapse").html("+");
| + | |
| − | }
| + | |
| − | | + | |
| − | else {
| + | |
| − | $(".ti_banner_collapse").html("-");
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | //Collapse all - expand all functionality
| + | |
| − | | + | |
| − | $(".ti_banner_collapse").click(function() {
| + | |
| − | | + | |
| − | if ( $('.section_collapse_wrapper:visible').length == 0) {
| + | |
| − | $(".section_collapse_wrapper").show();
| + | |
| − | $(".section_title_icon").html("▼  "); // ▼
| + | |
| − | $(".ti_banner_collapse").html("-");
| + | |
| − | }
| + | |
| − | | + | |
| − | else {
| + | |
| − | $(".section_collapse_wrapper").hide();
| + | |
| − | $(".section_title_icon").html("▶  "); // ▶
| + | |
| − | $(".ti_banner_collapse").html("+");
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | // EDIT AND WHY POP UPS
| + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | | + | |
| − | var which_pop_edit ; //STORES WHICH EDIT IS BEING CALLED, has a default assigned
| + | |
| − | var which_pop_why; //STORES WHICH WHY IS BEING CALLED, has a default assigned
| + | |
| − | | + | |
| − | $(document).ready(function(){
| + | |
| − | | + | |
| − | $(".edit_button").click(function() {
| + | |
| − | $(".pop_box").css("border-color", "#f17530");
| + | |
| − | pop_box_handle( "https://2016.igem.org/HQ:Team_Information_Edit" + " " + "#" + which_pop_edit , "edit" );
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | $(".why_button").click(function() {
| + | |
| − | | + | |
| − | $(".pop_box").css("border-color", "#5ba88a");
| + | |
| − | pop_box_handle( "https://2016.igem.org/HQ:Team_Information_Why" + " " + "#" + which_pop_why, "why" );
| + | |
| − | });
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // Place content in the pop box
| + | |
| − | function pop_box_handle (div_to_load, type ) {
| + | |
| − | | + | |
| − | $( "#pop_content" ).load( div_to_load , function() {
| + | |
| − | //load the existing data into the text areas
| + | |
| − | fill_edit_input ();
| + | |
| − | | + | |
| − | var y = $( window ).height();
| + | |
| − | var y2 = $(".pop_box").height();
| + | |
| − | var x = (y -y2)/2;
| + | |
| − | $(".pop_box").css("top", x);
| + | |
| − | | + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | // if it was an edit button, show the save button
| + | |
| − | if( type =="edit") {
| + | |
| − | $(".save_button").show();
| + | |
| − | $(".save_button").click( function () {
| + | |
| − | $(".save_button").html(" saved!");
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | // show the pop box and the page cover
| + | |
| − | $(".pop_box").show();
| + | |
| − | $(".page_cover").show();
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | // if the close button or the page cover are clicked, call the remove function
| + | |
| − | $(".pop_close").click(function() {
| + | |
| − | pop_box_remove();
| + | |
| − | });
| + | |
| − | | + | |
| − | $(".page_cover").click( function () {
| + | |
| − | pop_box_remove();
| + | |
| − | });
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // Remove the pop box function
| + | |
| − | | + | |
| − | function pop_box_remove( ) {
| + | |
| − | $(".pop_box").hide();
| + | |
| − | $(".page_cover").hide();
| + | |
| − | $( "#pop_content" ).empty().html(" <h3> Loading... </h3> ");
| + | |
| − | $(".save_button").empty().hide().html("save");
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | // Fill the edit boxe's input fill
| + | |
| − | | + | |
| − | function fill_edit_input( ) {
| + | |
| − | | + | |
| − | jQuery.getJSON("http://dev.igem.org/cgi/aj/team_json.cgi?team_name=ETH_Zurich&year=2015" , function( data ) {
| + | |
| − | | + | |
| − | //for simple fill in text area fields
| + | |
| − | Object.keys(data).forEach(function(key) {
| + | |
| − | | + | |
| − | $('[data-json-field="'+key+'"]').text(data[key] );
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | // fill the objects with the possible drop down options
| + | |
| − | | + | |
| − | var regionOptions = { "Africa": "Africa", "Asia": "Asia", "Europe": "Europe", "Latin_America" : "Latin America", "North_America" : "North America" };
| + | |
| − | var kindOptions = { "collegiate": "Collegiate", "high_school": "High School ", "community_labs": "Community Labs" };
| + | |
| − | var sectionOptions = { "overgrad": "Overgrad", "undergrad": "Undergrad ", "community_labs": "Community Labs" };
| + | |
| − | var trackOptions = data.possible_tracks;
| + | |
| − | | + | |
| − | | + | |
| − | // fill each select with it's corresponding objects
| + | |
| − | $.each(regionOptions, function(value,key) {
| + | |
| − | $('[data-json-dropdown="region"]').append($("<option></option>").attr("value", value).text(key));
| + | |
| − | });
| + | |
| − | $.each(kindOptions, function(value,key) {
| + | |
| − | $('[data-json-dropdown="kind"]').append($("<option></option>").attr("value", value).text(key));
| + | |
| − | });
| + | |
| − | $.each(sectionOptions, function(value,key) {
| + | |
| − | $('[data-json-dropdown="section"]').append($("<option></option>").attr("value", value).text(key));
| + | |
| − | });
| + | |
| − | $.each(trackOptions, function(value, key) {
| + | |
| − | $('[data-json-dropdown="track_preferences_1"]').append($("<option></option>").attr("value", key).text(key));
| + | |
| − | $('[data-json-dropdown="track_preferences_2"]').append($("<option></option>").attr("value", key).text(key));
| + | |
| − | $('[data-json-dropdown="track_preferences_3"]').append($("<option></option>").attr("value", key).text(key));
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | //define the current selected value in each select
| + | |
| − | $('[data-json-dropdown="region"]').val( data.region);
| + | |
| − | $('[data-json-dropdown="kind"]').val( data.kind );
| + | |
| − | $('[data-json-dropdown="section"]').val( data.section );
| + | |
| − | | + | |
| − | $('[data-json-dropdown="track_preferences_1"]').val(data.track_preferences[0]);
| + | |
| − | $('[data-json-dropdown="track_preferences_2"]').val(data.track_preferences[1]);
| + | |
| − | $('[data-json-dropdown="track_preferences_3"]').val(data.track_preferences[2]);
| + | |
| − | });
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //
| + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | // TESTING DIFFERENT STATES
| + | |
| − | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | var testing_if = false;
| + | |
| − | $("#super_user").click(function() {
| + | |
| − | if (testing_if == false) {
| + | |
| − | testing_if = true;
| + | |
| − | $(".private_info").show();
| + | |
| − | $("#super_user").html ("super user");
| + | |
| − | }
| + | |
| − | // to close
| + | |
| − | else if (testing_if == true) {
| + | |
| − | $(".private_info").hide();
| + | |
| − | $("#super_user").html ("no user");
| + | |
| − | testing_if = false;
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | //default collapse a section
| + | |
| − | // $("#Contact").next(".section_collapse_wrapper").hide( function () {
| + | |
| − | // $("#Contact > .section_title_icon").html("▶  ");
| + | |
| − | // });
| + | |
| − | | + | |
| − | // $("#General").next(".section_collapse_wrapper").hide( function () {
| + | |
| − | // $("#General > .section_title_icon").html("▶  ");
| + | |
| − | // });
| + | |
| − | | + | |
| − | | + | |
| − | // $("#Awards").next(".section_collapse_wrapper").hide( function () {
| + | |
| − | // $("#Awards > .section_title_icon").html("▶  ");
| + | |
| − | // });
| + | |
| − | | + | |
| − | // $("#Project").next(".section_collapse_wrapper").hide( function () {
| + | |
| − | // $("#Project > .section_title_icon").html("▶  ");
| + | |
| − | // });
| + | |
| − | | + | |
| − | | + | |
| − | // $("#Checklist").next(".section_collapse_wrapper").hide( function () {
| + | |
| − | // $("#Checklist > .section_title_icon").html("▶  ");
| + | |
| − | // });
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | </html>
| + | |
