mason/breeders_toolbox/seedlot_maintenance/upload_dialog.mas

   1 <%args>
   2 </%args>
   3
   4 <& /util/import_javascript.mas, classes => [ 'jquery', 'jqueryui' ] &>
   5
   6 <div class="modal fade" id="upload_maintenance_event_upload_modal" name="upload_maintenance_event_upload_modal" tabindex="-1" role="dialog">
   7     <div class="modal-dialog modal-lg" role="document">
   8         <div class="modal-content">
   9             <div class="modal-header">
  10                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  11                 <h4 class="modal-title">Upload Seedlot Maintenance Events</h4>
  12             </div>
  13             <div class="modal-body">
  14                 <div class="container-fluid">
  15                     <p><strong>Select an Excel (.xls) file with the Seedlot Maintenance Events to upload</strong></p>
  16                     <p><strong>Requirements:</strong></p>
  17                     <ul>
  18                         <li>
  19                             The Maintenance Events are associated with Seedlots, so the name of the Seedlot in the file must match an existing Seedlot in the database.
  20                             If a Seedlot is not yet in the database, go to the <a href='/breeders/seedlots/'>Manage Seedlots</a> page to create it first.
  21                         </li>
  22                         <li>
  23                             The name of the Maintenance Event must be a valid event type.  Valid event types include:
  24                             <table class="table table-striped">
  25                                 <thead>
  26                                     <tr>
  27                                         <th>Event Type Name</th>
  28                                         <th>Event Type Values</th>
  29                                     </tr>
  30                                 </thead>
  31                                 <tbody id="maintenece_event_terms"></tbody>
  32                             </table>
  33                         </li>
  34                     </ul>
  35                     <&| /page/explanation.mas, title=>'Template Information' &>
  36                         <p>
  37                         <b>File format information</b>
  38                         <br>
  39                         <a id="maintenance_event_upload_spreadsheet_format_info">Spreadsheet Format</a>
  40                         </p>
  41                     </&>
  42                     <br />
  43                     <form class="form-horizontal" role="form" method="post" enctype="multipart/form-data" encoding="multipart/form-data" id="upload_maintenance_events_form" name="upload_maintenance_events_form">
  44                         <div class="form-group">
  45                             <label class="col-sm-4 control-label">Upload File: </label>
  46                             <div class="col-sm-8" >
  47                                 <input class="form-control" type="file" name="maintenance_events_upload_file" id="maintenance_events_upload_file" encoding="multipart/form-data" />
  48                             </div>
  49                         </div>
  50                     </form>
  51                     <br /><br />
  52                     <div id="maintenance_events_upload_messages">
  53                         <ul id="maintenance_events_upload_messages_list" class='list-group'></ul>
  54                     </div>
  55                 </div>
  56             </div>
  57             <div class="modal-footer">
  58                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  59                 <button type="button" class="btn btn-primary" name="maintenance_events_submit" id="maintenance_events_submit">Upload</button>
  60             </div>
  61         </div>
  62     </div>
  63 </div>
  64
  65 <!-- Template Info Modal -->
  66 <div class="modal fade" id="maintenance_event_upload_spreadsheet_format_modal" name="maintenance_event_upload_spreadsheet_format_modal" tabindex="-1" role="dialog" aria-labelledby="uploadMaintenanceInfoDialog">
  67     <div class="modal-dialog modal-xl" role="document">
  68         <div class="modal-content">
  69             <div class="modal-header" style="text-align: center">
  70                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  71                 <h4 class="modal-title" id="uploadMaintenanceInfoDialog">Upload Seedlot Maintenance Event Template Information</h4>
  72             </div>
  73             <div class="modal-body">
  74                 <div class="container-fluid">
  75                     <strong>Seedlot Maintenance Events may be uploaded in an Excel file (.xls or .xlsx)</strong>
  76                     <br />
  77                     <strong>Header:</strong>
  78                     <br />
  79                     The first row (header) should contain the following:
  80                     <br />
  81
  82                     <table class="table table-hover table-bordered table-condensed" >
  83                         <thead></thead>
  84                             <tbody>
  85                                 <tr>
  86                                     <td>seedlot</td>
  87                                     <td>type</td>
  88                                     <td>value</td>
  89                                     <td>notes</td>
  90                                     <td>operator</td>
  91                                     <td>timestamp</td>
  92                                 </tr>
  93                         </tbody>
  94                     </table>
  95
  96                     <b>Fields:</b>
  97                     <ul>
  98                         <li>seedlot (name of the seedlot, must match an existing seedlot))</li>
  99                         <li>type (name of the maintenance event type, must match an existing term)</li>
 100                         <li>value (value of the event)</li>
 101                         <li>notes (optional, additional comments about the event)</li>
 102                         <li>operator (username of the person recording the event)</li>
 103                         <li>timestamp (date/time of when the event is recorded in 'YYYY-MM-DD HH:MM:SS' format)</li>
 104                     </ul>
 105                 </div>
 106             </div>
 107             <div class="modal-footer">
 108                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
 109             </div>
 110         </div>
 111     </div>
 112 </div>
 113
 114 <style>
 115     div.center {
 116         text-align: center
 117     }
 118 </style>
 119
 120 <script type="text/javascript">
 121
 122     jQuery(document).ready(function() {
 123
 124         // Setup functions
 125         getValidEventTypes();
 126
 127         // Click Listeners
 128         jQuery('#maintenance_event_upload_spreadsheet_format_info').click(function() {
 129             jQuery('#maintenance_event_upload_spreadsheet_format_modal').modal('show');
 130         });
 131         jQuery('#maintenance_events_submit').click(uploadMaintenanceEvents);
 132
 133     });
 134
 135
 136     /**
 137      * Get the maintenance event ontology and populate the table of valid names and values
 138      */
 139     function getValidEventTypes() {
 140         let html = "";
 141         jQuery.ajax({
 142             type: 'GET',
 143             dataType: 'json',
 144             url: '/ajax/breeders/seedlot/maintenance/ontology',
 145             success: function(data) {
 146                 if ( data && data.ontology ) {
 147                     for ( let i = 0; i < data.ontology.length; i++ ) {
 148                         for ( let j = 0; j < data.ontology[i].children.length; j++ ) {
 149                             let name = data.ontology[i].children[j].name;
 150                             let values = [];
 151                             if ( data.ontology[i].children[j].children ) {
 152                                 for ( let k = 0; k < data.ontology[i].children[j].children.length; k++ ) {
 153                                     values.push(data.ontology[i].children[j].children[k].name);
 154                                 }
 155                             }
 156                             if ( values.length === 0 ) values.push('<em>Any Value</em>');
 157                             html += "<tr><td>" + name + "</td><td>" + values.join(', ') + "</td></tr>";
 158                         }
 159                     }
 160                 }
 161             },
 162             complete: function() {
 163                 jQuery("#maintenece_event_terms").html(html);
 164             }
 165         });
 166     }
 167
 168     /**
 169      * Upload the Excel file and process the results
 170      */
 171     function uploadMaintenanceEvents() {
 172         let file = jQuery('#maintenance_events_upload_file').val();
 173         if ( !file || file === '' ) {
 174             alert("Please select your upload file");
 175             return false;
 176         }
 177
 178         // Setup working modal
 179         jQuery('#working_msg').html("Uploading Seedlot Maintenance Events File");
 180         jQuery('#working_modal_progress').css('width', 0).attr('aria-valuenow', 0);
 181         jQuery('#working_modal_progress_div').css('display', 'block');
 182         jQuery('#working_modal').modal("show");
 183         jQuery('#maintenance_events_upload_messages_list').empty();
 184
 185         // Build the FormData to pass as POST arguments
 186         let formData = new FormData();
 187         formData.append('file', jQuery('#maintenance_events_upload_file').prop('files')[0]);
 188
 189         // Make the POST request
 190         jQuery.ajax({
 191             url: '/ajax/breeders/seedlot/maitenance/upload',
 192             type: 'POST',
 193             data: formData,
 194             cache: false,
 195             contentType: false,
 196             processData: false,
 197             xhr: function () {
 198                 var myXhr = jQuery.ajaxSettings.xhr();
 199                 if (myXhr.upload) {
 200                     myXhr.upload.addEventListener('progress', function (e) {
 201                         if (e.lengthComputable) {
 202                             let prog = (e.loaded / e.total)*100;
 203                             jQuery('#working_modal_progress').css('width', prog + "%").attr('aria-valuenow', prog);
 204                             if ( prog >= 100 ) {
 205                                jQuery('#working_msg').html("Uploading Seedlot Maintenance Events File");
 206                             }
 207                         }
 208                     }, false);
 209                 }
 210                 return myXhr;
 211             },
 212             success: function(response) {
 213                 handleUploadResponse(response);
 214             },
 215             error: function(e) {
 216                 console.log(e);
 217                 alert("ERROR: Could not upload file!");
 218             },
 219             complete: function() {
 220                 jQuery('#working_msg').html("");
 221                 jQuery('#working_modal_progress').css('width', 0).attr('aria-valuenow', 0);
 222                 jQuery('#working_modal_progress_div').css('display', 'none');
 223                 jQuery('#working_modal').modal("hide");
 224             }
 225         });
 226     }
 227
 228
 229     /**
 230      * Handle the Upload Response
 231      * - display success message, if no errors
 232      * - display error messages, if errors encountered
 233      */
 234     function handleUploadResponse(response) {
 235         if ( response && response.success && response.success === 1 ) {
 236             add_message("success", "Seedlot Maintenace Events successfully stored!");
 237             if ( getEvents ) getEvents();
 238         }
 239         else if ( response && response.error ) {
 240             let html = "<strong>The Seedlot Maintenance Events could not be stored due to the following error(s):</strong><br />" + response.error;
 241             add_message("error", html);
 242         }
 243         else {
 244             add_message("error", "The Seedlot Maintenance Events were not stored due to an unknown error!");
 245         }
 246     }
 247
 248
 249     /**
 250     * Add Message to Upload step
 251     * @param {string} type Message Type (success, error)
 252     * @param {string} message Message Text
 253     */
 254     function add_message(type, message) {
 255         let html = "";
 256         let class_name = "danger";
 257         let icon_name = "remove";
 258
 259         if ( type === "success" ) {
 260             class_name = "success";
 261             icon_name = "ok";
 262         }
 263         else if ( type === "warning" ) {
 264             class_name = "warning";
 265             icon_name = "asterisk";
 266         }
 267         else if ( type === "info" ) {
 268             class_name = "info";
 269             icon_name = "info-sign";
 270         }
 271
 272         html += "<li class='list-group-item list-group-item-" + class_name + "'>";
 273         html += "<span class='badge'><span class='glyphicon glyphicon-" + icon_name + "'></span></span>";
 274         html += message;
 275         html += "</li>";
 276
 277         jQuery('#maintenance_events_upload_messages_list').append(html);
 278     }
 279
 280 </script>