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                                 <li><b>If your transformation project is automatically linked to the tracking tool, please set up a naming format for the autogenerated names of your transformation project before using the tracking tool.</b></li>
 106                             </ul>
 107                             <br/>
 108                         </&>
 109                     </&><!-- End of workflow -->
 110                 </div>
 111             </div>
 112             <div class="modal-footer">
 113                 <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>
 114             </div>
 115         </div>
 116     </div>
 117 </div>
 118
 119 <script>
 120
 121 jQuery(document).ready(function(){
 122
 123     var selectedProgram = jQuery('#transformation_project_program option:selected').text()
 124
 125     filter_options(selectedProgram, 'program', 'transformation_project_location');
 126
 127     jQuery('#transformation_project_program').change(function() {
 128         filter_options(jQuery('#transformation_project_program option:selected').text(), 'program', 'transformation_project_location');
 129     });
 130
 131     jQuery("[name='add_transformation_project_dismiss_button']").click(function() {
 132         jQuery('#create_transformation_project_dialog').modal('hide');
 133         jQuery('#transformation_project_name').val('');
 134         jQuery('#transformation_project_program').val('');
 135         jQuery('#transformation_project_location').val('');
 136         jQuery('#transformation_project_year').val('');
 137         jQuery('#transformation_project_description').val('');
 138     });
 139
 140     jQuery('#create_transformation_project_submit').click(function() {
 141         var transformation_project_name = jQuery("#transformation_project_name").val();
 142         if (!transformation_project_name) {
 143             alert("Project name is required");
 144             return;
 145         }
 146
 147         var selectedProgram = jQuery("#transformation_project_program").val();
 148         if (!selectedProgram) {
 149             alert("Breeding program is required");
 150             return;
 151         }
 152
 153         var transformation_project_location = jQuery("#transformation_project_location").val();
 154         if (!transformation_project_location) {
 155             alert ("Location is required");
 156             return;
 157         }
 158
 159         var year = jQuery("#transformation_project_year_select").val();
 160         if (!year) {
 161             alert ("Year is required");
 162             return;
 163         }
 164
 165         var project_description = jQuery('textarea#transformation_project_description').val();
 166         if (!project_description) {
 167             alert ("Description is required");
 168             return;
 169         }
 170
 171         jQuery.ajax({
 172             url: '/ajax/transformation/add_transformation_project',
 173             dataType: "json",
 174             type: 'POST',
 175             data:{
 176                 'project_name': transformation_project_name,
 177                 'project_program_id': selectedProgram,
 178                 'project_location': transformation_project_location,
 179                 'year': year,
 180                 'project_description': project_description,
 181             },
 182             beforeSend: function() {
 183                 jQuery("#working_modal").modal("show");
 184             },
 185             error: function(response) {
 186                 alert("An error occurred!" + JSON.stringify(response));
 187                 return;
 188             },
 189             parseerror: function(response) {
 190                 alert("A parse error occurred!" + response);
 191                 return;
 192             },
 193             success: function(response) {
 194                 jQuery('#working_modal').modal('hide');
 195                 if (response.error) {
 196                     alert(response.error);
 197                 }
 198                 if (response.success == 1) {
 199                     Workflow.focus("#add_transformation_project_workflow", -1); //Go to success page
 200                     Workflow.check_complete("#add_transformation_project_workflow");
 201                 }
 202             },
 203
 204         });
 205
 206     });
 207
 208 });
 209
 210 </script>