mason/search/cross.mas

   1 <%args>
   2
   3
   4 </%args>
   5
   6 <& /util/import_javascript.mas, classes => [ 'jquery', 'jquery.dataTables' ] &>
   7
   8 <& /page/page_title.mas, title=>'Search Progenies and Crosses' &>
   9
  10 <&| /page/info_section.mas, title => 'Search Progenies'&>
  11
  12 <div class="row" id="pedigree_search_form" >
  13   <div class="col-sm-1">
  14   </div>
  15   <div class="col-sm-12 well">
  16     <div class="row">
  17      <div class="col-sm-11">
  18        <div class="form-horizontal">
  19         <div class="form-group">
  20           <label class="control-label col-sm-4">Female Parent/Population:</label>
  21             <div class="col-sm-8">
  22              <div class="input-group">
  23                <input type="text" class="form-control" id="pedigree_female_parent" placeholder="Enter female parent/population">
  24                 <div class="input-group-btn">
  25                  <button class="btn btn-info" id="search_pedigree_male_parents"><i class="glyphicon glyphicon-search"></i> Male Parent </button>
  26                  <button class="btn btn-primary" id="search_all_progenies"><i class="glyphicon glyphicon-search"></i> All Progenies </button>
  27                 </div>
  28               </div>
  29             </div>
  30           </div>
  31         <div class="form-group">
  32          <label class="control-label col-sm-4">Male Parent/Population:</label>
  33           <div class="col-sm-8" >
  34            <div class="input-group">
  35             <select class="form-control" id="pedigree_male_parent">
  36             <option value="">Choose female parent/population first</option>
  37             </select>
  38            </select>
  39           <div class="input-group-btn">
  40            <button class="btn btn-info" id="search_pedigree"><i class="glyphicon glyphicon-search"></i> Progenies </button>
  41           </div>
  42         </div>
  43        </div>
  44       </div>
  45      </div>
  46     </div>
  47    </div>
  48  <div class="col-sm-1">
  49  </div>
  50  </&>
  51
  52
  53 <&| /page/info_section.mas, title => 'Search Results' , collapsible=>1, collapsed=>0 &>
  54
  55 <link rel="stylesheet" type="text/css" href="/documents/inc/datatables/jquery.dataTables.css">
  56
  57 <table id="pedigree_search_results" width="100%" class="table table-hover table-striped">
  58 <thead>
  59   <tr>
  60     <th>Female Parent</th>
  61     <th>Male Parent</th>
  62     <th>Progeny</th>
  63     <th>Cross Type</th>
  64   </tr>
  65 </thead>
  66
  67 </table>
  68 <br>
  69 <&| /page/info_section.mas, title => 'Copy Progenies to a List', collapsible=>1, collapsed=>1, subtitle=>'<i>Copy the progeny names showing in table to a new or exisiting list</i>'&>
  70 <br>
  71 <div style="text-align:right" id="progenies_to_list_menu"></div>
  72 <div id="progeny_names" style="display: none;"></div>
  73 </&>
  74 </&>
  75
  76 </div>
  77 </div>
  78
  79 <br/>
  80 <br/>
  81
  82
  83 <&| /page/info_section.mas, title => 'Search Crosses'&>
  84
  85 <div class="row" id="cross_search_form" >
  86   <div class="col-sm-1">
  87   </div>
  88   <div class="col-sm-12 well">
  89     <div class="row">
  90      <div class="col-sm-11">
  91        <div class="form-horizontal">
  92         <div class="form-group">
  93           <label class="control-label col-sm-4">Female Parent/Population:</label>
  94             <div class="col-sm-8">
  95              <div class="input-group">
  96                <input type="text" class="form-control" id="female_parent" placeholder="Enter female parent/population">
  97                 <div class="input-group-btn">
  98                  <button class="btn btn-info" id="search_cross_male_parents"><i class="glyphicon glyphicon-search"></i> Male Parent </button>
  99                  <button class="btn btn-primary" id="search_all_crosses"><i class="glyphicon glyphicon-search"></i> All Crosses </button>
 100                 </div>
 101               </div>
 102             </div>
 103           </div>
 104         <div class="form-group">
 105          <label class="control-label col-sm-4">Male Parent/Population:</label>
 106           <div class="col-sm-8" >
 107            <div class="input-group">
 108             <select class="form-control" id="cross_male_parent">
 109             <option value="">Choose female parent/population first</option>
 110             </select>
 111            </select>
 112           <div class="input-group-btn">
 113            <button class="btn btn-info" id="search_crosses"><i class="glyphicon glyphicon-search"></i> Cross Info </button>
 114           </div>
 115         </div>
 116        </div>
 117       </div>
 118      </div>
 119     </div>
 120    </div>
 121   </div>
 122  <div class="col-sm-1">
 123  </&>
 124   </div>
 125
 126
 127 <&| /page/info_section.mas, title => 'Search Results' , collapsible=>1, collapsed=>0 &>
 128
 129 <link rel="stylesheet" type="text/css" href="/documents/inc/datatables/jquery.dataTables.css">
 130
 131 <table id="cross_search_results" width="100%" class="table table-hover table-striped">
 132 <thead>
 133   <tr>
 134     <th>Female Parent</th>
 135     <th>Male Parent</th>
 136     <th>Cross Name</th>
 137     <th>Cross Type</th>
 138   </tr>
 139 </thead>
 140
 141 </table>
 142 <br>
 143 <&| /page/info_section.mas, title => 'Copy crosses to a List', collapsible=>1, collapsed=>1, subtitle=>'<i>Copy the cross names showing in table to a new or exisiting list</i>'&>
 144 <br>
 145 <div style="text-align:right" id="crosses_to_list_menu"></div>
 146 <div id="cross_names" style="display: none;"></div>
 147 </&>
 148 </&>
 149 </div>
 150 </div>
 151
 152
 153 <script>
 154
 155
 156 jQuery(document).ready(function () {
 157
 158     jQuery("#pedigree_female_parent").autocomplete({
 159       source:'/ajax/stock/pedigree_female_parent_autocomplete',
 160     });
 161
 162     $("#search_pedigree_male_parents").click(function(){
 163
 164     jQuery.ajax({
 165       url:'/ajax/search/pedigree_male_parents',
 166       data:{'pedigree_female_parent':$('#pedigree_female_parent').val()},
 167       success: function(response){
 168       console.log(response);
 169       var html = '<select id = "pedigree_male_parent" >';
 170       for (var i=0; i<response.data.length; i++) {
 171       html = html + "<option value='"+response.data[i][0]+ "'>" + response.data[i][0] + "</option>";
 172       }
 173       html = html + "</select>";
 174       console.log(html);
 175
 176       if(i ==''){
 177         alert("No male parent");
 178         return;
 179     }
 180
 181     jQuery('#pedigree_male_parent').html(html);
 182     },
 183     error:function(response){
 184     alert("An error occurred");
 185            }
 186          });
 187        });
 188
 189
 190     $('#search_pedigree').click(function(){
 191
 192     var table = jQuery('#pedigree_search_results').DataTable({
 193     'searching'  : true,
 194     'paging'     : true,
 195     'ordering'   : false,
 196     'destroy'    : true,
 197     'ajax':{'url':'/ajax/search/progenies',
 198       data:{'pedigree_female_parent':$('#pedigree_female_parent').val(),
 199            'pedigree_male_parent':$('#pedigree_male_parent').val()},
 200            }
 201         });
 202
 203     jQuery('#pedigree_search_results').on( 'draw.dt', function (){
 204             var name_links = table.column(2).data();
 205             var names = [];
 206             //console.log("name links are: "+JSON.stringify(name_links));
 207             for (var i = 0; i < name_links.length; i++) { //extract text from anchor tags
 208               names.push(name_links[i].match(/<a [^>]+>([^<]+)<\/a>/)[1]+'\n');
 209             }
 210
 211             jQuery('#progeny_names').html(names);
 212             addToListMenu('progenies_to_list_menu', 'progeny_names',{
 213             listType:'accessions'
 214             });
 215         });
 216      });
 217
 218
 219     $('#search_all_progenies').click(function(){
 220
 221     var table = jQuery('#pedigree_search_results').DataTable({
 222
 223       'searching'  : true,
 224       'paging'     : true,
 225       'ordering'   : false,
 226       'destroy'    : true,
 227       'ajax':{'url':'/ajax/search/all_progenies',
 228         data:{'pedigree_female_parent':$('#pedigree_female_parent').val()},
 229              }
 230           });
 231
 232
 233       jQuery('#pedigree_search_results').on( 'draw.dt', function (){
 234         var name_links = table.column(2).data();
 235               var names = [];
 236               //console.log("name links are: "+JSON.stringify(name_links));
 237               for (var i = 0; i < name_links.length; i++) { //extract text from anchor tags
 238                 names.push(name_links[i].match(/<a [^>]+>([^<]+)<\/a>/)[1]+'\n');
 239               }
 240
 241               jQuery('#progeny_names').html(names);
 242               addToListMenu('progenies_to_list_menu', 'progeny_names',{
 243               listType:'accessions'
 244               });
 245           });
 246        });
 247
 248
 249     jQuery("#female_parent").autocomplete({
 250         source:'/ajax/stock/cross_female_parent_autocomplete',
 251       });
 252
 253     $("#search_cross_male_parents").click(function(){
 254
 255       jQuery.ajax({
 256         url:'/ajax/search/cross_male_parents',
 257         data:{'female_parent':$('#female_parent').val()},
 258         success: function(response){
 259         console.log(response);
 260         var html = '<select id = "cross_male_parent" >';
 261         for (var i=0; i<response.data.length; i++) {
 262         html = html + "<option value='"+response.data[i][0]+ "'>" + response.data[i][0] + "</option>";
 263         }
 264         html = html + "</select>";
 265         console.log(html);
 266
 267         if(i ==''){
 268           alert("No male parent");
 269           return;
 270         }
 271
 272         jQuery('#cross_male_parent').html(html);
 273         },
 274         error:function(response){
 275         alert("An error occurred");
 276                }
 277              });
 278            });
 279
 280
 281     $('#search_crosses').click(function(){
 282
 283       var table = jQuery('#cross_search_results').DataTable({
 284
 285         'searching'  : true,
 286         'paging'     : true,
 287         'ordering'   : false,
 288         'destroy'    : true,
 289         'ajax':{'url':'/ajax/search/cross_info',
 290           data:{'female_parent':$('#female_parent').val(),
 291                'male_parent':$('#cross_male_parent').val()},
 292                }
 293             });
 294
 295
 296       jQuery('#cross_search_results').on( 'draw.dt', function (){
 297               var name_links = table.column(2).data();
 298                     var names = [];
 299                     //console.log("name links are: "+JSON.stringify(name_links));
 300                     for (var i = 0; i < name_links.length; i++) { //extract text from anchor tags
 301                       names.push(name_links[i].match(/<a [^>]+>([^<]+)<\/a>/)[1]+'\n');
 302                     }
 303
 304                     jQuery('#cross_names').html(names);
 305                     addToListMenu('crosses_to_list_menu', 'cross_names',{
 306                     listType:'crosses'
 307                     });
 308                 });
 309          });
 310
 311
 312       $('#search_all_crosses').click(function(){
 313
 314         var table = jQuery('#cross_search_results').DataTable({
 315
 316           'searching'  : true,
 317           'paging'     : true,
 318           'ordering'   : false,
 319           'destroy'    : true,
 320           'ajax':{'url':'/ajax/search/all_crosses',
 321             data:{'female_parent':$('#female_parent').val()},
 322                  }
 323               });
 324
 325
 326         jQuery('#cross_search_results').on( 'draw.dt', function (){
 327              var name_links = table.column(2).data();
 328                    var names = [];
 329                    //console.log("name links are: "+JSON.stringify(name_links));
 330                    for (var i = 0; i < name_links.length; i++) { //extract text from anchor tags
 331                      names.push(name_links[i].match(/<a [^>]+>([^<]+)<\/a>/)[1]+'\n');
 332                    }
 333
 334                    jQuery('#cross_names').html(names);
 335                    addToListMenu('crosses_to_list_menu', 'cross_names',{
 336                    listType:'crosses'
 337                    });
 338             });
 339         });
 340     });
 341
 342
 343 </script>