mason/tracking_activities/activity_info_details.mas

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