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     <&| /page/info_section.mas, title => 'Transformants (Accessions) Derived from this Transformation ', collapsible=>1, collapsed=>0 &>
 130         <div class = "well well-sm">
 131             <div class = "panel panel-default">
 132                 <div class = "panel-body">
 133                     <div style="overflow:scroll">
 134                         <table class="table table-hover table-bordered" id="transformants_table_record_page">
 135                         </table>
 136                     </div>
 137                     <div class="panel panel-default">
 138                         <div class="panel-body">
 139                             <&| /page/info_section.mas, title => 'Add transformants (accessions) to a List', collapsible=>1, collapsed=>1, subtitle=>'<i>Adding transformants (accessions) to a new or exisiting list</i>'&>
 140                                 <br>
 141                                 <div id="transformant_to_new_list_record_page" style="display:none"></div>
 142                                 <div id="transformant_add_to_list_record_page"></div>
 143                             </&>
 144                         </div>
 145                     </div>
 146                 </div>
 147             </div>
 148         </div>
 149     </&>
 150
 151     <&| /page/info_section.mas, title => 'Obsoleted Transformants (Accessions)', collapsible=>1, collapsed=>0 &>
 152         <div class = "well well-sm">
 153             <div class = "panel panel-default">
 154                 <div class = "panel-body">
 155                     <div style="overflow:scroll">
 156                         <table class="table table-hover table-bordered" id="obsoleted_transformants_table_record_page">
 157                         </table>
 158                     </div>
 159                 </div>
 160             </div>
 161         </div>
 162     </&>
 163
 164 % }
 165
 166
 167 <div class="modal fade" id="record_page_saved_dialog_message" name="record_page_saved_dialog_message" tabindex="-1" role="dialog" aria-labelledby="recordPageSavedDialog">
 168     <div class="modal-dialog" role="document">
 169         <div class="modal-content">
 170             <div class="modal-header">
 171                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 172                 <h4 class="modal-title" id="recordPageSavedDialog">Success</h4>
 173             </div>
 174             <div class="modal-body">
 175                 <div class="container-fluid">
 176                     <p>
 177                         <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
 178                         New information was saved.
 179                     </p>
 180                 </div>
 181             </div>
 182             <div class="modal-footer">
 183                 <button id="record_page_dismiss_saved_dialog" type="button" class="btn btn-default" data-dismiss="modal">Close & Reload</button>
 184             </div>
 185         </div>
 186     </div>
 187 </div>
 188
 189
 190 <script>
 191
 192 $(window).ready( function() {
 193
 194     var identifier_id = "<%$identifier_id%>";
 195     var date = "<%$date%>";
 196
 197     if (identifier_id) {
 198         jQuery('#record_page_activity_info_table').DataTable({
 199             'autoWidth': false,
 200             'searching' : false,
 201             'dom': 'rtip',
 202             'ordering': false,
 203             'paging': false,
 204             'info': false,
 205             'ajax': '/ajax/tracking_activity/summary/'+identifier_id,
 206         });
 207
 208         jQuery('#record_page_activity_details_table').DataTable({
 209             'autoWidth': false,
 210             'searching' : false,
 211             'ajax': '/ajax/tracking_activity/details/'+identifier_id,
 212         });
 213
 214     }
 215
 216     parseArgs();
 217     jQuery('#identifier_name_barcode').click(scanBarcode);
 218
 219     function scanBarcode() {
 220         window.location = "/barcode/read?return=/activity/record&param=identifier_name";
 221         return false;
 222     }
 223
 224     function parseArgs() {
 225         const urlSearchParams = new URLSearchParams(window.location.search);
 226         if ( urlSearchParams.has('identifier_name') ) {
 227             let identifier_name = decodeURIComponent(urlSearchParams.get('identifier_name'));
 228             jQuery('input[name="record_page_identifier_name_input"]').val(identifier_name);
 229         }
 230     }
 231
 232     jQuery('#record_page_type_select').change(function() {
 233         jQuery('#record_page_info_input').val('');
 234         var input_type = jQuery('#record_page_type_select').val();
 235         if (input_type.indexOf('date') != -1) {
 236             jQuery('#record_page_info_input').val(date);
 237         }
 238     });
 239
 240     jQuery('#record_page_activity_info_submit').click( function(e) {
 241         e.preventDefault();
 242
 243         var identifier_name = jQuery('#record_page_identifier_name_input').val();
 244         var selected_type = jQuery('#record_page_type_select').val();
 245         var input = jQuery('#record_page_info_input').val();
 246         var record_timestamp = jQuery('#record_timestamp_record_page').val();
 247         var notes = jQuery('#record_page_notes').val();
 248         var activity_type = "<%$activity_type%>";
 249         var program_name = "<%$program_name%>";
 250
 251         if (identifier_name == '') {
 252             alert("Please scan an identifier name barcode");
 253             return;
 254         }
 255
 256         if (selected_type == '') {
 257             alert("Please select a type");
 258             return;
 259         }
 260         if (input == '') {
 261             alert("Please provide an input");
 262             return;
 263         }
 264
 265         new jQuery.ajax({
 266             url: '/ajax/tracking_activity/save',
 267             dataType: "json",
 268             type: 'POST',
 269             data : {
 270                 'tracking_identifier_name': identifier_name,
 271                 'tracking_identifier_id': identifier_id,
 272                 'selected_type': selected_type,
 273                 'input': input,
 274                 'record_timestamp': record_timestamp,
 275                 'notes': notes,
 276                 'activity_type': activity_type,
 277                 'program_name': program_name,
 278                 'source_info': '<%$source_info%>'
 279             },
 280             beforeSend: function(response){
 281                 jQuery('#working_modal').modal('show');
 282             },
 283             success: function(response) {
 284                 jQuery('#working_modal').modal('hide');
 285                 if (response.success == 1) {
 286                     jQuery('#record_page_saved_dialog_message').modal("show");
 287                 }
 288                 if (response.error) {
 289                     alert(response.error);
 290                 }
 291             },
 292             error: function(response){
 293                 jQuery('#working_modal').modal('hide');
 294                 alert('An error occurred saving new information');
 295             }
 296         });
 297     });
 298
 299     jQuery("#record_page_dismiss_saved_dialog").click(function(){
 300         jQuery('input[name="record_page_identifier_name_input"]').val('');
 301         jQuery('#record_page_type_select').val('');
 302         jQuery('#record_page_info_input').val('');
 303         jQuery('#record_page_notes').val('');
 304         location.reload();
 305     });
 306
 307     var material_type = "<%$material_type%>";
 308     var material_stock_id = "<%$material_stock_id%>";
 309
 310     if (material_type == 'transformation') {
 311         var transformants_table = jQuery('#transformants_table_record_page').DataTable({
 312             'ajax': '/ajax/transformation/transformants/'+material_stock_id,
 313             'autoWidth': false,
 314             columns: [
 315                 { title: "Accession", "data": null, "render": function ( data, type, row ) { return "<a href='/stock/"+row.transformant_id+"/view'>"+row.transformant_name+"</a>"; } },
 316                 { title: "Obsolete Accession", "data": "null", "render": function ( data, type, row ) { return "<a onclick='obsoleteTransformant("+row.transformant_id+",\""+row.transformant_name+"\")'>X</a>"; } },
 317             ],
 318
 319             "fnInitComplete": function(oSettings, json) {
 320                 if (!isLoggedIn()) {
 321                     jQuery('#transformant_add_to_list_record_page').html("<div class='well well-sm'><h3>Please login to use lists!</h3></div>");
 322                 } else {
 323                     var html = "";
 324                     for(var i=0; i<json.data.length; i++){
 325                         html += json.data[i].transformant_name+"\n";
 326                     }
 327
 328                     jQuery("#transformant_to_new_list_record_page").html(html);
 329                     addToListMenu("transformant_add_to_list_record_page", "transformant_to_new_list_record_page", {
 330                         selectText: true,
 331                         listType: 'accessions',
 332                     });
 333                 }
 334             }
 335         });
 336
 337         var obsoleted_transformants_table = jQuery('#obsoleted_transformants_table_record_page').DataTable({
 338             'ajax': '/ajax/transformation/obsoleted_transformants/'+material_stock_id,
 339             'autoWidth': false,
 340             'columns': [
 341                 { title: "Accession", "data": null, "render": function ( data, type, row ) { return "<a href='/stock/"+row.transformant_id+"/view'>"+row.transformant_name+"</a>"; } },
 342             ],
 343         });
 344     }
 345
 346 });
 347
 348 </script>