mason/breeders_toolbox/cross/family.mas

   1
   2 <%args>
   3 $family_id
   4 $family_name => ''
   5 $user_id => undef
   6 $identifier_prefix => ''
   7 $family_type
   8 $family_type_string
   9 </%args>
  10
  11 <& /util/import_javascript.mas, classes => ["jquery", "jqueryui", "thickbox", "CXGN.Page.FormattingHelpers", "jquery.cookie", "CXGN.List"] &>
  12
  13 <& /page/page_title.mas, title => "Details for family '$family_name'" &>
  14
  15 <&| /page/info_section.mas, title => "Family information" &>
  16 <div class="panel panel-default">
  17     <div class="panel-body">
  18         <div class="row">
  19             <div class="col-sm-6">`
  20                 <& /page/form.mas,
  21                     object_type=>'family_name',
  22                     object_id=> $family_id,
  23                     form_name=> 'stock_form',
  24                     server_side_script => '/phenome/stock/stock_ajax_form.pl',
  25                     form_div_name=>'stock_details',
  26                     js_object_name=> 'stockForm',
  27                     page_url => "/family/$family_id" ,
  28                     alternate_new_button => '',
  29                     alternate_ghosted_new_button => '',
  30                     alternate_delete_button => '',
  31                     alternate_ghosted_delete_button => ''
  32                 &>
  33             </div>
  34             <div class="col-sm-6">
  35                 <br /><br />
  36                 <& /util/barcode.mas, identifier => "$identifier_prefix"."$family_id", text=> "$identifier_prefix stock $family_id ($family_name)", format=>"stock_qrcode"  &>
  37                 <br /><br />
  38             </div>
  39         </div>
  40     </div>
  41 </div>
  42 </&>
  43
  44 <& /util/import_javascript.mas, classes => ['jquery','jquery.dataTables'] &>
  45 <& /util/import_css.mas, paths => ['/documents/inc/datatables/jquery.dataTables.css'] &>
  46
  47 <&| /page/info_section.mas, title => "Parents: ($family_type_string)", collapsible=>1, collapsed=>0 &>
  48     <div class = "well well-sm">
  49         <div class = "panel panel-default">
  50             <div class = "panel-body">
  51                 <table id = "family_parent_information" class="table table-hover table-striped">
  52                     <thead>
  53                         <tr>
  54 % if ($family_type eq 'same_parents') {
  55                             <th>Female Parent</th>
  56                             <th>Female Stock Type</th>
  57                             <th>Female Ploidy</th>
  58                             <th>Male Parent</th>
  59                             <th>Male Stock Type</th>
  60                             <th>Male Ploidy</th>
  61 % } elsif ($family_type eq 'reciprocal_parents') {
  62                             <th>Parent 1</th>
  63                             <th>Parent 1 Stock Type</th>
  64                             <th>Parent 1 Ploidy</th>
  65                             <th>Parent 2</th>
  66                             <th>Parent 2 Stock Type</th>
  67                             <th>Parent 2 Ploidy</th>
  68 %}
  69                         </tr>
  70                     </thead>
  71                 </table>
  72             </div>
  73         </div>
  74     </div>
  75 </&>
  76
  77 <&| /page/info_section.mas, title => 'Crosses in this family', collapsible=>1, collapsed=>0 &>
  78     <div class = "well well-sm">
  79         <div class = "panel panel-default">
  80             <div class = "panel-body">
  81                 <div style="overflow:scroll">
  82                     <table class="table table-hover table-bordered" id="crosses_in_family_table">
  83                     </table>
  84                 </div>
  85                 <div class="panel panel-default">
  86                     <div class="panel-body">
  87                         <&| /page/info_section.mas, title => 'Add Crosses to a List', collapsible=>1, collapsed=>1, subtitle=>'<i>Adding crosses in this family to a new or exisiting list</i>'&>
  88                             <br>
  89                             <div id="members_to_new_list" style="display:none"></div>
  90                             <div id="members_add_to_list"></div>
  91                         </&>
  92                     </div>
  93                 </div>
  94             </div>
  95         </div>
  96     </div>
  97 </&>
  98
  99 <&| /page/info_section.mas, title => 'Progenies', collapsible=>1, collapsed=>0 &>
 100     <div class = "well well-sm">
 101         <div class = "panel panel-default">
 102             <div class = "panel-body">
 103                 <div style="overflow:scroll">
 104                     <table class="table table-hover table-bordered" id="all_progenies">
 105                     </table>
 106                 </div>
 107                 <div class="panel panel-default">
 108                     <div class="panel-body">
 109                         <&| /page/info_section.mas, title => 'Add progenies to a List', collapsible=>1, collapsed=>1, subtitle=>'<i>Adding progenies of this family to a new or exisiting list</i>'&>
 110                             <br>
 111                             <div id="progenies_to_new_list" style="display:none"></div>
 112                             <div id="progenies_add_to_list"></div>
 113                         </&>
 114                     </div>
 115                 </div>
 116             </div>
 117         </div>
 118     </div>
 119 </&>
 120
 121 <script>
 122
 123 jQuery(document).ready(function(){
 124
 125     var family_id = "<% $family_id %>";
 126
 127     var family_parent_table = jQuery('#family_parent_information').DataTable({
 128         'ajax': '/ajax/family/parents/'+family_id,
 129         'paging' : false,
 130         'searching' : false,
 131         'destroy' : true,
 132     });
 133
 134     var crosses_in_family = jQuery('#crosses_in_family_table').DataTable({
 135         'ajax': '/ajax/family/members/'+family_id,
 136         'destroy': true,
 137         columns: [
 138             { title: "Cross Unique ID", "data": null, "render": function ( data, type, row ) { return "<a href='/cross/"+row.cross_id+"'>"+row.cross_name+"</a>"; } },
 139             { title: "Cross Type", "data": "cross_type" },
 140             { title: "Number of Progenies", "data": "progeny_number" },
 141             { title: "Crossing Experiment", "data": null, "render": function ( data, type, row ) { return "<a href='/breeders/trial/"+row.crossing_experiment_id+"'>"+row.crossing_experiment_name+"</a>"; } },
 142         ],
 143         "fnInitComplete": function(oSettings, json) {
 144             //console.log(json);
 145             if (!isLoggedIn()) {
 146                 jQuery('#members_add_to_list').html("<div class='well well-sm'><h3>Please login to use lists!</h3></div>");
 147             } else {
 148                 var html = "";
 149                 for(var i=0; i<json.data.length; i++){
 150                     html += json.data[i].cross_name+"\n";
 151                 }
 152                 jQuery("#members_to_new_list").html(html);
 153                 addToListMenu("members_add_to_list", "members_to_new_list", {
 154                     selectText: true,
 155                     listType: 'crosses',
 156                 });
 157             }
 158         }
 159     });
 160
 161     var progenies = jQuery('#all_progenies').DataTable({
 162         'ajax': '/ajax/family/all_progenies/'+family_id,
 163         'destroy': true,
 164         columns: [
 165             { title: "Progeny Name", "data": null, "render": function ( data, type, row ) { return "<a href='/stock/"+row.progeny_id+"/view'>"+row.progeny_name+"</a>"; } },
 166             { title: "Cross Unique ID", "data": null, "render": function ( data, type, row ) { return "<a href='/cross/"+row.cross_id+"'>"+row.cross_name+"</a>"; } },
 167         ],
 168         "fnInitComplete": function(oSettings, json) {
 169             //console.log(json);
 170             if (!isLoggedIn()) {
 171                 jQuery('#progenies_add_to_list').html("<div class='well well-sm'><h3>Please login to use lists!</h3></div>");
 172             } else {
 173                 var html = "";
 174                 for(var i=0; i<json.data.length; i++){
 175                     html += json.data[i].progeny_name+"\n";
 176                 }
 177                 jQuery("#progenies_to_new_list").html(html);
 178                 addToListMenu("progenies_add_to_list", "progenies_to_new_list", {
 179                     selectText: true,
 180                     listType: 'accessions',
 181                 });
 182             }
 183         }
 184     });
 185
 186 });
 187
 188 </script>