mason/transformation/add_autogenerated_name_metadata_dialog.mas

   1 <%args>
   2
   3 $programs => undef
   4 $program_id => undef
   5 $program_name => undef
   6
   7 </%args>
   8
   9 <& /util/import_javascript.mas, classes => ['CXGN.TrialTreeFolders'] &>
  10
  11
  12 <div class="modal fade" id="add_autogenerated_name_metadata_dialog" name="add_autogenerated_name_metadata_dialog" tabindex="-1" role="dialog" aria-labelledby="addAutogeneratedNameMetadataDialog">
  13     <div class="modal-dialog modal-xl" role="document">
  14         <div class="modal-content">
  15             <div class="modal-header" style="text-align: center">
  16                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  17                 <h4 class="modal-title" id="addAutogeneratedNameMetadataDialog">Add Autogenerated Name Metadata</h4>
  18             </div>
  19             <div class="modal-body">
  20                 <div class="container-fluid">
  21                     <form class="form-horizontal" id="add_new_autogenerated_name_metadata_form" name="add_new_autogenerated_name_metadata_form">
  22 % if ($programs) {
  23                         <div class="form-group">
  24                             <label class="col-sm-4 control-label">Breeding Program: </label>
  25                             <div class="col-sm-8">
  26                                 <select class="form-control" id="autogenerated_name_program" name="autogenerated_name_program">
  27                                     <option value="">Select Breeding Program</option>
  28 <%perl>
  29 foreach my $program (@$programs) {
  30 if (@$program[3]) {
  31 print "<option selected=\"selected\" value='".@$program[0]."'>".@$program[1]."</option>";
  32 } else {
  33 print "<option value='".@$program[0]."'>".@$program[1]."</option>";
  34 }
  35 }
  36 </%perl>
  37                                 </select>
  38                             </div>
  39                         </div>
  40 % } elsif ($program_name) {
  41                         <div class="form-group">
  42                             <label class="col-sm-3 control-label">Breeding Program: </label>
  43                             <div class="col-sm-9">
  44                                 <select class="form-control" id="autogenerated_name_program" name="autogenerated_name_program">
  45                                     <option value="<%$program_id%>"><%$program_name%></option>
  46                                 </select>
  47                             </div>
  48                         </div>
  49 % }
  50                         <div class="form-group">
  51                             <label class="col-sm-4 control-label">Format Name: </label>
  52                             <div class="col-sm-8">
  53                                 <input class="form-control" id="format_name" name="format_name" type="text" placeholder="For example: Breedbase_transformants"/>
  54                             </div>
  55                         </div>
  56                         <div class="form-group">
  57                             <label class="col-sm-4 control-label">Description: </label>
  58                             <div class="col-sm-8">
  59                                 <input class="form-control" id="autogenerated_name_metadata_description" name="autogenerated_name_metadata_description" type="text" placeholder="Optional" />
  60                             </div>
  61                         </div>
  62                         <div class="form-group">
  63                             <label class="col-sm-4 control-label">Autogenerated Names for: </label>
  64                             <div class="col-sm-8">
  65                                 <select class="form-control" id="name_type">
  66                                     <option value="">Select a type</option>
  67                                     <option value="transformant">transformant (accession)</option>
  68                                 </select>
  69                             </div>
  70                         </div>
  71                         <div class="form-group">
  72                             <label class="col-sm-4 control-label">How many attributes for basename: </label>
  73                             <div class="col-sm-8">
  74                                 <select class="form-control" id="number_of_attributes">
  75                                     <option value="">Select a number</option>
  76                                     <option value="1">1</option>
  77                                     <option value="2">2</option>
  78                                     <option value="3">3</option>
  79                                     <option value="4">4</option>
  80                                     <option value="5">5</option>
  81                                 </select>
  82                             </div>
  83                         </div>
  84                         <div id ="name_attributes_form_div">
  85                         </div>
  86
  87
  88
  89                     </form>
  90
  91                 </div>
  92             </div>
  93             <div class="modal-footer">
  94                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  95                 <button type="button" class="btn btn-primary" id="new_autogenerated_name_metadata_submit_button">Submit</button>
  96             </div>
  97         </div>
  98     </div>
  99 </div>
 100
 101
 102
 103 <script>
 104
 105 jQuery(document).ready(function(){
 106
 107     jQuery("[name='add_autogenerated_name_metadata_link']").click(function(e) {
 108         e.preventDefault();
 109         jQuery("#add_autogenerated_name_metadata_dialog").modal("show");
 110     });
 111
 112     jQuery("#number_of_attributes").change(function() {
 113         number_of_attributes = jQuery('#number_of_attributes').val();
 114         if (number_of_attributes){
 115             name_attributes_form();
 116         }
 117     })
 118
 119     function name_attributes_form () {
 120         let number_of_attributes = parseInt(jQuery('#number_of_attributes').val());
 121         number_of_attributes = number_of_attributes + 1;
 122
 123         let html = '<table class="table table-bordered" id="name_attributes_table"><thead><tr><th>Attribute Order</th><th>Select Attribute</th></tr></thead><tbody>';
 124         for(let i=1; i<number_of_attributes; i++){
 125             html = html + '<tr><td>' + i + '</td><td><div name="attribute_selects" id="attribute_select_' +i+ '"></div></td><td></td></tr>';
 126         };
 127         html = html + '</tbody></table>';
 128
 129         jQuery('#name_attributes_form_div').html(html);
 130
 131         let attribute_list = jQuery('#name_attributes_table')
 132             .find("div")
 133             .map(function() { return this.id; })
 134             .get();
 135         for(let i=0; i<attribute_list.length; i++){
 136             get_select_box('related_attributes', attribute_list[i], { });
 137         };
 138     };
 139
 140 });
 141
 142 </script>