mason/order/activity_info_details.mas

   1
   2 <%args>
   3 $identifier_name
   4 $identifier_id
   5 $breeding_program => undef
   6 $user_id => undef
   7 $identifier_prefix => ''
   8 $type_select_options => undef
   9 $activity_headers
  10 $timestamp => undef
  11 $material_name
  12 $material_id
  13 $updated_status_type => undef
  14 $updated_status_string => undef
  15 $status_display => undef
  16 $user_role
  17
  18 </%args>
  19
  20 <& /util/import_javascript.mas, classes => [ 'jquery', 'jquery/dataTables', 'CXGN.BreedersToolbox.HTMLSelect.js', 'CXGN.List' ] &>
  21
  22 % use utf8;
  23 % my @column_headers = @$activity_headers;
  24 % my @activity_types = @$type_select_options;
  25
  26 <& /page/page_title.mas, title => "Tracking Activities of '$identifier_name'" &>
  27
  28 <& /util/import_javascript.mas, classes => ['jquery','jquery.dataTables'] &>
  29 <& /util/import_css.mas, paths => ['/documents/inc/datatables/jquery.dataTables.css'] &>
  30
  31 % if ($updated_status_type) {
  32     <div class="modal-header" style="text-align: center">
  33         <h4 class="modal-title" ><%$status_display%></h4>
  34         <h4><%$updated_status_string%></h4>
  35     </div>
  36 % }
  37
  38 <&| /page/info_section.mas, title => 'Record', collapsible => 1, collapsed => 0, subtitle => '' &>
  39     <div class="well ">
  40         <form class="form-horizontal" >
  41             <div class="form-group">
  42                 <label class="col-sm-3 control-label">Material: </label>
  43                 <div class="col-sm-5">
  44                     <input class="form-control" id="material_info" name="material_info" type="text" disabled value="<%$material_name%>">
  45                 </div>
  46             </div>
  47 % if (!$updated_status_type) {
  48             <div class="form-group">
  49                 <label class="col-sm-3 control-label">Type: </label>
  50                 <div class="col-sm-5">
  51 % if ($type_select_options) {
  52                     <select id="type_select">
  53                         <option value="">Please select a type</option>
  54 % foreach my $type(@$type_select_options){
  55                         <option value="<%$type->[0]%>"><%$type->[1]%></option>
  56 % }
  57                     </select>
  58 % }
  59                 </div>
  60             </div>
  61             <div class="form-group">
  62                 <label class="col-sm-3 control-label">Input: </label>
  63                 <div class="col-sm-5">
  64                     <input class="form-control" id="selected_type_input" name="selected_type_input" type="text" value="">
  65                 </div>
  66             </div>
  67             <div class="form-group">
  68                 <label class="col-sm-3 control-label">Notes:</label>
  69                 <div class="col-sm-5">
  70                     <textarea class="form-control" id="selected_type_notes" name="selected_type_notes" ></textarea>
  71                 </div>
  72             </div>
  73             <div class="form-group">
  74                 <label class="col-sm-3 control-label">Timestamp: </label>
  75                 <div class="col-sm-5">
  76                     <input class="form-control" id="record_timestamp" name="record_timestamp" type="text" disabled value="<%$timestamp%>">
  77                 </div>
  78             </div>
  79             <center>
  80                 <button id="activity_info_submit" name="activity_info_submit" class="btn btn-primary">Save</button>
  81             </center>
  82 % }
  83         </form>
  84     </div>
  85 </&>
  86
  87 <&| /page/info_section.mas, title => 'Summary', collapsible => 1, collapsed => 0, subtitle => '' &>
  88     <div class = "well well-sm">
  89         <div class = "panel panel-default">
  90             <div class = "panel-body">
  91                 <div style="overflow:scroll">
  92                     <table id = "activity_summary_table" class="table table-hover table-striped">
  93                         <thead>
  94                             <tr>
  95 % foreach my $header(@column_headers){
  96                                 <th><%$header%></th>
  97 %}
  98                             </tr>
  99                         </thead>
 100                     </table>
 101                 </div>
 102             </div>
 103         </div>
 104     </div>
 105 </&>
 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 = "activity_info_table" class="table table-hover table-striped">
 113                         <thead>
 114                             <tr>
 115 % foreach my $header(@column_headers){
 116                                 <th><%$header%></th>
 117 %}
 118                             </tr>
 119                         </thead>
 120                     </table>
 121                 </div>
 122             </div>
 123         </div>
 124     </div>
 125 </&>
 126
 127 <div class="modal fade" id="info_saved_dialog_message" name="info_saved_dialog_message" tabindex="-1" role="dialog" aria-labelledby="infoSavedDialog">
 128     <div class="modal-dialog" role="document">
 129         <div class="modal-content">
 130             <div class="modal-header">
 131                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
 132                 <h4 class="modal-title" id="infoSavedDialog">Success</h4>
 133             </div>
 134             <div class="modal-body">
 135                 <div class="container-fluid">
 136                     <p>
 137                         <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>
 138                         New information was saved.
 139                     </p>
 140                 </div>
 141             </div>
 142             <div class="modal-footer">
 143                 <button id="dismiss_info_saved_dialog" type="button" class="btn btn-default" data-dismiss="modal">Close & Reload</button>
 144             </div>
 145         </div>
 146     </div>
 147 </div>
 148
 149 <&| /page/info_section.mas, title=>"Update Status",  collapsible => 1, collapsed=>1 &>
 150 % if ($user_role eq "curator" ) {
 151     <div class="well well-sm">
 152         <div class="panel panel-default">
 153             <div class="panel-body">
 154 % if ($updated_status_type) {
 155     <button class="btn btn-sm btn-default" style="margin:3px" id ="update_status_usage_link" name = "update_status_usage_link">Usage Help <span class="glyphicon glyphicon-question-sign"></span></button><button class="btn btn-sm btn-primary" style="margin:3px" id="reverse_status_link">Reverse Status</button>
 156 % } else {
 157     <button class="btn btn-sm btn-default" style="margin:3px" id ="update_status_usage_link" name = "update_status_usage_link">Usage Help <span class="glyphicon glyphicon-question-sign"></span></button><button class="btn btn-sm btn-primary" style="margin:3px" id="update_status_link">Update Status</button>
 158 % }
 159             </div>
 160         </div>
 161     </div>
 162 % } else {
 163     You need to be logged in or you do not have sufficient privileges to update status of this tracking identifier.
 164 % }
 165 </&>
 166
 167
 168 <& /tracking_activities/update_status_dialog.mas, identifier_name => $identifier_name, identifier_id => $identifier_id, material_id => $material_id, updated_status_type => $updated_status_type, material_id => $material_id &>
 169
 170 <script>
 171
 172 jQuery(document).ready( function() {
 173
 174     var identifier_id = "<%$identifier_id%>";
 175
 176     jQuery('#activity_info_table').DataTable({
 177         'autoWidth': false,
 178         'searching' : false,
 179         'ajax': '/ajax/tracking_activity/details/'+identifier_id,
 180     });
 181
 182     jQuery('#activity_summary_table').DataTable({
 183         'autoWidth': false,
 184         'searching' : false,
 185         'dom': 'rtip',
 186         'ordering': false,
 187         'paging': false,
 188         'info': false,
 189         'ajax': '/ajax/tracking_activity/summary/'+identifier_id,
 190     });
 191
 192     jQuery('#activity_info_submit').click( function(e) {
 193         e.preventDefault();
 194         var selected_type = jQuery('#type_select').val();
 195         var input = jQuery('#selected_type_input').val();
 196         var record_timestamp = jQuery('#record_timestamp').val();
 197         var notes = jQuery('#selected_type_notes').val();
 198
 199         if (selected_type == '') {
 200             alert("Please select a type");
 201             return;
 202         }
 203         if (input == '') {
 204             alert("Please provide an input");
 205             return;
 206         }
 207
 208         new jQuery.ajax({
 209             url: '/ajax/tracking_activity/save',
 210             dataType: "json",
 211             type: 'POST',
 212             data : {
 213                 'tracking_identifier' : "<%$identifier_name%>",
 214                 'selected_type': selected_type,
 215                 'input': input,
 216                 'record_timestamp': record_timestamp,
 217                 'notes': notes
 218             },
 219             beforeSend: function(response){
 220                 jQuery('#working_modal').modal('show');
 221             },
 222             success: function(response) {
 223                 jQuery('#working_modal').modal('hide');
 224                 if (response.success == 1) {
 225                     jQuery('#info_saved_dialog_message').modal("show");
 226                 }
 227                 if (response.error) {
 228                     alert(response.error);
 229                 }
 230             },
 231             error: function(response){
 232                 jQuery('#working_modal').modal('hide');
 233                 alert('An error occurred saving new information');
 234             }
 235         });
 236     });
 237
 238     jQuery("#dismiss_info_saved_dialog").click(function(){
 239         jQuery('#type_select').val('');
 240         jQuery('#selected_type_input').val('');
 241         jQuery('#selected_type_notes').val('');
 242         location.reload();
 243     });
 244
 245 });
 246
 247 </script>