mason/breeders_toolbox/upload_images.mas

   1
   2 <%args>
   3 </%args>
   4
   5 <& /util/import_javascript.mas, classes => [ 'jquery', 'jqueryui', 'jquery.iframe-post-form', 'CXGN.BreedersToolbox.UploadImages', 'CXGN.BreederSearch', 'CXGN.Trial', 'brapi.BrAPI' ] &>
   6
   7 <div class="modal fade" id="upload_images_dialog" name="upload_images_dialog" tabindex="-1" role="dialog" aria-labelledby="uploadImagesDialog">
   8   <div class="modal-dialog" role="document">
   9     <div class="modal-content">
  10       <div class="modal-header">
  11         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  12         <h4 class="modal-title" id="uploadImagesDialog">Upload Images</h4>
  13       </div>
  14       <div class="modal-body">
  15         <div class="container-fluid">
  16
  17             <&| /page/explanation.mas, title=>'Template Information' &>
  18                 <p>
  19                 <b>File format information</b>
  20                 <br>
  21                 <a id="upload_images_format_info">Image File Format</a>
  22                 </p>
  23             </&>
  24
  25             <form class="form-horizontal" role="form" method="post" enctype="multipart/form-data" encoding="multipart/form-data" id="upload_images_file_form" name="upload_images_file_form">
  26                 <div class="form-group">
  27                     <label class="col-sm-3 control-label">File Format: </label>
  28                     <div class="col-sm-9" >
  29                         <select class="form-control" id="upload_images_file_format" name="upload_images_file_format">
  30                             <option value="images">Images</option>
  31                             <option value="images_with_associated_phenotypes">Images with Associated Phenotypes</option>
  32                         </select>
  33                     </div>
  34                 </div>
  35                 <div id="upload_images_with_associated_phenotypes_div" style="display:none">
  36                     <div class="form-group">
  37                         <label class="col-sm-3 control-label">Phenotype Spreadsheet: </label>
  38                         <div class="col-sm-9" >
  39                             <input type="file" id="upload_associated_phenotypes_file_input" name="upload_images_file_input" encoding="multipart/form-data" accept=".xls, .xlsx"/>
  40                         </div>
  41                     </div>
  42                     <div class="form-group">
  43                         <label class="col-sm-3 control-label">Images (.zip): </label>
  44                         <div class="col-sm-9" >
  45                             <input type="file" id="upload_images_zip_file_input" name="upload_images_zip_file_input" encoding="multipart/form-data" accept=".zip"/>
  46                         </div>
  47                     </div>
  48                 </div>
  49                 <div id="upload_images_div">
  50                     <div class="form-group">
  51                         <label class="col-sm-3 control-label">Image Files: </label>
  52                         <div class="col-sm-9" >
  53                             <input type="file" id="upload_images_file_input" name="upload_images_file_input" multiple="multiple" accept="image/*">
  54                         </div>
  55                     </div>
  56                     <br>
  57                     <div id="preview" class="form-group justify-content-sm-center"></div>
  58                 </div>
  59                 <div class="form-group" id="upload_images_status"></div>
  60
  61                 </div>
  62             </form><br/>
  63
  64         </div>
  65
  66         <div class="modal-footer">
  67             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  68             <button type="button" class="btn btn-info" name="upload_images_submit_verify" id="upload_images_submit_verify">Verify</button>
  69             <button disabled type="button" class="btn btn-primary" name="upload_images_submit_store" id="upload_images_submit_store" title="First Verify Your File">Store</button>
  70         </div>
  71
  72     </div>
  73   </div>
  74 </div>
  75
  76 <div class="modal fade" id="upload_images_info_dialog" name="upload_images_info_dialog" tabindex="-1" role="dialog" aria-labelledby="uploadImagesInfoDialog">
  77   <div class="modal-dialog" role="document">
  78     <div class="modal-content">
  79       <div class="modal-header">
  80         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  81         <h4 class="modal-title" id="uploadImagesInfoDialog">Template Information</h4>
  82       </div>
  83       <div class="modal-body">
  84         <div class="container-fluid">
  85
  86             <h4>Images Alone:</h4>
  87             <ul>
  88                 <li>Select multiple images directly for upload.</li>
  89                 <li>Image file names should consist of the observationUnitName, traitname, number, and timestamp, all joined by underscores (the default naming system used by Fieldbook App).</li>
  90             </ul>
  91             <br/>
  92             <h4>Images with Associated Phenotypes:</h4>
  93             <ul>
  94                 <li>The "Associated Images" format is useful for uploading a zipfile of images in association with phenotype values.</li>
  95                 <li>The phenotype values should be included in a .xls or .xlsx spreadsheet with the following columns:</li>
  96                 <br/><table class="table table-hover table-bordered table-condensed table-responsive" >
  97                     <thead></thead>
  98                     <tbody>
  99                         <tr>
 100                             <td>observationUnitName</td>
 101                             <td>observationVariableName</td>
 102                             <td>value</td>
 103                             <td>timestamp</td>
 104                             <td>image_name</td>
 105                             <td>person</td>
 106                         </tr>
 107                     </tbody>
 108                 </table>
 109                 <li>The values in the <b>image_name</b> column should should match the image filenames in the zipfile.</li>
 110             </ul>
 111
 112         </div>
 113       </div>
 114       <div class="modal-footer">
 115         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 116       </div>
 117     </div>
 118   </div>
 119 </div>
 120
 121
 122 <script defer="defer">
 123
 124 jQuery(document).ready(function() {
 125
 126     jQuery('#upload_images_link').click( function() {
 127         jQuery('#upload_images_dialog').modal("show");
 128     });
 129
 130     jQuery("#upload_images_format_info").click( function () {
 131         jQuery("#upload_images_info_dialog" ).modal("show");
 132     });
 133
 134     jQuery('#upload_images_file_format').change(function(){
 135         jQuery('#upload_images_status').html('');
 136         if (jQuery(this).val() == 'images_with_associated_phenotypes') {
 137             jQuery('#upload_images_with_associated_phenotypes_div').show();
 138             jQuery('#upload_images_div').hide();
 139         }
 140         else {
 141             jQuery('#upload_images_div').show();
 142             jQuery('#upload_images_with_associated_phenotypes_div').hide();
 143         }
 144     });
 145
 146 });
 147
 148 </script>