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