From 1e91fb303fe4d386251285dc44faa474d7c1d8b1 Mon Sep 17 00:00:00 2001
From: Retspen <anatoliy.guskov@gmail.com>
Date: Wed, 11 Mar 2015 09:07:30 +0200
Subject: [PATCH] Add search in table

---
 static/css/webvirtcloud.css |  4 ++++
 templates/instances.html    | 24 +++++++++++++++++++++---
 templates/storage.html      | 20 ++++++++++++++++++--
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/static/css/webvirtcloud.css b/static/css/webvirtcloud.css
index 6f8976c..e938c8f 100644
--- a/static/css/webvirtcloud.css
+++ b/static/css/webvirtcloud.css
@@ -78,4 +78,8 @@ body {
 
 .ace_editor {
     height: 350px;
+}
+
+.search {
+    margin: 5px;
 }
\ No newline at end of file
diff --git a/templates/instances.html b/templates/instances.html
index 031b04c..e158ecd 100644
--- a/templates/instances.html
+++ b/templates/instances.html
@@ -19,6 +19,9 @@
                 <div class="row">
                     <div class="col-lg-12">
                         <div class="table-responsive">
+                            <div class="pull-right search">
+                                <input id="filter" class="form-control" type="text" placeholder="Search">
+                            </div>
                             {% if request.user.is_superuser %}
                                 <table class="table table-hover table-striped sortable-theme-bootstrap" data-sortable>
                                     <thead>
@@ -31,7 +34,7 @@
                                             <th data-sortable="false" style="width: 165px;">Actions</th>
                                         </tr>
                                     </thead>
-                                    <tbody>
+                                    <tbody class="searchable">
                                         {% for host, inst  in all_host_vms.items %}
                                             {% for vm, info in inst.items %}
                                                 <tr>
@@ -105,6 +108,9 @@
                                     </tbody>
                                 </table>
                             {% else %}
+                                <div class="pull-right search">
+                                    <input id="filter" class="form-control" type="text" placeholder="Search">
+                                </div>
                                 <table class="table table-hover table-striped">
                                     <thead>
                                         <tr>
@@ -115,8 +121,7 @@
                                             <th>Actions</th>
                                         </tr>
                                     </thead>
-                                    <tbody>
-
+                                    <tbody class="searchable">
                                         {% for host, vm in all_user_vms.items %}
                                             <tr>
                                                 <td><a href="{% url 'instance' host.0 vm.name %}">{{ vm.name }}</a></td>
@@ -205,4 +210,17 @@
         window.location = "/create/" + compute + "/";
     }
 </script>
+<script>
+    $(document).ready(function () {
+        (function ($) {
+            $('#filter').keyup(function () {
+                var rex = new RegExp($(this).val(), 'i');
+                $('.searchable tr').hide();
+                $('.searchable tr').filter(function () {
+                    return rex.test($(this).text());
+                }).show();
+            })
+        }(jQuery));
+    });
+</script>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/storage.html b/templates/storage.html
index 2d46842..3f6e64d 100644
--- a/templates/storage.html
+++ b/templates/storage.html
@@ -80,7 +80,10 @@
                         <h3 class="page-header">{% trans "Volumes" %}</h3>
                         {% if volumes  %}
                         <div class="table-responsive">
-                            <table class="table table-striped table-bordered sortable-theme-bootstrap" data-sortable>
+                            <div class="pull-right search">
+                                <input id="filter" class="form-control" type="text" placeholder="Search">
+                            </div>
+                            <table class="table table-striped sortable-theme-bootstrap" data-sortable>
                                 <thead>
                                 <tr>
                                     <th style="width:35px;">#</th>
@@ -90,7 +93,7 @@
                                     <th data-sortable="false" colspan="2">{% trans "Action" %}</th>
                                 </tr>
                                 </thead>
-                                <tbody>
+                                <tbody class="searchable">
                                 {% for volume in volumes %}
                                     <tr>
                                         <td>{{ forloop.counter }}</td>
@@ -202,4 +205,17 @@
         }
     });
 </script>
+<script>
+    $(document).ready(function () {
+        (function ($) {
+            $('#filter').keyup(function () {
+                var rex = new RegExp($(this).val(), 'i');
+                $('.searchable tr').hide();
+                $('.searchable tr').filter(function () {
+                    return rex.test($(this).text());
+                }).show();
+            })
+        }(jQuery));
+    });
+</script>
 {% endblock %}