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="reset" class="close" id="add_autogenerated_name_metadata_dismiss_button_1" name="add_autogenerated_name_metadata_dismiss_button" 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_metadata_program" name="autogenerated_name_metadata_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-4 control-label">Breeding Program: </label>
  43                             <div class="col-sm-8">
  44                                 <select class="form-control" id="autogenerated_name_metadata_program" name="autogenerated_name_metadata_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                         <div class="form-group">
  87                             <label class="col-sm-4 control-label">Last Serial Number: </label>
  88                             <div class="col-sm-8">
  89                                 <input class="form-control" id="last_number" name="last_number" type="number" placeholder="For example: value 0. The next name would be BTI_1"/>
  90                             </div>
  91                         </div>
  92                     </form>
  93                 </div>
  94             </div>
  95             <div class="modal-footer">
  96                 <button id="add_autogenerated_name_metadata_dismiss_button_2" name="add_autogenerated_name_metadata_dismiss_button" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  97                 <button type="button" class="btn btn-primary" id="new_autogenerated_name_metadata_submit">Submit</button>
  98             </div>
  99         </div>
 100     </div>
 101 </div>
 102
 103 <div class="modal fade" id="add_autogenerated_name_metadata_message" name="add_autogenerated_name_metadata_message" tabindex="-1" role="dialog" aria-labelledby="addAutogeneratedNameMetadataMessage">
 104     <div class="modal-dialog" role="document">
 105         <div class="modal-content">
 106             <div class="modal-header">
 107                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 108                 <h4 class="modal-title" id="addAutogeneratedNameMetadataMessage">Autogenerated Name Metadata</h4>
 109             </div>
 110             <div class="modal-body">
 111                 <div class="container-fluid">
 112                     <p>
 113                         <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
 114                         Autogenerated name format was stored successfully.
 115                     </p>
 116                 </div>
 117             </div>
 118             <div class="modal-footer">
 119                 <button type="button" class="btn btn-default" name="add_autogenerated_name_format_close_button" id="add_autogenerated_name_format_close_button" data-dismiss="modal">Close</button>
 120             </div>
 121         </div>
 122     </div>
 123 </div>
 124
 125
 126 <script>
 127
 128 jQuery(document).ready(function(){
 129
 130     jQuery("[name='add_autogenerated_name_metadata_link']").click(function(e) {
 131         e.preventDefault();
 132         jQuery("#add_autogenerated_name_metadata_dialog").modal("show");
 133     });
 134
 135     jQuery("#number_of_attributes").change(function() {
 136         number_of_attributes = jQuery('#number_of_attributes').val();
 137         if (number_of_attributes){
 138             name_attributes_form();
 139         }
 140     })
 141
 142     function name_attributes_form () {
 143         let number_of_attributes = parseInt(jQuery('#number_of_attributes').val());
 144
 145         let html = '<table class="table table-bordered" id="name_attributes_table"><thead><tr><th>Attribute Order</th><th>Select Attribute</th></tr></thead><tbody>';
 146         for(let i=0; i<number_of_attributes; i++){
 147             let attribute_order = i+1;
 148             html = html + '<tr><td>' + attribute_order + '</td><td><div name="attribute_selects" id="attribute_select_' +i+ '"></div></td><td><span id="selected_attribute_'+ i +'_string" data-related="'+encodeURI(attribute_order)+'" ></span></td></tr>';
 149         };
 150         html = html + '</tbody></table>';
 151
 152         jQuery('#name_attributes_form_div').html(html);
 153
 154         let attribute_list = jQuery('#name_attributes_table')
 155             .find("div")
 156             .map(function() { return this.id; })
 157             .get();
 158         for(let i=0; i<attribute_list.length; i++){
 159             get_select_box('related_attributes', attribute_list[i], {'name' : 'selected_attribute', 'id' : 'selected_attribute_'+i,  });
 160         };
 161     };
 162
 163     jQuery(document).on('change', "select[name='selected_attribute']", function() {
 164         let div_id = '#' + this.id;
 165         let attribute = jQuery(div_id).val();
 166         if (attribute == 'text') {
 167             attribute_string(div_id, div_id + '_string');
 168         }
 169     });
 170
 171     function attribute_string(div_id, select_id){
 172         let attribute_text = jQuery(div_id).val();
 173         let html = '<td><input class="form-control"  name ="select_id" id="select_id" value="" placeholder="Please enter text string"/></td>';
 174         jQuery(select_id).html(html);
 175
 176     };
 177
 178     jQuery('#new_autogenerated_name_metadata_submit').click(function(e){
 179         e.preventDefault();
 180         let name_attributes = [];
 181
 182         jQuery('select[name="selected_attribute"]').each(function() {
 183             value = this.value;
 184             let text_string;
 185             if (value == 'text') {
 186                 text_string =  jQuery('#select_id').val();
 187                 name_attributes.push({'text':text_string});
 188             } else {
 189                 name_attributes.push(value);
 190             }
 191         });
 192
 193         let breeding_program = jQuery('#autogenerated_name_metadata_program').val();
 194         if (!breeding_program) {
 195             alert("Breeding program is required");
 196             return;
 197         }
 198
 199         let format_name = jQuery('#format_name').val();
 200         if (!format_name) {
 201             alert("Format name is required");
 202             return;
 203         }
 204
 205         let description = jQuery('#autogenerated_name_metadata_description').val();
 206
 207         let name_type = jQuery('#name_type').val();
 208         if (!name_type) {
 209             alert("Name type is required");
 210             return;
 211         }
 212
 213         let last_serial_number = jQuery('#last_number').val();
 214         if (!last_serial_number) {
 215             alert("Last serial number is required");
 216             return;
 217         }
 218
 219         jQuery.ajax({
 220             url: '/ajax/transformation/add_autogenerated_name_metadata',
 221             method: 'POST',
 222             data: {
 223                 'breeding_program': breeding_program,
 224                 'format_name': format_name,
 225                 'description': description,
 226                 'name_type': name_type,
 227                 'last_serial_number': last_serial_number,
 228                 'name_attributes': JSON.stringify(name_attributes),
 229             },
 230             dataType:'json',
 231             beforeSend: function() {
 232                 jQuery("#working_modal").modal("show");
 233             },
 234             success: function(response) {
 235                 jQuery("#working_modal").modal("hide");
 236                 if (response.error) {
 237                     alert(response.error);
 238                 } else {
 239                     jQuery("#add_autogenerated_name_metadata_message").modal("show");
 240                     jQuery('#add_autogenerated_name_metadata_dialog').modal("hide");
 241
 242                 }
 243             },
 244             error: function() {
 245                 jQuery("#working_modal").modal("hide");
 246                 alert('An error occurred storing autogenerated name metadata.');
 247                 jQuery('#add_autogenerated_name_metadata_dialog').modal("hide");
 248             },
 249         });
 250
 251     });
 252
 253     jQuery("[name='add_autogenerated_name_metadata_dismiss_button']").click(function() {
 254         jQuery('#add_autogenerated_name_metadata_dialog').modal('hide');
 255         jQuery('#autogenerated_name_metadata_program').val('');
 256         jQuery('#format_name').val('');
 257         jQuery('#autogenerated_name_metadata_description').val('');
 258         jQuery('#name_type').val('');
 259         jQuery('#last_number').val('');
 260         jQuery('#number_of_attributes').val('');
 261         location.reload()
 262     });
 263
 264     jQuery("#add_autogenerated_name_format_close_button").click(function(){
 265         location.reload();
 266     });
 267
 268 });
 269
 270 </script>