mason/transformation/add_transformation_project_dialog.mas

   1 <%args>
   2 $programs
   3 $locations
   4 </%args>
   5
   6
   7 <& /util/import_javascript.mas, classes => ['CXGN.TrialTreeFolders'] &>
   8
   9 <div class="modal fade" id="create_transformation_project_dialog" name="create_transformation_project_dialog" tabindex="-1" role="dialog" aria-labelledby="createTransformationProjectDialog">
  10     <div class="modal-dialog modal-xl" role="document">
  11         <div class="modal-content ui-front">
  12             <div class="modal-header">
  13                 <button type="reset" class="close" id="add_transformation_project_dismiss_button_1" name="add_transformation_project_dismiss_button" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  14                 <center><h4 class="modal-title" id="createTransformationProjectDialog">Add New Transformation Project</h4></center>
  15             </div>
  16             <div class="modal-body">
  17                 <div class="container-fluid">
  18
  19                     <&| /util/workflow.mas, id=> "add_transformation_project_workflow" &>
  20                         <&| /util/workflow.mas:step, title=> "Intro" &>
  21                             <& /page/page_title.mas, title=>"What are Transformation Projects?" &>
  22
  23                             <p>You can use Transformation Projects to manage and organize your transformation experiemnts</p>
  24                             <ul>
  25                                 <li>Each transformation experiment is linked to a globally unique transformation ID.</li>
  26                                 <li>Transformation ID captures information about plant material and vector construct used in that experiment.</li>
  27                                 <li>You can use transformation details page to automatically add new transformant (accession) names to database by simply indicating the number of transformants generated.</li>
  28                                 <li>Each auto-generated transformant (accession) name has transformation ID as basename and an incremental serial number. </li>
  29                             </ul>
  30                             <hr>
  31                             <center>
  32                                 <button id="next_step_add_new_intro" class="btn btn-primary" onclick="Workflow.complete(this);">Go to Next Step</button>
  33                             </center>
  34                         </&>
  35
  36                         <form class="form-horizontal" role="form" name="create_transformation_project_form" id="create_transformation_project_form">
  37                             <&| /util/workflow.mas:step, title=> "Add a transformation project" &>
  38                                 <& /page/page_title.mas, title=>"Enter basic information about the transformation project" &>
  39                                     <br/>
  40                                     <div class="form-group">
  41                                         <label class="col-sm-3 control-lable">Project Name: </label>
  42                                         <div class="col-sm-9">
  43                                             <input class="form-control" type="text" id="transformation_project_name" name="transformation_project_name"  />
  44                                         </div>
  45                                     </div><br/>
  46                                     <div class="form-group">
  47                                         <label class="col-sm-3 control-label">Breeding Program: </label>
  48                                         <div class="col-sm-9">
  49                                             <select class="form-control" id="transformation_project_program" name="transformation_project_program">
  50                                                 <option value="">Select Breeding Program</option>
  51 <%perl>
  52 foreach my $program (@$programs) {
  53     if (@$program[3]) {
  54         print "<option selected=\"selected\" value='".@$program[0]."'>".@$program[1]."</option>";
  55     } else {
  56         print "<option value='".@$program[0]."'>".@$program[1]."</option>";
  57     }
  58 }
  59 </%perl>
  60                                             </select>
  61                                         </div>
  62                                     </div><br/>
  63                                     <div class="form-group">
  64                                         <label class="col-sm-3 control-label">Location: </label>
  65                                         <div class="col-sm-9">
  66                                             <select class="form-control" id="transformation_project_location" name="transformation_project_location">
  67                                                 <option value="">Select Location</option>
  68 <%perl>
  69     foreach my $location_hashref (@$locations) {
  70         my $properties = $location_hashref->{'properties'};
  71         my $program = $properties->{'Program'};
  72         my $name = $properties->{'Name'};
  73         print "<option value=\"$name\" data-program=\"$program\">".$name."</option>";
  74     }
  75 </%perl>
  76                                             </select>
  77                                         </div>
  78                                     </div><br/>
  79                                     <div class="form-group">
  80                                         <label class="col-sm-3 control-label">Year:</label>
  81                                         <div class="col-sm-9">
  82                                             <div id="transformation_project_year" name="transformation_project_year" ></div>
  83                                         </div>
  84                                     </div><br/>
  85                                     <div class="form-group">
  86                                         <label class="col-sm-3 control-label">Description:</label>
  87                                         <div class="col-sm-9">
  88                                             <textarea class="form-control" id="transformation_project_description" name="transformation_project_description" ></textarea>
  89                                         </div>
  90                                     </div>
  91                                 <br/>
  92                                 <br/>
  93                                 <br/>
  94                                 <center>
  95                                     <button type="button" class="btn btn-primary" onclick="Workflow.complete(this, false);" name="create_transformation_project_submit" id="create_transformation_project_submit">Submit</button>
  96                                 </center>
  97                             </&>
  98                         </form>
  99
 100                         <&| /util/workflow.mas:complete, title=> "Complete" &>
 101                             <& /page/page_title.mas, title=>"Finished! Your transformation project is now in the database" &>
 102                             <ul>
 103                                 <li>Please click on 'Refresh' button to view your newly created project on the manage page.</li>
 104                                 <li>You can use your transformation project page to create transformation IDs.</li>
 105                             </ul>
 106                             <br/>
 107                         </&>
 108                     </&><!-- End of workflow -->
 109                 </div>
 110             </div>
 111             <div class="modal-footer">
 112                 <button id="add_transformation_project_dismiss_button_2" name="add_transformation_project_dismiss_button" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 113             </div>
 114         </div>
 115     </div>
 116 </div>
 117
 118 <script>
 119
 120 jQuery(document).ready(function(){
 121
 122     var selectedProgram = jQuery('#transformation_project_program option:selected').text()
 123
 124     filter_options(selectedProgram, 'program', 'transformation_project_location');
 125
 126     jQuery('#transformation_project_program').change(function() {
 127         filter_options(jQuery('#transformation_project_program option:selected').text(), 'program', 'transformation_project_location');
 128     });
 129
 130     jQuery("[name='add_transformation_project_dismiss_button']").click(function() {
 131         jQuery('#create_transformation_project_dialog').modal('hide');
 132         jQuery('#transformation_project_name').val('');
 133         jQuery('#transformation_project_program').val('');
 134         jQuery('#transformation_project_location').val('');
 135         jQuery('#transformation_project_year').val('');
 136         jQuery('#transformation_project_description').val('');
 137     });
 138
 139     jQuery('#create_transformation_project_submit').click(function() {
 140         var transformation_project_name = jQuery("#transformation_project_name").val();
 141         if (!transformation_project_name) {
 142             alert("Project name is required");
 143             return;
 144         }
 145
 146         var selectedProgram = jQuery("#transformation_project_program").val();
 147         if (!selectedProgram) {
 148             alert("Breeding program is required");
 149             return;
 150         }
 151
 152         var transformation_project_location = jQuery("#transformation_project_location").val();
 153         if (!transformation_project_location) {
 154             alert ("Location is required");
 155             return;
 156         }
 157
 158         var year = jQuery("#transformation_project_year_select").val();
 159         if (!year) {
 160             alert ("Year is required");
 161             return;
 162         }
 163
 164         var project_description = jQuery('textarea#transformation_project_description').val();
 165         if (!project_description) {
 166             alert ("Description is required");
 167             return;
 168         }
 169
 170         jQuery.ajax({
 171             url: '/ajax/transformation/add_transformation_project',
 172             dataType: "json",
 173             type: 'POST',
 174             data:{
 175                 'project_name': transformation_project_name,
 176                 'project_program_id': selectedProgram,
 177                 'project_location': transformation_project_location,
 178                 'year': year,
 179                 'project_description': project_description,
 180             },
 181             beforeSend: function() {
 182                 jQuery("#working_modal").modal("show");
 183             },
 184             error: function(response) {
 185                 alert("An error occurred!" + JSON.stringify(response));
 186                 return;
 187             },
 188             parseerror: function(response) {
 189                 alert("A parse error occurred!" + response);
 190                 return;
 191             },
 192             success: function(response) {
 193                 jQuery('#working_modal').modal('hide');
 194                 if (response.error) {
 195                     alert(response.error);
 196                 }
 197                 if (response.success == 1) {
 198                     Workflow.focus("#add_transformation_project_workflow", -1); //Go to success page
 199                     Workflow.check_complete("#add_transformation_project_workflow");
 200                 }
 201             },
 202
 203         });
 204
 205     });
 206
 207 });
 208
 209 </script>