mason/search/features.mas

   1 <%args>
   2  $organisms         => undef
   3  $feature_types     => undef
   4 </%args>
   5
   6 <& /util/import_javascript.mas, classes => 'SGN.Search.Feature' &>
   7
   8
   9 <& /util/import_javascript.mas, classes => [ 'jquery', 'jquery.dataTables' ] &>
  10
  11 <div class="container-fluid">
  12
  13 <& /page/page_title.mas, title=>'Search genomic sequences and annotations' &>
  14
  15 <%perl>
  16
  17 use CXGN::Page::FormattingHelpers qw / simple_selectbox_html/;
  18
  19 my $f_type_select = simple_selectbox_html(
  20   choices   => $feature_types,
  21   id        => "feature_type_select",
  22 );
  23
  24 my $organism_select = simple_selectbox_html(
  25   choices  =>  $organisms   ,
  26   id       => "organism_select",
  27 );
  28
  29 </%perl>
  30
  31 <&| /page/info_section.mas, title => 'Search', collapsible=>1, collapsed=>0 &>
  32   <div id="feature_search_form" class="form-horizontal well">
  33     <div class="row">
  34       <div class="col-sm-6">
  35         <div class="form-group form-group-sm">
  36           <label class="col-sm-3 control-label">Organism: </label>
  37           <div class="col-sm-9" >
  38             <% $organism_select %>
  39           </div>
  40         </div>
  41       </div>
  42       <div class="col-sm-6">
  43         <div class="form-group form-group-sm">
  44           <label class="col-sm-3 control-label">Type: </label>
  45           <div class="col-sm-9" >
  46             <% $f_type_select %>
  47           </div>
  48         </div>
  49       </div>
  50     </div>
  51     <div class="row">
  52       <div class="col-sm-6">
  53         <div class="form-group form-group-sm">
  54           <label class="col-sm-3 control-label">Name: </label>
  55           <div class="col-sm-9" >
  56             <input type="text" class="form-control" id="name" />
  57           </div>
  58         </div>
  59       </div>
  60       <div class="col-sm-6">
  61         <div class="form-group form-group-sm">
  62           <label class="col-sm-3 control-label">Description: </label>
  63           <div class="col-sm-9" >
  64             <input type="text" class="form-control" id="description" />
  65           </div>
  66         </div>
  67       </div>
  68     </div>
  69  <button style="float:right" class="btn btn-primary" id="submit_feature_search" />Search</button>
  70     <br/><br/>
  71   </div>
  72
  73 </&>
  74
  75
  76 <&| /page/info_section.mas, title => 'Search Results', collapsible=>1, collapsed=>0 &>
  77
  78
  79 <div class="well">
  80 <table id="feature_search_results" class="display">
  81 <thead>
  82   <tr>
  83     <th>Organism</th>
  84     <th>Type</th>
  85     <th>Name</th>
  86     <th>Description</th>
  87     <th>Location</th>
  88   </tr>
  89 </thead>
  90 </table>
  91 </div>
  92
  93 </&>
  94
  95 <script>
  96
  97 jQuery(document).ready(function () {
  98
  99    var table = jQuery('#feature_search_results').DataTable( {
 100
 101      'searching' : false,
 102      'ordering'  : false,
 103      'processing': true,
 104      'serverSide': true,
 105      'ajax': { 'url':  '/ajax/search/features',
 106                'data': function(d) {
 107                   d.organism    = jQuery('#organism_select').val();
 108                   d.type_id     = jQuery('#feature_type_select').val();
 109                   d.name        = jQuery('#name').val();
 110                   d.description = jQuery('#description').val();
 111
 112              }
 113          }
 114      });
 115
 116
 117    jQuery('#submit_feature_search').click( function() {
 118         var organism    = jQuery('#organism_select').val();
 119         var type_id     = jQuery('#feature_type_select').val();
 120         var name        = jQuery('#name').val();
 121         var description = jQuery('#description').val();
 122
 123         table.search("feature_search_results").draw();
 124    });
 125
 126    jQuery('#feature_search_form').keypress( function( e ) {
 127            var code = e.keyCode || e.which;
 128            if( code == 13 ) {
 129                 jQuery('#submit_feature_search').click();
 130            }
 131     } );
 132
 133
 134
 135 });
 136
 137 </script>