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