Difference between revisions of "Dev/Team Information"

 
(46 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
{{HQ_Team_Information}}
 
<html>
 
<html>
  
<style>
+
 
/* BUTTON USED FOR DEMO */
+
.hide_info { background-color:#f2f2f2; padding:10px; text-align:center;font-weight:bold;padding-top:5px;cursor:pointer; float:right; z-index:50;}
+
.hide_info:hover { background-color:orange; }
+
</style>
+
  
 
<div class="clear"></div>
 
<div class="clear"></div>
Line 23: Line 20:
  
 
<div class="clear"></div>
 
<div class="clear"></div>
 
<!--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<STYLE>
 
 
 
 
 
.green_check_mark {background-color:green; color:white;}
 
 
/* LAYOUT  CLASSES */
 
 
/* general layout class for team information page */
 
#team_information .layout { float:left;  padding:10px 15px;}
 
 
/* full width of content layout column */
 
#team_information .full_width{ width: 915px; }
 
 
/* half width of content layout column */
 
#team_information .half_width { width: 442.3px; }
 
 
/* third width of content layout column */
 
#team_information .third_width { width: 285px;}
 
 
 
/* GENERAL PAGE WRAPPING/HOLDING CLASSES */
 
 
/* wrapping border for the content of the section, it can be collapse and expanded */
 
#team_information .section_collapse_wrapper { border: 2px solid white; background: white; float:left; width:auto; height:auto; margin-bottom:20px; }
 
 
/*  Section title  ex:General - Checklist - Contact */
 
#team_information .section_title { background: white; color: #5ba88a; float:left; padding:10px; font-size:20px; font-weight: bold; width:98%; }
 
 
/*  Section title hover effect */
 
#team_information .section_title:hover { background: #5ba88a; color: white; cursor:pointer; }
 
 
/*  Section title triangle icon ▼ */
 
#team_information .section_title_icon{ float:left; }
 
 
/*wrapper for the subtitle part ex: schools - team description - team status */
 
#team_information  .subtitle_wrapper { border-bottom: 1px solid #d3d3d3;  clear:both;  float:left;  height:30px;  width:100%; }
 
 
/*name holder*/
 
#team_information  .subtitle_name{  float:left; width:78%; }
 
 
/*info holder */
 
#team_information .subtitle_info { float:right;  width:35px; height: 30px; padding-top:5px; }
 
 
/*edit holder */
 
#team_information .subtitle_edit {  float:right; width:55px; height: 25px; padding-top: 3px; }
 
 
/* holds the data inside each section */
 
#team_information .subsection_content { padding: 15px; }
 
 
/* items inside content part of each section */
 
#team_information .subsection_item { float:left;padding-right:15px; font-weight:bold; }
 
 
 
 
/* STYLE AND CONTAINERS FOR THE BANNER PART  */
 
 
#team_information #ti_banner_wrapper {  margin: 0px -15px 20px -15px;  font-weight:bold;  text-align:center; }
 
 
#team_information .ti_banner_collapse { float: left; width: 59px; background-color: #f2f2f2; color: #5ba88a; padding: 12px 5px; font-size: 40px; height: 25px; }
 
 
#team_information .ti_banner_collapse:hover { background-color: #5ba88a; color:white; cursor:pointer; }
 
 
#team_information .ti_banner_team_name { float: left; font-size: 22px; width: 871px; text-align: left; padding: 15px 20px; background: #f2f2f2; }
 
 
 
.approved_green {  padding-left: 10px;  font-weight:bold; font-size:16px; padding-top:4px; margin-left:25px; color: green; }
 
.approved_red {  padding-left: 10px;  font-weight:bold; font-size:16px; padding-top:4px; margin-left:25px; color: red; }
 
 
 
/*#team_s_primary_pi  .subsection_item, #team_s_secondary_pi  .subsection_item,  #team_s_instructor  .subsection_item,  #team_s_student_leader  .subsection_item
 
{font-size:30px; font-weight:normal;}  */
 
 
.item_wrapper {clear:both;padding-top:10px; }
 
 
 
.check_item_wrap { margin-bottom:5px; height:25px;}
 
 
.check_list_mark {width:25.5px; background-color: #e9232f; float:left;text-align:center; height:21px; padding-top:4px;}
 
 
.mark_gray {background-color:#d3d3d3; color:#d3d3d3;}
 
 
.mark_red {background-color:#e9232f; color:white;}
 
 
.mark_green {background-color:green; color:white;}
 
 
.mark_yellow {background-color: #f6af45; color:white;}
 
 
.mark_rejected {background-color:#9d142a; color:#d3d3d3;}
 
 
 
.check_list_text { padding-left:40px; padding-top:4px; height:20.5px; border-bottom:1px solid #f2f2f2; background-color:white; color:#5ba88a; cursor:pointer; font-weight:bold; }
 
 
.check_list_text:hover { color:white; border-bottom:1px solid #f27631; background-color:#f27631; }
 
 
 
 
/* ROSTER ITEM WRAPPING */
 
 
.roster_user_wrap { height:25px; margin-bottom:5px;  clear:both; text-align:left; border-bottom:1px solid #f2f2f2; }
 
 
.roster_user_s_name { float:left; width:240px; height: 22px; padding-top: 3px; }
 
 
.roster_user_s_account { float:left;width:168px;height: 22px; padding-top: 3px; }
 
 
.roster_user_s_mail { float:left; width:238px;  height: 22px; padding-top: 3px; }
 
 
.roster_user_s_age { float:left;width:70px; height: 22px; padding-top: 3px;  text-align:center; }
 
 
.roster_user_s_gender { float:left; width:88px; height: 22px; padding-top: 3px;  text-align:center; }
 
 
 
 
 
/* SPECIAL CLASSES  */
 
 
/* private info that is hidden by default */
 
#team_information  .private_info {display:none;}
 
 
#team_information  .loading_info {color: #d3d3d3; }
 
 
 
/* link styling */
 
#team_information a { color:#f27631; font-weight:bold; text-decoration:none; }
 
 
/* link styling  hover */
 
#team_information a:hover { color: #fbceac; }
 
 
/* list styling */
 
#team_information ul{ padding: 0px; }
 
 
 
 
 
 
/* edit button */
 
#team_information .edit_button {  background-color:white; color:#f27631; font-weight:bold; text-align:center;  border: 2px solid #f27631; border-radius: 3px;
 
cursor:pointer; padding-right:2px;}
 
 
/* edit button hover */
 
#team_information .edit_button:hover { background-color:#f27631;  color: white;}
 
 
 
/* why button */
 
#team_information .why_button { border: 2px solid #5ba88a; color: #5ba88a; background-color: white; font-weight: bold; text-align: center; border-radius: 50%; float: none;
 
margin-right: 5px;margin-left: 5px; padding-left: 6px; padding-top: 2px; padding-right: 6px; padding-bottom: 2px; cursor: pointer; }
 
 
/* why button hover */
 
#team_information .why_button:hover { background-color: #5ba88a;  color:white; }
 
 
 
 
/* Holds the content being loaded */
 
 
.pop_box { display:none; left: 250px; top: 250px; background-color: white; padding: 15px; width: 500px; position: fixed;
 
border: 3px solid #f17530; border-radius: 3px; z-index: 100; }
 
 
 
.page_cover { display:none; z-index: 90; top: 0px; left: -20px; width: 100vw; height: 101%; float: left; position: absolute; opacity: 0.5; background-color: #b2b2b2; }
 
 
 
 
 
/*For the pop why class,creates the close button X */
 
.pop_close { font-size: 25px; border: 3px solid #e9232f;; padding: 5px; padding-top: 0px;  background-color: #e9232f; padding-right: 10px; color: white; border-radius: 5px;
 
cursor: pointer; font-weight: bold; width: 10px; height: 18px; float: right; }
 
   
 
 
.pop_close:hover { background-color: white;  color: #e9232f; }
 
 
#sideMenu {padding-bottom:0px; z-index: 0;}
 
 
 
 
 
 
/* save button */
 
#team_information .save_button { display:none; background:#177bf8; color: white; font-weight: bold; text-align: center; border: 3px solid #177bf8; width: 45px;
 
float: right; border-radius: 3px; cursor: pointer; padding-right: 2px; margin-top: 15px;}
 
 
/* save button hover */
 
#team_information .save_button:hover { background-color: white; color:#177bf8;  }
 
 
 
 
 
textarea.styled {
 
width: 100%;
 
border: 2px solid #d3d3d3;
 
    padding: 6px 5px 5px 5px;
 
height: 30px;
 
font-family: Arial;
 
font-size: 11px;
 
}
 
 
 
select.styled2 {
 
width: 100%;
 
border: 2px solid #d3d3d3;
 
padding: 5px;
 
height: 30px;
 
font-family: Arial;
 
font-size: 11px;
 
}
 
 
 
 
.pop_box  .edit_subtitle_wrapper {  border-bottom: 1px solid #d3d3d3; clear: both; float: left; height: 30px; width: 90%; margin-top: -30px}
 
 
.input_field_wrapper { float:left; height:45px;clear:both; width:100%; }
 
 
.input_field_name { float:left; font-weight:bold; width:10%; }
 
.track_name {  width: 25%; }
 
 
.input_field_data_container { float:left; padding-top: 1px; padding-left: 20px; width:86%; }
 
.track_data_container {  width: 71%; }
 
 
 
</STYLE>
 
<!--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
  
  
Line 991: Line 765:
 
<div class="clear"></div>
 
<div class="clear"></div>
  
<div class="subsection_content" id="medals">
+
<div class="subsection_content loading_info" data-json-name="medals">
gold
+
 
</div>
 
</div>
  
Line 1,044: 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;
+
}
+
 
+
});
+
 
+
});
+
 
+
 
+
 
+
 
+
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 
+
 
+
 
+
 
+
 
+
// 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("&#9660; &#160;"); //▼
+
}
+
else {
+
$(this).next(".section_collapse_wrapper").hide();
+
$(this).find(".section_title_icon").html("&#9654; &#160;");  //▶
+
}
+
 
+
//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("&#9660; &#160;");  // ▼
+
$(".ti_banner_collapse").html("-");
+
}
+
 
+
else {
+
$(".section_collapse_wrapper").hide();
+
$(".section_title_icon").html("&#9654; &#160;");  // ▶
+
$(".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"  ).delay(800).fadeIn(400);
+
});
+
 
+
 
+
 
+
$(".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 ();
+
});
+
 
+
// show the pop box and the page cover
+
$(".pop_box").show();
+
$(".page_cover").show();
+
 
+
// if it was an edit button, show the save button
+
if( type =="edit") {
+
$(".save_button").delay(800).fadeIn(400);
+
$(".save_button").click( function () {
+
$(".save_button").html(" saved!");
+
});
+
}
+
 
+
// 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] );
+
});
+
 
