mason/breeders_toolbox/manage_trial_phenotyping.mas

   1 <%args>
   2 $trial_id
   3 $trial_name
   4 $trial_stock_type => undef
   5 </%args>
   6
   7 <& /page/page_title.mas, title=>"Manage Phenotyping for $trial_name" &>
   8 <& /breeders_toolbox/trial/download_phenotypes_dialog.mas, trial_ids => $trial_id &>
   9
  10 <div class="well well-sm">
  11   <div class="row">
  12     <div class="col-md-1 col-lg-1">
  13     </div>
  14     <div class="col-md-10 col-lg-10">
  15
  16         <form class="form-horizontal" role="form" action="/barcode/direct_trial_phenotyping">
  17             <div class="form-group form-group-sm">
  18                 <label class="col-sm-4 control-label">Plot Name: </label>
  19                 <div class="col-sm-8" id="plot_name_1">
  20
  21                 </div>
  22             </div>
  23             <div class="form-group form-group-sm">
  24                 <label id = "manage_phenotyping_stock_type" class="col-sm-4 control-label"></label>
  25                 <div class="col-sm-8" id="accession_name">
  26
  27                 </div>
  28             </div>
  29             <div class="form-group form-group-sm">
  30                 <label class="col-sm-4 control-label">Plot No: </label>
  31                 <div class="col-sm-8" id="plot_no">
  32
  33                 </div>
  34             </div>
  35             <div class="form-group form-group-sm">
  36                 <label class="col-sm-4 control-label">Block No: </label>
  37                 <div class="col-sm-8" id="block_no">
  38
  39                 </div>
  40             </div>
  41             <div class="form-group form-group-sm">
  42                 <label class="col-sm-4 control-label">Rep No: </label>
  43                 <div class="col-sm-8" id="rep_no">
  44
  45                 </div>
  46             </div>
  47
  48     </div>
  49   <div class="col-md-1 col-lg-1">
  50   </div>
  51   </div>
  52 </div>
  53
  54
  55 <div class="well well-sm">
  56   <div class="row">
  57     <div class="col-md-1 col-lg-1">
  58     </div>
  59     <div class="col-md-10 col-lg-10">
  60
  61         <div class="form-group form-group-sm" id="all_traits">
  62           <label class="col-sm-4 control-label" for="select_traits_for_trait_file">Select trait: </label>
  63           <div class="col-sm-8">
  64             <select class="form-control" id="select_traits_for_trait_file"></select>
  65           </div>
  66         </div>
  67
  68         <div class="form-group form-group-sm">
  69           <label class="col-sm-4 control-label">Or Use Trait List: </label>
  70             <div class="col-sm-8">
  71               <input type="checkbox"  id="use_trait_list" value="use_trait_list"/>
  72           </div>
  73         </div>
  74
  75         <br />
  76
  77         <div id="show_trait_textbox" style="display: none">
  78           <div class="form-group form-group-sm" >
  79               <label class="col-sm-4 control-label">Enter a List of Trait Names: </label>
  80               <div class="col-sm-8" id="show_trait_selectbox">
  81
  82               </div>
  83           </div>
  84           <br /><br />
  85         </div>
  86
  87         <div id="show_trait_list_box" style="display: none">
  88             <div class="form-group form-group-sm">
  89               <label class="col-sm-4 control-label">Or Paste From a List: </label>
  90               <div class="col-sm-8">
  91                   <div id="list_menu_traits"></div>
  92                   <script defer="defer">
  93                     jQuery(document).ready(function() {
  94                         pasteTraitListMenu('show_trait_selectbox', 'list_menu_traits', 'Paste Trait List');
  95
  96                         function pasteTraitListMenu (div_name, menu_div, button_name) {
  97                             var list = new CXGN.List();
  98                             var html='';
  99                             html = list.listSelect(div_name, ['traits'], undefined, undefined, undefined);
 100                             html = html + '<button class="btn btn-info btn-sm" type="button" id="paste_button_id" value="'+button_name+'" onclick="javascript:pasteTraitList(\''+div_name+'\')" >'+button_name+'</button>';
 101                             jQuery('#'+menu_div).html(html);
 102                         }
 103
 104                     });
 105                   </script>
 106               </div>
 107             </div>
 108         </div>
 109
 110         <br /><br />
 111
 112         <div class="form-group form-group-sm">
 113           <label class="col-sm-4 control-label">Enter trait value: </label>
 114           <div class="col-sm-3">
 115               <input type="number" class="form-control" id="select_pheno_value" name="select_pheno_value"></input>
 116           </div>
 117         </div>
 118
 119     </div>
 120     <div class="col-md-1 col-lg-1">
 121     </div>
 122   </div>
 123 </div>
 124
 125 </form>
 126 <!--<div id="main" class="container">
 127     <div id="virtualKeyboard"></div>
 128     <hr>
 129 </div>-->
 130 <&| /page/info_section.mas, id=> "trial_detail_traits_assayed", title => "Traits assayed", collapsible=>1, collapsed=>1, hide_if_empty=>1, subtitle=>"[<a id='trial_download_phenotypes_button'>Download Trial Data</a>]" &>
 131
 132     <& /breeders_toolbox/trial/phenotype_summary.mas, trial_id => $trial_id, trial_stock_type => $trial_stock_type &>
 133
 134
 135 </&>
 136
 137 <script>
 138
 139 var trial_info_object = [];
 140
 141   jQuery(document).ready(function($) {
 142
 143       var  trial_id = <% $trial_id %>;
 144
 145       new jQuery.ajax( {
 146            type: 'POST',
 147            url: '/ajax/breeders/trial_phenotyping_info',
 148            dataType: "json",
 149            data: {
 150             'trial_id' : trial_id,
 151            },
 152
 153            success: function(response) {
 154                 trial_info_object = response.trial_info;
 155                if (response.error){
 156                  alert("Error Retrieving Trial Information: "+response.error);
 157                }
 158
 159                var trial_plot_name_html = "<select class='form-control' id='plot_name' >";
 160                var trial_accession_html = "<select class='form-control' id='trial_accession_table' disabled>";
 161                var trial_plot_number_html = "<select class='form-control' id='trial_plot_number_table'>";
 162                var trial_block_number_html = "<select class='form-control' id='trial_block_number_table' disabled>";
 163                var trial_rep_number_html = "<select class='form-control' id='trial_rep_number_table' disabled>";
 164
 165                 for (n=0; n<response.trial_info.length; n++){
 166                 //console.log(response.trial_info[n]);
 167
 168                       trial_plot_name_html = trial_plot_name_html + "<option value=" + response.trial_info[n].plot_name + ">" + response.trial_info[n].plot_name + "</option>";
 169                       trial_accession_html = trial_accession_html + "<option value=" + response.trial_info[n].accession_name + ">" + response.trial_info[n].accession_name + "</option>";
 170                       trial_plot_number_html = trial_plot_number_html + "<option value=" + response.trial_info[n].plot_number + ">" + response.trial_info[n].plot_number + "</option>";
 171                       trial_block_number_html = trial_block_number_html + "<option value=" + response.trial_info[n].block_number + ">" + response.trial_info[n].block_number + "</option>";
 172                       trial_rep_number_html = trial_rep_number_html + "<option value=" + response.trial_info[n].rep_number + ">" + response.trial_info[n].rep_number + "</option>";
 173
 174                   }
 175                   trial_plot_name_html = trial_plot_name_html + "</select>";
 176                   jQuery('#plot_name_1').empty();
 177                   jQuery('#plot_name_1').html(trial_plot_name_html);
 178
 179                   trial_accession_html = trial_accession_html + "</select>";
 180                   jQuery('#accession_name').empty();
 181                   jQuery('#accession_name').html(trial_accession_html);
 182
 183                   trial_plot_number_html = trial_plot_number_html + "</select>";
 184                   jQuery('#plot_no').empty();
 185                   jQuery('#plot_no').html(trial_plot_number_html);
 186
 187                   trial_block_number_html = trial_block_number_html + "</select>";
 188                   jQuery('#block_no').empty();
 189                   jQuery('#block_no').html(trial_block_number_html);
 190
 191                   trial_rep_number_html = trial_rep_number_html + "</select>";
 192                   jQuery('#rep_no').empty();
 193                   jQuery('#rep_no').html(trial_rep_number_html);
 194
 195               },
 196               error: function() {
 197                 alert('An error occurred retrieving trial information');
 198               }
 199
 200       });
 201
 202   var null_trait_value = '';
 203
 204   $("#use_trait_list").click(function () {
 205     if ($('#use_trait_list').is(':checked')) {
 206       $('#all_traits').hide();
 207       jQuery('#select_traits_for_trait_file').empty();
 208       $('#show_trait_textbox').show();
 209       $('#show_trait_list_box').show();
 210       jQuery("#select_pheno_value").val(null_trait_value);
 211     }
 212     else {
 213         $('#all_traits').show();
 214         $('#show_trait_textbox').hide();
 215         $('#show_trait_list_box').hide();
 216         jQuery('#select_traits_for_trait_file_2').empty();
 217         jQuery("#select_pheno_value").val(null_trait_value);
 218         jQuery('#select_pheno_value').empty();
 219         get_select_box('traits', 'select_traits_for_trait_file', {
 220             'name': 'html_select_traits_for_trait_file',
 221             'id': 'html_select_traits_for_trait_file',
 222             'empty': 1
 223         });
 224     }
 225   });
 226
 227     get_select_box('traits', 'select_traits_for_trait_file', {
 228         'name': 'html_select_traits_for_trait_file',
 229         'id': 'html_select_traits_for_trait_file',
 230         'empty': 1
 231     });
 232
 233     var plot_focusin;
 234     var trait_focusin;
 235     var trait_list_option_focusin;
 236     jQuery( "#select_pheno_value" ).focusin(function() {
 237         plot_focusin = jQuery("#plot_name").val();
 238         trait_focusin = jQuery("#select_traits_for_trait_file").val();
 239         //var trait_list_option = '';
 240         if (jQuery('#use_trait_list').is(':checked')) {
 241            //trait_list_option = jQuery('#use_trait_list').val();
 242            trait_list_option_focusin = jQuery('#use_trait_list').val();
 243         }
 244         if (trait_focusin === null){
 245           trait_focusin = jQuery("#select_traits_for_trait_file_2").val();
 246         }
 247         console.log(plot_focusin +" and "+trait_focusin);
 248     });
 249
 250     jQuery( "#select_pheno_value" ).focusout(function() {
 251     //jQuery('input[name=select_pheno_value]').change(function() {
 252       var trait_value = jQuery("#select_pheno_value").val();
 253       var plot_name = plot_focusin;
 254       var trait = trait_focusin;
 255       var trait_list_option = trait_list_option_focusin;
 256
 257       new jQuery.ajax ( {
 258         type: 'POST',
 259         url : '/ajax/phenotype/plot_phenotype_upload',
 260         dataType: "json",
 261         data: {
 262                 'plot_name' : plot_name,
 263                 'trait' : trait,
 264                 'trait_value' : trait_value,
 265                 'trait_list_option' : trait_list_option,
 266         },
 267
 268         success: function (response) {
 269           if (response.error){
 270             alert("Error Saving Trait Value: "+response.error);
 271           }
 272         },
 273           error: function() {
 274             alert('An error occurred saving trait value');
 275           }
 276
 277       });
 278
 279     });
 280
 281     function Retrieve_pheno(){
 282         var plot_name = jQuery("#plot_name").val();
 283         var trait = '';
 284         trait = jQuery("#select_traits_for_trait_file").val();
 285         if (trait === null){
 286             trait = jQuery("#select_traits_for_trait_file_2").val();
 287         }
 288
 289         var trait_list_option = '';
 290         if ($('#use_trait_list').is(':checked')) {
 291            trait_list_option = jQuery('#use_trait_list').val();
 292         }
 293
 294         new jQuery.ajax ( {
 295           type: 'POST',
 296           url : '/ajax/phenotype/plot_phenotype_retrieve',
 297           dataType: "json",
 298           data: {
 299                   'plot_name' : plot_name,
 300                   'trait' : trait,
 301                   'trait_list_option' : trait_list_option,
 302           },
 303
 304           success: function (response) {
 305             var value = response.trait_value;
 306             var black = {'color': 'red'};
 307
 308             if (response.error){
 309               alert("Error Retrieving Trait Value: "+response.error);
 310             }else{
 311               if (value){
 312                 jQuery("#select_pheno_value").css(black);
 313               }
 314                 jQuery("#select_pheno_value").val(value);
 315             }
 316           },
 317             error: function() {
 318               alert('An error occurred retrieving trait value');
 319             }
 320
 321         });
 322
 323     }
 324
 325     jQuery(document).on('change', '#select_traits_for_trait_file_2', function(){
 326         jQuery("#select_traits_for_trait_file").empty();
 327         Retrieve_pheno();
 328     });
 329
 330     jQuery("#select_traits_for_trait_file").on('change', function() {
 331         jQuery("#select_traits_for_trait_file_2").empty();
 332         Retrieve_pheno();
 333     });
 334
 335   jQuery(document).on('change', '#plot_name', function(){
 336       var plot_infor = jQuery('#plot_name').val();
 337       for (i=0; i<trial_info_object.length; i++){
 338           if (trial_info_object[i].plot_name == plot_infor){
 339               var plotNo = trial_info_object[i].plot_number;
 340               var accessionName = trial_info_object[i].accession_name;
 341               var blockNo = trial_info_object[i].block_number;
 342               var repNo = trial_info_object[i].rep_number;
 343
 344               jQuery('#trial_accession_table').val(accessionName);
 345               jQuery('#trial_plot_number_table').val(plotNo);
 346               jQuery('#trial_block_number_table').val(blockNo);
 347               jQuery('#trial_rep_number_table').val(repNo);
 348               Retrieve_pheno();
 349           }
 350       }
 351
 352   });
 353
 354   jQuery(document).on('change', '#trial_plot_number_table', function(){
 355       var plot_infor = jQuery('#trial_plot_number_table').val();
 356       for (i=0; i<trial_info_object.length; i++){
 357           if (trial_info_object[i].plot_number == plot_infor){
 358               var accessionName = trial_info_object[i].accession_name;
 359               var plotName = trial_info_object[i].plot_name;
 360               var blockNo = trial_info_object[i].block_number;
 361               var repNo = trial_info_object[i].rep_number;
 362
 363               jQuery('#plot_name').val(plotName);
 364               jQuery('#trial_accession_table').val(accessionName);
 365               jQuery('#trial_block_number_table').val(blockNo);
 366               jQuery('#trial_rep_number_table').val(repNo);
 367               Retrieve_pheno();
 368           }
 369       }
 370
 371   });
 372
 373     var trial_stock_type = "<% $trial_stock_type %>";
 374     var manage_phenotyping_label = '';
 375
 376     if (trial_stock_type == 'family_name') {
 377         manage_phenotyping_label = 'Family Name :';
 378     } else if (trial_stock_type == 'cross') {
 379         manage_phenotyping_label = 'Cross Unique ID :';
 380     } else {
 381         manage_phenotyping_label = 'Accession Name :';
 382     }
 383
 384     jQuery('#manage_phenotyping_stock_type').text(manage_phenotyping_label);
 385
 386 });
 387 </script>