Added the filter and 'select top' buttons to collection list and view pages

2 files changed, 14 insertions, 6 deletions

diff --git a/wqflask/wqflask/templates/collections/list.html b/wqflask/wqflask/templates/collections/list.html
index 3af4a4b9..eaf54155 100644
--- a/wqflask/wqflask/templates/collections/list.html
+++ b/wqflask/wqflask/templates/collections/list.html
@@ -14,9 +14,8 @@
         {% else %}
         <h1>Your Collections</h1>
         {% endif %}
-        <h2>You have {{ '{}'.format(numify(collections|count, "collection", "collections")) }}.</h1>
 
-        <hr style="height: 1px; background-color: #A9A9A9;">
+        <!-- <hr style="height: 1px; background-color: #A9A9A9;">-->
 
         <!--
         <div class="page-header">
@@ -35,9 +34,12 @@
             <button class="btn btn-default" id="deselect_all"><span class="glyphicon glyphicon-remove"></span> Deselect All</button>
             <button class="btn btn-default" id="invert"><span class="glyphicon glyphicon-resize-vertical"></span> Invert</button>
             <button class="btn btn-danger" id="remove_collections" data-url="/collections/delete">Remove Collections</button>
+            <input type="text" id="searchbox" class="form-control" style="width: 200px; display: inline;" placeholder="Search This Table For ...">
+            <input type="text" id="select_top" class="form-control" style="width: 200px; display: inline;" placeholder="Select Top ...">
         </div>
         <br>
         <div id="collections_list" style="width:50%; margin-top: 20px; margin-bottom: 20px;">
+        {% if collections|length > 0 %}
         <table class="table-hover table-striped cell-border" id='trait_table'>
             <thead>
                 <tr>
@@ -76,6 +78,9 @@
             {% endfor %}
             </tbody>
         </table>
+        {% else %}
+        You have no collections yet.
+        {% endif %}
         </div>
     </div>
 
@@ -92,6 +97,7 @@
     <script language="javascript" type="text/javascript" src="https://cdn.datatables.net/buttons/1.0.0/js/buttons.bootstrap.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/js_external/jszip.min.js"></script>
     <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.naturalSort.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.buttons.min.js"></script>
     <script>
             $('#trait_table').dataTable( {
                 "drawCallback": function( settings ) {
@@ -114,7 +120,7 @@
                     "orderable": false
                 } ],
                 "order": [[1, "asc" ]],
-                "sDom": "Ztr",
+                "sDom": "BZtr",
                 "iDisplayLength": -1,
                 "autoWidth": false,
                 "bDeferRender": true,
diff --git a/wqflask/wqflask/templates/collections/view.html b/wqflask/wqflask/templates/collections/view.html
index 26dcef65..640eb561 100644
--- a/wqflask/wqflask/templates/collections/view.html
+++ b/wqflask/wqflask/templates/collections/view.html
@@ -14,9 +14,9 @@
         {% else %}
         <h1>{{ collection_name }}</h1>
         {% endif %}
-        <h2>This collection has {{ '{}'.format(numify(trait_obs|count, "record", "records")) }}</h2>
+        <h3>This collection has {{ '{}'.format(numify(trait_obs|count, "record", "records")) }}</h3>
 
-        <hr style="height: 1px; background-color: #A9A9A9;">
+        <!--<hr style="height: 1px; background-color: #A9A9A9;">-->
 
         <div>
           <form id="collection_form" action="/delete" method="post">
@@ -86,6 +86,8 @@
             <button class="btn btn-default" id="invert"><span class="glyphicon glyphicon-resize-vertical"></span> Invert</button>
             <button class="btn btn-danger" id="remove" disabled="disabled"><i class="icon-minus-sign"></i> Delete Rows</button>
             <button class="btn" id="add" disabled="disabled"><i class="icon-plus-sign"></i> Copy to Other Collection</button>
+            <input type="text" id="searchbox" class="form-control" style="width: 200px; display: inline;" placeholder="Search This Table For ...">
+            <input type="text" id="select_top" class="form-control" style="width: 200px; display: inline;" placeholder="Select Top ...">
             <br />
             <br />
             <form id="export_form" method="POST" action="/export_traits_csv">
@@ -126,7 +128,7 @@
                                         trait_id = this_trait.name,
                                         dataset = this_trait.dataset.name
                                         )}}">
-                                    {{ this_trait.name }}
+                                    {{ this_trait.display_name }}
                                 </a>
                             </TD>
                             {% if this_trait.symbol %}