mason/breeders_toolbox/manage_plot_phenotyping.mas

   1 <%args>
   2 $plot_name
   3 $stock_id
   4 $type_name => "plot"
   5 </%args>
   6
   7
   8 <& /util/import_javascript.mas, classes => [ 'CXGN.BreedersToolbox.HTMLSelect' ] &>
   9
  10 <& /page/page_title.mas, title=>"Manage Plot Phenotyping" &>
  11
  12 <div class="well well-sm">
  13   <div class="row">
  14     <div class="col-md-1 col-lg-1">
  15     </div>
  16     <div class="col-md-10 col-lg-10">
  17
  18       <div class="form-group form-group-sm">
  19         <label class="col-sm-4 control-label for="plot_name">Plot:</label>
  20         <div class="col-sm-8">
  21           <input type="text" value="<%$plot_name%>" class="form-control" id="plot_name" name="plot_name" disabled="1"></input>
  22         </div>
  23       </div>
  24
  25       <br /><br />
  26
  27       <div class="form-group form-group-sm" id="all_traits">
  28         <label class="col-sm-4 control-label" for="select_traits_for_trait_file">Select trait: </label>
  29         <div class="col-sm-8">
  30           <select class="form-control" id="select_traits_for_trait_file"></select>
  31         </div>
  32       </div>
  33
  34       <div class="form-group form-group-sm">
  35       <label class="col-sm-4 control-label">Or Use Trait List: </label>
  36       <div class="col-sm-8">
  37         <input type="checkbox"  id="use_trait_list" value="use_trait_list"/>
  38       </div>
  39     </div>
  40
  41       <br />
  42
  43       <div id="show_trait_textbox" style="display: none">
  44           <div class="form-group form-group-sm" >
  45             <label class="col-sm-4 control-label">Enter a List of Trait Names: </label>
  46             <div class="col-sm-8" id="show_trait_selectbox">
  47
  48             </div>
  49           </div>
  50           <br /><br />
  51       </div>
  52
  53       <div id="show_trait_list_box" style="display: none">
  54       <div class="form-group form-group-sm">
  55         <label class="col-sm-4 control-label">Or Paste From a List: </label>
  56         <div class="col-sm-8">
  57             <div id="list_menu_traits"></div>
  58     <script defer="defer">
  59       jQuery(document).ready(function() {
  60           pasteTraitListMenu('show_trait_selectbox', 'list_menu_traits', 'Paste Trait List');
  61
  62           function pasteTraitListMenu (div_name, menu_div, button_name) {
  63               var list = new CXGN.List();
  64               var html='';
  65               html = list.listSelect(div_name, ['traits'], undefined, undefined, undefined);
  66               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>';
  67               jQuery('#'+menu_div).html(html);
  68           }
  69
  70       });
  71     </script>
  72         </div>
  73       </div>
  74       </div>
  75
  76       <br /><br />
  77
  78       <div class="form-group form-group-sm">
  79         <label class="col-sm-4 control-label">Enter trait value: </label>
  80         <div class="col-sm-3">
  81             <input type="number" class="form-control" id="select_pheno_value" name="select_pheno_value"></input>
  82         </div>
  83       </div>
  84
  85     </div>
  86     <div class="col-md-1 col-lg-1">
  87   </div>
  88 </div>
  89 </div>
  90
  91
  92 <div class="well well-sm">
  93   <div class="row">
  94     <div class="col-md-1 col-lg-1">
  95     </div>
  96     <div class="col-md-10 col-lg-10">
  97
  98 <&| /page/info_section.mas, id=>"stock_trials_section", title => "Trials", collapsible=> 1, collapsed=>1 &>
  99
 100   <& /stock/trials.mas, stock_id => $stock_id &>
 101
 102 </&>
 103
 104       </div>
 105     <div class="col-md-1 col-lg-1">
 106     </div>
 107   </div>
 108 </div>
 109
 110 <div class="well well-sm">
 111   <div class="row">
 112     <div class="col-md-1 col-lg-1">
 113     </div>
 114     <div class="col-md-10 col-lg-10">
 115
 116 <& /stock/download_stock_phenotypes_dialog.mas, stock_id => $stock_id, stock_name => $plot_name, stock_type => $type_name &>
 117 <&| /page/info_section.mas, id=>"stock_traits_section", title => "Traits assayed", collapsible=>1, collapsed=>1, hide_if_empty=>1, subtitle=>"[<a id='stock_download_phenotypes_button'>Download Data</a>]" &>
 118
 119   <& /stock/traits.mas, stock_id => $stock_id &>
 120
 121 </&>
 122
 123       </div>
 124     <div class="col-md-1 col-lg-1">
 125     </div>
 126   </div>
 127 </div>
 128
 129 <script>
 130   jQuery(document).ready(function($) {
 131
 132   var null_trait_value = '';
 133
 134   $("#use_trait_list").click(function () {
 135     if ($('#use_trait_list').is(':checked')) {
 136       $('#all_traits').hide();
 137       jQuery('#select_traits_for_trait_file').empty();
 138       $('#show_trait_textbox').show();
 139       $('#show_trait_list_box').show();
 140       jQuery("#select_pheno_value").val(null_trait_value);
 141     }
 142     else {
 143         $('#all_traits').show();
 144         $('#show_trait_textbox').hide();
 145         $('#show_trait_list_box').hide();
 146         jQuery("#select_pheno_value").val(null_trait_value);
 147         jQuery('#select_pheno_value').empty();
 148         get_select_box('traits', 'select_traits_for_trait_file', {
 149             'name': 'html_select_traits_for_trait_file',
 150             'id': 'html_select_traits_for_trait_file',
 151             'empty': 1
 152         });
 153     }
 154   });
 155
 156     get_select_box('traits', 'select_traits_for_trait_file', {
 157         'name': 'html_select_traits_for_trait_file',
 158         'id': 'html_select_traits_for_trait_file',
 159         'empty': 1
 160     });
 161
 162     jQuery('input[name=select_pheno_value]').change(function() {
 163       var plot_name = jQuery("#plot_name").val();
 164       var trait = jQuery("#select_traits_for_trait_file").val();
 165       var trait_list_option = '';
 166       if ($('#use_trait_list').is(':checked')) {
 167          trait_list_option = jQuery('#use_trait_list').val();
 168       }
 169       if (trait === null){
 170         trait = jQuery("#select_traits_for_trait_file_2").val();
 171       }
 172       var trait_value = jQuery("#select_pheno_value").val();
 173
 174       new jQuery.ajax ( {
 175         type: 'POST',
 176         url : '/ajax/phenotype/plot_phenotype_upload',
 177         dataType: "json",
 178         data: {
 179                 'plot_name' : plot_name,
 180                 'trait' : trait,
 181                 'trait_value' : trait_value,
 182                 'trait_list_option' : trait_list_option,
 183         },
 184
 185         success: function (response) {
 186           if (response.error){
 187             alert("Error Saving Trait Value: "+response.error);
 188           }
 189         },
 190           error: function() {
 191             alert('An error occurred saving trait value');
 192           }
 193
 194       });
 195
 196     });
 197
 198     function Retrieve_pheno(){
 199         var plot_name = jQuery("#plot_name").val();
 200         var trait = '';
 201         trait = jQuery("#select_traits_for_trait_file").val();
 202         if (trait === null){
 203             trait = jQuery("#select_traits_for_trait_file_2").val();
 204         }
 205
 206         var trait_list_option = '';
 207         if ($('#use_trait_list').is(':checked')) {
 208            trait_list_option = jQuery('#use_trait_list').val();
 209         }
 210
 211         new jQuery.ajax ( {
 212           type: 'POST',
 213           url : '/ajax/phenotype/plot_phenotype_retrieve',
 214           dataType: "json",
 215           data: {
 216                   'plot_name' : plot_name,
 217                   'trait' : trait,
 218                   'trait_list_option' : trait_list_option,
 219           },
 220
 221           success: function (response) {
 222             var value = response.trait_value;
 223             var black = {'color': 'red'};
 224
 225             if (response.error){
 226               alert("Error Retrieving Trait Value: "+response.error);
 227             }else{
 228               if (value){
 229                 jQuery("#select_pheno_value").css(black);
 230               }
 231                 jQuery("#select_pheno_value").val(value);
 232             }
 233           },
 234             error: function() {
 235               alert('An error occurred retrieving trait value');
 236             }
 237
 238         });
 239
 240     }
 241
 242     jQuery(document).on('change', '#select_traits_for_trait_file_2', function(){
 243         jQuery("#select_traits_for_trait_file").empty();
 244         Retrieve_pheno();
 245     });
 246
 247     jQuery("#select_traits_for_trait_file").on('change', function() {
 248         jQuery("#select_traits_for_trait_file_2").empty();
 249         Retrieve_pheno();
 250     });
 251
 252   });
 253
 254 </script>