mason/tracking_activities/record_activity.mas

   1 <%args>
   2
   3 $identifier_id => undef
   4 $activity_select => undef
   5 $type_select_options => undef
   6 $timestamp => undef
   7 $activity_headers
   8
   9 </%args>
  10
  11 <& /util/import_javascript.mas, classes => [ 'jquery', 'jquery/dataTables', 'CXGN.BreedersToolbox.HTMLSelect.js', 'CXGN.List' ] &>
  12
  13 <& /page/page_title.mas, title=>"Record Activity" &>
  14
  15 <div class="well ">
  16     <center><label class="col-sm-12 control-label">Please scan a tracking identifier barcode</label></center>
  17     <br/>
  18     <form class="form-horizontal" >
  19     <br/>
  20         <div class="form-group">
  21             <label class="col-sm-3 control-label">Identifier Name: </label>
  22             <div class="col-sm-5">
  23                 <input class="form-control" id="record_page_identifier_name_input" name="record_page_identifier_name_input" type="text" value="">
  24             </div>
  25             <div class="col-sm-2">
  26                 <button id="identifier_name_barcode" class="btn btn-block btn-default"><span class="glyphicon glyphicon-qrcode"></span> Scan Barcode</button>
  27             </div>
  28         </div>
  29         <div class="form-group">
  30             <label class="col-sm-3 control-label">Type: </label>
  31             <div class="col-sm-5">
  32 % if ($type_select_options) {
  33                 <select id="record_page_type_select">
  34                     <option value="">Please select a type</option>
  35 % foreach my $type(@$type_select_options){
  36                     <option value="<%$type->[0]%>"><%$type->[1]%></option>
  37 % }
  38                 </select>
  39 % }
  40             </div>
  41         </div>
  42         <div class="form-group">
  43             <label class="col-sm-3 control-label">Input: </label>
  44             <div class="col-sm-5">
  45                 <input class="form-control" id="record_page_info_input" name="record_page_info_input" type="text" value="">
  46             </div>
  47         </div>
  48         <div class="form-group">
  49             <label class="col-sm-3 control-label">Notes:</label>
  50             <div class="col-sm-5">
  51                 <textarea class="form-control" id="record_page_notes" name="record_page_notes" ></textarea>
  52             </div>
  53         </div>
  54         <div class="form-group">
  55             <label class="col-sm-3 control-label">Timestamp: </label>
  56             <div class="col-sm-5">
  57                 <input class="form-control" id="record_timestamp_record_page" name="record_timestamp_record_page" type="text" disabled value="<%$timestamp%>">
  58             </div>
  59         </div>
  60         <center>
  61             <button id="record_page_activity_info_submit" name="record_page_activity_info_submit" class="btn btn-primary">Save</button>
  62         </center>
  63     </form>
  64 </div>
  65
  66
  67 % if ($identifier_id) {
  68     <&| /page/info_section.mas, title => 'Summary', collapsible => 1, collapsed => 0, subtitle => '' &>
  69         <div class = "well well-sm">
  70             <div class = "panel panel-default">
  71                 <div class = "panel-body">
  72                     <div style="overflow:scroll">
  73                         <table id = "record_page_activity_info_table" class="table table-hover table-striped">
  74                             <thead>
  75                                 <tr>
  76 % foreach my $header(@$activity_headers){
  77                                     <th><%$header%></th>
  78 %}
  79                                 </tr>
  80                             </thead>
  81                         </table>
  82                     </div>
  83                 </div>
  84             </div>
  85         </div>
  86     </&>
  87 % }
  88
  89 <&| /page/info_section.mas, title => 'Activity Details', collapsible => 1, collapsed => 0, subtitle => '' &>
  90     <div class = "well well-sm">
  91         <div class = "panel panel-default">
  92             <div class = "panel-body">
  93                 <div style="overflow:scroll">
  94                     <table id = "record_page_activity_details_table" class="table table-hover table-striped">
  95                         <thead>
  96                             <tr>
  97 % foreach my $header(@$activity_headers){
  98                                 <th><%$header%></th>
  99 %}
 100                             </tr>
 101                         </thead>
 102                     </table>
 103                 </div>
 104             </div>
 105         </div>
 106     </div>
 107 </&>
 108
 109
 110 <div class="modal fade" id="record_page_saved_dialog_message" name="record_page_saved_dialog_message" tabindex="-1" role="dialog" aria-labelledby="recordPageSavedDialog">
 111     <div class="modal-dialog" role="document">
 112         <div class="modal-content">
 113             <div class="modal-header">
 114                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 115                 <h4 class="modal-title" id="recordPageSavedDialog">Success</h4>
 116             </div>
 117             <div class="modal-body">
 118                 <div class="container-fluid">
 119                     <p>
 120                         <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
 121                         New information was saved.
 122                     </p>
 123                 </div>
 124             </div>
 125             <div class="modal-footer">
 126                 <button id="record_page_dismiss_saved_dialog" type="button" class="btn btn-default" data-dismiss="modal">Close & Reload</button>
 127             </div>
 128         </div>
 129     </div>
 130 </div>
 131
 132
 133 <script>
 134
 135 $(window).ready( function() {
 136
 137     var identifier_id = "<%$identifier_id%>";
 138
 139     if (identifier_id) {
 140         jQuery('#record_page_activity_info_table').DataTable({
 141             'autoWidth': false,
 142             'searching' : false,
 143             'dom': 'rtip',
 144             'ordering': false,
 145             'paging': false,
 146             'info': false,
 147             'ajax': '/ajax/tracking_activity/summary/'+identifier_id,
 148         });
 149
 150         jQuery('#record_page_activity_details_table').DataTable({
 151             'autoWidth': false,
 152             'searching' : false,
 153             'ajax': '/ajax/tracking_activity/details/'+identifier_id,
 154         });
 155
 156     }
 157
 158     parseArgs();
 159     jQuery('#identifier_name_barcode').click(scanBarcode);
 160
 161     function scanBarcode() {
 162         window.location = "/barcode/read?return=/activity/record&param=identifier_name";
 163         return false;
 164     }
 165
 166     function parseArgs() {
 167         const urlSearchParams = new URLSearchParams(window.location.search);
 168         if ( urlSearchParams.has('identifier_name') ) {
 169             let identifier_name = decodeURIComponent(urlSearchParams.get('identifier_name'));
 170             jQuery('input[name="record_page_identifier_name_input"]').val(identifier_name);
 171         }
 172     }
 173
 174     jQuery('#record_page_activity_info_submit').click( function(e) {
 175         e.preventDefault();
 176
 177         var identifier_name = jQuery('#record_page_identifier_name_input').val();
 178         var selected_type = jQuery('#record_page_type_select').val();
 179         var input = jQuery('#record_page_info_input').val();
 180         var record_timestamp = jQuery('#record_timestamp_record_page').val();
 181         var notes = jQuery('#record_page_notes').val();
 182
 183         if (identifier_name == '') {
 184             alert("Please scan an identifier name barcode");
 185             return;
 186         }
 187
 188         if (selected_type == '') {
 189             alert("Please select a type");
 190             return;
 191         }
 192         if (input == '') {
 193             alert("Please provide an input");
 194             return;
 195         }
 196
 197         new jQuery.ajax({
 198             url: '/ajax/tracking_activity/save',
 199             dataType: "json",
 200             type: 'POST',
 201             data : {
 202                 'tracking_identifier' : identifier_name,
 203                 'selected_type': selected_type,
 204                 'input': input,
 205                 'record_timestamp': record_timestamp,
 206                 'notes': notes,
 207             },
 208             beforeSend: function(response){
 209                 jQuery('#working_modal').modal('show');
 210             },
 211             success: function(response) {
 212                 jQuery('#working_modal').modal('hide');
 213                 if (response.success == 1) {
 214                     jQuery('#record_page_saved_dialog_message').modal("show");
 215                 }
 216                 if (response.error) {
 217                     alert(response.error);
 218                 }
 219             },
 220             error: function(response){
 221                 jQuery('#working_modal').modal('hide');
 222                 alert('An error occurred saving new information');
 223             }
 224         });
 225     });
 226
 227     jQuery("#record_page_dismiss_saved_dialog").click(function(){
 228         jQuery('input[name="record_page_identifier_name_input"]').val('');
 229         jQuery('#record_page_type_select').val('');
 230         jQuery('#record_page_info_input').val('');
 231         jQuery('#record_page_notes').val('');
 232         location.reload();
 233     });
 234
 235
 236 });
 237
 238 </script>