+
 
+
//for drop down select options
+
 
+
//var newOptions = {"Option 1": "value1", "Option 2": "value2",  "Option 3": "value3" };
+
var newOptions = { "Option 1": "Africa", "Option 2": "Asia", "Option 3": "Europe", "Option 4" : "Latin America", "Option 5" : "North America" };
+
 
+
var $el = $("#selectId");
+
$el.empty();
+
$.each(newOptions, function(value,key) {
+
  $el.append($("<option></option>").attr("value", value).text(key));
+
});
+
 
+
 
+
 
+
});
+
 
+
}
+
 
+
 
+
 
+
 
+
 
+
 
+
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
 
+
 
+
 
+
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("▶ &#160;");
+
// });
+
 
+
// $("#General").next(".section_collapse_wrapper").hide( function () {
+
// $("#General > .section_title_icon").html("▶ &#160;");
+
// });
+
 
+
 
+
// $("#Awards").next(".section_collapse_wrapper").hide( function () {
+
// $("#Awards > .section_title_icon").html("▶ &#160;");
+
// });
+
 
+
// $("#Project").next(".section_collapse_wrapper").hide( function () {
+
// $("#Project > .section_title_icon").html("▶ &#160;");
+
// });
+
 
+
 
+
// $("#Checklist").next(".section_collapse_wrapper").hide( function () {
+
// $("#Checklist > .section_title_icon").html("▶ &#160;");
+
// });
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
</script>
+
 
