mason/breeders_toolbox/cross/upload_crosses_dialogs.mas

   1 <%args>
   2 $trial_id => undef
   3 $trial_name => undef
   4 </%args>
   5
   6 % my $cross_additional_info_string = $c->config->{cross_additional_info};
   7 % my @cross_additional_info = split ',',$cross_additional_info_string;
   8 % my $additional_info;
   9
  10 <div class="modal fade" id="upload_crosses_dialog" name="upload_crosses_dialog" tabindex="-1" role="dialog" aria-labelledby="uploadCrossesDialog">
  11     <div class="modal-dialog modal-xl" role="document">
  12         <div class="modal-content">
  13             <div class="modal-header">
  14                 <button type="reset" class="close" id="upload_crosses_dismiss_button_2" name="upload_crosses_dismiss_button" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  15                 <h4 class="modal-title" id="uploadCrossesDialog">Upload Crosses</h4>
  16             </div>
  17             <div class="modal-body">
  18                 <div class="container-fluid">
  19
  20                     <&| /util/workflow.mas, id=> "crosses_upload_workflow" &>
  21                         <&| /util/workflow.mas:step, title=> "Intro" &>
  22                             <& /page/page_title.mas, title=>"Introduction" &>
  23                             <ul>
  24                                 <li>Crosses can be of different types (biparental, self, open, backcross, sib, polycross, bulk, bulk_open, bulk_self, doubled_haploid, or dihaploid_induction)</li>
  25                                     <ul class="a">
  26                                         <li>cross type descriptions:</li>
  27                                         <ul class="b">
  28                                             <li><b>biparental:</b> An individual plant pollinated by another individual plant.</li>
  29                                             <li><b>self:</b> A self pollinated individual plant.</li>
  30                                             <li><b>open:</b> An individual plant pollinated by a group of plants or open pollinated (pollen may be from a group with known or unknown members).</li>
  31                                             <li><b>backcross:</b> An individual plant pollinated by one of its parents. Cross Unique ID can be used as one of the parents.</li>
  32                                             <li><b>sib:</b> Mating between individuals that have at least one parent in common. Generally between two individuals within the same plot.</li>
  33                                             <li><b>polycross:</b> Mating between individual female parent from a population and the corresponding male population.</li>
  34                                             <li><b>bulk:</b> A group of plants (usually a related family) pollinated by an individual plant (between a female population and a male accession).</li>
  35                                             <li><b>bulk_open:</b> A group of plants (usually a related family) that are pollinated by another group of plants or open pollinated (between a female population and a male population or unknown male parent).</li>
  36                                             <li><b>bulk_self:</b> A group of plants (usually a related family) that are self pollinated (each individual selfed, not combined pollen).</li>
  37                                             <li><b>doubled_haploid:</b> Plants derived from doubling the chromosome number of haploid tissue.</li>
  38                                             <li><b>dihaploid_induction</b>: Plants derived from reducing the chromosome set from tetraploid to diploid.</li>
  39                                         </ul>
  40                                     </ul>
  41                                 </li>
  42                                 <li>An individual cross can be linked to a female plot or plant, as well as a male plot or plant.</li>
  43                                 <li>A cross can have a number of properties associated to it, such as number of flowers, pollination date, etc.</li>
  44                                 <li>A cross can produce seed, which goes into a seedlot.</li>
  45                                 <li>A cross can ultimately produce progeny, which then become named accessions in the database.</li>
  46                             </ul>
  47
  48                             <br/><br/>
  49                             <center>
  50                                 <button id="next_step_intro_button" class="btn btn-primary" onclick="Workflow.complete(this);">Go to Next Step</button>
  51                             </center>
  52                         </&>
  53
  54                         <&| /util/workflow.mas:step, title=> "Crossing experiment" &>
  55                             <& /page/page_title.mas, title=>"Select a crossing experiment for your crosses" &>
  56                             <center><label style="color:DarkOliveGreen" class="col-sm-12 control-label">If you are uploading an Intercross file and using auto-generated cross unique IDs, please use manage Intercross section</label></center>
  57                             <br>
  58                             <br>
  59                             <div id="manage_page_section_1" style="display:none">
  60                                 <p>Crossing experiments are for grouping crosses together. The grouping is most often done for crosses derived from the same field trial, the same year, or for crosses that have the same breeding objective.</p>
  61                                 <center>
  62                                     <button class="btn btn-info" name="create_crossingtrial_link">If you need to create a new crossing experiment, click here</button><br/><br/>
  63                                     <button id="next_step_crossing_trial_button" class="btn btn-primary" onclick="Workflow.complete(this);">If you already have a crossing experiment, go to Next Step</button>
  64                                 </center>
  65                             </div>
  66
  67                             <div id="crossing_experiment_page_section_1" style="display:none">
  68                                 <center>
  69                                     <div class="form-group">
  70                                         <label class="col-sm-5 control-label">You are uploading crosses for crossing experiment: </label>
  71                                         <div class="col-sm-6" >
  72                                             <input class="form-control" name="experiment_name_1" id="experiment_name_1" disabled value="<% $trial_name %>">
  73                                         </div>
  74                                     </div>
  75                                     <br/><br/><br/><br/>
  76                                     <button class="btn btn-primary" onclick="Workflow.complete(this);">Go to Next Step</button>
  77                                 </center>
  78                             </div>
  79                         </&>
  80                         <&| /util/workflow.mas:step, title=> "Upload your crosses" &>
  81                             <& /page/page_title.mas, title=>"Enter basic information about the crosses and upload your file" &>
  82                             <br/>
  83                             <form class="form-horizontal" role="form" method="post" enctype="multipart/form-data" encoding="multipart/form-data" id="upload_crosses_form" name="upload_crosses_form">
  84                                 <div id="manage_page_section_2" style="display:none">
  85                                     <div class="form-group">
  86                                         <label class="col-sm-3 control-label">Breeding Program: </label>
  87                                         <div class="col-sm-9" >
  88                                             <div id="upload_crosses_breeding_program_select_div">
  89                                             </div>
  90                                         </div>
  91                                     </div><br/>
  92                                     <div id="manage_page_crossing_experiment" style="display:none">
  93                                         <div class="form-group">
  94                                             <label class="col-sm-3 control-label">Crossing Experiment: </label>
  95                                             <div class="col-sm-9">
  96                                                 <div id="upload_crosses_crossing_experiment_select_div" name="upload_crosses_crossing_experiment_select_div" >
  97                                                 </div>
  98                                             </div>
  99                                         </div>
 100                                     </div>
 101                                 </div>
 102                                 <div id="crossing_experiment_page_section_2" style="display:none">
 103                                     <div class="form-group">
 104                                         <label class="col-sm-3 control-label">Crossing Experiment: </label>
 105                                         <div class="col-sm-9" >
 106                                             <input class="form-control" name="experiment_name" id="experiment_name" disabled value="<% $trial_name %>">
 107                                             <input name="experiment_id" id="experiment_id" type="hidden" value="<% $trial_id %>">
 108                                         </div>
 109                                     </div>
 110                                 </div>
 111                                 <div class="well well-sm">
 112                                     <div class="row">
 113                                         <div class="col-sm-4">
 114                                             <&| /page/explanation.mas, title=>'Template information' &>
 115                                                 <p>
 116                                                     <b>File format information</b>
 117                                                     <br>
 118                                                     <a id="upload_crosses_spreadsheet_format_info">Spreadsheet format</a>
 119                                                 </p>
 120                                             </&>
 121                                         </div>
 122                                         <div class="col-sm-8">
 123                                             <br/>
 124                                             <div class="panel panel-default">
 125                                                 <div class="panel-body">
 126                                                     <div class="form-group">
 127                                                         <label class="col-sm-5 control-label">Upload File: </label>
 128                                                         <div class="col-sm-7">
 129                                                             <input type="file" name="upload_crosses_file" id="upload_crosses_file" encoding="multipart/form-data" />
 130                                                         </div>
 131                                                     </div>
 132                                                 </div>
 133                                             </div>
 134                                         </div>
 135                                     </div>
 136                                 </div>
 137
 138                                 <!--
 139                                 <hr>
 140                                 <h3>Additional options:</h3>
 141
 142                                 <p>Progeny naming: <i>If generating progeny, use cross name and:</i></p>
 143                                 <div class="form-group">
 144                                     <label class="col-sm-2 control-label">Prefix: </label>
 145                                     <div class="col-sm-10">
 146                                         <input class="form-control" id="upload_prefix" name="upload_prefix" value="P" />
 147                                     </div>
 148                                 </div>
 149                                 <div class="form-group">
 150                                     <label class="col-sm-2 control-label">Suffix: </label>
 151                                     <div class="col-sm-10">
 152                                         <input class="form-control" id="upload_suffix" name="upload_suffix" />
 153                                     </div>
 154                                 </div>
 155                                 -->
 156                             </form>
 157
 158                             <& /help/file_upload_type.mas, type => "Crosses", optional_column => 0 &>
 159
 160                             <div id="submit_button_section">
 161                                 <center>
 162                                     <button type="button" onclick="Workflow.complete(this, false);" class="btn btn-primary" name="upload_crosses_submit" id="upload_crosses_submit">Upload File</button>
 163                                 </center>
 164                             </div>
 165
 166                         </&>
 167                         <&| /util/workflow.mas:complete, title=> "Complete" &>
 168                             <& /page/page_title.mas, title=>"Finished! Your crosses are now in the database" &>
 169                             <p>
 170                                 <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
 171                                 The crosses file was uploaded successfully
 172                             </p>
 173
 174                             <ul>
 175                                 <li>You may want to proceed to the cross detail page(s) for the cross(es) you just created.</li>
 176                                 <li>You can print barcodes for the crosses.</li>
 177                                 <li>You can add crossing information as it becomes available (e.g. number of seeds, progeny, etc).</li>
 178                             </ul>
 179                             <br/>
 180                             <center>
 181                             <button  class="btn btn-primary" name="upload_crosses_success_complete_button">The crosses were saved to the database with no errors! Congrats Click Here</button><br/><br/>
 182                             </center>
 183                         </&>
 184
 185                     </&><!-- End of workflow -->
 186
 187                 </div>
 188             </div>
 189             <div class="modal-footer">
 190                 <button id="upload_crosses_dismiss_button_1" name="upload_crosses_dismiss_button" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 191             </div>
 192         </div>
 193     </div>
 194 </div>
 195
 196 <div class="modal fade" id="upload_cross_error_display" name="upload_cross_error_display" tabindex="-1" role="dialog" aria-labelledby="uploadCrossesErrorDialog">
 197     <div class="modal-dialog modal-lg" role="document">
 198         <div class="modal-content">
 199             <div class="modal-header">
 200                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 201                 <h4 class="modal-title" id="uploadCrossesErrorDialog">Upload Crosses File Error</h4>
 202             </div>
 203             <div class="modal-body">
 204                 <div class="container-fluid">
 205                     <table>
 206                         <tbody></tbody>
 207                     </table>
 208                 </div>
 209             </div>
 210             <div class="modal-footer">
 211                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 212             </div>
 213         </div>
 214     </div>
 215 </div>
 216
 217 <div class="modal fade" id="cross_spreadsheet_info_dialog" name="cross_spreadsheet_info_dialog" tabindex="-1" role="dialog" aria-labelledby="crossSpreadsheetInfoDialog">
 218     <div class="modal-dialog modal-xl" role="document">
 219         <div class="modal-content">
 220             <div class="modal-header">
 221                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 222                 <h4 class="modal-title" id="crossSpreadsheetInfoDialog">Template Information</h4>
 223             </div>
 224             <div class="modal-body">
 225                 <div class="container-fluid">
 226                     <br>
 227                     <b>Header:</b>
 228                     <br>
 229                     To set up crosses in the database, please provide required information. The first row (header) must contain the following:
 230                     <br>
 231
 232                     <table class="table table-bordered table-hover" id = "cross_parents_header">
 233                         <tbody>
 234                             <tr>
 235                                 <td>cross_unique_id</td>
 236                                 <td>cross_combination</td>
 237                                 <td>cross_type</td>
 238                                 <td>female_parent</td>
 239                                 <td>male_parent</td>
 240                             </tr>
 241                         </tbody>
 242                     </table>
 243                     <style>
 244                         ul.a {text-indent};
 245                     </style>
 246                     <b>Required columns:</b>
 247                     <ul>
 248                         <li><b>cross_unique_id</b> (must NOT exist in the database)</li>
 249                         <li><b>cross_combination</b> (required in the header, but value for cross combination (e.g. female accession/male accession) may be left blank)</li>
 250                         <li><b>cross_type</b> (must be one of the following: biparental, self, open, sib, polycross, backcross, bulk, bulk_open, bulk_self, doubled_haploid, dihaploid_induction)</li>
 251                         <ul class="a">
 252                             <li><b>biparental:</b> An individual plant pollinated by another individual plant.</li>
 253                             <li><b>self:</b> A self pollinated individual plant.</li>
 254                             <li><b>open:</b> An individual plant pollinated by a group of plants or open pollinated (pollen may be from a group with known or unknown members).</li>
 255                             <li><b>backcross:</b> An individual plant pollinated by one of its parents.</li>
 256                             <li><b>sib:</b> Mating between individuals that have at least one parent in common. Generally between two individuals within the same plot.</li>
 257                             <li><b>polycross:</b> Mating between individual female parent from a population and the corresponding male population.</li>
 258                             <li><b>bulk:</b> A group of plants (usually a related family) pollinated by an individual plant (between a female population and a male accession).</li>
 259                             <li><b>bulk_open:</b> A group of plants (usually a related family) that are pollinated by another group of plants or open pollinated (between a female population and a male population or unknown male parent).</li>
 260                             <li><b>bulk_self:</b> A group of plants (usually a related family) that are self pollinated (each individual selfed, not combined pollen).</li>
 261                             <li><b>doubled_haploid:</b> Plants derived from doubling the chromosome number of haploid tissue.</li>
 262                             <li><b>dihaploid_induction</b>: Plants derived from reducing the chromosome set from 4 to 2.</li>
 263                         </ul>
 264                         <li><b>female_parent:</b> Female parent names must exist as <b>uniquenames</b> in the database, can be accession, plot, plant or population stock type.</li>
 265                         <li><b>male_parent:</b> Required in the header, but value may be left blank for most cross types. Must be specified for biparental, sib, backcross, polycross and bulk cross types. When specified, male parent names must exist as <b>uniquenames</b> in the database, can be accession, plot, plant or population stock type.</li>
 266                     </ul>
 267                     <b>Optional columns (additional parent info):</b> You can add additional parent info after male_plant column by using one or more of these column headers.
 268                     <ul>
 269 % foreach $additional_info(@cross_additional_info){
 270                         <li><%$additional_info%></li>
 271 %}
 272                     </ul>
 273                     <b>Additional cross information:</b>
 274                     <ul>
 275                         <li>After cross unique ids are stored in the database, you can add field crossing data (e.g. pollination date, total number of flowers pollinated, total number of fruits set) or progenies to each cross unique id.</li>
 276                         <li>Field crossing data and progenies can be uploaded via links in crossing experiment detail page or can be added directly in each cross detail page.</li>
 277                     </ul>
 278                 </div>
 279             </div>
 280             <div class="modal-footer">
 281                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 282             </div>
 283         </div>
 284     </div>
 285 </div>
 286
 287 <script>
 288
 289 jQuery(document).ready(function(){
 290
 291     jQuery('#upload_new_crosses_link').click(function(){
 292         jQuery('#upload_crosses_dialog').modal("show");
 293
 294         var trial_id = "<% $trial_id %>";
 295         var trial_name = "<% $trial_name %>";
 296         if (trial_id) {
 297             jQuery('#crossing_experiment_page_section_1').modal("show");
 298             jQuery('#manage_page_section_1').modal("hide");
 299
 300             jQuery('#crossing_experiment_page_section_2').modal("show");
 301             jQuery('#manage_page_section_2').modal("hide");
 302
 303         }
 304     });
 305
 306     jQuery("[name='upload_crosses_dismiss_button']").click(function() {
 307         jQuery('#upload_crosses_dialog').modal('hide');
 308         jQuery('#upload_crosses_breeding_program_select_div').val('');
 309         jQuery('#upload_crosses_crossing_experiment_select_div').val('');
 310         jQuery('#upload_crosses_file').val('');
 311         location.reload();
 312     });
 313
 314
 315 });
 316
 317 </script>