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         <br /><br />
 110         <div class="form-group form-group-sm" id = "new_pheno_input" style="display: none">
 111             <label class="col-sm-4 control-label">Enter trait value: </label>
 112             <div class="col-sm-3">
 113                 <input type="number" class="form-control" id="select_pheno_value" name="select_pheno_value"></input>
 114             </div>
 115             <div class="col-sm-5">
 116               <div id="loading-trial-phenotype" style="display: none"></div>
 117               <div id="success-trial-phenotype" style="display: none">
 118                 <span class="glyphicon glyphicon-ok" style="color: #A9AE00; font-size: 150%"></span>
 119               </div>
 120               <div id="error-trial-phenotype" style="display: none">
 121                 <span class="glyphicon glyphicon-remove-sign" style="color: #AE1000; font-size: 150%"></span>
 122               </div>
 123             </div>
 124         </div>
 125         <div class="form-group form-group-sm" id = "stored_pheno_input" style="display: none">
 126             <label class="col-sm-4 control-label">Stored trait value: </label>
 127             <div class="col-sm-3">
 128                 <input class="form-control" name="stored_pheno_value" id="stored_pheno_value" disabled ></input>
 129             </div>
 130         </div>
 131     </div>
 132     <div class="col-md-1 col-lg-1">
 133     </div>
 134   </div>
 135 </div>
 136
 137 </form>
 138 <!--<div id="main" class="container">
 139     <div id="virtualKeyboard"></div>
 140     <hr>
 141 </div>-->
 142 <&| /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>]" &>
 143
 144     <& /breeders_toolbox/trial/phenotype_summary.mas, trial_id => $trial_id, trial_stock_type => $trial_stock_type &>
 145
 146
 147 </&>
 148
 149 <script>
 150
 151 var trial_info_object = [];
 152
 153   jQuery(document).ready(function($) {
 154
 155       var  trial_id = <% $trial_id %>;
 156
 157       new jQuery.ajax( {
 158            type: 'POST',
 159            url: '/ajax/breeders/trial_phenotyping_info',
 160            dataType: "json",
 161            data: {
 162             'trial_id' : trial_id,
 163            },
 164
 165            success: function(response) {
 166                 trial_info_object = response.trial_info;
 167                if (response.error){
 168                  alert("Error Retrieving Trial Information: "+response.error);
 169                }
 170
 171                var trial_plot_name_html = "<select class='form-control' id='plot_name' >";
 172                var trial_accession_html = "<select class='form-control' id='trial_accession_table' disabled>";
 173                var trial_plot_number_html = "<select class='form-control' id='trial_plot_number_table'>";
 174                var trial_block_number_html = "<select class='form-control' id='trial_block_number_table' disabled>";
 175                var trial_rep_number_html = "<select class='form-control' id='trial_rep_number_table' disabled>";
 176
 177                 for (n=0; n<response.trial_info.length; n++){
 178                 //console.log(response.trial_info[n]);
 179
 180                       trial_plot_name_html = trial_plot_name_html + "<option value=" + response.trial_info[n].plot_name + ">" + response.trial_info[n].plot_name + "</option>";
 181                       trial_accession_html = trial_accession_html + "<option value=" + response.trial_info[n].accession_name + ">" + response.trial_info[n].accession_name + "</option>";
 182                       trial_plot_number_html = trial_plot_number_html + "<option value=" + response.trial_info[n].plot_number + ">" + response.trial_info[n].plot_number + "</option>";
 183                       trial_block_number_html = trial_block_number_html + "<option value=" + response.trial_info[n].block_number + ">" + response.trial_info[n].block_number + "</option>";
 184                       trial_rep_number_html = trial_rep_number_html + "<option value=" + response.trial_info[n].rep_number + ">" + response.trial_info[n].rep_number + "</option>";
 185
 186                   }
 187                   trial_plot_name_html = trial_plot_name_html + "</select>";
 188                   jQuery('#plot_name_1').empty();
 189                   jQuery('#plot_name_1').html(trial_plot_name_html);
 190
 191                   trial_accession_html = trial_accession_html + "</select>";
 192                   jQuery('#accession_name').empty();
 193                   jQuery('#accession_name').html(trial_accession_html);
 194
 195                   trial_plot_number_html = trial_plot_number_html + "</select>";
 196                   jQuery('#plot_no').empty();
 197                   jQuery('#plot_no').html(trial_plot_number_html);
 198
 199                   trial_block_number_html = trial_block_number_html + "</select>";
 200                   jQuery('#block_no').empty();
 201                   jQuery('#block_no').html(trial_block_number_html);
 202
 203                   trial_rep_number_html = trial_rep_number_html + "</select>";
 204                   jQuery('#rep_no').empty();
 205                   jQuery('#rep_no').html(trial_rep_number_html);
 206
 207               },
 208               error: function() {
 209                 alert('An error occurred retrieving trial information');
 210               }
 211
 212       });
 213
 214   var null_trait_value = '';
 215
 216   $("#use_trait_list").click(function () {
 217     if ($('#use_trait_list').is(':checked')) {
 218       $('#all_traits').hide();
 219       jQuery('#select_traits_for_trait_file').empty();
 220       $('#show_trait_textbox').show();
 221       $('#show_trait_list_box').show();
 222       jQuery("#select_pheno_value").val(null_trait_value);
 223     }
 224     else {
 225         $('#all_traits').show();
 226         $('#show_trait_textbox').hide();
 227         $('#show_trait_list_box').hide();
 228         jQuery('#select_traits_for_trait_file_2').empty();
 229         jQuery("#select_pheno_value").val(null_trait_value);
 230         jQuery('#select_pheno_value').empty();
 231         get_select_box('traits', 'select_traits_for_trait_file', {
 232             'name': 'html_select_traits_for_trait_file',
 233             'id': 'html_select_traits_for_trait_file',
 234             'empty': 1
 235         });
 236     }
 237   });
 238
 239     get_select_box('traits', 'select_traits_for_trait_file', {
 240         'name': 'html_select_traits_for_trait_file',
 241         'id': 'html_select_traits_for_trait_file',
 242         'empty': 1
 243     });
 244
 245     var plot_focusin;
 246     var trait_focusin;
 247     var trait_list_option_focusin;
 248     jQuery( "#select_pheno_value" ).focusin(function() {
 249         jQuery("#success-trial-phenotype").hide();
 250         jQuery("#error-trial-phenotype").hide();
 251         jQuery("#loading-trial-phenotype").hide();
 252         plot_focusin = jQuery("#plot_name").val();
 253         trait_focusin = jQuery("#select_traits_for_trait_file").val();
 254         //var trait_list_option = '';
 255         if (jQuery('#use_trait_list').is(':checked')) {
 256            //trait_list_option = jQuery('#use_trait_list').val();
 257            trait_list_option_focusin = jQuery('#use_trait_list').val();
 258         }
 259         if (trait_focusin === null){
 260           trait_focusin = jQuery("#select_traits_for_trait_file_2").val();
 261         }
 262         console.log(plot_focusin +" and "+trait_focusin);
 263     });
 264
 265     jQuery( "#select_pheno_value" ).focusout(function() {
 266     //jQuery('input[name=select_pheno_value]').change(function() {
 267       var trait_value = jQuery("#select_pheno_value").val();
 268       var plot_name = plot_focusin;
 269       var trait = trait_focusin;
 270       var trait_list_option = trait_list_option_focusin;
 271
 272       jQuery("#success-trial-phenotype").hide();
 273       jQuery("#error-trial-phenotype").hide();
 274       jQuery("#loading-trial-phenotype").show();
 275       new jQuery.ajax ( {
 276         type: 'POST',
 277         url : '/ajax/phenotype/plot_phenotype_upload',
 278         dataType: "json",
 279         data: {
 280                 'plot_name' : plot_name,
 281                 'trait' : trait,
 282                 'trait_value' : trait_value,
 283                 'trait_list_option' : trait_list_option,
 284                 'trial_id' : trial_id
 285         },
 286
 287         success: function (response) {
 288           jQuery("#loading-trial-phenotype").hide();
 289           if (response.error){
 290             alert("Error Saving Trait Value: "+response.error);
 291             jQuery("#error-trial-phenotype").show();
 292           }
 293           else {
 294             jQuery("#success-trial-phenotype").show();
 295           }
 296         },
 297           error: function() {
 298             alert('An error occurred saving trait value');
 299             jQuery("#loading-trial-phenotype").hide();
 300             jQuery("#error-trial-phenotype").show();
 301           },
 302
 303       });
 304
 305     });
 306
 307     function Retrieve_pheno(){
 308         var plot_name = jQuery("#plot_name").val();
 309         var trait = '';
 310         trait = jQuery("#select_traits_for_trait_file").val();
 311         if (trait === null){
 312             trait = jQuery("#select_traits_for_trait_file_2").val();
 313         }
 314
 315         var trait_list_option = '';
 316         if ($('#use_trait_list').is(':checked')) {
 317            trait_list_option = jQuery('#use_trait_list').val();
 318         }
 319
 320         new jQuery.ajax ( {
 321             type: 'POST',
 322             url : '/ajax/phenotype/plot_phenotype_retrieve',
 323             dataType: "json",
 324             data: {
 325                 'plot_name' : plot_name,
 326                 'trait' : trait,
 327                 'trait_list_option' : trait_list_option,
 328             },
 329             success: function (response) {
 330                 var value = response.trait_value;
 331                 var red = {'color': 'red'};
 332                 if (response.error){
 333                     alert("Error Retrieving Trait Value: "+response.error);
 334                 } else if (value) {
 335                     jQuery('#new_pheno_input').hide();
 336                     jQuery("#stored_pheno_value").css(red);
 337                     jQuery('#stored_pheno_input').show();
 338                     jQuery("#stored_pheno_value").val(value);
 339                 } else if ((trait || trait_list_option) && !value) {
 340                     jQuery('#stored_pheno_input').hide();
 341                     jQuery("#select_pheno_value").val(null_trait_value);
 342                     jQuery('#select_pheno_value').empty();
 343                     jQuery('#new_pheno_input').show();
 344                 }
 345             },
 346             error: function() {
 347                 alert('An error occurred retrieving trait value');
 348             }
 349         });
 350     }
 351
 352     jQuery(document).on('change', '#select_traits_for_trait_file_2', function(){
 353         jQuery("#select_traits_for_trait_file").empty();
 354         Retrieve_pheno();
 355     });
 356
 357     jQuery("#select_traits_for_trait_file").on('change', function() {
 358         jQuery("#select_traits_for_trait_file_2").empty();
 359         Retrieve_pheno();
 360     });
 361
 362   jQuery(document).on('change', '#plot_name', function(){
 363       var plot_infor = jQuery('#plot_name').val();
 364       for (i=0; i<trial_info_object.length; i++){
 365           if (trial_info_object[i].plot_name == plot_infor){
 366               var plotNo = trial_info_object[i].plot_number;
 367               var accessionName = trial_info_object[i].accession_name;
 368               var blockNo = trial_info_object[i].block_number;
 369               var repNo = trial_info_object[i].rep_number;
 370
 371               jQuery('#trial_accession_table').val(accessionName);
 372               jQuery('#trial_plot_number_table').val(plotNo);
 373               jQuery('#trial_block_number_table').val(blockNo);
 374               jQuery('#trial_rep_number_table').val(repNo);
 375               Retrieve_pheno();
 376           }
 377       }
 378
 379   });
 380
 381   jQuery(document).on('change', '#trial_plot_number_table', function(){
 382       var plot_infor = jQuery('#trial_plot_number_table').val();
 383       for (i=0; i<trial_info_object.length; i++){
 384           if (trial_info_object[i].plot_number == plot_infor){
 385               var accessionName = trial_info_object[i].accession_name;
 386               var plotName = trial_info_object[i].plot_name;
 387               var blockNo = trial_info_object[i].block_number;
 388               var repNo = trial_info_object[i].rep_number;
 389
 390               jQuery('#plot_name').val(plotName);
 391               jQuery('#trial_accession_table').val(accessionName);
 392               jQuery('#trial_block_number_table').val(blockNo);
 393               jQuery('#trial_rep_number_table').val(repNo);
 394               Retrieve_pheno();
 395           }
 396       }
 397
 398   });
 399
 400     var trial_stock_type = "<% $trial_stock_type %>";
 401     var manage_phenotyping_label = '';
 402
 403     if (trial_stock_type == 'family_name') {
 404         manage_phenotyping_label = 'Family Name :';
 405     } else if (trial_stock_type == 'cross') {
 406         manage_phenotyping_label = 'Cross Unique ID :';
 407     } else {
 408         manage_phenotyping_label = 'Accession Name :';
 409     }
 410
 411     jQuery('#manage_phenotyping_stock_type').text(manage_phenotyping_label);
 412
 413 });
 414 </script>
 415
 416 <style>
 417   #loading-trial-phenotype {
 418     color: #A9AE00
 419   }
 420   #loading-trial-phenotype,
 421   #loading-trial-phenotype:after {
 422     box-sizing: border-box;
 423   }
 424   #loading-trial-phenotype {
 425     display: inline-block;
 426     width: 40px;
 427     height: 40px;
 428   }
 429   #loading-trial-phenotype:after {
 430     content: " ";
 431     display: block;
 432     width: 28px;
 433     height: 28px;
 434     margin: 0px;
 435     border-radius: 50%;
 436     border: 3.2px solid currentColor;
 437     border-color: currentColor transparent currentColor transparent;
 438     animation: loading-trial-phenotype 1.2s linear infinite;
 439   }
 440   @keyframes loading-trial-phenotype {
 441     0% {
 442       transform: rotate(0deg);
 443     }
 444     100% {
 445       transform: rotate(360deg);
 446     }
 447   }
 448 </style>