mason/breeders_toolbox/manage_trial_phenotyping.mas

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