+
 
+
 
+
 
+
</html>
+

Latest revision as of 17:07, 26 January 2016

no user
team user
pi
team registration
×

Loading ...

save
-
Loading...
▼  
General

Schools

✎ edit
?
loading...

Team Description

✎ edit
?

Team Status

✎ edit
?
Application Date:
loading...
Registration Fee
Resource Description
Shipping Information
Acceptance Date:
loading...
loading...
Country:
loading...
Region:
loading...
Kind:
loading...
Section:
loading...
▼  
Contact

Primary PI

✎ edit
?
Name
loading...
Phone
loading...
Email
loading...

Secondary PI

✎ edit
?
Name
loading...
Phone
loading...
Email
loading...

Instructor

✎ edit
?
Name
loading...
Phone
loading...
Email
loading...

Student Leader

✎ edit
?
Name
loading...
Phone
loading...
Email
loading...
▼  
Check List
Final Roster
Registration Completed
Check In Form
Project Description
Title and Abstract
Track Selection
About our Lab Form
About our Project Form
Part Samples Submission
Parts Added
Judging Form
Final Safety Form
Wiki Freeze
▼  
Project

Track

✎ edit
?
Assigned Track

loading...
Track Preferences

  1. loading...
  2. loading...
  3. loading...

Part Numbers

?

BBa_K1769000 to BBa_K1769999

Title and Abstract

✎ edit
?

Title

The purpose of this project is to introduce the Sf9 cell line (Fall armyworm ovary, Spodoptera frugiperda cells) to synthetic biology and the iGEM Competition, by developing a tool kit of several biobricks for their use in this new chassis. We will use the Sf9 cells as an alternative for the production of proteins with high complexity and post-traductional modifications, because of their flexibility, cultivation time and minor cost compared with other expression systems.

▼  
Roster

Instructors

?

Students

?

Advisors

?
▼  
Awards

Medals

Awards

Awards

Nominations

Nominations