Tweaks to trials.mas: hides breeding program table in non-accession stocks and rename...
[sgn.git] / mason / search / images.mas
blob20080c80b9aaf9ab9703472feb23563c37d2d283
2 <%args>
3 </%args>
5 <& /util/import_javascript.mas, classes => [ 'jquery', 'thickbox', 'jquery.dataTables' ] &>
7 <& /page/page_title.mas, title => "Image Search" &>
9 <&| /page/info_section.mas, title=>"Image Search Criteria",  collapsible => 1, collapsed=>0, subtitle => "All images may not have names, descriptions, or tags associated with them."&>
11     <div id="image_search_form" class="well well-sm">
12         <div class="form-horizontal" >
13             <div class="form-group">
14                 <label class="col-sm-6 control-label">Image descriptors (name, description, or filename): </label>
15                 <div class="col-sm-6" >
16                     <input class="form-control" type="text" id="image_description_filename_composite" name="image_description_filename_composite" placeholder="e.g. MyImageName" />
17                 </div>
18             </div>
19             <div class="form-group">
20                 <label class="col-sm-6 control-label">Submitter: </label>
21                 <div class="col-sm-6" >
22                     <input class="form-control" type="text" id="image_submitter" name="image_submitter" placeholder="e.g. JaneDoe" />
23                 </div>
24             </div>
25             <div class="form-group">
26                 <label class="col-sm-6 control-label">Image tag: </label>
27                 <div class="col-sm-6" >
28                     <input class="form-control" type="text" id="image_tag" name="image_tag" placeholder="e.g. ImageTagName" />
29                 </div>
30             </div>
31             <div class="form-group">
32                 <label class="col-sm-6 control-label">Associated stock: </label>
33                 <div class="col-sm-6" >
34                     <input class="form-control" type="text" id="image_stock_uniquename" name="image_stock_uniquename" placeholder="e.g. FieldPlot100" />
35                 </div>
36             </div>
37             <div class="form-group">
38                 <label class="col-sm-6 control-label">Associated project: </label>
39                 <div class="col-sm-6" >
40                     <input class="form-control" type="text" id="image_project_name" name="image_project_name" placeholder="e.g. DroneProject 01/01/2019" />
41                 </div>
42             </div>
43         </div>
45         <center>
46         <button class="btn btn-primary" id="image_search_submit" >Search</button>
47         </center>
48     </div>
49 </&>
51 <&| /page/info_section.mas, title=>"Image Search Results",  collapsible => 1, collapsed=>0 &>
52     <div class="well well-sm">
53         <div class="panel panel-default">
54             <div class="panel-body">
55                 <table id="images_search_results" class="table table-hover table-striped">
56                 <thead>
57                   <tr>
58                     <th>Image Thumbnail</th>
59                     <th>Filename</th>
60                     <th>Description</th>
61                     <th>Submitter</th>
62                     <th>Associations</th>
63                     <th>Tags</th>
64                 </tr>
65                 </thead>
66                 </table>
67             </div>
68         </div>
69     </div>
70 </&>
72 <script>
74 var images_table;
76 jQuery(document).ready(function () {
78     _load_image_search_results();
80     jQuery("#image_submitter").autocomplete({
81         source: '/ajax/people/autocomplete'
82     });
84     jQuery('#image_search_submit').click( function() {
85         _load_image_search_results();
86     });
88     jQuery('#image_search_form').keypress( function( e ) {
89         var code = e.keyCode || e.which;
90         if( code == 13 ) {
91             jQuery('#image_search_submit').click();
92         }
93     });
95     jQuery('#images_search_results').on( 'draw.dt', function () {
96         jQuery('a.image_search_group').colorbox();
97     });
99 });
101 function _load_image_search_results() {
102     images_table = jQuery('#images_search_results').DataTable({
103         'destroy' : true,
104         'searching' : false,
105         'ordering'  : false,
106         'processing': true,
107         'serverSide': true,
108         'scrollX': true,
109         'lengthMenu': [10,20,50,100,1000,5000],
110         'ajax': { 'url':  '/ajax/search/images',
111             'data': function(d) {
112               d.image_description_filename_composite = jQuery('#image_description_filename_composite').val();
113               d.image_person = jQuery('#image_submitter').val();
114               d.image_tag = jQuery('#image_tag').val();
115               d.image_stock_uniquename = jQuery('#image_stock_uniquename').val();
116               d.image_project_name = jQuery('#image_project_name').val();
117             }
118         }
119     });
122 </script>