mason/breeders_toolbox/upload_crosses_dialogs.mas

   1 <%args>
   2 @locations => ()
   3 </%args>
   4
   5 <div class="modal fade" id="upload_crosses_dialog" name="upload_crosses_dialog" tabindex="-1" role="dialog" aria-labelledby="uploadCrossesDialog">
   6     <div class="modal-dialog modal-xl" role="document">
   7         <div class="modal-content">
   8             <div class="modal-header">
   9                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  10                 <h4 class="modal-title" id="uploadCrossesDialog">Upload Crosses</h4>
  11             </div>
  12             <div class="modal-body">
  13                 <div class="container-fluid">
  14
  15                     <&| /util/workflow.mas, id=> "crosses_upload_workflow" &>
  16                         <&| /util/workflow.mas:step, title=> "Intro" &>
  17                             <& /page/page_title.mas, title=>"What are crosses?" &>
  18                             <ul>
  19                                 <li>Crosses represent any pollination that occurs.</li>
  20                                 <li>Crosses can be of different types (biparental, self, open, bulk, bulk_self, bulk_open, or doubled_haploid)</li>
  21                                 <li>Depending on the cross type, an individual cross can be defined as between two accessions (e.g. accession A is the female and accession B is the male in a biparental cross)</li>
  22                                 <li>For an open pollinated cross, the cross can be defined as between female accession A and male population P1 (populations in the database are only defined as groups of accessions)</li>
  23                                 <li>An individual cross can be linked to the specific female plot or plant, as well as the specific male plot or plant.</li>
  24                             </ul>
  25
  26                             <br/><br/>
  27                             <center>
  28                                 <button class="btn btn-primary" onclick="Workflow.complete(this);">Go to Next Step</button>
  29                             </center>
  30                         </&>
  31                         <&| /util/workflow.mas:step, title=> "File Formatting" &>
  32                             <& /page/page_title.mas, title=>"Make sure your crosses are formatted in the right format" &>
  33                             <br/><br/>
  34                             <center>
  35                             <button class="btn btn-info" id="cross_upload_spreadsheet_format_info">Information about file format</button><br/><br/>
  36                             <button class="btn btn-primary" onclick="Workflow.complete(this);">Once you think your file matches, go to Next Step</button>
  37                             </center>
  38                         </&>
  39
  40                         <&| /util/workflow.mas:step, title=> "Crossing trials" &>
  41                             <& /page/page_title.mas, title=>"Select a crossing trial" &>
  42
  43                             <p>Crossing trials are for grouping crosses together. The grouping is most often done for geographic reasons, such as a group of crosses done in the same field trial. This grouping can be used to encapsulate a crossing block field trial that you have saved in the database (e.g. in Manage Trials your crossing block will appear as a field trial with plots)</p>
  44                             <hr>
  45
  46                             <div class="form-group">
  47                                 <label class="col-sm-2 control-label">Crossing Trial: </label>
  48                                 <div class="col-sm-10">
  49                                     <div id="upload_crosses_select_crossingtrial_1" name="upload_crosses_select_crossingtrial_1" >
  50                                     </div>
  51                                 </div>
  52                             </div><br/><br/>
  53                             <hr>
  54
  55                             <center>
  56                                 <button class="btn btn-info" name="create_crossingtrial_link">If you need to create a crossing trial, click here</button><br/><br/>
  57                                 <button class="btn btn-primary" onclick="Workflow.complete(this);">Once you have a crossing trial, go to Next Step</button>
  58                             </center>
  59
  60                         </&>
  61                         <&| /util/workflow.mas:step, title=> "Upload your crosses" &>
  62                             <& /page/page_title.mas, title=>"Enter basic information about the crosses and upload your file" &>
  63
  64                             <br/>
  65                                 <form class="form-horizontal" role="form" method="post" enctype="multipart/form-data" encoding="multipart/form-data" id="upload_crosses_form" name="upload_crosses_form">
  66                                 <div class="form-group">
  67                                     <label class="col-sm-2 control-label">Crossing Trial: </label>
  68                                     <div class="col-sm-10">
  69                                         <div id="upload_crosses_select_crossingtrial_2" name="upload_crosses_select_crossingtrial_2" >
  70                                         </div>
  71                                     </div>
  72                                 </div>
  73                                 <div class="form-group">
  74                                     <label class="col-sm-2 control-label">Location: </label>
  75                                     <div class="col-sm-10">
  76                                         <select class="form-control" id="cross_upload_location" name="cross_upload_location">
  77                                             <option value="">Select Location</option>
  78 <%perl>
  79     foreach my $location (@locations) {
  80         print "<option value=".'"'.@$location[1].'"'.">".@$location[1]."</option>";
  81     }
  82 </%perl>
  83                                         </select>
  84                                     </div>
  85                                 </div>
  86                                 <div class="form-group">
  87                                     <label class="col-sm-2 control-label">Upload File: </label>
  88                                     <div class="col-sm-10">
  89                                         <input type="file" name="crosses_upload_file" id="crosses_upload_file" encoding="multipart/form-data" />
  90                                     </div>
  91                                 </div>
  92
  93                                 <!--
  94                                 <hr>
  95                                 <h3>Additional options:</h3>
  96
  97                                 <p>Progeny naming: <i>If generating progeny, use cross name and:</i></p>
  98                                 <div class="form-group">
  99                                     <label class="col-sm-2 control-label">Prefix: </label>
 100                                     <div class="col-sm-10">
 101                                         <input class="form-control" id="upload_prefix" name="upload_prefix" value="P" />
 102                                     </div>
 103                                 </div>
 104                                 <div class="form-group">
 105                                     <label class="col-sm-2 control-label">Suffix: </label>
 106                                     <div class="col-sm-10">
 107                                         <input class="form-control" id="upload_suffix" name="upload_suffix" />
 108                                     </div>
 109                                 </div>
 110                                 -->
 111                             </form>
 112
 113                             <center>
 114                                 <button type="button" onclick="Workflow.complete(this, false);" class="btn btn-primary" name="upload_crosses_submit" id="upload_crosses_submit">Upload File</button>
 115                             </center>
 116
 117                         </&>
 118                         <&| /util/workflow.mas:complete, title=> "Complete" &>
 119                             <& /page/page_title.mas, title=>"Finished! Your crosses are now in the database" &>
 120                             <p>
 121                                 <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
 122                                 The crosses file was uploaded successfully
 123                             </p>
 124
 125                             <ul>
 126                                 <li>You may want to proceed to the cross detail page(s) for the cross(es) you just created.</li>
 127                                 <li>You can print barcodes for the crosses.</li>
 128                                 <li>You can add crossing information as it becomes available (e.g. number of seeds, progeny, etc).</li>
 129                             </ul>
 130                             <br/>
 131                             <center>
 132                             <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/>
 133                             </center>
 134                         </&>
 135
 136                     </&><!-- End of workflow -->
 137
 138                 </div>
 139             </div>
 140             <div class="modal-footer">
 141                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 142             </div>
 143         </div>
 144     </div>
 145 </div>
 146
 147 <div class="modal fade" id="upload_cross_error_display" name="upload_cross_error_display" tabindex="-1" role="dialog" aria-labelledby="uploadCrossesErrorDialog">
 148   <div class="modal-dialog modal-lg" role="document">
 149     <div class="modal-content">
 150       <div class="modal-header">
 151         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 152         <h4 class="modal-title" id="uploadCrossesErrorDialog">Upload Crosses File Error</h4>
 153       </div>
 154       <div class="modal-body">
 155         <div class="container-fluid">
 156           <table>
 157           <tbody></tbody>
 158           </table>
 159         </div>
 160       </div>
 161       <div class="modal-footer">
 162         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 163       </div>
 164     </div>
 165   </div>
 166 </div>
 167
 168 % my $cross_properties = $c->config->{cross_properties};
 169 % my @column_header = split ',',$cross_properties;
 170
 171 <div class="modal fade" id="cross_upload_spreadsheet_info_dialog" name="cross_upload_spreadsheet_info_dialog" tabindex="-1" role="dialog" aria-labelledby="uploadCrossesInfoDialog">
 172     <div class="modal-dialog modal-xl" role="document">
 173         <div class="modal-content">
 174             <div class="modal-header">
 175                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 176                 <h4 class="modal-title" id="uploadCrossesInfoDialog">Template Information</h4>
 177             </div>
 178             <div class="modal-body">
 179                 <div class="container-fluid">
 180
 181                     <b>Crosses may be uploaded in an Excel file (.xls)</b>
 182                     <br>
 183                     (.xlsx format not supported)
 184
 185                     <br><br>
 186                     <b>Header:</b>
 187                     <br>
 188
 189                     The first row (header) must contain the following:
 190                     <br>
 191
 192                     <table class="table table-bordered table-hover">
 193                         <tbody>
 194                             <tr>
 195                                 <td>cross_name</td>
 196                                 <td>cross_type</td>
 197                                 <td>female_parent</td>
 198                                 <td>male_parent</td>
 199                                 <td>female_plot</td>
 200                                 <td>male_plot</td>
 201 % foreach my $column_header(@column_header){
 202                                 <td><% $column_header %></td>
 203 %}
 204                             </tr>
 205                         </tbody>
 206                     </table>
 207
 208                     <b>Required columns:</b>
 209                     <ul>
 210                         <li><b>cross_name</b> (must not conflict with an existing cross name)</li>
 211                         <li><b>cross_type</b> (must be one of the following: biparental, self, open, bulk, bulk_self, bulk_open, or doubled_haploid)</li>
 212                         <li><b>female_parent</b> (must exist in the database)</li>
 213                         <li><b>male_parent</b> (required in the header, but value may be left blank for most cross types. Must be specified for biparental and bulk crosses. When specified, must exist in the database)</li>
 214                     </ul>
 215
 216                     <b>Optional columns (dates must be in the format YYYY/MM/DD):</b>
 217                     <ul>
 218                         <li><b>female_plot</b> (required in the header, but value may be left blank. When specified, plot name must exist in the database)</li>
 219                         <li><b>male_plot</b> (required in the header, but value may be left blank. When specified, plot name must exist in the database)</li>
 220 % foreach my $column_header(@column_header){
 221                         <li><% $column_header %></li>
 222 %}
 223                     </ul>
 224
 225                 </div>
 226             </div>
 227             <div class="modal-footer">
 228                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 229             </div>
 230         </div>
 231     </div>
 232 </div>