mason/breeders_toolbox/cross_wishlist.mas

   1
   2 <style>
   3 @media (min-width: 768px) {
   4   .modal-xl {
   5     width: 90%;
   6    max-width:1200px;
   7   }
   8 }
   9 </style>
  10
  11 <div class="modal fade" id="create_cross_wishlist_dialog" name="create_cross_wishlist_dialog" tabindex="-1" role="dialog" aria-labelledby="createCrossWishlistDialog">
  12     <div class="modal-dialog modal-xl" role="document">
  13         <div class="modal-content">
  14             <div class="modal-header">
  15                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  16                 <h4 class="modal-title" id="createCrossWishlistDialog">Create Cross Wishlist</h4>
  17             </div>
  18
  19             <div class="modal-body">
  20                 <div class="container-fluid">
  21                     <ul class="nav nav-pills nav-justified" id="cross_wishlist_tab_select">
  22                         <li id="cross_wishlist_list_tab"><a data-toggle="tab" href="#with_lists">Using Lists</a></li>
  23                         <li class="active" id="cross_wishlist_no_list_tab"><a data-toggle="tab" href="#not_with_lists">Not Using Lists</a></li>
  24                     </ul>
  25
  26                     <div class="tab-content">
  27
  28                         <div id="with_lists" class="tab-pane fade">
  29                             <hr>
  30                             <form class="form-horizontal" >
  31                                 <div class="form-group" style="display:none" <!-- location name is coming from the trial they select --> >
  32                                     <label class="col-sm-3 control-label">Location Name (Optional): </label>
  33                                     <div class="col-sm-9" >
  34                                         <div id="cross_wishlist_location_select_list_div">
  35                                         </div>
  36                                     </div>
  37                                 </div>
  38                                 <div class="form-group">
  39                                     <label class="col-sm-3 control-label">Trial Name(s): </label>
  40                                     <div class="col-sm-9" >
  41                                         <div id="cross_wishlist_trial_select_list_div">
  42                                         </div>
  43                                     </div>
  44                                 </div>
  45                                 <div class="form-group">
  46                                     <label class="col-sm-3 control-label">Female Accession List: </label>
  47                                     <div class="col-sm-9" id="female_accession_list_div" name="female_accession_list_div">
  48                                     </div>
  49                                 </div>
  50                                 <div class="form-group">
  51                                     <label class="col-sm-3 control-label">Male Accession List: </label>
  52                                     <div class="col-sm-9" id="male_accession_list_div" name="male_accession_list_div">
  53                                     </div>
  54                                 </div>
  55                             </form>
  56                             <br/>
  57                             <div id="cross_wishlist_cross_grid_div"></div>
  58                         </div>
  59
  60                         <div id="not_with_lists" class="tab-pane fade in active">
  61                             <hr>
  62
  63                             <form class="form-horizontal" >
  64                                 <div class="form-group">
  65                                     <label class="col-sm-3 control-label">Trial Name(s): </label>
  66                                     <div class="col-sm-9" >
  67                                         <div id="cross_wishlist_trial_select_no_list_div">
  68                                         </div>
  69                                     </div>
  70                                 </div>
  71                                 <div class="form-group">
  72                                     <label class="col-sm-3 control-label">Female Accession Name(s):</label>
  73                                     <div class="col-sm-9" >
  74                                         <div id="cross_wishlist_female_accession_select_div">
  75                                             <p>First Select A Trial</p>
  76                                         </div>
  77                                     </div>
  78                                 </div>
  79                                 <div id ="cross_wishlist_male_parent_div">
  80                                 </div>
  81                             </form>
  82                         </div>
  83
  84                     </div>
  85                 </div>
  86             </div>
  87
  88             <div class="modal-footer">
  89                 <button class="btn btn-info" id="show_cross_wishlists_select_submits" name="show_cross_wishlists_select_submits">Available Cross Wishlist(s) for ODK Use</button>
  90                 <button class="btn btn-primary" id="cross_wishlist_submit" name="cross_wishlist_submits">Next</button>
  91                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  92             </div>
  93         </div>
  94     </div>
  95 </div>
  96
  97 <div class="modal fade" id="create_cross_wishlist_select_dialog" name="create_cross_wishlist_select_dialog" tabindex="-1" role="dialog" aria-labelledby="createCrossWishlistSelectDialog">
  98     <div class="modal-dialog modal-xl" role="document">
  99         <div class="modal-content">
 100             <div class="modal-header">
 101                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 102                 <h4 class="modal-title" id="createCrossWishlistSelectDialog">Select Plots for Cross Wishlist</h4>
 103                 <h4>Female Plots are in <span class="bg-primary">Blue</span><!-- and Male Plots are in <span class="bg-success">Green</span>.--></h4>
 104             </div>
 105
 106             <div class="modal-body">
 107                 <div class="container-fluid">
 108                     <div id="cross_wishlist_cross_select_div"></div>
 109                 </div>
 110             </div>
 111
 112             <div class="modal-footer">
 113                 <button class="btn btn-primary" id="cross_wishlist_select_submits" name="cross_wishlist_select_submits">Push Cross Wishlist for ODK Use</button>
 114                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 115             </div>
 116         </div>
 117     </div>
 118 </div>
 119
 120 <div class="modal fade" id="create_cross_wishlist_response_dialog" name="create_cross_wishlist_response_dialog" tabindex="-1" role="dialog" aria-labelledby="createCrossWishlistResponseDialog">
 121     <div class="modal-dialog modal-xl" role="document">
 122         <div class="modal-content">
 123             <div class="modal-header">
 124                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 125                 <h4 class="modal-title" id="createCrossWishlistResponseDialog">Cross Wishlist</h4>
 126             </div>
 127
 128             <div class="modal-body">
 129                 <div class="container-fluid">
 130                     <div id="cross_wishlist_response_div"></div>
 131                 </div>
 132             </div>
 133
 134             <div class="modal-footer">
 135                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 136             </div>
 137         </div>
 138     </div>
 139 </div>
 140
 141 <div class="modal fade" id="show_cross_wishlists_response_dialog" name="show_cross_wishlists_response_dialog" tabindex="-1" role="dialog" aria-labelledby="showCrossWishlistsResponseDialog">
 142     <div class="modal-dialog modal-xl" role="document">
 143         <div class="modal-content">
 144             <div class="modal-header">
 145                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 146                 <h4 class="modal-title" id="showCrossWishlistsResponseDialog">Cross Wishlists Previously Created</h4>
 147             </div>
 148
 149             <div class="modal-body">
 150                 <div class="container-fluid">
 151                     <div id="show_cross_wishlists_response_div"></div>
 152                 </div>
 153             </div>
 154
 155             <div class="modal-footer">
 156                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 157             </div>
 158         </div>
 159     </div>
 160 </div>
 161
 162 <script>
 163
 164 var lo = new CXGN.List();
 165
 166 function draw_cross_grid(female_accessions, male_accessions){
 167     var cross_grid_html = '<h3>Set Cross Priorities: 1 is highest and 10 is lowest</h3><h4>Female Accessions Are in First Column and Male Accessions Are in Header</h4><table class="table table-bordered"><thead><tr><th>Female Accessions</th>';
 168     for(var i=0; i<male_accessions.length; i++){
 169         cross_grid_html = cross_grid_html + '<th>' + male_accessions[i] + '</th>';
 170     }
 171     cross_grid_html = cross_grid_html + '</tr></thead><tbody>';
 172     for(var i=0; i<female_accessions.length; i++){
 173         cross_grid_html = cross_grid_html + '<tr><td>' + female_accessions[i] + '</td>';
 174         for(var j=0; j<male_accessions.length; j++){
 175             cross_grid_html = cross_grid_html + '<td><input type="text" name="cross_wishlist_cross_grid_inputs" class="form-control" data-female="'+female_accessions[i]+'" data-male="'+male_accessions[j]+'"/></td>';
 176         }
 177         cross_grid_html = cross_grid_html + '</tr>';
 178     }
 179     cross_grid_html = cross_grid_html + '</tbody></table>';
 180     jQuery('#cross_wishlist_cross_grid_div').html(cross_grid_html);
 181 }
 182
 183 jQuery(document).ready(function($) {
 184
 185     jQuery('#show_cross_wishlists_select_submits').click(function(){
 186         jQuery('#show_cross_wishlists_response_dialog').modal('show');
 187
 188         jQuery.ajax({
 189             url: '/ajax/cross/list_cross_wishlists',
 190             dataType:'json',
 191             beforeSend: function() {
 192                 jQuery('#working_modal').modal('show');
 193             },
 194             success: function(response) {
 195                 //console.log(response);
 196                 jQuery('#working_modal').modal('hide');
 197                 var html = '';
 198                 if(response.success){
 199                     html += "<table class='table table-bordered table-hover'><thead><tr><th>File</th><th>Created By</th><th>Date</th></tr></thead><tbody>";
 200                     for(var i=0; i<response.files.length; i++){
 201                         html += "<tr><td><a href='/breeders/phenotyping/download/"+response.files[i][0]+"' >"+response.files[i][1]+"</a></td><td><a href='/solpeople/personal-info.pl?sp_person_id="+response.files[i][6]+"' >"+response.files[i][7]+" "+response.files[i][8]+"</a></td><td>"+response.files[i][5]+"</td></tr>";
 202                     }
 203                     html += "</tbody></table>";
 204                 } else {
 205                     html = 'Something went wrong here.'
 206                 }
 207                 jQuery('#show_cross_wishlists_response_div').html(html);
 208             },
 209             error: function(response) {
 210                 jQuery('#working_modal').modal('hide');
 211                 alert("An error occurred getting cross wishlists");
 212             }
 213         });
 214
 215     });
 216
 217 %  if ($c->config->{ona_form_id} ne 'NULL'){
 218     jQuery("#create_cross_wishlist").click(function() {
 219         jQuery("#create_cross_wishlist_dialog").modal("show");
 220         jQuery("#female_accession_list_div").html(lo.listSelect('female_accession_list_div', ["accessions"] ));
 221         jQuery("#male_accession_list_div").html(lo.listSelect('male_accession_list_div', ["accessions"] ));
 222         var female_accessions = lo.getList(jQuery('#female_accession_list_div_list_select').val());
 223         var male_accessions = lo.getList(jQuery('#male_accession_list_div_list_select').val());
 224         draw_cross_grid(female_accessions, male_accessions);
 225     });
 226 %  } else {
 227     jQuery("#create_cross_wishlist").click(function() {
 228         alert('Cross wishlist is not enabled for this database. Please contact us.');
 229     });
 230 %  }
 231
 232     jQuery(document).on('change', '#female_accession_list_div_list_select', function(){
 233         var female_accessions = lo.getList(jQuery('#female_accession_list_div_list_select').val());
 234         var male_accessions = lo.getList(jQuery('#male_accession_list_div_list_select').val());
 235         draw_cross_grid(female_accessions, male_accessions);
 236     });
 237     jQuery(document).on('change', '#male_accession_list_div_list_select', function(){
 238         var female_accessions = lo.getList(jQuery('#female_accession_list_div_list_select').val());
 239         var male_accessions = lo.getList(jQuery('#male_accession_list_div_list_select').val());
 240         draw_cross_grid(female_accessions, male_accessions);
 241     });
 242
 243     get_select_box('locations', 'cross_wishlist_location_select_list_div', { 'name' : 'cross_wishlist_location_id', 'id' : 'cross_wishlist_location_id', 'empty':1 });
 244     get_select_box('trials', 'cross_wishlist_trial_select_no_list_div', { 'name' : 'cross_wishlist_trial_id', 'id' : 'cross_wishlist_trial_id', 'empty':1, 'multiple':0 });
 245
 246     get_select_box('trials', 'cross_wishlist_trial_select_list_div', { 'name' : 'cross_wishlist_list_trial_id', 'id' : 'cross_wishlist_list_trial_id', 'empty':1, 'multiple':0 });
 247
 248     jQuery(document).on('change', "#cross_wishlist_trial_id", function() {
 249         cross_wishlist_change_trials();
 250     });
 251
 252     var trial_id;
 253     var cross_data = [];
 254     var female_male_tracker = {};
 255     var selected_plot_ids = [];
 256     jQuery('.nav-pills a').on('shown.bs.tab', function(event){
 257         cross_data = [];
 258         female_male_tracker = {};
 259         selected_plot_ids = [];
 260         trial_id;
 261     });
 262
 263     var trial_ids_array = [];
 264     function cross_wishlist_change_trials () {
 265         var trial_ids = jQuery('#cross_wishlist_trial_id').val();
 266         var trial_ids_string = '';
 267         if ( jQuery.isArray(trial_ids) ) {
 268             trial_ids_array = trial_ids;
 269             trial_ids_string = trial_ids.join();
 270         } else {
 271             trial_ids_array = [trial_ids];
 272             trial_ids_string = trial_ids;
 273         }
 274         get_select_box('stocks', 'cross_wishlist_female_accession_select_div', { 'name' : 'cross_wishlist_female_accession_ids', 'id' : 'cross_wishlist_female_accession_ids', 'size' : 7, 'stock_type_name':'accession', 'trial_id_list':trial_ids_array, 'names_as_select':1 });
 275     };
 276
 277     jQuery(document).on('change', "#cross_wishlist_female_accession_ids", function() {
 278         cross_wishlist_select_females();
 279     });
 280
 281     function cross_wishlist_select_females () {
 282         var female_accession_ids = jQuery('#cross_wishlist_female_accession_ids').val();
 283         var html = '<table class="table table-bordered" id="cross_wishlist_male_select_table"><thead><tr><th>Female Parent</th><th>Select Male Parent</th><th>Priority ( 1 : highest, 10 : lowest )</th></tr></thead><tbody>';
 284         for(var i=0; i<female_accession_ids.length; i++){
 285             html = html + '<tr><td>' + female_accession_ids[i] + '</td><td><div name="cross_wishlist_male_selects" id="cross_wishlist_male_select_' +i+ '"></div></td><td><span id="cross_wishlist_male_accession_id_'+ i +'_priority" data-related="'+encodeURI(female_accession_ids[i])+'" >Select Male(s)</span></td></tr>';
 286         };
 287         html = html + '</tbody></table>';
 288         jQuery('#cross_wishlist_male_parent_div').html(html);
 289         var cross_wishlist_male_parents = jQuery('#cross_wishlist_male_select_table')
 290              .find("div")
 291              .map(function() { return this.id; })
 292              .get();
 293         //console.log(cross_wishlist_male_parents);
 294         for(var i=0; i<cross_wishlist_male_parents.length; i++){
 295             var female_id = jQuery('#cross_wishlist_male_accession_id_'+ i +'_priority').data('related');
 296             get_select_box('stocks', cross_wishlist_male_parents[i], { 'name' : 'cross_wishlist_male_accession_id_select', 'id' : 'cross_wishlist_male_accession_id_'+i, 'size' : 7, 'stock_type_name':'accession', 'trial_id_list':trial_ids_array, 'names_as_select':1, 'data-related':female_id });
 297         };
 298     };
 299
 300     jQuery(document).on('change', "select[name='cross_wishlist_male_accession_id_select']", function() {
 301         var div_id = '#' + this.id;
 302         var male_ids = jQuery(div_id).val();
 303         if (male_ids.length > 0){
 304             cross_wishlist_change_males(div_id, div_id + '_priority');
 305         }
 306     });
 307
 308     function cross_wishlist_change_males(div_id, select_id){
 309         var female_accession_ids = jQuery('#cross_wishlist_female_accession_ids').val();
 310         var male_ids = jQuery(div_id).val();
 311         var female_id = jQuery(div_id).data('related');
 312         var html = '<table class="table table-bordered" div="' + div_id +'_table"><thead><tr><th>Male Parent</th><th>Priority</th></tr></thead><tbody>';
 313         for (var i=0; i<male_ids.length; i++){
 314             html = html + '<tr><td>' + male_ids[i] + '</td><td><input class="form-control" male_id="' + male_ids[i] + '" female_id="' + female_id + '" name ="cross_wishlist_final_priority" id="cross_wishlist_male_priority_'+ i +'" value="1" placeholder="1"/></td></tr>';
 315         };
 316         html = html + '</tbody></table>';
 317         jQuery(select_id).html(html);
 318     };
 319
 320
 321     jQuery('#cross_wishlist_submit').click(function(e){
 322         e.preventDefault();
 323         var active_tab = jQuery('ul#cross_wishlist_tab_select li.active').attr('id');
 324         //console.log(active_tab);
 325         cross_data = [];
 326         female_male_tracker = {};
 327         selected_plot_ids = [];
 328         trial_id;
 329
 330         var male_accession_limit = 10;
 331         if (active_tab == 'cross_wishlist_no_list_tab'){
 332             jQuery('input[name="cross_wishlist_final_priority"]').each(function() {
 333                 value = this.value;
 334                 var male_id = jQuery(this).attr('male_id');
 335                 var female_id = jQuery(this).attr('female_id');
 336                 cross_data.push({ 'female_id':female_id, 'male_id':male_id, 'priority':value });
 337                 if (female_id in female_male_tracker){
 338                     female_male_tracker[female_id].push(male_id);
 339                 } else {
 340                     female_male_tracker[female_id] = [male_id];
 341                 }
 342             });
 343             trial_id = jQuery('#cross_wishlist_trial_id').val();
 344         }
 345         if (active_tab == 'cross_wishlist_list_tab'){
 346             jQuery('input[name="cross_wishlist_cross_grid_inputs"]').each(function() {
 347                 value = this.value;
 348                 if (value){
 349                     var male_id = jQuery(this).data('male');
 350                     var female_id = jQuery(this).data('female');
 351                     cross_data.push({ 'female_id':female_id, 'male_id':male_id, 'priority':value });
 352                     if (female_id in female_male_tracker){
 353                         female_male_tracker[female_id].push(male_id);
 354                     } else {
 355                         female_male_tracker[female_id] = [male_id];
 356                     }
 357                 }
 358             });
 359             trial_id = jQuery('#cross_wishlist_list_trial_id').val();
 360         }
 361         //console.log(cross_data);
 362         //console.log(trial_id);
 363         //console.log(female_male_tracker);
 364         if(!trial_id){
 365             alert('You must select a trial!');
 366             return;
 367         }
 368         for (f in female_male_tracker){
 369             var male_array = female_male_tracker[f];
 370             if (male_array.length > male_accession_limit){
 371                 alert('A maximum of 10 male accessions can be selected for each cross!');
 372                 return;
 373             }
 374         }
 375         jQuery.ajax({
 376             url: '/ajax/cross/create_cross_wishlist',
 377             method: 'POST',
 378             data: {
 379                 'crosses': JSON.stringify(cross_data),
 380                 'trial_id': trial_id
 381             },
 382             dataType:'json',
 383             beforeSend: function() {
 384                 jQuery('#working_modal').modal('show');
 385             },
 386             success: function(response) {
 387                 //console.log(response);
 388                 jQuery('#working_modal').modal('hide');
 389                 if (response.error){
 390                     alert(response.error);
 391                 } else {
 392                     jQuery('#cross_wishlist_cross_select_div').html(response.data);
 393                     jQuery('#create_cross_wishlist_select_dialog').modal('show');
 394                 }
 395             },
 396             error: function(response) {
 397                 jQuery('#working_modal').modal('hide');
 398                 alert("An error occurred submitting plots for cross wishlist");
 399             }
 400         });
 401     });
 402
 403     jQuery('#cross_wishlist_select_submits').click(function(){
 404         var male_plot_limit = 10;
 405         female_male_tracker = {};
 406         selected_plot_ids = [];
 407
 408         jQuery('input[name="cross_wishlist_plot_select_female_input"]').each(function() {
 409             if (this.checked){
 410                 selected_plot_ids.push({ 'cross_female_accession_name' : jQuery(this).data('female_accession_name'), 'female_plot_id' : jQuery(this).val(), 'male_genotypes_string' : jQuery(this).data('male_genotypes_string') });
 411             }
 412         });
 413         jQuery('input[name="cross_wishlist_plot_select_male_input"]').each(function() {
 414             if (this.checked){
 415                 selected_plot_ids.push({ 'cross_female_accession_name' : jQuery(this).data('female_accession_name'), 'male_plot_id' : jQuery(this).val() });
 416                 if (jQuery(this).data('female_accession_name') in female_male_tracker){
 417                     female_male_tracker[jQuery(this).data('female_accession_name')].push(jQuery(this).val());
 418                 } else {
 419                     female_male_tracker[jQuery(this).data('female_accession_name')] = [jQuery(this).val()];
 420                 }
 421             }
 422         });
 423         //console.log(selected_plot_ids);
 424         //console.log(female_male_tracker);
 425         for (f in female_male_tracker){
 426             var male_array = female_male_tracker[f];
 427             if (male_array.length > male_plot_limit){
 428                 alert('A maximum of 10 male plots can be selected for each cross!');
 429                 return;
 430             }
 431         }
 432
 433         jQuery.ajax({
 434             url: '/ajax/cross/create_cross_wishlist_submit',
 435             method: 'POST',
 436             data: {
 437                 'crosses': JSON.stringify(cross_data),
 438                 'selected_plot_ids': JSON.stringify(selected_plot_ids),
 439                 'trial_id': trial_id
 440             },
 441             dataType:'json',
 442             beforeSend: function() {
 443                 jQuery('#working_modal').modal('show');
 444             },
 445             success: function(response) {
 446                 //console.log(response);
 447                 jQuery('#working_modal').modal('hide');
 448                 if (response.filename) {
 449                     window.location.href = "/download/"+response.filename;
 450                 }
 451                 if (response.error) {
 452                     jQuery('#cross_wishlist_response_div').html(response.error);
 453                 }
 454                 if (response.success){
 455                     jQuery('#cross_wishlist_response_div').html(response.success);
 456                 }
 457                 jQuery('#create_cross_wishlist_response_dialog').modal('show');
 458             },
 459             error: function(response) {
 460                 jQuery('#working_modal').modal('hide');
 461                 alert("An error occurred creating cross wishlist");
 462             }
 463         });
 464     });
 465
 466 });
 467
 468 </script>